ホームページ制作の参考サイトはどう伝える？好みを言葉にする整理表

ホームページ制作の相談で、参考サイトがあると希望を伝えやすくなります。ただし、相談前に必ず探しておく必要はありません。まだ好みを言葉にできないなら、その状態から整理を始めて大丈夫です。

参考サイトが見つかった時も、URLだけを送り「このようにしてください」と頼むより、どのページの、どの場所を、なぜ良いと思ったかを添えるほうが話し合いやすくなります。この記事では、見つけた参考サイトを自社のホームページづくりに役立つ相談メモへ変える方法を紹介します。

参考サイトは相談前に必須ではありません

参考サイトがないからといって、相談を先延ばしにする必要はありません。「まだ決まっていない」「うまく説明できない」という情報も、制作会社が確認するための大切な手がかりです。

先に整理したいのは、見た目の好みよりも、ホームページで誰に何を伝えたいかです。たとえば、サービスの違いを分かりやすくしたいのか、初めての人へ安心材料を見せたいのか、問い合わせ前の迷いを減らしたいのかで、必要なページや情報の順番は変わります。

相談時に何を聞かれるか不安な方は、ホームページ制作の初回相談で聞かれることも先に確認できます。すべての答えを用意してから連絡する必要はありません。

ページ全体ではなく「どこを見ているか」を伝える

同じページを見ても、良いと思う場所は人によって違います。最初の画面が好きな人もいれば、サービス説明の順番、写真の見せ方、問い合わせまでの案内が分かりやすいと感じる人もいます。

そこで、URLと一緒に見る場所を指定します。スクリーンショットを共有できる場合は、参考にしたい範囲へ印を付けると伝わりやすくなります。他社の画像や文章を自社サイトへ転載するのではなく、話し合う場所を示すために使います。

「好き」を理由・残す点・変える点へ分ける

好き嫌いを説明する時に、専門用語は必要ありません。「情報を見つけやすい」「写真が多くて雰囲気を想像しやすい」「問い合わせ先が迷わない」など、見た時の感想をそのまま書けば十分です。

そのうえで、自社でも大切にしたい点と、そのままでは合わない点を分けます。参考サイトを丸ごと正解にしないことがポイントです。

• 良い理由：何が分かりやすい、読みやすい、安心しやすいと感じたか
• 残したい点：自社でも大切にしたい情報、見せる順番、使いやすさ
• 変えたい点：自社には不要な機能、合わない色、分かりにくい案内

たとえば、参考サイトの最初の画面を見て「すっきりしていて好き」と感じた場合は、もう一段だけ理由を確かめます。見出しが短いから読みやすいのか、写真と文章の間に余白があるから落ち着いて見えるのか、相談ボタンの場所が分かりやすいのかで、制作時に残すべき点は変わります。「すっきり」という感想を無理に専門用語へ直さず、どこを見た時にそう感じたかまで書けば、十分な相談材料になります。

色の希望をもう少し整理したい場合は、ホームページの配色候補を比べる方法も参考になります。

見た目・内容・操作を混ぜずに確認する

参考サイトを見る時は、雰囲気だけで決めず、次の3つへ分けると整理しやすくなります。

• 見た目：色、写真、余白、文字の大きさ、全体の落ち着き
• 内容：サービスの説明、事例、会社情報、よくある質問、問い合わせ前の案内
• 操作：メニューの見つけやすさ、ボタンの分かりやすさ、ページ移動、スマホでの読みやすさ

スマホで確認する時は、上から下へ一度ゆっくり読み、途中で「次にどこを押せばよいか分からない」と感じた場所もメモします。見栄えの良い画面だけでなく、読み進め方に迷わないことも大切な参考点です。反対に、PCでは分かりやすくてもスマホで文章が細かすぎる場合は、見た目をそのまままねず、情報量や配置を自社向けに調整する必要があります。

候補が多すぎる時は、無理に一つへ決めず「特に参考にしたい2〜3サイト」と「避けたい例」を分けて渡します。優先順位まで決められない場合は、サービスの説明、安心材料、問い合わせ導線のどれを先に整えたいかを制作会社と確認します。この順番なら、好みの投票だけで終わらず、自社の目的に合う判断へ戻りやすくなります。

