ホームページのデザイン参考は、気に入ったサイトを集めるだけでは役に立ちません。大切なのは、「何を取り入れて、何を自社用に変えるか」を見分ける目です。この記事では、制作会社が案件の最初に行っている参考サイトの集め方、サイトの分解の仕方、取り入れる部分と変える部分の線引き、真似してはいけない範囲までを順番に整理します。デザインの経験がない方でも、シート1枚で進められる形にしてあります。

ホームページのデザイン参考は「正解探し」ではなく「判断の材料集め」です

参考サイトを集める目的は、完成形の正解を見つけることではありません。自分が良いと感じた理由を言葉にして、制作会社や社内に伝えられる状態にすることです。見た目の好みだけを集めると、後で「なんとなく違う」が続いてしまいます。

参考サイトを見る目的は3つあります

• 自社の業種で「ここまでは当たり前」という水準を知る
• 好みの方向（落ち着いた、元気、上品など）を言葉にする
• 制作会社や社内に、完成イメージを具体的に伝える材料にする

この3つのうち、どれを今やっているのかを意識するだけで、見るポイントが定まります。

参考にするものと、参考にしないもの

参考にするのは、構成の順序、情報の整理の仕方、余白や文字の大きさの取り方、写真の選び方といった「考え方」です。参考にしないのは、特定のサイトにしかない文章、写真、イラスト、ロゴ、キャラクターです。この線引きは、後の章で詳しく扱います。

参考サイトを集める前に決める3つのこと

集める前に決めておくのは、自社の目的、見せる相手、使える条件の3つです。ここが曖昧なまま探すと、きれいなサイトばかりが集まり、自社には合わないものが混ざります。

目的を1つに絞ります

ホームページの目的は、問い合わせを増やす、採用に応募してもらう、店舗に来てもらう、会社の信頼を示す、のように複数あります。最初の一手として、優先する目的を1つ決めます。目的が違えば、参考にすべきサイトも違います。問い合わせ重視なら、料金や流れの見せ方が参考になります。採用重視なら、働く人の見せ方が参考になります。

見せる相手を具体的に決めます

「30代の経営者」「飲食店を探している近所の人」のように、相手を具体的に思い浮かべます。年齢層やスマホ・パソコンの利用傾向によって、文字の大きさや情報量の適切な量が変わるためです。

使える条件を確認します

予算、更新できる人数、写真を用意できるかどうかは、取り入れられる表現を左右します。大きな写真を全面に使うサイトは、素材が用意できないと同じ見え方になりません。動きの多いサイトは、制作費も更新の手間も増えます。条件に合わないものを参考にしても、実現できずに終わります。

参考サイトの集め方｜探す場所と本数の目安

参考サイトは、ギャラリーサイト、同じ業種の実サイト、異業種のサイトの3か所から、合計10〜15本ほど集めれば十分です。多すぎると比べきれず、少なすぎると偏ります。

ギャラリーサイトで「型」を眺める

Webデザインの事例を集めたギャラリーサイトでは、業種・色・レイアウトなどで絞り込めます。ここでの目的は、好みのサイトを数本ピックアップすることです。ギャラリーに載るサイトは、デザイン性が高い代わりに、情報量の少ない演出重視のものも混じります。自社の目的に合うかは、後の分解で確認します。

同じ業種・近い規模の実サイトで水準を知る

検索結果の上位に出てくる、同業のサイトを5本ほど開きます。デザインの良し悪しより、「どんな情報を載せているか」を見ます。料金、事例、スタッフ紹介、よくある質問など、同業で共通して載せている項目は、利用者が知りたい項目である可能性が高いからです。

異業種から「見せ方」だけ借りる

まったく別の業種のサイトにも、使える見せ方があります。たとえば、飲食店の予約ボタンの置き方は、士業の相談予約にも応用できます。業種が違うことで、真似にならずに発想だけを借りやすくなります。

保存はURLと画面キャプチャの両方で

気に入ったサイトは、URLだけでなく、画面全体のキャプチャも保存します。サイトは後から更新されて、見た目が変わることがあるためです。いつ見たかを残すため、保存した日付も一緒にメモします。

最初は10〜15本を集め、分解して比べたあとに3〜5本まで絞り込みます。最終的に制作会社へ渡すのは、この3〜5本と、それぞれの「ここが良い」という一言です。

参考サイトの見方｜分解する5つの観点

参考サイトは、全体の印象で見ず、5つの観点に分けて見ます。「好き」という感想を、構成、余白と文字、色、写真、導線に分解すると、取り入れる部分が具体的になります。

構成｜上から順に並ぶ項目を書き出します

サイトの縦の流れを、見出しだけ書き出します。「ファーストビュー、強み3つ、実績、料金、よくある質問、問い合わせ」のように並べると、そのサイトが何を重視しているかが分かります。

余白と文字｜読みやすさの理由を探します

「読みやすい」と感じたら、その理由を探します。多くの場合、見出しと本文の大きさの差、行間、段落の間の空きにあります。ここでは「何px空いているか」ではなく、「どこが広く、どこが狭いか」の相対的な関係を見ます。余白の整え方そのものは、別の記事（ホームページの余白とレイアウトの整え方）で扱います。

色｜使われている色の数と役割を数えます

色は数えると、思ったより少ないことに気づきます。多くのサイトは、ベースの白、文字の黒またはグレー、主役のアクセント1色で構成されています。色の決め方は配色ツール10選と配色の決め方で扱っているので、そちらを参照してください。

写真・イラスト｜素材の種類と使い方を見ます

写真は、実際の人物か素材写真か、色味が統一されているか、大きさはどのくらいかを見ます。素材を自社で用意できるか、制作会社に撮影を頼むのかで、取り入れられる内容が変わります。

