Webデザインの参考サイト｜探し方と自分の案に落とす手順

Webデザインの参考サイトを開くと、たいていは「きれいなサイトを眺めて終わり」になります。ブックマークだけが増えていくのに、自分が作るページの構成は一向に決まらない。原因は集め方ではなく、集めたあとの工程が用意されていないことにあります。

Webデザインの参考サイトは「サイト全体」「セクション」「LP1枚」という探せる単位ごとに分かれています。まず単位を決め、次に絞り込み軸（業種・色・表現）で当たりを付け、最後に3〜5件の共通構造を抜き出して自分のワイヤーに移す——これが参考を案に変える最短の手順です。眺める順番ではなく、この工程の順番のほうが結果を左右します。

この記事では手順を主役にし、ギャラリーはその道具として扱います。紹介する5サイトの機能・カテゴリ・掲載数は、すべて2026年8月2日に実際に開いて確認した内容です。掲載数はサイトが自分で表示している値を引用しており、こちらで実数を数えたものではありません。将来どれか1つが使えなくなっても、手順そのものは残るように書いています。

参考サイトは「探せる単位」で選ぶ

ギャラリーサイトを「デザインがきれいな順」で選ぶと、毎回同じものを見ることになります。選ぶ基準にすべきなのは見栄えではなく、そのサイトが何を単位にして並べているかです。単位が違えば、同じ「参考を見る」という行為でも取り出せる情報がまったく変わります。

単位を決めずに探すと、「サイト全体の雰囲気」と「料金表のレイアウト」を同じ画面で見比べることになり、どちらの判断もできません。逆に単位が合っていれば、3件見ただけでも決められることが出てきます。

そもそも他人のサイトを見て共通点を探す行為には、はっきりした根拠があります。Nielsen Norman Groupの「Jakob’s Law of Internet User Experience」（Jakob Nielsen、2017年8月18日公開の2分動画／2026年8月2日確認）は、要約で「ユーザーは自分のサイト以外の場所で大半の時間を過ごしている。だからユーザーは、あなたのサイトが他のサイトと同じように動くことを望む」と述べています。参考を集める目的は珍しい表現を見つけることではなく、利用者が慣れている並びを確認することだ、という前提をここで固定しておきます。

5つのギャラリーの絞り込み軸と得意分野

単位が決まったら、次は絞り込み軸です。ここが各サイトの設計そのもので、掲載作品が入れ替わっても変わりにくい部分です。まず一覧で押さえてください。

MUUUUU.ORG｜5つの軸で絞れて、制作クレジットまで載る

MUUUUU.ORG（通称ムーオルグ）は、業種・配色・サイトタイプ・表現タグ・インタラクションの5系統でカテゴリが用意されたギャラリーです。サイト表示では全カテゴリ6,166件（2026年8月2日時点）。各カテゴリに件数が出ているため、「ブラック系1,252件」「WebGL・3D表現が印象的597件」のように、母数を見てから入っていけます。

ここで1つ訂正しておきます。MUUUUU.ORGは「国内のギャラリー」ではありません。サイトタイプの内訳は日本語サイト5,620件に対し海外サイト540件、ほかに中国語12件・韓国語11件が含まれます（同日確認）。海外の事例を除外したいときは、日本語サイトのカテゴリから入る必要があります。

他の4サイトと決定的に違うのは、掲載ページに制作クレジットが載ることです。実際に1件開いて確認したところ、クリエイティブディレクション・デザイン・プログラミング・撮影・編集といった役割別に担当者と制作会社名が並び、その情報の引用元URLまで明記されていました。「この演出は誰が作っているのか」まで辿れるのは、制作会社を調べたいときに効きます。

Web Design Clip｜色と「実装技術」で絞れる

Web Design Clipはサイト表示で6,314件（2026年8月2日時点）。色の絞り込みが2段階に分かれているのが特徴で、メインカラー13色に加えてサブカラー13色が別軸で用意されています。配色の組み合わせから探したいときは、この2段構えが役に立ちます。レイアウトはTYPE_AからTYPE_Fまでの6種類で切り替えられます。

