Web知識ゼロの担当者必見！もう迷わない！コーポレートサイトの参考デザインの正しい探し方
「今度のコーポレートサイトのリニューアル、担当として進めておいてね」
上司からそう指示されて、制作会社との打ち合わせを前に、以下のような宿題を出されて困ってしまう担当者様はとても多いです。
「まずは参考になりそうなサイトを、いくつか教えてください」
専門知識がない中で、どういう基準で選べばいいのかわからず、不安になるのはごく自然なことです。 でも、自社にふさわしいデザインを探すのに、特別なセンスや難しい知識は必要ありません。
プロの現場でも実践されている、参考サイトの探し方と選び方のコツを、実務の流れに沿ってご紹介します。
【無料DL】専門知識がなくても、自社に最適な参考サイトを迷わず探せる「チェックシート」を配布中！プロも実践する手順に沿って、理想のデザインや構成を効率的に導き出せる実践的な1冊です 。
お電話でのご相談も承っております。
TEL：03‐6276‐0568
営業時間：月～金 10時～18時
目次
1. そもそもなぜホームページ制作に参考サイトが必要なのか？
参考サイトを用意するのは、プロジェクトに関わる全員のイメージのズレをなくし、予算やスケジュールが崩れてしまうのを防ぐためです。
言葉だけではデザインの認識のズレを防げない
デザインにおける言葉の定義は、人によってバラバラです。
頭の中で「シンプルで清潔感のあるデザイン」を思い浮かべていても、デザイナーは「文字が極限まで少ない海外風のサイト」を、上司は「青と白ですっきりまとまった大手企業のサイト」を想像しているかもしれません。 言葉の曖昧さをなくして、全員の目線を合わせるために、実際のサイトが共通のモノサシになってくれます。
正確な見積もりやスケジュールを出すために必要
Webサイトの制作費用やスケジュールは、デザインの複雑さによって変動します。 参考サイトという具体的な基準があることで、制作会社も正確な見積もりや、現実的なスケジュールを組みやすくなります。
言葉の定義のズレが原因ですり合わせに時間を費やした事例
以前サイトリニューアルで、お客様から「高級感を出したい」と要望されました。私たちは「海外ブランドのようなモダンな高級感」を想定して進めましたが、初回提案で「求めていたのは老舗ホテルのような重厚感」だと判明。抽象的な言葉のまま進めたことで、認識のズレが生じていました。
結果、デザインは全面やり直しに。方向性の確定までに想定以上の時間を費やすことになり、全体のスケジュールを大幅に遅延させてしまいました。
実際のサイトをモノサシにして、イメージをあらかじめ同期させておかないと、お互いの目指すビジュアルをすり合わせるまでに、余計な時間を費やすことになってしまいます。
2. なぜ参考サイトの選定で悩んでしまうのか？
「おしゃれさ」だけで選んでしまうと、ターゲット層に響かず、ビジネス上の目的を達成できないサイトになってしまうことがあります。
おしゃれさで選ぶ基準の罠
明確な選定基準がないと、直感的に目に留まった、なんとなくおしゃれなサイトを選びがちです。
ですがコーポレートサイトの本来の役割は、見た目のおしゃれさではなく、企業の社会的信頼を得ることにあります。
自社の主要なターゲット層が、保守的なBtoBの取引先であるにもかかわらず、ビジュアルに特化した最先端のデザインを参考にしてしまうと、「知りたい情報がどこにあるかわからない」と敬遠され、信頼を損ねてしまうリスクもあります。
3. ネットの海で迷子にならないための参考事例の正しい探し方
Googleの一般検索で探すのは、実は少し非効率です。自社がターゲットに与えたい印象である「トーン」と「業種」を掛け合わせて検索し、デザインの専門ギャラリーサイトを活用するのが一番の近道です。
①「デザイン（印象）」と「コンテンツ（構成）」は別々に探す
参考サイトを探すときは、一気に探そうとせず、以下の「2つの視点」に分け、それぞれ単一の条件で探すのが、プロも実践する最もスマートな方法です。
視点1：【デザイン・トーン（印象）】はギャラリーサイトの「トーンタグ」から探す
ギャラリーサイトでは、業種で絞り込まずに「誠実」「アットホーム」「スタイリッシュ」といった「トーン（テイスト）」のタグを1つだけ選んで探してみましょう。
あえて業種を固定しないことで、自社とは全く異なる業界の優れたデザインに出会えます。
目指したい印象が共通していれば、異業界のデザインが非常に参考になります。
【異業界からトーンを探す具体例】
自社が「建築（堅実・信頼）」の場合： 「誠実・信頼」のタグで、金融機関や法律事務所、教育機関のサイトを参考にする。
自社が「IT（先進・大規模・インフラ感）」の場合：「信頼感」「スケール感」「先進的」のタグで、大手通信キャリアやメガバンク、大手インフラ（鉄道・航空）のサイトを参考にする。
自社が「製造業（先進的・シャープ）」の場合： 「最先端」「スタイリッシュ」のタグで、宇宙開発やスーパーカー、高級ガジェット（家電）のサイトを参考にする。
異業界を参考にすることで、同業他社と似たり寄ったりのデザインになるのを防ぎ、新鮮な差別化を生み出すことができます。
視点2：【コンテンツ・構成（骨組み）】は「同業界（競合）」から探す
「どんな情報を、どういう順番で載せるべきか」というサイトの構成は、ギャラリーサイトに頼らず、Google検索等で同業界の競合サイトを直接探して参考にします。
「競合は採用情報をトップに大きく出しているな」「事業紹介の図解がわかりやすいな」といった、構成や載せるべき情報のアイデアを収集します。
- 写真にリアルな温度があるか： どこにでもあるような無料のモデル素材ばかりに頼らず、実際のスタッフの表情や働く現場など、その会社ならではの空気感が伝わる写真を丁寧に切り取って使っているか。
- 言葉が使い回されていないか： 誠実な対応や安心のサポートといった、どの会社にも当てはまるお決まりの表現ばかりでなく、その会社特有の泥臭いこだわりや話し言葉がにじみ出ているか。
- 見せ方のパターンが変わっているか： どの実績サイトも上から下まで同じ構成（テンプレート）になっておらず、クライアントの事業内容や強みに合わせて、目立たせる情報の順番やレイアウトが適切に変化しているか。
こうした細部を静かに観察してみると、相手が「テンプレート通りに体裁を整えただけのサイト」を量産しているのか、それとも「1社ごとの個性に本気で向き合って設計しているのか」が自然と伝わってきます。表面的な実績の数字に惑わされず、ぜひこのような丁寧さの跡をポートフォリオから見つけてみてください。
②ギャラリーサイトで調べる
Googleで「〇〇業界 おしゃれなサイト」と普通に検索すると、古いサイトなどが混ざってしまい、なかなか良いものに出会えません。デザインのクオリティが厳選され、トーンや配色で絞り込み検索ができる、以下のようなギャラリーサイトを使うのが便利です。
- IO3000（国内外の優れたWebデザインを網羅。最新トレンドやトーン、配色から探しやすい）
- MUUUUU.ORG（プロが太鼓判を押す、卓越したデザインのWebサイトだけを厳選して毎日紹介するWebデザインアワード）
- SANKOU!（色・業種・フォント・動き等様々な方法で探せる国内Web・LPギャラリー）
もっと多くのギャラリーサイトを比較したい場合は、こちらの記事も参考になります。
競合のスタイルに囚われずターゲット視点で解決した事例
以前担当したプロジェクトで、お客様から「競合サイトのようにフォントを小さくして上品な雰囲気にしてほしい」と要望されたことがありました。確かに競合サイトはスタイリッシュでしたが、実際のお客様のターゲット層を考慮すると文字サイズがあまりにも小さく、必要な情報が読み取れない懸念がありました。
そこで、競合をそのまま模倣するのではなく、ギャラリーサイトを使い「上品（トーン）」かつ「可読性の高いレイアウト」を両立している他業界のサイトを参考事例としていくつか提案しました。結果として、お客様が求めていた「上品さ」を保ちながら、ターゲット層がストレスなく読めるデザインに着地させることができました。
4. デザイナーに意図をズレなく伝えるメモ術
「なんかおしゃれ」という言葉を、ほんの少し具体的にしてみます。選んだサイトのどこが良いかをメモして共有するだけで、伝わり方が全く変わってきます。
「このサイトの雰囲気が好きです」とだけ伝えると、デザイナーとの間で認識のズレが生まれてしまいがちです。専門用語は不要ですので、例えば以下のような部分に注目して、思ったことを一言メモしておくだけで十分です。
フォント（文字）：「太くてがっしりしていて、安心感があるな」「細くて余白が広く、高級感があるな」
写真・ビジュアル：「社員の笑顔が多くて、親しみやすいな」「製品のアップが多くて、先進的でシャープに見えるな」
レイアウト（情報の整理）：「上から順番に読んでいくと、ストーリーが理解しやすいな」「メニューが整理されていて、探しやすいよう工夫されているな」
避けてほしいNGデザインを1枚見せるのも効果的
「これだけは自社のイメージと絶対に違う」というNGサイトを1枚共有するだけでも、デザイナーにとっての立ち入り禁止区域が明確になり、初回提案の精度が上がります。
トーン違いの2案提示でイメージが合致した事例
以前担当したプロジェクトで、お客様が好みの雰囲気をうまく言葉にできず、悩まれていたことがありました。そこで、パーツの構成やレイアウト、さらにフォントまでまったく同じに揃えたまま、色味などのトーンだけを極端に変えた2案を作成して提示しました。
比較できる具体的なデザインを用意したことで、お客様も「この配置なら、こちらの落ち着いた配色のほうが自社らしい」と直感的に気づくことができ、迷うことなくスムーズに採用案が決まりました。気に入ったパーツのメモやNGのデザインが共有されていると、このようにピントを合わせた最適な提案に繋がります。
決定後の大逆転を防ぐ！上司を巻き込むNGライン特定テクニック
本格的なデザインに入る前に、あえて極端に異なる他社サイトを2〜3枚見せて、上司の受け入れられない範囲である「NGライン」を事前に確認しておきます。
Web制作で最も避けたいのは、完成直前に社長や上司から「イメージと違う」と、すべてをひっくり返されてしまうことです。 そうならないよう、デザインの方向性を決める前に、他社サイトを「NGラインを測るモノサシ」として活用します。
役員・上司のNGラインを事前に特定する3ステップ
ステップ1： 極端にトーンが異なる他社サイトを3パターン用意します。
A案（ポップ）： カラフルで若者向け
B案（クール）： モノトーンで先進的だが少し冷たい
C案（オーソドックス）： 落ち着いていて誠実
ステップ2： 上司に「ここからは外れますよね」と実物を見せて確認します。
「今回のリニューアルですが、A案のようにポップすぎるものや、B案のように冷たく見える印象はズレますよね」
ステップ3： 上司の口から、NGの基準を引き出して合意を得ます。
「確かにAは軽すぎるし、Bは冷たい。やっぱりCのように落ち着いた誠実な路線が良いな」と言葉で合意を得ておきます。
段階的なデザイン確認で大きな手戻りをゼロにした事例
私たちが制作の実務を進める際も、ページ全体やフッターまでを一気に作り切る前に、まずはメインビジュアル（MV）やファーストビューなど主要な箇所のみを先行してデザインし、段階的に確認をとる工夫をしています。
この段階で方向性のズレや、上司のNGラインを検知しておくことで、後半の大きな手戻りをほぼゼロに抑えることができます。デザインに入る前の早い段階で、極端な他社サイトを見せて上司のNGラインを測っておくことは、この段階的な先行確認を成功させるためにも非常に重要なステップになります。
コーポレートサイトは制作会社との共創
コーポレートサイトのデザイン選定は、担当者様が1人で責任を背負って悩む必要はありません。 最初から完璧な答えを用意しようとしなくて大丈夫です。ギャラリーサイトを眺めながら「ここが見やすいな」と思う1枚を見つけ、その理由をプロである制作チームに伝えることから始めてみませんか。
デザイナーは、指示を待つだけの下請けではなく頭の中のイメージをビジュアルに翻訳するパートナーです。ぜひ協力しながら、素敵なサイトを作っていきましょう。
お電話でのご相談も承っております。
TEL：03‐6276‐0568
営業時間：月～金 10時～18時
Download
関連記事
