#Webデザイン

3DアーティストのAndrew WoanがCodropsに寄稿した記事が、AI・Blender・Blender MCP・Three.jsを組み合わせてWeb向け3D制作を加速させる実践的な工夫をまとめている。中心となる発想は、AIエージェントにBlender側の作業を自動化させつつ、その結果をThree.jsのコードと同期させ続けることだ。手作業の往復で生じる摩擦を減らし、制作のテンポを保つことを狙う。 まず土台となるのが自動化と統合だ。Blenderのカスタムアドオンを作り

ブロックがWordPressのコアに登場してから7年半、ついにReactもビルド環境も使わずにブロックを作れる仕組みが導入された。CSSTricksでFränk Kleinが解説したところによると、WordPress 7.0は「PHPだけでブロックを登録できる」新しい手法を用意する。これまでブロックはPHPとJavaScriptの二重登録が必要で、それが多くの制作者にとって参入障壁になっていた。 仕組みの中心はブロックのsupports設定に加わったautoRegisterフ

イメージや条件からフォントを探せるサイトを紹介 「デザインの雰囲気に合うフォントを探したい」「商用利用できる無料フォントをまとめて見たい」——そんなときに役立つのが、イメージや条件からフォントを探せるWebサイト・Webアプリです。ここでは、和文・欧文それぞれに対応した便利なサービスを9つ紹介します。 無料で商用利用できるフォントに絞って検索できるサービスもあるので、自分のプロジェクトに最適なフォント探しの参考にしてみてください。なお、手元の画像に使われているフォントを特定し

Web Designer DepotのNoah Davisが、Figmaを2000年代初頭のMacromedia Dreamweaverになぞらえる挑発的な論考を発表した。かつてDreamweaverは、ドラッグ&ドロップの視覚的操作によって「HTMLやCSSを知らなくてもWebが作れる」と一世代のデザイナーに信じ込ませた。Davisは、Figmaの美しいキャンバスもまた同じ幻想を生んでいると指摘する。静的で心地よいキャンバスの中に閉じこもることで、現代のデザイナーは実際のW

顧客の声（テスティモニアル）を並べたヒーローセクションは、多くのサイトで見かける定番の構成だ。しかし静的に並べるだけでは印象に残りにくい。CodropsのJonas Arlethが、GSAPのタイムラインとCMSデータを組み合わせ、動きと手作りの質感を両立させたテスティモニアル・ヒーローの構築手法を解説している。WebflowのDesignerを土台に、カウンター、コラージュのグリッド、アニメーションの3つを段階的に作り込む内容だ。 まず目を引くのが、スロットマシン風の数字カ

多くのWebサイトが備えるダークモードの切り替えUIは、「ライト」「ダーク」「システム」という3つの選択肢を並べるのが定番になっている。しかしCSSの専門家Lea Verouは、この3択は過剰であり、2状態で十分だと主張する。CSSTricksのGeoff Grahamがその議論を紹介している。要点はシンプルだ。同じ目的を、より少ないUIで達成できるなら、そのほうが良い。 Verouの提案の核心は、常にすべての選択肢を見せる必要はない、という点にある。ユーザーの環境設定（OS

ペンタグラム・ロンドンのマリーナ・ウィレール率いるチームが、ベルギー・ヘントの音楽ホール「ムジークセントラム・デ・ベイロック」のブランドアイデンティティを刷新した。デ・ベイロックは13世紀のシトー会修道院を病院として使っていた建物を会場とし、2000年以降クラシックから現代音楽までを上演してきた文化拠点である。今回の依頼は、既存の支持者の愛着を保ちながら新たな観客を呼び込み、文化的に多様で国際的に活動する場としての位置づけを示す「デジタルファースト」なアイデンティティの構築だ

かつてはJavaScriptライブラリに頼るのが当たり前だったモーダルUIが、いまやHTML標準の要素だけで実装できるようになった。CSSTricksのGeoff Grahamが、この一見小さな要素に潜む数々の細やかな挙動を整理している。デザイナーとフロントエンド実装者の双方にとって、押さえておきたい実践知が詰まった内容である。 要素はデフォルトで閉じており、open属性を付けるかJavaScriptのメソッドを呼ぶことで表示される。開き方には二種類あり、show()は背景の