コーディングまで担当する人にとって効くのは実装技術のタグです。WordPress、React／Next.js、Vue.js／Nuxt.js、Astro、Webflow、Studio、Shopify、Framer、GSAP／ScrollTrigger、3D／WebGL／three.js、Lottieといったタグで絞り込めます。「Astroで作られた実例だけ見たい」「GSAPを使ったスクロール演出の実例を集めたい」という探し方ができるギャラリーは多くありません。

加えて、本体とは別に3つのサブサイトがあります。それぞれ開いて確認した内容は次のとおりです。

• World＝海外のWebデザイン集。本体の日本語サイトと分けて見られる
• Landing Page＝LP・ランディングページ集。LP advanceと見比べる相手になる
• Smartphone＝スマホサイト・レスポンシブ集。ただし2026年8月2日時点の新着表示は同年4月2日で、本体ほど頻繁には更新されていない

Parts.｜セクション単位で並べて比較できる

Parts.は、この5サイトの中で唯一「セクション」を単位にしているギャラリーです。用意されているカテゴリは、ヘッダー／メインビジュアル／悩み・課題解決／サービスの特徴／導入事例／フロー・流れ／料金／よくある質問／CTA／フッター／パンくず／会社概要／お知らせ／インフォグラフィック／数字で見る／ブログ一覧／ブログ記事／お問い合わせ／資料ダウンロードの19種類。加えて機能側として、モーダル・ポップアップ／エラー・404／メガメニュー／スライダー／ページネーションの5種類があります（2026年8月2日確認）。

Parts.のAboutページには「SaaSのサービスサイトやLPを中心としたデザインの参考サイト」「キャッチコピーや構成、デザインの参考にどうぞ」と書かれています。つまり掲載対象はBtoB・SaaS寄りで、そこを承知して使う前提のサイトです。

注意点を1つ。Parts.はサンプルコードを提供していません。トップページ・Aboutページ・パーツ詳細ページのHTMLを取得して確認したところ、pre要素とcode要素はいずれも0件で、本文中に「コード」という語も出てきませんでした（2026年8月2日実測）。掲載されているのはスクリーンショット画像と掲載元サイトへのリンクです。コードを探す場所ではなく、並び順とキャッチコピーを見る場所だと考えてください。

LP advance｜LPを「メインビジュアルの被写体」で絞れる

LP advanceはLPに特化したギャラリーで、サイト表示ではLP掲載数2,350（2026年8月2日時点）。業種13種、色13種、タイプ8種で絞り込めるところまでは他と同じですが、独自なのはメインビジュアルの被写体で絞れる点です。人物（男女）／人物（男性）／人物（女性）／物／文字／イラスト／動物の7種類が用意されています。

「ファーストビューに人物写真を置くか、商品を置くか」で迷ったときに、同じ業種の実例を被写体別に並べて見比べられるということです。ほかに効果・エフェクト（スクロール／レスポンシブ／動画）と、キャッチコピーだけを集めた一覧ページもあります。

こちらも1つ訂正しておきます。LP advanceはテンプレートを配布していません。トップページのHTMLを取得して全文を検索したところ、「テンプレート」という語は0件でした（2026年8月2日実測）。読み物として「LPデザイン制作のコツ」というコーナーはありますが、ダウンロードできる素材は用意されていません。

Pinterest｜検索語の言い換えを教えてくれる

Pinterestはギャラリーではなく画像共有サービスなので、他の4つとは性格が違います。使いどころは事例集めよりも検索語の発掘です。「webデザイン」で検索すると、画面上部に関連キーワードの候補が並びます。実際に開いて出てきたのは、おしゃれ／スタイリッシュ／コーポレートサイト／カフェ／メインビジュアル／ポートフォリオ／不動産／お客様の声／飲食店／和風／見出し／歯医者／沿革／採用サイト／バナー／代表挨拶／よくある質問といった語でした（2026年8月2日確認）。

