「なんとなく物足りない」と感じたら、実例を見るのが一番の近道です。ここでは、Webデザインの参考サイトをやりたいこと別に画面つきで紹介します。
べんりワザ配色サイトで色に迷わない配色そのものに迷ったときはこちらタイプ1：定番の総合デザインギャラリー
ジャンルを問わず、国内サイトの実例を幅広く集めた定番サイトです。
SANKOU!
業種・カラー・フォントなど、細かい条件で絞り込める国内最大級のギャラリー。
I/O 3000
登録数が多く、タグ検索で細かいテイストまで絞り込める。
タイプ2：LP（ランディングページ）に特化したギャラリー
1ページ完結の「LP」だけを集めたサイトです。自己紹介ページのような1枚もののレイアウトを考えるときに向いています。
Lapa Ninja
LPだけを集めた、シンプルで見やすいギャラリー。
LPアーカイブ
国内最大級、7万件を超えるLPを集めたデータベース。
タイプ3：UIパーツ・画面の実例を探す
「ボタンはどう見せる？」「フォームの並べ方は？」など、ページ全体でなく細かいパーツの実例を探したいときは、実際のアプリ画面を集めたサイトが役立ちます。
Mobbin
実在するアプリ・サイトの画面を40万点以上集めた、海外の巨大なUIデータベース。
Dribbble
デザイナーが投稿する、ボタンやアイコンなど細かいパーツのアイデアが集まる海外の定番サイト。
タイプ4：海外のハイクオリティなデザインを見る
もう一段階、洗練された表現に触れたいときは海外サイトも見てみましょう。
Awwwards
世界中のデザイナーが投稿する、受賞レベルのサイトを集めたサイト。
Land-book
厳選されたシンプルで美しいサイトだけを集めたギャラリー。
参考サイトの使い方：まねではなく分解して学ぶ
いいなと思ったサイトを見つけたら、まるごと再現しようとせず、要素を分解して取り入れましょう。
| 参考にする部分 | やること |
|---|---|
| 配色 | 使われている色の組み合わせだけを借りる |
| レイアウト | 見出し・画像・文章をどんな順番で並べているかを見る |
| 余白の取り方 | 要素と要素のあいだをどれくらい空けているかを見る |
コード（HTML/CSS）や写真・文章をそのままコピーするのはNGです。発想だけを借りて、コードは自分の手で書くのが上達の近道です。
全部まねしようとしなくて大丈夫だよ。「この配色いいな」「この余白の取り方まねしたいな」くらい、1つだけ借りるつもりで見ると気が楽になるよ〜
まとめ
- 参考サイトはやりたいこと別に選ぶ——総合系 / LP特化 / UIパーツ探し / 海外のハイクオリティ系
- ページ全体で迷ったらSANKOU!かLapa Ninja、ボタンなど細かいパーツで迷ったらMobbinから
- まねするのは配色やレイアウトの発想だけ、コードは自分で書く
いいなと思うページを1つ見つけておくだけで、自分のページを作るときの手が止まりにくくなります。