「Webデザインの参考サイトって、結局どこを見ればいいですか？」と聞かれることがあります。検索すれば数十のリストが出てきますが、毎日使うのはせいぜい 3〜5 件です。多すぎても巡回しきれませんし、少なすぎると視野が偏ります。
以下は、フリーランスで Web 制作をしている自分が、実際に 日本語サイト・ランディングページ・おしゃれ系コーポレート・海外トレンド・雰囲気と世界観 の 5 つの切り口で並べているサイトです。「制作の流れのどの段階で、どれを開くか」までセットでお伝えします。
01. SANKOU! — 日本語サイトの参考
SANKOU!（sankoudesign.com） は、日本語の Web サイトを集めたデザインギャラリーです。日本語タイポグラフィ と 日本市場向けの構成 を確認したいときに、まず最初に開きます。
- 使いどころ：日本語のレイアウト・タイポグラフィの参考、コーポレートサイト・サービスサイトのリファレンス
- 強み：業種で検索できる。「税理士」「美容室」「工務店」など実案件と同じ業種で絞り込むと、いま日本国内で受け入れられている見せ方が一気に把握できる
- 使う頻度：毎案件、リサーチ初手で必ず開く
02. 81-web.com — LP（ランディングページ）の参考
81-web.com は、日本の Web 制作会社が運営しているギャラリーです。LP（ランディングページ） に特化していて、キーワード・カラー・フォントなど多軸で絞り込めるのが強みです。
- 使いどころ：採用 LP、ブランドサイト、商品 LP、キャンペーンページなど「縦長で売る」ページの参考
- 強み：色・フォント単位で類似デザインを横断できるので、「明るいアースカラーで、和風寄りの LP」のような曖昧な要望から具体イメージに落とし込みやすい
- 使う頻度：LP 案件・キャンペーンページ案件のときに必ず開く
03. muuuuu.org — おしゃれ系コーポレートの参考
muuuuu.org は、縦に長い Web デザインを集めたギャラリーです。デザインスタジオ・ブランド・編集系のサイトが多く、ビジュアル水準を引き上げたいとき に有効です。
- 使いどころ：デザイン性の高いコーポレートサイトの参考、提案資料のクオリティ底上げ
- 強み：見出しまわりの余白の取り方、写真の使い方、フッターの整え方など「上手いサイトの作法」が短時間で見られる
- 使う頻度：提案資料を作る前と、実装後のセルフレビューのとき
04. Awwwards — 海外トレンドの最先端
Awwwards（awwwards.com） は、世界中の Web サイトを評価・表彰する海外のアワードサイトです。最先端のインタラクション・モーション表現 を研究するときの定点観測先として使います。
- 使いどころ：海外のデザイントレンド、モーション・3D・スクロール演出の研究
- 強み：1 年に数回見るだけでも、「いま世界の Web 制作がどこを歩いているか」の距離感が分かる
- 注意点：受賞作のリッチな表現を、地域の小規模事業者サイトにそのまま入れるのは 逆効果。あくまで「足さない判断」のための定点観測として使う
- 使う頻度：月に 1〜2 回、まとめて回遊
05. Pinterest — 雰囲気・世界観を掴む
Pinterest（pinterest.com） は、画像ベースのソーシャルブックマークです。制作前に「世界観・トーン＆マナー」を固めるムードボード作りに使っています。
- 使いどころ：ヒアリング直後、ワイヤーを引く前の 世界観固め。お客様との方向性合意のためのボード共有
- 強み：Web デザインに限らず、紙物・建築・写真・ファッションまで横断的に集められる。「写真の色温度」「字の太さ」「人の写り方」レベルで方向性を決められる
- 使う頻度：案件初期、ヒアリング直後の数日
5 サイトの使い分け（制作フローに沿って）
5 つを並列に紹介しましたが、実務では制作フェーズごとに 役割が違います。雪工房での標準的な流れに沿って整理すると、以下のようになります。
| フェーズ | 主に開くサイト | 目的 |
|---|---|---|
| ① ヒアリング直後 | 世界観・トーン＆マナーを画像で固める | |
| ② 競合・類似リサーチ | SANKOU! → muuuuu.org | 同じ業種・近い世界観の見せ方を把握する |
| ③ LP 案件のリサーチ | 81-web.com | 縦長で売るページの構成パターンを集める |
| ④ 表現の引き出し補強 | Awwwards | 「足さない判断」のためのトレンド観測 |
| ⑤ 実装後のレビュー | muuuuu.org | 余白・写真・タイポの最後の手入れ |
参考サイトの「見方」3 つのコツ
大量のギャラリーを毎日眺めても、それだけでは制作には繋がりません。実務に活かすには、見るときの視点 を決めておく必要があります。雪工房で意識しているのは、ざっくり次の 3 点です。
- 「真似する場所」と「真似しない場所」を分けて見る：余白・タイポ・配色は積極的に学び、文章のトーンや業界特有の表現はクライアント固有のものとして真似しない
- 受賞作・人気作を「やらない理由」を考える：派手なスクロール演出やフルスクリーン動画は、地域の小規模店舗サイトでは むしろ逆効果になる ことが多い。なぜ採用しないかを言語化しておくと、クライアント説明にも使える
- 同じ業種を 10 サイトまとめて眺める：1 サイトだけ見ると印象に引きずられる。10 件並べると、その業種の「平均線」が見えてきて、自社の見せ方の 差別化軸 が浮き上がる
雪工房ではどう活かしているか
雪工房は静岡県東部を中心に、個人事業主・小規模事業者の 月額0円ホームページ を制作しています。海外アワード級の派手な表現を入れるのではなく、上記 5 サイトの中から「お客様の業種で、いま受け入れられている見せ方」を選び取って、買い切り型のシンプルな構成に落とし込むのが基本姿勢です。
制作例デモは 制作例ページ でご覧いただけます。「うちのお店だとどんな感じになりますか？」というご相談は、近い業態のデモを一緒に見ながらお話しすると早いです。
関連記事
- 「無料ホームページ」と「月額0円ホームページ」の違い：選び方の判断軸を整理した記事です
- 持続化補助金でホームページを作る方法：初期費用も抑えたい方向け
ご相談は お問い合わせフォーム（または LINE）から、業種・規模・ご要望をお聞かせください。