同じ参考サイト1つから、別々のトップページが3案できる｜ホームページのデザインの伝え方と記入シート

上の3つは、どれも同じ参考サイト1つを元に考えたトップページの案です。依頼した人が渡したのは、どの案でもURL1本と「この感じで」という一言だけ、という想定です。

ホームページ制作を初めて頼むとき、参考サイトのURLを用意して「この感じでお願いします」と伝える方は多いと思います。ところが届いた初稿を見て、「思っていたのと違う」と感じる。どこがどう違うのかをうまく言えず、「全体的にもう少し……」とだけ返してしまう。この記事は、そうした方と、これから参考URLを渡そうとしている方に向けたものです。

---

「この感じで」と渡したのに、初稿が違った

よくある流れ

工務店でホームページの担当になった方が、制作会社に依頼する場面を考えます。担当者は、以前から好きだった地方のカフェのサイトを見つけ、そのURLを打ち合わせで渡しました。「この感じがいいんです」と伝え、制作側も「分かりました」と答えます。

2週間後、初稿が届きます。配色はたしかにカフェのサイトに似ています。けれど担当者が気に入っていたのは、窓から光が差し込む店内の写真の雰囲気でした。色ではありません。

どちらかが悪いわけではない

制作側は、URLを受け取った時点で「このサイトのどこを受け継ぐか」を決めなければなりません。手がかりが「この感じ」だけなら、自分がいちばん目立つと思った要素を選びます。担当者は写真を見ていて、制作側は色を見ていた。それだけで初稿は別の方向へ進みます。

「ナチュラル」「温かみ」のような言葉も、人によって思い浮かべるものが違います。ズレを減らすには、言葉を足すよりも、参考サイトのどの部分の話かを指せる形にするのが近道です。

---

参考元を分解する：カフェのトップページを例に

参考元の中身

この記事のために、架空の地方カフェのトップページを参考元として用意しました。実在するお店ではありません。

図の印の部分に、次の番号を付けます。この番号は、あとで3案を比べるときと、記入シートで使います。

番号	種類	部分	特徴
①	写真	最初の画面の店内写真	窓からの自然光。客席全体が入る引きの構図
②	写真	こだわりの段の写真	カウンター越しに、作業台と棚まで入る引き
③	写真	店舗情報の段の写真	入口側から客席を見渡す引き
④	配色	背景	生成り（少し黄みのある白）
⑤	配色	見出し・ボタン・帯	深緑の1色だけ
⑥	構成	1段目	最初の画面：写真と店名だけ
⑦	構成	2段目	こだわり：写真1枚と短い文章
⑧	構成	3段目	メニュー
⑨	構成	4段目	店舗情報：営業時間・地図

1枚のサイトに要素がいくつも入っている

表のとおり、1枚のトップページだけでも、写真が3枚、色が2つ、段が4つあります。さらに文字の大きさや余白の取り方、写真が切り替わるかどうかといった動きも加わります。「この感じ」が指すのは、このうちのどれか、またはいくつかの組み合わせです。言われなければ、制作側には分かりません。

---

同じ参考元から3案：工務店のトップページ

3案の受け継ぎ方

ここからは、架空の地方の工務店のトップページを、上のカフェを参考元として3通りに考えます。3案の違いは、参考元のどの番号を受け継いだかだけです。

案	受け継いだ番号	変えたところ
A 配色を受け継ぐ	④⑤	写真は家の外観を正面から寄りで撮ったもの。段の順番は施工事例を先頭にした
B 写真の撮り方を受け継ぐ	①②③	色は白地に濃い灰色の文字。段は施工事例・家づくりの流れ・会社案内の順
C 構成を受け継ぐ	⑥⑦⑧⑨	色は紺系。写真は職人の作業の手元。メニューの段を施工事例に置き換えた

A：配色を受け継ぐ

生成りの地に、見出しとボタンだけを深緑にします。パソコンの幅では外観写真の左に社名と問い合わせボタンが並び、スマホの幅では写真の下にボタンが来ます。どちらの幅でも、最初に目に入るのは2色の落ち着いた組み合わせです。参考元を見て「色が好き」と思った人には近く感じられます。ただ、写真の雰囲気は参考元とはまったく違います。

B：写真の撮り方を受け継ぐ

完成した家の居間を、窓からの自然光で、部屋全体が入る引きの構図で撮った写真を最初の画面いっぱいに置きます。スマホの幅でも写真を縦に切り詰めすぎず、窓と床が両方入るようにします。色は参考元の深緑を使わず、木の床の色を邪魔しない白と濃い灰色にしました。「光の入った店内の感じが好き」だった人には、色が違っても「これだ」と感じられる案です。

C：構成を受け継ぐ

最初の画面は写真と社名だけ、次に家づくりのこだわりを写真1枚と短い文章で、その次に施工事例、最後に会社の場所と見学会の案内、という4段にします。参考元の「メニュー」の位置に施工事例を入れた形です。色や写真は参考元と違うため、見た目の印象は似ていません。ただ、上から順に読んだときの話の運びは同じです。

3案とも、「参考サイトに合わせた」と言える案です。違うのは、どの番号を選んだかだけです。

---

制作側が参考URLを受け取ったときに聞く5問

URLを受け取った制作側は、次のようなことを確かめたいと考えています。打ち合わせの前に自分で答えを書いておくと、URLと一緒に渡せます。

