Webサイトでよく見るレイアウトパターン81種を、正式名称と Claude への指示テンプレートつきでまとめたリファレンス。「あれ、なんて言えばいいんだっけ」をなくすためのチートシート。
サイトを開いた瞬間、本編が表示される前に出る演出。シンプルな汎用型から、エージェンシー系で使われる凝ったパターンまで。
ページ全体の骨格を決める基本構造。
サイトを開いた瞬間の最初の画面。第一印象を決める最重要エリア。
体験・演出を作るパターン。
ページ内で使う部品レベルのパターン。
よく使う情報の見せ方パターン。LP内のセクション設計に。
使い所がはっきりしている、機能特化型のパターン。
Claudeに高品質なUIを作らせる汎用テンプレート。
「こういう時はどれ?」の判断に。
| 用途 | おすすめパターン | キーワード |
|---|---|---|
| SaaS LP のFV | Centered Hero / Side-by-Side | centered hero / side-by-side |
| ブランド系のFV | Full-Bleed / Video Background | full-bleed / video bg |
| エージェンシーのFV | Typography / Letter Reveal | big type / letter reveal |
| 製品紹介LP | Hero + Bento + Sticky Scroll | hero / bento / scrollytelling |
| EC商品一覧 | Card Grid + Horizontal Scroll | card grid / h-scroll |
| ポートフォリオ | Asymmetric / Masonry / Editorial | asymmetric / masonry |
| SaaS管理画面 | Sidebar Layout | sidebar / dashboard |
| ブログ・読み物 | Single Column / Magazine | single column / editorial |
| ストーリー説明 | Sticky Scroll + Scroll Reveal | scrollytelling / reveal |
| ファッション | Full Screen Slider + Split | fullscreen slider / split |
| FAQ・ヘルプ | Accordion + Tabs | accordion / tabs |
| 画像ギャラリー | Masonry + Lightbox | masonry / lightbox |
| 比較・選択 | Split Screen / Card Grid | split / comparison |
実践的な6つのポイント。
「スクロール連動」より scrollytelling の方が一発で伝わる。海外で確立された用語を使えばClaudeは即座に文脈を理解する。
「Apple みたいな」だけだと曖昧。Apple のミニマルさと、Linear のテック感を混ぜて のように2サイト指定するとブレない。
「PC4列、タブレット2列、モバイル1列」のように具体的に。書かないとデフォルト挙動になる。breakpointまで指定するとさらに精度が上がる。
滑らかに キビキビと ふんわり など擬音や形容詞で動きの質感を伝える。秒数指定(300ms等)も効く。
○○は使わないで ○○っぽくしないで はかなり効く。「purple gradient はNG」「ありがちなAIっぽいの避けて」など。
一発で完成は狙わない。最初は荒く投げて出てきたものに対してもっと余白を こっちを大きくと修正する流れの方が早い。