2〜3サイトへ絞る時は、最初に「今回のホームページで一番減らしたい迷い」を一つ決めます。初めての方にサービスの違いを伝えたいなら説明の順番、相談前の不安を減らしたいなら実績やよくある質問、問い合わせまで迷わせたくないならボタンや案内の位置を優先して比べます。各サイトについて、目的に合う点を一つ、取り入れなくてよい点を一つ書くと、候補を残す理由が明確になります。見た目が好きという理由だけで同順位にせず、自社で先に整えたい目的に近いものから優先します。

見た目が好みに合っても、必要な情報へたどり着きにくければ、自社サイトの参考としては調整が必要です。逆に、色や写真は好みでなくても、説明の順番や操作の分かりやすさだけを参考にできる場合があります。

W3Cのウェブアクセシビリティに関する案内でも、文字と背景の違い、色だけに頼らない情報、操作できる部分の見分けやすさ、一貫した案内、異なる画面幅への配慮が挙げられています。参考サイトを見る時は、雰囲気と使いやすさを分けて確認するとよいでしょう。

参考サイトが食い違う時は、目的へ戻る

複数の参考サイトを集めると、「写真は大きく見せたいけれど、情報は一覧で見たい」のように希望が食い違うことがあります。これは失敗ではありません。何を優先したいかを見つける材料になります。

迷った時は、次の順番で考えます。

1. 最初に誰へ見てほしいか
2. その人が何を知ると相談しやすいか
3. その情報をどの順番で見せたいか
4. 見た目と操作の希望をどう合わせるか

「写真の印象」と「サービスを比較しやすいこと」のどちらも必要なら、ページ全体を一つの参考へ合わせるのではなく、場所ごとに役割を分けて相談できます。

参考サイトは複製の見本ではなく、相談材料にする

参考サイトに掲載されているデザイン、文章、写真、イラスト、ロゴなどは、著作権や商標権などで保護されている場合があります。許可なくコピーしたり、自社の素材として使ったりせず、制作会社へ希望を伝えるための参考として扱います。

また、そのページの見せ方は、掲載している事業、対象とするお客様、用意できる写真や文章に合わせて作られています。「なぜ良いと感じたか」を言葉にして、自社で先に伝えたいことへ置き換えると、似せることではなく目的に合う設計を相談できます。

たとえば、余白が多いページを参考にする場合も、「余白を同じ数値にする」ことが目的ではありません。大切な情報を落ち着いて読めるようにしたいのか、写真を目立たせたいのかで、自社に合う設計は変わります。

Bämの実際の制作例は制作実績で確認できます。完成した見た目だけでなく、自社では何を伝えたいかを一緒に考える材料としてご覧ください。

PCとスマホの両方で同じ場所を見る

PCでは横に並ぶ情報が、スマホでは縦に並びます。メニューの形や写真の切り替わり方も変わるため、気になる参考サイトは両方で確認しておくと安心です。

確認する時は、見た目の差だけでなく、次の点にも目を向けます。

• 最初に伝えたい情報がスマホでも見つかるか
• 文字やボタンが読みやすく、押す場所を見分けられるか
• メニューから目的のページへ移動しやすいか
• 写真が切れたり、表が画面からはみ出したりしていないか

そのまま使える参考サイト共有メモ

次の表は、参考サイトを制作会社へ共有する時のメモとして使えます。すべて埋める必要はありません。分かるところだけ書き、決め切れない部分は相談項目として残します。

参考サイトが見つからない時は、困り事から話す

検索しても好みに合うサイトが見つからない時は、無理に選ばなくて大丈夫です。「今のサイトではサービスの違いが伝わらない」「問い合わせ前によく同じ質問を受ける」「写真や文章をどう用意すればよいか分からない」など、今困っていることから話せます。

また、見た目の参考ではなく、必要なページや情報の準備から考えることもできます。早くWeb上の受け皿を整えたい場合はシンプルプラン、強みや導線から作り込みたい場合はベーシックプラン、商品販売の流れを整理したい場合はECカートプランをご覧ください。実際の対応範囲は相談時に確認します。

言葉にできない段階から、Bämで一緒に整理できます

Bämでは、参考サイトが決まっている場合も、まだ何も見つかっていない場合も、事業の目的や伝えたい相手を確認しながら整理します。参考サイトを正解として写すのではなく、良いと感じた理由を自社に合う情報と導線へ置き換えていきます。

Bämの考え方と進め方もご覧いただけます。「うまく説明できない」「参考なしで相談してよいか迷う」という段階なら、お問い合わせで今分かっていることだけお知らせください。