デザインエンジニアのジム・ニールセンが、生成AIのインターフェースが独自のビジュアルと操作の作法を確立しつつあると論じている。かつてモバイルの制約がハンバーガーメニューを生んだように、AIという技術ならではの性質が、この先何年もソフトウェアに残り続ける美学を生み出しているという見立てだ。 象徴的なのがキラキラした「✨（スパークル）」の絵文字だ。いまやAI機能を示す視覚的な記号として定着し、虹や魔法めいたモチーフとともにAIの世界観を表している。第二に「ストリーミングするテキス

CSSTricksに、テマニ・アフィフによる新しいCSSプロパティ「bordershape」の解説記事が掲載された。要素を自由な形に象りながら、ボーダーやドロップシャドウ、アウトラインといった装飾をその輪郭に沿わせられる——従来のclippathにはできなかった振る舞いを実現するプロパティである。 肝心なのはclippathとの違いだ。clippathは装飾ごと切り抜いてしまうため、せっかくのボーダーや影が消えてしまう。一方のbordershapeは要素を「切り抜く」のではな

デザインエンジニアのカール・コッホが、インターフェースの「瞬間移動」を扱った実践的な論考を公開した。リストから項目を削除すると下の要素が一気に上へ詰まり、行を挿入すれば既存のコンテンツが飛び退く。パネルを開けば隣接する要素が即座に再配置される。DOM上は正しくても、状態の変化と動いた対象とのつながりが一瞬で断たれ、読み手は文脈を見失う。この断絶に目に見える経路を与えるのが「レイアウトの振り付け（layout choreography）」だという。 問題の本質は、技術的な誤りで

Web Designer Depotに掲載されたルイーズ・ノースの論考が、Facebookのデザインをめぐる不都合な事実を突きつけている。かつて最も明快だったソーシャル体験は、時間をかけて良くなったのではなく、むしろ劣化した——それも、エンゲージメント指標への最適化を積み重ねた結果として、というのが筆者の見立てだ。「Facebookは一夜にして悪くなったのではない。最適化の果てに、自ら混乱へと陥ったのだ」。 象徴的なのが「予測可能性の喪失」である。時系列フィードからアルゴリズ

デザイン系チュートリアルサイトのCodropsに、印象的なWebGL作品「The Sleepers」の制作手法を解説した記事が掲載された。作者はティボー・フサール。Bruno SimonによるThree.jsチャレンジへの応募作で、「最も複雑な技術ではなく、最もシンプルな解法で最大の視覚的インパクトを狙う」という思想が全体を貫いている。 まず紹介されるのは、画面全体を彩る「渦を巻くようなトランジション」だ。白黒のテクスチャをポストプロセスシェーダーの入力値として使い、グレース

Nielsen Norman Group（NN/g）のフエイシン・ワンが、デザインシステムの成熟度を評価するための新しい枠組みを提示した。従来のように「初期段階から成熟段階へ一直線に進む」という見方を退け、複数の軸から多面的に捉え直す点に特徴がある。実際のデザインシステム運用は、もっと入り組んでいるというのがその主張だ。 筆者が挙げるのは六つの評価軸である。ひとつめは「組織的な整合性」。経営層の後押しや予算の安定、戦略上の位置づけ、部門横断的な合意が、組織変更を越えてシステム

Web Designer Depotに掲載された論考が、AI時代の生産性をめぐる不都合な逆説を突いている。AIはかつてない速さでプロダクトを世に出すことを可能にした。しかしその裏側で、作り手の思考力そのものが静かに削られているのではないか、という問いである。 まず語られるのは、スピードと深さのトレードオフだ。今や開発者は週末だけでフルスタックのアプリを組み上げられる。だが、その足元にあるシステムへの理解は置き去りにされたままだ。生産性の指標は改善しても、実際に考える力は目減り

