LP制作では、デザインに入る前にワイヤーフレーム（WF）を作成することがあります。
掲載する情報や順番、CTAの位置などを整理し、クライアント・ディレクター・デザイナー間の認識を合わせるための重要な設計資料です。
ただ、ワイヤーフレームを受け取ってデザインするときに、私が大切にしていることがあります。
ワイヤーフレームを、そのままきれいに清書することがデザインではないということです。
見出しがあるから大きな文字を置く。
画像の枠が3つあるから写真を3枚並べる。
ボタンがあるからブランドカラーのボタンを置く。
これだけでは、ワイヤーフレームに色や写真を付けただけになってしまいます。
大切なのは、ワイヤーフレームを作った人が、
「誰に、何を、どの順番で伝えようとしているのか」
を読み取ること。
そして、その設計意図をユーザーへより分かりやすく伝えるために、デザインとして再構成することです。
この記事では、支給されたワイヤーフレームからLPをデザインするときに、どのようなことを考えながら完成形へ落とし込んでいるのかを紹介します。
目次
ワイヤーフレームは「完成デザインの指示書」ではなく、設計意図を共有する資料
ワイヤーフレームには、LPを設計したディレクターや制作者の意図が含まれています。
たとえば、
- どんな情報を掲載するのか
- どの順番で伝えるのか
- どこで商品やサービスを理解してもらうのか
- どこで不安を解消するのか
- どこで実績や口コミを見せるのか
- どこからCTAへつなげるのか
といったことです。
そのため、ワイヤーフレームを軽視して、デザイナーが好きなようにレイアウトを変えてよいわけではありません。
むしろ、ワイヤーフレームに込められた設計意図を理解することが、デザインのスタート地点だと考えています。
配置ではなく「なぜそこにあるのか」を読む
「意図を守ること」と「配置をそのまま再現すること」は同じではありません。
たとえば、ワイヤーフレーム上で3つの情報が横並びになっていても、それは必ずしも「3つを同じ強さで見せてほしい」という意味ではないかもしれません。
見出しの下に画像が配置されていても、完成デザインでは写真とコピーを組み合わせた方が、意図が伝わることもあります。
ワイヤーフレームを見るときは、
「ここに何が置かれているか」だけでなく、「なぜ、この情報がここにあるのか」
まで考えます。
セクション単体ではなく、LP全体の流れから意図を読む
ワイヤーフレームの一部分だけを見ると、そのセクションの役割が分かりにくいことがあります。
そんなときは前後を見ます。
前のセクションでユーザーに何を伝えたのか。
このセクションでは何を理解・納得してもらいたいのか。
その次に、どんな情報へつなげようとしているのか。
LP全体のストーリーを見ることで、そのセクションが果たすべき役割が見えてくることがあります。
たとえば、
問題に気づいてもらう
→ 解決方法を提示する
→ 選ばれる理由を伝える
→ 不安を解消する
→ 行動してもらう
という流れが設計されているなら、各セクションのデザインにもそれぞれ異なる役割があります。
問題提起なら「気づき」を作る。
サービス紹介なら「理解」を作る。
実績なら「信頼」を作る。
CTAなら「行動」を後押しする。
すべてのセクションを同じテンション・同じレイアウトで整えるのではなく、その場所でユーザーに何を感じてもらう必要があるのかまで考えてデザインします。
ワイヤーフレームをそのまま清書すると、なぜ弱くなるのか
たとえば、次のようなワイヤーフレームがあったとします。
見出し
↓
説明文
↓
3つの特徴
↓
CTA
これをそのまま、
- 見出しを大きくする
- 説明文を読みやすくする
- 3つの特徴をカードにする
- CTAを目立つ色にする
と整えれば、見た目はきれいになります。
しかし、それだけで「伝わるLP」になるとは限りません。
WF上のサイズと、情報の重要度は同じではない
ワイヤーフレーム上のサイズや配置と、ユーザーに伝えるべき情報の重要度は必ずしも一致しません。
3つの特徴のうち、サービスを選ぶ決め手になるものが1つあるかもしれません。
説明文の中に、そのセクションで最も伝えたい言葉が含まれているかもしれません。
反対に、ワイヤーフレームでは大きなスペースを取っていても、完成デザインでは補足として見せた方がよい情報もあります。
「どう装飾するか」より「何を伝えるか」
だからデザインに入るときは、
「この枠をどう装飾しよう？」ではなく、「このセクションで一番伝えるべきことは何だろう？」
から考えます。
色や装飾、カードの形を考えるのは、その後です。
まず「一瞬で何を伝えるか」を決める
LPを訪れたユーザーが、最初からすべての文章を丁寧に読んでくれるとは限りません。
スクロールしながら、見出しや写真、大きな数字、目立つキーワードなどを拾いながらページを理解する人もいます。
だからこそ、デザインを始める前に、
「この画面を一瞬見た人に、最低限何が伝わればよいか」
を整理します。
たとえば住宅トラブルに対応するサービスなら、細かなサービス説明より先に、
「住宅に関するトラブルを解決するサービスであること」
「自分が抱えている問題に対応してくれそうなこと」
を理解してもらう必要があるかもしれません。
すべてを同じ強さで伝えようとすると、かえって何も目立たなくなります。
情報を増やすことと、情報が伝わることは別です。
画面の「主役」を決め、視線の順番を作る
LPには、目立たせたい要素がいくつも存在します。
人物写真。
商品。
キャッチコピー。
実績。
キャンペーン。
CTA。
しかし、これらをすべて大きくしてしまうと、ユーザーはどこから見ればよいのか分からなくなります。
すべてを目立たせると、何も目立たない
写真も大きい。
コピーも大きい。
数字も大きい。
CTAも大きい。
それぞれを個別に見ると目立っていても、画面全体では要素同士が競合してしまいます。
デザインでは「何を目立たせるか」と同時に、何を一段弱く見せるかも考える必要があります。
「主役 → コピー → 補足情報 → CTA」の流れを作る
たとえば、
① 主役
→ ② メインコピー
→ ③ 内容を補強する情報
→ ④ CTA
というように、視覚的な優先順位を作ります。
もちろん、この順番はLPやセクションによって変わります。
重要なのは、
「全部を目立たせる」のではなく、「どの順番で見てもらうか」を決めること。
デザインのジャンプ率や余白、写真の大きさなどは、そのために使います。
コピーも「文章」ではなく、ビジュアルとして設計する
ワイヤーフレームでは、コピーは文字として配置されていることがほとんどです。
しかし完成デザインでは、コピーそのものも重要なビジュアル要素になります。
コピーの中にも優先順位をつくる
たとえば、
「ご自宅にこんな異変はありませんか？」
というコピーがあったとします。
すべて同じ文字サイズで表示することもできます。
しかし、このセクションで「異変」という言葉が重要なら、
「異変」
だけサイズを変える。
色を変える。
改行位置を変える。
背景面を付ける。
写真と関係を持たせる。
といった方法で、文章の意味を視覚的にも伝えることができます。
使える方法は、
- サイズ差
- 太さ
- 色
- 改行
- 余白
- 下線
- 背景面
- 写真との重なり
- 周囲の装飾
などさまざまです。
単純に「見出しだから32px」と決めるのではなく、
このコピーの中で、一番伝えたい言葉は何なのか
まで考えます。
写真は「指定された場所に画像を置く」だけではない
ワイヤーフレームには、
「人物写真」
「商品画像」
「施工写真」
のように、画像の種類だけが指定されていることがあります。
しかし、同じ人物写真でも、選ぶ写真によってユーザーが受ける印象は大きく変わります。
写真にも役割を持たせる
人物であれば、
- 年代
- 性別
- 表情
- 視線
- ポーズ
- 服装
- 写真の向き
- 背景
などを考えます。
さらにデザイン上では、
- どこでトリミングするか
- コピーとどう関係させるか
- 背景として使うか
- 独立した写真として見せるか
- どの程度の面積を使うか
まで考える必要があります。
写真は、空いている場所を埋めるための素材ではありません。
「この写真を見た人に何を感じてもらいたいのか」まで含めて選ぶことが、LPのビジュアル設計につながります。
デザイン側で判断することと、確認することを切り分ける
支給されたワイヤーフレームから制作する場合、もうひとつ大切にしているのが、
「デザイン側で判断できること」と「ディレクターへ確認すべきこと」を切り分けることです。
すべてを確認すれば安全、というわけでもありません。
デザイナー側で判断できること
たとえば、
- 写真の大きさやトリミング
- 余白
- ジャンプ率
- カードなどの形
- 背景
- 装飾
- 要素の重なり
- コピー内の強弱
- 視線誘導
- SPでの見せ方
など、設計意図を変えない範囲のビジュアル表現については、デザイン側で考えられることが多くあります。
「この写真はこのサイズでよいですか？」
「ここはカードにしてよいですか？」
「この言葉だけ大きくしてよいですか？」
と、デザイン上の判断まで一つひとつ確認してしまうと、ディレクター側の確認作業が増え、制作も進みにくくなります。
デザイン表現として判断できる部分については、ワイヤーフレームの意図を理解したうえで、デザイナー側で考えて提案します。
ディレクターへ確認すべきこと
一方で、
- コピーそのものを変更する
- 情報を削除する
- 訴求軸を変える
- 情報の順序を大幅に変える
- CTAの内容を変える
- 決定済みの仕様を変更する
といった、設計や要件に関わる部分については確認します。
この線引きは大切です。
デザインで再構成することと、設計を勝手に変更することは別です。
ワイヤーフレームを尊重しながらも、デザイン側で考えられる部分までディレクターへ判断を戻さない。
そのバランスが、スムーズな制作進行にもつながると考えています。
ワイヤーフレームの粒度が違っても、まず意図を探す
案件によって、支給されるワイヤーフレームの粒度は異なります。
完成デザインに近いところまで細かく設計されている場合もあれば、掲載内容と大まかな配置だけが示されている場合もあります。
情報が少ない場合でも、すぐに「指定がないから分からない」と考えるのではなく、
- LP全体の目的
- ターゲット
- 前後のセクション
- 掲載されているコピー
- 商品やサービスの特徴
- 既存サイトやブランド
- 参考として共有されたデザイン
などから、まず意図を読み取ります。
そのうえで、デザイン側で補完できる部分は提案として形にする。
どうしても判断できない部分や、判断によって訴求そのものが変わってしまう部分だけ確認する。
完成形まで細かく指示してもらわなくても、設計意図を受け取ってビジュアルへ落とし込むことも、デザイナーの役割のひとつだと考えています。
PCデザインをそのままスマホへ縮小しない
PCとスマートフォンでも考え方は同じです。
PCで横に3つ並んでいるから、スマートフォンではそのまま縦に3つ並べる。
必ずしも、それが最適とは限りません。
SPでは情報の優先順位から再構成する
スマートフォンでは表示領域が狭くなり、ユーザーが一度に見られる情報量やスクロール量も変わります。
そのため、
- 最初に何を見せるか
- 写真とコピーの順番
- 文字のジャンプ率
- 情報量
- CTAの位置
- 余白
などを改めて考えます。
レスポンシブデザインは、PCデザインを小さな画面へ押し込む作業ではありません。
同じ設計意図を、異なる画面サイズでどう伝えるかを考える作業です。
「きれいに整っている」と「伝わる」は違う
余白を整える。
色を統一する。
写真をきれいに配置する。
もちろん、どれもデザインには必要です。
ただ、それだけでは十分ではありません。
すべての見出しが同じ大きさ。
すべてのカードが同じサイズ。
すべての写真が同じ比率。
すべての余白が均等。
きれいには整っていても、情報の強弱がなくなれば、ページ全体が平坦に見えてしまいます。
LPでは特に、
どこを読ませるのか。
どこで興味を持ってもらうのか。
どこで納得してもらうのか。
どこで行動してもらうのか。
を考えながら、サイズや余白、写真、コピーに強弱を作ります。
「整える」だけではなく、情報の意味に合わせて強弱を設計することが重要です。
良いLPデザインは、ワイヤーフレームから離れて見えても、意図には忠実
完成したデザインを見ると、
「ワイヤーフレームとレイアウトがかなり変わっている」
と感じることがあります。
しかし、それだけでワイヤーフレームを無視したことにはなりません。
掲載する情報、伝える順番、セクションの目的、CTAなどの設計意図を理解したうえで、それらがユーザーへより伝わるように再構成しているのであれば、ワイヤーフレームの役割をデザインへ正しく引き継げています。
反対に、ワイヤーフレームとほぼ同じレイアウトでも、情報の優先順位が伝わらず、ユーザーがどこを見ればよいのか分からなければ、設計意図を十分に表現できているとは言えません。
ワイヤーフレームの形に忠実であることより、ワイヤーフレームの意図に忠実であること。
そして、
ディレクターが設計した意図を受け取り、デザイン側で考えるべきところは考え、確認すべきところは確認しながら、ユーザーに伝わる完成形へ持っていく。
支給されたワイヤーフレームからLPをデザインするときは、この姿勢を大切にしています。
まとめ
ワイヤーフレームは、LP制作における重要な設計資料です。
だからこそ、その形をただ再現するのではなく、そこに込められた意図まで読み取る必要があります。
- このセクションは何のためにあるのか
- 前後のセクションとどうつながっているのか
- 一瞬で何を理解してほしいのか
- 画面の主役は何なのか
- どのコピーを強く見せるのか
- 写真にどんな役割を持たせるのか
- どの順番で視線を動かすのか
- デザイン側で判断できることは何か
- ディレクターへ確認すべきことは何か
- 最後にどんな行動へつなげるのか
こうしたことを考えながら、ワイヤーフレームの設計意図をビジュアルへ変換していく。
それが、ワイヤーフレームからLPデザインへ移るときに必要な工程だと考えています。
AUN Design Worksでは、ワイヤーフレーム支給でのLPデザインをはじめ、Webデザイン、コーディング、WordPress実装まで対応しています。
制作会社・広告代理店様からの案件単位でのご相談にも対応しております。
「ワイヤーフレームまでは社内で作成できるが、そこからデザインを任せられるパートナーを探している」
といった場合も、お気軽にご相談ください。