この中の「沿革」「代表挨拶」「お客様の声」は、自分では思いつかないセクション名かもしれません。他人がそのセクションを何と呼んでいるかを知る道具として使うと、他のギャラリーでの検索精度も上がります。

Pinterestは「アカウント前提の道具」として扱う

Pinterestを勧める記事はたくさんありますが、ログインの要否まで書いてあるものは多くありません。ここは実際に測ったので、その結果を先に置きます。

ログインしていない状態で「webデザイン」の検索結果ページを実ブラウザ（Chromium／日本語ロケール）で開き、下端までのスクロールを17回繰り返して計測しました。結果は次のとおりです（2026年8月2日実測）。

• 閲覧そのものは可能。ページ全体の高さは初期表示の3,683pxから39,843pxまで伸び続け、追加読み込みは止まらなかった
• ただし画面には「ログアウトしています／ログインして、あなたにおすすめのアイデアをもっと見てみましょう」という案内が常時かぶさる
• ページ上のボタンを全件走査したところ、「保存」ボタンは0件。押せるのは「ログイン」「無料登録」と関連キーワードだけだった

つまり「見るだけ」なら未ログインでもできますが、ボードに集めて残す使い方はアカウントが前提です。参考集めの本命は「あとで並べ直すこと」なので、Pinterestを使うなら無料アカウントを作る前提で計画してください。なお、ログイン後にどこまで挙動が変わるかは今回検証していません。ここで断定できるのは未ログイン時の挙動だけです。

参考を集める手順｜3〜5件に絞るまで

ここからが本題です。集める工程は5ステップで固定できます。所要時間は慣れれば30分ほどです。

1. 目的を1文にする。「BtoB SaaSのサービスサイトのトップを作る」「クリニックの集客LPを作る」など、業種と種類まで書く。ここが曖昧なままだと以降の絞り込みが効かない
2. 探せる単位を決める。ページ全体の構成が知りたいならサイト全体、料金表やCTAだけ迷っているならセクション、縦1本の説得順序を知りたいならLP
3. 軸で絞る。業種を先に、色や表現は後に指定する。色から入ると業種が散らばり、比較できない集合になる
4. 3〜5件に絞る。2件だと共通点が偶然かどうか判別できず、10件を超えると平均的な結論しか出ない。3〜5件は「共通と例外を見分けられる最小の数」として扱う
5. スクリーンショットにメモを付ける。ただし書くのは「どこが良いか」ではなく「何がどの順で並んでいるか」。良し悪しはこの段階では書かない

ステップ5で「良し悪しを書かない」としているのは、良し悪しの言語化がこの工程とは別の技術だからです。見た良さを説明できる力そのものを鍛えたい場合は、観点と練習問題を用意したデザインを言語化する練習帳のほうを使ってください。この記事は言葉にする前の段階、つまり構造だけを機械的に取り出す工程を扱います。両者は順番に使うもので、置き換えではありません。

集めた参考から共通構造を抜き出す

集めた3〜5件を並べたら、見るのは次の4点だけにします。ここを増やすと作業が終わりません。

1. ファーストビューに何がいくつ置かれ、どの順で目に入るか
2. セクションがどの順に並んでいるか（名前と順番だけ）
3. 繰り返しの単位は何か（カード、リスト、表、写真＋テキストの横並び）
4. 余白の粗密（どのセクションが詰まっていて、どこが空いているか）

Parts.のカテゴリ名を「並び順の物差し」に使う

2番目の「セクションの並び順」でつまずく人が多いのは、セクションに付ける名前を持っていないからです。名前がないと「なんか説明のところ」「たぶん実績っぽいところ」としか書けず、比較できません。

ここでParts.のカテゴリ名がそのまま使えます。ヘッダー／メインビジュアル／悩み・課題解決／サービスの特徴／導入事例／フロー・流れ／料金／よくある質問／CTA／フッター。この語彙を手元に置いて、集めた参考のスクリーンショットに上から順にラベルを貼っていくだけで、比較可能な形になります。Parts.を「参考画像を探す場所」ではなく「セクション名の辞書」として使うわけです。

出現マトリクスにして採否を決める

