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