ホームページのデザイン案は全体3案より「重要な場所だけ3案」｜迷わず決める進め方

ホームページやLPの制作を依頼すると、「デザイン案を何案か出してもらえますか」というやりとりが必ず発生します。発注者としては複数案から選びたい。制作側は案を増やすほど工数が膨らむ。この綱引きの落とし所を間違えると、選ぶ側も作る側も消耗します。

結論から書きます。デザイン案は「ページ全体を3案」ではなく、「重要なセクションだけ、方向性の違う3案」でもらうのが正解です。 最初に作るのはファーストビュー（ページを開いて最初に見える画面）だけ。そこで方向性を1つ選んだら、次のセクションをまた複数案、と上から順に決めていきます。

弊社はこの方式を、自社サイトのリニューアルと受託案件の両方で標準にしています。この記事では、なぜ全体3案がうまくいかないのか、セクション別3案をどう依頼してどう選べばいいのかを、実際に回した案件の進め方とあわせて説明します。

なぜ「ページ全体を3案」はうまくいかないのか

全体3案が機能しない理由は、大きく3つあります。

1つ目は、1案あたりが浅くなることです。 制作側の時間は有限なので、ページ全体を3案作れば、1案に掛けられる作り込みは単純計算で3分の1になります。トップページが8セクションあるとして、8セクション×3案＝24画面分。これを本気で作り込める見積になっていることは、まずありません。結果、どの案も「ラフの寄せ集め」になり、発注者は浅い3案から選ばされることになります。

2つ目は、どこを見て選べばいいかわからないことです。 全体案Aはファーストビューが良いが料金表が見にくい。案Bは逆。こうなった瞬間に「Aのここと、Bのここを組み合わせて」という折衷の依頼が始まります。デザインはセクションごとの寄せ集めではなく全体のトーンで成立しているので、折衷案はたいてい元のどの案よりも悪くなります。そして折衷を繰り返すほど、修正回数だけが消化されていきます。

3つ目は、選ばれなかった2案が丸ごと捨てられることです。 全体3案のうち2案分の作業は、選定の瞬間にゼロになります。この無駄は最終的に見積に乗ってくるか、1案あたりの品質低下として発注者に返ってきます。

セクション別3案の進め方｜実案件での実例

弊社が実際に回している進め方は、次の通りです。

工程	内容
1	ファーストビューだけ、方向性の違う3案を作る
2	発注者が1案を選ぶ（必要なら選んだ案への修正指示を添える）
3	選ばれた方向性を基調として実装・確定する
4	次のセクションをまた複数案作り、選ぶ。以下、上から順に繰り返す

実例1：自社サイトのリニューアル

弊社サイトのトップページを全面リニューアルしたときは、まずファーストビューだけを3案作りました。3案は配色違いではなく、参照する世界観そのものを変えています。巨大な文字が写真に食い込むエディトリアル型、プロダクトを正面から見せる型、余白で見せる型。ここで1案が選ばれ、その基調をサイト全体のトーンとして確定させました。

次に統計数字を見せるセクションを2案（明るい面に置く案と、暗い色の帯に置く案）、その次に会社紹介、強みの一覧、と上から順に選定を繰り返しました。このとき起きたことが、この方式の価値をよく表しています。発注側の判断が、案を選ぶだけでなく「選んだ案への具体的な改修指示」まで一度に出たのです。 「小さい写真を置くのは中途半端だから、巨大な文字で写真を切り抜く表現に変えてほしい」「筆頭に置く数字はこちらの数字に差し替えたい」。比較対象が目の前に並んでいるから、要望が具体化します。全体ラフを前にした「もう少し高級感を」のような曖昧な指示が出なくなるのは、判断する範囲が絞られているからです。

実例2：業務ツールの販売LP

美容室向けの業務ツールの販売LPでは、ファーストビューの3案を「実写写真を主役にしたエディトリアル型」「暗い背景に管理画面のUIを見せるプロダクト型」「実績数値を極大サイズで見せる数値主導型」という3方向で作りました。

ここで重要なのは、3案で変えたものと、固定したものを最初に分けたことです。キャッチコピー、ヘッダー、配色のベースとなる色、掲載する実績数値は3案とも共通。変えたのは「何を主役に据えるか」だけです。変数を絞ってあるから、発注者は「写真で信頼を作るのか、画面で機能を伝えるのか、数字で実績を押すのか」という一点だけを判断すればよくなります。逆にコピーも色も写真も全部違う3案を並べると、何を比べているのかわからなくなり、選定は「なんとなくの好み」に落ちます。