デザイナーのJakub Krehelが、インターフェースの完成度を格段に高める12のディテール実装テクニックを体系的にまとめた記事を公開した。いずれもCSSやアニメーションの細かな調整だが、ユーザー体験に大きな差をもたらすものばかりである。 テキスト表示ではtextwrap: balanceによる均等な行分配、webkitfontsmoothing: antialiasedによるフォントレンダリングの鮮明化、数値表示の安定性を保つfontvariantnumeric: tab

CSSに新たなプロパティ「cornershape」が登場し、これまでclippathやSVGマスクなどのハック的手法でしか実現できなかった多様な角の形状が、ネイティブに指定可能になった。Smashing Magazineが詳細な解説記事を公開している。 cornershapeは既存のborderradiusを置き換えるものではなく、borderradiusが生成するカーブの「形状」を変更するプロパティである。対応する値にはround（従来の円形角）、squircle（Appl

数学的な対称性に基づくタイリングパターンをブラウザ上で生成・探索できるインタラクティブツール「Pattern Collider」が公開された。開発者のAatish Bhatiaが手がけたこのWebアプリケーションは、数学の概念をビジュアルに体験できるツールとして注目を集めている。 Pattern Colliderの核となるのは、タイリング（平面を隙間なく埋める図形の配置）と対称性（回転や反転などの変換で不変な性質）という2つの数学的概念である。ユーザーはパターンのサイズや折り

Web Designer Depotが「Token Fatigue: When Abstraction Eats Itself」と題した記事を公開し、デザイントークンの過度な抽象化がもたらす問題を指摘している。デザイントークンは本来、デザインとコードの間に調和をもたらすための仕組みとして導入されたが、現在では「終わりのない抽象化の迷宮」と化しているという。 記事が指摘する中心的な問題は、一貫性への執着がデザインシステムを「官僚主義的な組織」に変えてしまった点である。トークンの

無料のSVGアイコンを横断検索できるサービス「All SVG Icons」が公開されている。220以上のオープンソースアイコンライブラリから25万点以上のアイコンを集約し、単一の検索インターフェースで一括検索できる。Material Symbols（15,009点）、Fluent UI System Icons（18,648点）、Phosphor（9,072点）、Tabler Icons（5,963点）など、主要なアイコンセットが網羅されている。 使い方はシンプルで、キーワー

Google Chromeが2026年9月から、安定版のリリースサイクルを現行の4週間ごとから2週間ごとに短縮することを発表した。バージョン153のベータ版および安定版が9月8日にリリースされる予定で、デスクトップ、Android、iOSの全プラットフォームに適用される。 Chromeは2021年にリリースサイクルを6週間から4週間に短縮した経緯があり、今回はさらにその半分へと加速することになる。Googleは公式には「進化し続けるWebプラットフォームに対応し、開発者が最新

LS Graphicsが、ブラウザ上でメッシュグラデーションを作成・編集できる無料ツール「ColorFlow」を公開した。従来のグラデーションツールが2色間の線形・放射状の遷移に限定されがちだったのに対し、ColorFlowは複数のコントロールポイントを配置して色の流れを自在にデザインできるメッシュグラデーション生成に特化している。 ColorFlowの操作体系はシンプルで直感的である。キャンバス上にコントロールポイントをドラッグ＆ドロップで配置し、各ポイントに色を割り当てる

2026年2月、Google Chromeに深刻なゼロデイ脆弱性CVE20262441が発見され、緊急アップデートが配布された。CVSSスコア8.8の高リスク脆弱性として分類されたこのバグは、BlinkレンダリングエンジンのCSS処理コンポーネントに存在するUseAfterFree（解放後メモリ使用）の欠陥である。 脆弱性の核心は、CSSの@fontfeaturevaluesルールの処理にある。Chromeがこのルールを解析してCSSFontFeatureValuesMapオ

Google Fontsのライブラリから直感的にフォントを探索できるWebツール「Sweetfont」が公開された。従来のフォント検索がカテゴリやキーワードに依存していたのに対し、このツールでは感覚的なパラメータを操作することで、イメージに合った書体を発見できる。 Sweetfontの中核となるのは「Flavor」と「Vibe」と名付けられた2つのXY座標パッドである。Flavorパッドでは横軸に「Playful〜Formal」、縦軸に「Warm〜Futuristic」を配置