ラベルを貼り終えたら、セクション名を縦に並べて「何件に出てきたか」を数えます。3件集めた場合の例です。

採否の基準は単純で、2件以上に出ていれば採用、1件だけなら保留です。1件だけのセクションは、その1件に固有の事情（大企業だから、商材が特殊だからなど）で置かれている可能性が高く、真似ると理由のない要素が増えます。保留にしたものは捨てずに「なぜ入れないか」を1行だけ書き残してください。この1行が、後でクライアントや上長に聞かれたときの答えになります。

抜き出した構造をワイヤーに落とす

マトリクスができたら、ワイヤーへの変換は3手で終わります。

1. 採用したセクション名を、参考で多かった順に縦へ並べる
2. 各セクションに「そこで何を見せるか」を1行ずつ書く（文言そのものではなく、要素の種類）
3. 繰り返し単位の個数を決める（特徴は3つか4つか、事例は何件並べるか）

この段階では色と写真を入れません。入れると「参考のどこを再現できているか」が見えなくなり、次の判定ができなくなるためです。順序としては、構造が確定してから幅・ブレイクポイント・最小フォントサイズといった数値を決めます。数値の決め方はデザインカンプ前に決めるWebデザインのルールにまとめてあるので、ワイヤーができたらそちらへ進んでください。

ワイヤーをどのツールで描くかは自由です。紙でも構いません。ツール選びから迷っている場合はCanva・Figma・STUDIOの使い分けを先に読むと、この工程をどこに置くかが決まります。

検証｜ワイヤーが参考の共通構造を満たしているか判定する

ここまでの工程が効いたかどうかは、感想ではなく判定で確かめられます。用意するのは、集めた参考のスクリーンショット3〜5件と、さきほどの出現マトリクス、そして自分のワイヤーの3点だけです。

4項目すべてが合格なら、参考は「眺めたもの」ではなく「使ったもの」になっています。この判定は自分ひとりで完結し、判定者が変わっても同じ結果になります。逆に言えば、ここを通していない限り「参考にした」とは言えません。

「順序」で落ちたときだけ、対処が少し違います。並び順が参考の過半数と一致しないのは、多くの場合ワイヤーの失敗ではなく参考の選び方の失敗です。業種が違う、想定読者が違う、そもそもサイトの目的が違う。この3つのどれかを疑って、ステップ3の軸から選び直してください。ワイヤーをいじって順序だけ合わせにいくと、自分の案件に合わない構成が残ります。

なお、この判定で見ているのは構造だけです。色を載せたあとに優先順位が入れ替わっていないか、文字の階層が装飾に頼っていないかは別の検品になります。そこまで進んだら構造→視覚→文字を守れたかを検品する手順へ移ってください。ここでは判定を1段階で止めます。

やりがちな失敗と、その直し方

• 10件以上集めてしまう。件数が増えるほど共通点は当たり前のものに収束し、結論が「ヘッダーとフッターがある」まで薄まる。3〜5件で止める
• 業種の違う参考を混ぜる。採用サイトとECサイトを一緒に見ると、並び順の共通点が出ない。単位を揃える前に業種を揃える
• 色から絞り込む。「青系」で入ると業種がばらけ、比較できない集合になる。色は最後に効かせる軸として使う
• 良し悪しだけメモして構造を見ていない。「余白がきれい」は再現できないが、「特徴が3つ横並び」は再現できる。数えられる形で書く
• ギャラリーからコードを得ようとする。今回の5サイトはいずれもコードを配布していない。実装の手を動かしたいなら模写に切り替える
• 集めっぱなしでブックマークが増える。集めた直後にマトリクスまで作る。翌日に持ち越すと、なぜその1件を選んだのかを忘れる

次の一手

判定を通ったワイヤーができたら、進む先は目的によって分かれます。数値を決める段階ならカンプ前のデザインルール、見た良さを説明できるようにしたいならデザインの言語化トレーニング、そもそもの原則を押さえ直したいならWebデザインの基礎点検が対応します。