この案件ではプロダクト型が選ばれ、その方向で実装を確定させてから、次のセクション（課題提起）の複数案に進みました。

実例3：革製品ブランドのブランドサイト

映像を使ったブランドサイトでは、3案を静止画で並べるのではなく、同じURLで画面上のA/B/Cボタンを押すと即時に切り替わる比較ページを作りました。ファーストビューに動画やアニメーションが入る案件では、静止画のスクリーンショットだけで比較すると動きの印象が判断材料から抜け落ちるためです。

この案件でもA案が選ばれ、B/Cの切替機能を外してA案をサイトの基調に固定し、次のセクションの3案へ進みました。切替UIまで作るかどうかは案件規模によりますが、「動きが本質の案件は、動く状態で比較する」という原則は費用に関係なく守る価値があります。

なぜファーストビューから始めるのか

最初の3案をファーストビューに限定するのには、明確な理由があります。ファーストビューはページの「基調」が決まる場所だからです。 使う書体のサイズ感、写真の扱い方、余白の量、色の面積比。ここで決まったトーンが、下のすべてのセクションに波及します。

逆に言えば、ファーストビューさえ決まれば、以降のセクションは「決まった基調の中でのバリエーション」になるので、3案も必要ないことが多い。実際、弊社の自社サイトでも2セクション目以降は2案で十分でした。判断の重い場所に選択肢を集中させ、軽い場所は絞る。 これが発注者の判断疲れを防ぎ、制作側の工数を本当に効く場所に集める配分です。

発注者側の依頼の仕方と選び方

この方式は、発注者側から指定することもできます。依頼時に伝えるのは次の3点です。

• 「全体のデザイン案は不要です。まずファーストビューだけ、方向性の違う案を3つ見せてください」
• 「キャッチコピーと色は共通にして、見せ方の方向性だけ変えてください」
• 「1案選んだら、その方向で次のセクションに進んでください」

選ぶときの基準は「どれが好きか」ではなく、「このページで一番伝えたいことを、一番強く伝えているのはどれか」 です。写真の空気感で選びたくなっても、伝えるべきものが実績の数字なら数値主導の案が正しい、ということが起こります。選定の前に「誰に・何を一番伝えるページか」を一文で確認しておくと、社内で意見が割れたときも好みの争いにならずに済みます。

もうひとつ。選んだ案に対する修正要望は出して構いませんが、「A案をベースに、B案のここも足して」という折衷は1点までに絞るのが安全です。折衷が2点3点と増えると、全体3案のときと同じ泥沼に戻ります。

起こりうるつまずきと、先回りの防ぎ方

この方式にも、設計を誤ると効かなくなるポイントがあります。先に潰しておきます。

3案が同じ方向に寄ってしまう。 制作側に任せきりにすると、実質「色違いの3案」が出てくることがあります。防ぐには、依頼時に「実写主導・UI主導・数字主導のように、主役を変えた3案で」と軸のレベルで指定することです。軸が違う3案は、並べた瞬間に議論が立ち上がります。

アニメーションの途中で比較してしまう。 ファーストビューに表示アニメーションが入っている場合、表示途中のスクリーンショットは要素が半透明で「レイアウトが崩れている」ように見えることがあります。比較用の画面は、アニメーションが完了した最終状態で揃えるよう制作側に依頼してください。未完成に見える案を実力で判断してしまう事故を防げます。

選定者を決めずに始めてしまう。 セクションごとに選定が発生する方式なので、毎回合議にすると進行が止まります。最終決定者を1人決めておき、その人が各セクションの案を選ぶ。関係者の意見は決定者への参考意見として集約する。この体制を最初に組んでおくと、選定1回あたりは数分で終わります。

まとめ

デザイン案の出し方・選び方を整理します。

• 全体を3案もらう方式は、1案が浅くなる・選定基準が立たない・捨てる作業が多い、の三重で不利
• まずファーストビューだけ、主役の違う3案。選んだら次のセクションへ、が判断も工数も集中する進め方
• 3案は「方向性」を変え、コピー・色・掲載情報は固定して変数を絞る
• 選ぶ基準は好みではなく「一番伝えたいことを一番強く伝えている案」
• 折衷は1点まで。動きのある案は動く状態で比較。決定者は1人

デザイン案の数は、多ければ安心というものではありません。判断の重い場所に、質の高い選択肢を少数並べる。 それが発注者が迷わず決められて、制作側の力もページに残る進め方です。デザイン案の出し方から相談したい方は、お問い合わせフォームからご連絡ください。