参考サイトの選び方と伝え方｜見た目の好みを制作会社に伝える

ホームページの見た目の希望を聞かれて、「シンプルで、おしゃれで、信頼感のある感じ」と答えたことはないでしょうか。言葉はどれも正しいのですが、受け取った制作会社は、何を思い浮かべればよいか分かりません。人によって「シンプル」の絵が違うからです。そこで役に立つのが、実在のサイトを挙げて伝える参考サイトです。

ただ、参考サイトのURLを並べて送るだけでは、思ったほど伝わりません。同じサイトを見ても、こちらは色が好きで、制作会社は文字の組み方が好まれていると受け取る、といった食い違いが起きます。この記事では、参考サイトの選び方と数、サイトごとに「どこがよいか」を書き分ける方法、そのまま使える伝え方の表、真似にしないための線引きを説明します。

参考サイトで伝えられること、伝えにくいこと

参考サイトは見た目の好みを伝えるのに向いていますが、何でも伝わるわけではありません。

伝えやすい	伝えにくい（言葉や資料で補う）
色の明るさと数、配色の雰囲気	自社の事業の強み、読ませたい相手
写真の大きさ、明るさ、人が写るか	載せる内容とページの数
文字の大きさ、太さ、書体の雰囲気（明朝・ゴシック）	予算と期限
余白の広さ、情報の詰め方	更新の体制
ページを下へ読ませる流れ、動きの量	社内の決め方

伝えにくい項目は、ホームページ制作の提案依頼書（RFP）の書き方のような依頼の資料にまとめます。参考サイトは、その資料に添える「見た目の補足」と考えると、役割がはっきりします。

参考サイトの探し方

参考サイトは、ふだん目にしているものから拾うのが近道です。

• 自社が好きな会社やお店のサイト：取引先、よく行くお店、憧れの会社
• 業種の違うサイト：ホテル、美術館、文房具のメーカーなど。色や写真の雰囲気は業種をまたいで伝わります
• 同じ業種のサイト：載せている情報の参考に。見た目の参考とは分けて挙げます
• 紙のもの：お店のパンフレット、雑誌のページ、商品のパッケージ。写真か実物で渡します

見つけたら、その場でURLと、どこがよいと思ったかを1行で控えておきます。あとで見返すと、なぜ選んだのかを忘れていることがよくあります。

選ぶ数は3〜5サイト、好みでないものを1〜2サイト

数	起きやすいこと
1サイト	そのサイトに似せる話になりやすい
3〜5サイト	共通する好みが見え、制作会社が方向をつかみやすい
10サイト以上	好みがばらばらに見え、何を優先するかが分からない

数を絞るときは、並べたときに共通点があるかを見ます。5サイトが全部「白い背景に大きな写真」なら、それが好みの芯です。共通点が見つからないときは、社内で好みがまとまっていない合図なので、先に話し合います。

あわせて、好みでないサイトを1〜2サイト挙げると、方向がぐっと定まります。「派手な色がたくさん使われているのは避けたい」「動きが多いのは苦手」といった、避けたいことは言葉にしにくいので、実物で示すのが確かです。

サイトごとに「どこがよいか」を書き分ける

参考サイトを伝えるとき、いちばん大事なのは、サイトの全体ではなく、よいと思った部分を指すことです。次の表をそのまま使えます。

参考サイト	見てほしいところ	よいと思う点	合わない点・取り入れなくてよい点
サイト1（URL）	色	白と濃い緑の2色だけで落ち着いている	文字が小さすぎる
サイト2（URL）	写真	人が働く様子を大きく見せている	写真が暗い
サイト3（URL）	文字・書体	見出しが明朝で、品がある	英語の見出しは要らない
サイト4（URL）	余白と情報量	1画面に載せる情報が少なく、読みやすい	下まで長すぎる
好みでないサイト（URL）	全体	（避けたいこと）色が多く、動きが多い	—

「見てほしいところ」は、次の言葉から選ぶと書きやすくなります。

• 色：使う色の数、明るさ、背景の色
• 写真：大きさ、明るさ、人を写すか、物を写すか
• 文字：大きさ、太さ、明朝かゴシックか
• 余白：広いか、詰まっているか
• 並べ方：写真と文章の並び、1画面の情報の量
• 動き：スクロールで出てくる動き、切り替わる写真の有無
• 文章の調子：やわらかいか、きっちりしているか

文章の調子は、見た目と同じくらい印象を左右します。気に入った言い回しがあれば、その部分を書き写して渡すのではなく、「このくらい話し言葉に近い調子で」と伝えます。

良い伝え方と困る伝え方

困る伝え方	良い伝え方
「このサイトみたいにしてください」	「このサイトの、写真を大きく使っているところと、白い背景が好みです。色はもっと少なくしたいです」
URLを10個並べて送るだけ	4サイトに絞り、サイトごとに見てほしいところと理由を1行ずつ書く
「おしゃれで信頼感のある感じ」	「白を多めにして、写真で現場の人を見せたい。色は紺を1色だけ」
社内の人がそれぞれ別の参考サイトを送る	社内で1つの表にまとめ、窓口の担当から送る
「動きのあるかっこいいサイト」	「スクロールで写真が出てくる程度の動きは好き。画面全体が動くのは避けたい」

デザイン案が届いたあとの修正の伝え方も、同じ考え方が使えます。部分を指して、理由を添えます。詳しくはデザイン案への修正の伝え方にまとめています。

送る時期と、打ち合わせでの使い方

参考サイトは、見積もりや提案を頼むときに一度送り、最初の打ち合わせで画面を一緒に見ながら説明するのが確かです。表に書いたことでも、画面を指しながら「この写真の明るさ」「この見出しの大きさ」と話すと、食い違いがその場で分かります。打ち合わせのあとに好みが変わったら、表を直して送り直し、どの版がいちばん新しいかを日付で分かるようにしておきます。デザイン案ができてから参考サイトを足すと、作り直しになりやすいので、足すなら構成が固まる前にします。

真似にしないための線引き

参考サイトは、好みを伝えるための材料です。見た目をそっくりに作ってもらうためのものではありません。

著作権法では、文章や写真、イラストなどの著作物の著作権は、作った人が持ち、その享有には登録などの手続きが要らないとされています（第17条第2項）。参考サイトに載っている写真、文章、ロゴ、イラストは、そのサイトの持ち主や作った人の著作物で、無断で使えば権利を侵すおそれがあります。

制作会社に頼むときは、次のことを守ります。

• 参考サイトの写真やイラストを「これを使ってください」と渡さない
• 参考サイトの文章を書き写して原稿にしない
• 「このサイトと同じ配置・同じ色・同じ写真の撮り方で」と、全部を写す頼み方をしない
• 伝えるのは「どこがよいか」と「なぜよいか」。形は、自社の事業と読み手に合わせて作ってもらう

文章を参考にするときの線引きはホームページの文章の著作権で詳しく説明しています。

制作会社に送る前のチェックリスト

• 参考サイトは3〜5サイトに絞ってある
• 好みでないサイトを1〜2サイト挙げてある
• サイトごとに、見てほしいところとよいと思う点が書いてある
• 取り入れなくてよい点も書いてある
• 同じ業種のサイトは、情報の参考と見た目の参考で分けてある
• 社内の希望を1つの表にまとめ、窓口から送る
• 写真や文章を使ってほしい、という頼み方になっていない

ロゴを頼むときの参考の伝え方はロゴを依頼する前に決めることで扱っています。Lapisデザインラボがこれまで作ったものは制作事例で見られます。