1. 最初に「いい」と思ったのは、画面のどの辺りでしたか（最初の画面の写真、色、下のほうの段など、場所で答える）
2. 受け継ぎたい点は1つですか、複数ですか（複数なら、いちばん外せないものを1つ選ぶ）
3. 似せたくない点、避けたい点はどこですか（参考サイトの中にあれば、その部分）
4. スマホで見たときも同じ印象でしたか（パソコンでしか見ていないなら、その旨を伝える）
5. 受け継ぐ部分を、自社の素材で置き換えられますか（写真の撮り方を受け継ぐなら、自社に同じような撮り方の写真があるか、これから撮るか）

2問目で「全部」と答えたくなることもあります。ただ、全部を受け継ぐと参考サイトとほぼ同じ見た目になり、自社のサイトとして見たときの違いが出にくくなります。一番を1つ決めておくと、制作側は残りの要素を自社に合わせて変えられます。

5問目は見落とされがちです。Bのように写真の撮り方を受け継ぐなら、その撮り方の写真が必要です。手元に無ければ、撮影を誰がいつするかを先に決めます。撮り方のこつはHPの写真撮影ガイドにまとめています。

---

記入シートの例：工務店の担当者が書くと案Bになる

記入済みの例

5問の答えを、項目ごとに整理したのが次のシートです。項目は6つあり、それぞれ「受け継ぐ／どちらでも／避けたい」のどれかを選んで、理由を一言書きます。下の表は、工務店の担当者が書いた例です。

番号	項目	選んだもの	理由（一言）
1	配色	どちらでも	深緑でなくてよい。木の床の色が目立たなくなる色は避けたい
2	文字	どちらでも	読みやすければ任せる
3	余白	受け継ぐ	写真の周りが詰まっていないのがよい
4	写真	受け継ぐ	参考元の①のように、窓の光が入る部屋を引きで見せたい。いちばん大事
5	動き	避けたい	最初の画面の写真が次々に切り替わると落ち着かない
6	構成	どちらでも	施工事例が早めに出てくれば、順番は任せる
—	その他避けたい見た目	避けたい	スーツの人が握手している写真や、青空と家だけの写真のような、どの会社にもありそうな素材写真

記入から案Bになる流れ

制作側はこのシートを次のように読みます。

• 「受け継ぐ」が付いた項目のうち、「いちばん大事」とある4 写真を軸にする。参考元の①②③の撮り方に合わせる
• 3 余白も受け継ぐので、写真を画面いっぱいに置き、文字を詰め込まない
• 1 配色は「どちらでも」だが、理由に「木の床の色」とある。そこで深緑はやめ、写真を邪魔しない白と灰色にする
• 5 動きは避けたいので、最初の画面の写真は1枚で止める
• 6 構成は任されているので、施工事例を2段目に上げる

こうして、3案のうちBが初稿になります。シートが無ければ、AにもCにもなり得た依頼です。

「避けたい」の欄は、「安っぽい感じ」「ありきたり」のような言葉だけでは伝わりません。上の例のように、見ればそれと分かる見た目で書きます。

白紙のシート

次の表を写すか、表計算ソフトに貼り付けて使ってください。参考サイトが2つ以上あるときは、サイトごとに1枚書きます。

番号	項目	受け継ぐ／どちらでも／避けたい	理由（一言）
1	配色
2	文字
3	余白
4	写真
5	動き
6	構成
—	その他避けたい見た目

シートの上の余白には、参考サイトのURLと、5問の2番目で選んだ「いちばん外せないもの」を書いておきます。

---

初稿が違ったときの戻し方

「全体的に違う」の代わりに、番号で指す

初稿を見て違うと感じたら、まずシートを横に置いて、どの番号がずれているかを探します。

避けたい言い方	番号で指す言い方
全体的にイメージと違います	シートの4（写真）を「受け継ぐ」にしましたが、最初の画面の写真が家の外観の寄りになっています。参考元の①のように、部屋全体が入る引きの室内写真にしてください
もう少し明るい感じで	シートの1（配色）は「どちらでも」ですが、灰色の帯が写真の上に重なって木の床が暗く見えます。帯を外すか、白に近づけてください
なんだか落ち着かない	シートの5（動き）は「避けたい」です。最初の画面の写真が自動で切り替わっているので、1枚で止めてください

番号で指すと、制作側は直す場所をすぐに特定できます。どこまで直せば終わりかも、お互いに見えます。

シートどおりなのに違うと感じたら

初稿がシートどおりに作られているのに、それでも違うと感じることもあります。その場合は、シートのほうを書き直してから戻します。「4の写真は受け継ぐのままで、1の配色を『どちらでも』から『避けたい：白一色』に変えたい」のように、変えた項目を伝えます。初稿の後で希望が変わると、内容によっては追加の作業になることがあります。その考え方は制作途中の仕様変更と追加費用にまとめています。

準備全体は別の記事で

参考サイトをいくつ用意するか、同業でないサイトでもよいか、ほかに何を準備するかは、HP制作で準備するもの｜クライアント向けチェックリストにまとめています。

この記事のシートは、そのチェックリストで選んだ参考サイト1つずつに添えて使ってください。

書き終えたシートを持って依頼先を探している場合は、ホームページ制作のページも参考にしてください。