構造を見る目は、実際に手で組むと一気に速くなります。同じ構造を自分でコーディングして確かめたい場合は、難易度別に題材をそろえた模写コーディング一覧から1本選んでください。参考サイトを「見る」段階と「作る」段階は、ここでつながります。

よくある質問（FAQ）

Q. Webデザインの参考サイトはどう使い分ければいいですか？

探せる単位で使い分けます。ページ全体の構成を知りたいならサイト全体を単位にしたMUUUUU.ORGやWeb Design Clip、料金表やCTAなど特定のブロックだけ迷っているならセクション単位のParts.、縦1本の説得順序を見たいならLP専門のLP advanceです。Pinterestは事例集めよりも、自分が知らないセクション名や検索語を拾う道具として使うと効果が出ます。

Q. 参考は何件集めるのが適切ですか？

3〜5件が扱いやすい範囲です。2件だと共通点が偶然かどうかを判別できず、10件を超えると共通点が当たり前のものに収束して「ヘッダーとフッターがある」程度の結論しか残りません。3〜5件なら、2件以上に出たものを採用・1件だけのものを保留という単純な基準で採否を決められます。

Q. Pinterestはログインしないと使えませんか？

閲覧だけなら未ログインでもできます。2026年8月2日に未ログイン状態で検索結果を実ブラウザで開き、下端まで17回スクロールしたところ、ページ全体の高さは3,683pxから39,843pxまで伸び続け、追加読み込みは止まりませんでした。ただし同じ画面でボタンを全件走査すると「保存」ボタンは0件で、押せるのは「ログイン」「無料登録」だけです。つまりボードに集めて残す使い方にはアカウントが必要です。

Q. セクション単位で参考を探せるサイトはありますか？

Parts.がそれにあたります。ヘッダー、メインビジュアル、悩み・課題解決、サービスの特徴、導入事例、フロー・流れ、料金、よくある質問、CTA、フッターなどのカテゴリごとに実例が並んでおり、同じ役割のブロックだけを横並びで比較できます。掲載対象はSaaSのサービスサイトやLPが中心だとサイト自身が明記しているため、BtoC向けの事例を探す用途には向きません。

Q. 参考サイトからHTMLやCSSのコードは手に入りますか？

この記事で紹介している5サイトは、いずれもコードを配布していません。たとえばParts.はトップ・About・詳細ページのHTMLを取得して確認した結果、pre要素とcode要素が0件で、掲載物はスクリーンショット画像と掲載元サイトへのリンクだけでした（2026年8月2日実測）。ギャラリーは構成と見せ方を知る場所であり、実装を手に入れる場所ではありません。コードを書いて確かめたい場合は模写コーディングに切り替えてください。

Q. MUUUUU.ORGは国内サイト専門のギャラリーですか？

専門ではありません。2026年8月2日時点のサイト表示では全カテゴリ6,166件のうち、日本語サイトが5,620件、海外サイトが540件、中国語サイトが12件、韓国語サイトが11件です。国内事例だけに絞りたいときは、サイトタイプの「日本語サイト」から入る必要があります。逆に海外の演出を見たいときは海外サイトのカテゴリが使えます。

Q. 参考サイトを見るのと模写コーディングは何が違いますか？

参考サイトの閲覧は構成の引き出しを増やすインプット、模写コーディングはHTMLとCSSで再現するアウトプットです。この記事の手順で言えば、参考から共通構造を抜き出してワイヤーに落とすところまでが前者、そのワイヤーを実際に組み上げるのが後者にあたります。順番としては、構造を判定で確かめてから手を動かすほうが、作り直しが減ります。

Q. 紹介されているサイトが将来なくなったらどうすればいいですか？

この記事の手順は特定のサイトに依存していません。必要なのは「探せる単位で選ぶ」「軸で絞る」「3〜5件の共通構造を抜き出す」という枠組みなので、別のギャラリーを同じ枠に当てはめれば同じ工程が回ります。乗り換え先を選ぶときは、掲載件数の多さではなく、業種や役割で絞り込める軸を持っているかどうかを基準にしてください。