Webサイトの制作やリニューアルが決まると、多くの会社でまず始まるのが「参考サイト集め」です。社内で気になるサイトのURLを共有し、打ち合わせで制作会社に見せる。ごく自然な進め方に見えます。
ところが、この工程が原因で制作が長引くケースを、私たちは何度も見てきました。デザイン案が出てきたときに「思っていたのと違う」となり、修正が3周、4周と続く。最終的にできあがったサイトは、最初に見せた参考サイトにも似ていないし、自社らしくもない。
原因は、参考サイトの「集め方」にあります。この記事では、その理由と、代わりに何をすればいいのかを整理します。
「このサイトみたいに」が伝わらない理由
打ち合わせで参考サイトを見せるとき、発注する側の頭の中には、そのサイトのどこかが気に入った理由があります。しかし、その理由が言葉になっていないまま「これみたいに」と伝えると、制作側は推測するしかありません。
たとえば、ある美容サロンのサイトを見せられたとします。制作側が受け取りうる情報は、これだけあります。
- 白を基調とした余白の多い画面
- 写真が大きく、文字が少ない
- スクロールに合わせて要素がふわっと現れる
- 予約ボタンが常に画面下部に固定されている
- モデルの写真ではなく、実際のスタッフの写真を使っている
- メニューと価格が1ページに全部載っている
発注側が気に入っていたのが「余白の多さ」だったとしても、制作側が「スクロール演出」だと受け取れば、まったく別の提案が上がってきます。どちらも間違っていません。言語化されていない好みは、伝わらないのではなく、別のものとして伝わるのです。
さらにやっかいなのは、参考サイトが複数になったときです。5件のサイトを見せて「この雰囲気で」と伝えると、制作側は5件の最大公約数を探すことになります。結果、どのサイトの良さも残っていない、無難で退屈な案が出てくる。これが修正ループの入口です。
業種が違う参考サイトは、そのまま参考にならない
もうひとつ多いのが、まったく別の業種のサイトを参考にしてしまうケースです。
「アパレルブランドのこのサイトがかっこいいので、うちの工務店もこんな感じで」という要望をいただくことがあります。気持ちはよく分かりますし、業種を越えた参考自体は悪くありません。ただ、そのまま持ち込むと機能しないことがあります。
アパレルのサイトが写真中心で文字が少ないのは、商品の魅力が視覚情報でほぼ伝わりきるからです。服の色、質感、シルエット。これらは説明されるより見たほうが早い。だから文字を削り、写真を大きく使う設計が合理的になります。
一方、工務店に問い合わせる人が知りたいのは、施工実績の写真だけではありません。対応エリア、価格帯、工期、保証、担当者の人柄、過去の施主の声。判断に必要な情報の量が、そもそも違うのです。写真だけの美しいサイトを作ると、見た目は良いが問い合わせが来ないサイトになります。
参考にするときは「見た目」ではなく「なぜその見た目になっているか」まで遡る必要があります。そして、その理由が自社にも当てはまるかを確認する。ここを飛ばすと、形だけ真似た不自然なサイトができあがります。
参考サイトを集めるときの3つの視点
では、どう集めればいいのか。私たちがお客様との打ち合わせでお願いしているのは、次の3つを分けて考えることです。
1. 目的 ─ そのサイトは何をさせようとしているか
まず、参考サイトが訪問者に何をしてほしいのかを見ます。
- 資料をダウンロードしてほしいのか
- 電話で問い合わせてほしいのか
- 予約を取ってほしいのか
- 商品を買ってほしいのか
- 会社を知って、印象を良くしておきたいだけなのか
目的が違えば、良いデザインの定義も変わります。予約獲得が目的のサイトは、予約ボタンをしつこいくらいに配置するのが正解です。それをブランディング目的のサイトに持ち込むと、押し付けがましい印象になります。
自社の目的と、参考サイトの目的。この2つが揃っているかを最初に確認してください。揃っていない参考サイトは、見た目がどれだけ好みでも、そのまま使えません。
2. 構成 ─ 情報がどの順番で並んでいるか
次に、ページの構造を見ます。上から順に、何がどの順番で置かれているか。
多くの企業サイトのトップページは、次のいずれかの型に収まります。
- 1枚の大きな画像で始まり、下にサービス紹介が続く型：認知がある企業、または雰囲気で選ばれる業種向き
- カードを並べて選ばせる型：サービスや商品の種類が多く、来訪者が自分で選ぶ必要がある場合
- 1ページで最後まで読ませる型：ひとつの商品・サービスに絞って説明しきりたい場合
自社がどの型に当てはまるかは、扱っている商材の数と、来訪者がどこまで自分の要件を分かっているかで決まります。「うちは何を売っているか一言で言えない」という会社が1ページ完結型を選ぶと、たいてい途中で破綻します。
3. トーンと配色 ─ どんな印象を与えたいか
最後が印象の話です。ここが一番「好み」に見えますが、実は最も言語化しやすい部分でもあります。
「上品」「親しみやすい」「信頼感がある」「先進的」「温かみがある」。こうした言葉を2つか3つ選ぶだけで、制作側との認識はかなり揃います。逆に「おしゃれな感じ」だけでは、まず揃いません。
配色も同じです。「青系」ではなく「濃紺を主役に、差し色は使わない」まで踏み込めると、提案の精度が上がります。
参考サイトは「1件につき1つの理由」で集める
実務的におすすめしているのは、参考サイトを集めるときに URLと一緒に、気に入った理由をひとつだけ書くというやり方です。
https://example.com/ → 料金表が1ページに全部載っていて、探さなくていいのが良い https://example.jp/ → 写真が実際のスタッフで、雰囲気が伝わる https://example.co.jp/ → 問い合わせボタンが常に画面下にあって迷わない
理由をひとつに絞るのがポイントです。「全体的に good」と書きたくなりますが、それでは伝わりません。ひとつに絞ることで、自分でも何が気に入っていたのかがはっきりします。
このリストを制作会社に渡すと、打ち合わせの質が明らかに変わります。「余白」「料金表」「スタッフ写真」という具体的な要素の話ができるようになり、「なんとなく違う」という抽象的なやりとりが減ります。
そして、この作業は社内の合意形成にも効きます。参考サイトを持ち寄ったときに、社長は「高級感」、現場は「分かりやすさ」を見ていた、というズレは非常によく起きます。理由を書き出しておけば、そのズレが制作着手前に見つかります。
TEHON の使い方
TEHON では、掲載サイトを「業種」「目的」「構成」「トーン」「配色」「演出」の6つの軸で分類しています。これは、まさにこの記事で書いた3つの視点を、そのまま検索条件にしたものです。
「かっこいいサイト」を漠然と眺めるのではなく、条件を絞って比較する。そうすることで、自社に必要な要素が浮かび上がってきます。
各サイトの詳細ページには、編集部による解説を添えています。なぜその構成なのか、どこが参考になり、どこは自社に当てはまらないのか。判断の材料としてお使いください。
まとめ
- 「このサイトみたいに」は、伝わらないのではなく別のものとして伝わる
- 業種が違う参考サイトは、見た目ではなく理由まで遡って検討する
- 目的・構成・トーンの3つを分けて考えると、認識のズレが減る
- 参考サイトは「1件につき理由ひとつ」で集めると、社内の合意形成にも効く
参考サイト集めは、制作会社に丸投げする前の準備作業に見えて、実はプロジェクトの成否をかなりの部分で決めています。ここに1時間かけておくと、修正フェーズで何十時間も節約できます。
マザーハンズでは、広島・東京を拠点にWebサイトの制作とマーケティング支援を行っています。サイトのリニューアルでお悩みの際はお問い合わせよりご相談ください。