導線｜ボタンの置き場所と文言を確認します

ボタンがどこにあるか、何回出てくるか、文言は「お問い合わせ」か「無料で相談する」かを見ます。ファーストビューの中身の分解は、ファーストビューで選ばれるWebサイトデザインのコツで詳しく扱っています。

何を取り入れて、何を変えるか｜線引きの基準

取り入れるのは「型」、変えるのは「中身と表現」です。型とは、情報の並べ方や、ボタンの置き方のような、多くのサイトに共通する構造のことです。中身と表現とは、文章、写真、色の組み合わせ、ロゴなど、そのサイト固有のものです。

取り入れてよい「型」の例

「実績を3件ずつカードで並べる」「料金表の下に相談ボタンを置く」「よくある質問を開閉式にする」といったものは、多くのサイトで使われている型です。型は特定の誰かのものではなく、使い方の約束事に近いものです。

必ず変える部分は「自社の言葉」と「自社の素材」

同じ型を使っても、中に入る言葉と写真が自社のものなら、見た目の印象は変わります。逆に、構成が違っても、写真と文章が借り物では、会社の特徴は伝わりません。

文章・写真・ロゴの転用は避けます

他社サイトの文章や写真、ロゴ、イラストは、そのまま使うと著作権や商標権の問題になる可能性があります。デザインの考え方や構成のアイデア自体は一般に保護の対象ではありませんが、具体的な表現（文章や画像、コード）は別です。判断に迷う場合は、制作会社や専門家に相談してください。

「似すぎている」と感じたら見直します

参考サイトと並べて、構成も色も写真の使い方も似ていると感じたら、変える部分が足りていません。1か所でも自社らしい要素（地域、創業の経緯、実際のスタッフ）を足して、見分けがつくようにします。

参考サイトを整理するシートの作り方

集めたサイトは、1サイト1行のシートにまとめます。表計算ソフトで十分です。作業は4つの手順で、1サイトにつき5分程度です。

ステップ1｜URLと保存日を書きます

サイト名、URL、見た日を書きます。キャプチャも同じ行からたどれるように、ファイル名を記録しておきます。

ステップ2｜5つの観点を一言ずつメモします

先の表にある、構成、余白と文字、色、写真、導線を、一言ずつ書きます。長く書く必要はありません。「見出しが大きい」「写真が人物中心」程度で十分です。

ステップ3｜「取り入れる／変える／やらない」を書きます

最後の列に、取り入れる点、自社用に変える点、やらない点を書きます。この列が、制作会社に渡すときにいちばん役に立つ部分です。

ステップ4｜3〜5本に絞り、共通点を見つけます

全体を見渡して、複数のサイトに共通して「良い」と書いた点を探します。共通点が、自社が本当に求めている方向です。バラバラなら、まだ目的が絞れていない可能性があります。

デザインの腕試しに「Webサイトデザインバトル」

見る目は、実際に2つを比べる経験で鍛えられます。当社が公開している「Webサイトデザインバトル」は、サイトのトップ画面を2つ並べて、好きなほうを選ぶ遊びです。

Webサイトデザインバトルとは

サイトのトップ画面（ファーストビュー）2つを比べて、良いと思うほうを選びます。投票の前には、業種、目的、想定する人、観点、説明（制作のねらい）が各カードの下に表示されます。実際のサイトを開いて、全体を見ることもできます。無料で、会員登録なしで遊べます。

参考サイトの見方を試す場として使う

この記事で紹介した5つの観点で、2つのサイトを見比べてみてください。どちらを選んだのか、その理由を言葉にできれば、参考サイトの見方が身についています。

エントリーの流れ

自分のサイトや制作したサイトを出す場合は、URLを入れるとページの画像が取得されます。エントリーは審査制で、公開前に当社で確認します。取り下げは、本人がいつでもできます。Webサイトデザインバトルにエントリーするから、まずは他の人のサイトを見るだけでも構いません。

よくある質問

Q. 参考サイトは何本くらい集めればよいですか？

最初は10〜15本、分解したあとに3〜5本へ絞るのが目安です。本数を増やすより、1本ずつ「なぜ良いのか」を書くほうが重要です。

Q. 同業のサイトを参考にして似てしまいませんか？

同業は、載せるべき情報の水準を知るために見ます。見た目は異業種や別の型から借り、文章と写真は自社のものにすれば、似すぎることは避けられます。

Q. 好きなサイトが見つからないときはどうしますか？

逆に、「これは嫌だ」というサイトを3本集めてみてください。好きなものより、嫌いなものの理由のほうが言葉にしやすいためです。

Q. 制作会社に参考サイトを渡すときに添えるものは？

URLに加えて、「ここが良い」「ここは真似したくない」という一言と、目的、見せる相手、予算の範囲を添えます。制作会社が意図を読み違えにくくなります。

Q. 参考サイトの画像を、自社サイトの試作に使ってよいですか？

社内で見せる検討用のメモにとどめ、公開するサイトには使わないでください。公開する素材は、自社で撮影するか、利用条件を確認した素材を使います。

まとめ｜参考サイトは「分解」して「自社の言葉」に置き換える

ホームページのデザイン参考で大切なのは、サイトを好みで集めるのではなく、5つの観点に分解し、型だけを取り入れ、表現は自社用に変えることです。目的、見せる相手、使える条件を先に決め、10〜15本から3〜5本に絞れば、制作会社にも意図が伝わります。見る側ではなく見られる側の視点はWebデザイナーのポートフォリオサイトの作り方で扱っています。ホームページ制作でお困りの方は、お問い合わせからご相談ください。