「AIっぽいサイト」から抜け出すための図鑑を作った

AIにサイトを作らせると、どれも似た顔になります。中央寄せの見出し、グラデーションの背景、均等に並んだカード。原因の多くは、作る側が「どんな見せ方があるのか」を言葉で指定できていないことです。

その語彙を増やすために、WEB DESIGN ENCYCLOPEDIA 2026 — AI感のないサイトデザイン図鑑を作りました。Webデザインの技法を54種類集めて、1冊の本として横にめくって読めるようにしています。

読むのではなく、触る図鑑

各ページの左には技法の実演があり、パララックスのページではカーソルで奥行きが変わり、ネオブルータリズムのページではブロックを押すと傾きます。右には、定義、なぜ効くのか、実装方法、向いている用途と避けたい使い方、コード例が並びます。

8つの章、54の技法

• LAYOUT（9）
• TYPOGRAPHY（6）
• COLOR & STYLE（6）
• TEXTURE（7）
• MOTION（8）
• INTERACTION（7）
• CREATIVE CODING（7）
• DATA VISUALIZATION（4）

巻末には、技法を組み合わせた6つのデザインレシピ、7つのAIプロンプト集、用語集、A–Z索引もあります。

AIへの指示文を持ち帰れる

どの技法ページにも、その技法をAIに実装させるためのプロンプトがあり、ボタン一つでコピーできます。「おしゃれにして」ではなく「厳密な非対称グリッドで、左揃え、大きなサイズ差、細い罫線」と頼めるようになるのが、いちばん実用的な使い道です。

作り

Next.js 16とReact 19の完全な静的サイトで、データベースも認証も外部APIも使っていません。技法の中身はJSONで管理し、コミットのたびにスキーマやページ番号、関連リンクを自動で点検しています。

続きはnoteへ

作った経緯はnoteの「『AIっぽいサイト』から抜け出すための図鑑を作った」（無料）に書いています。まずは図鑑の表紙の「OPEN BOOK」から、気になる章をめくってみてください。