1. TOP
  2. 現場のプロが教える!短時間でランディングページのワイヤーフレームを設計する方法

現場のプロが教える!短時間でランディングページのワイヤーフレームを設計する方法

ランディングページ  

これまで、多くのランディングページ制作担当者の方とお話ししてきました。

その中で以下のような話を伺います。

「意思疎通ができておらず、ディレクターの意図がデザイナーに伝わっていない・・・」

「全体的に業務の効率化を図りたいが、各担当者間の連携が取れていない・・・」

また、デザイナーの方からはこのような意見をお聞きします。

「うちのディレクターは感覚的な説明しかしないので、わかりにくい・・」

「コミュニケーション不足で、修正作業がどうしても増えてしまう・・・」

お互いの言い分が食い違ってしまい、結果的に時間をかけているにもかかわらず、成果の出にくいランディングページが仕上がっているようです。

内部がこのような状態であれば、クライアントから急かされたり、責められたりと、心身ともに安定しないことでしょう。

では、なぜこのようなコミュニケーション・説明不足や担当者からの不満が生まれてしまうのでしょうか?

その理由として、「ワイヤーフレーム」が正しく活用されていないことが挙げられます。

ワイヤーフレーム事例

WEBサイトのワイヤーフレーム

引用元:http://www.wireframeshowcase.com/wireframes/detail/tape_events

ワイヤーフレームとは、ランディングページやホームページを制作するときの設計図のようなもので、ディレクターやデザイナー、コーダーなどの担当者の橋渡しの役目を果たします。

この、ワイヤーフレームが使われていなかったり、適切に活用されていない現場では、

  • 説明不足で修正作業が増えてしまう
  • 制作に時間がかかりすぎてしまう
  • クライントに急かされる
  • もっと良い方法あるんじゃないか?と不満が勃発する

このような状態になってしまいます。

あなたが今後、このような状況に陥らないためにも、この記事では「ランディングページ制作におけるワイヤーフレームの活用法」を解説していきます。

最後まで読んでいただくことで、成果の出るランディングページを短時間で制作できるようになります。

また、今後担当者間のコミュニケーションミスも減り、円満な作業環境が整っていくでしょう。

ワイヤーフレームとは何か

あなたはワイヤーフレームという言葉を聞いて、どのようなものかパッと思いつくでしょうか?

ワイヤーフレームとは、前述したようにWEBサイトの設計図のことです。

ワイヤーフレーム事例

WEBサイトのワイヤーフレーム

引用元:http://www.wireframeshowcase.com/wireframes/detail/tape_events

ワイヤーフレームには、WEBサイトのどこにどのような情報を、どのような形で配置していくかを記します。

建物を建てる時に設計士の方が図面を引くように、WEBサイト制作する際にも設計図が必要になります。

もしも、あなたがWEBサイトやランディングページを制作するときに、このワイヤーフレームを作らずに進めてしまうと、行き当たりばったりの作業になってしまいます。

後から帳尻合わせが必要になったり、修正回数が余計に増えてしまいます。

ワイヤーフレームがあることで、帳尻合わせや余計な修正は減りますし、担当者同士のコミュニケーションも円滑になります。

ぜひこの続きをご覧いただき、ワイヤーフレームの機能や作り方、使い方を試してみてください。

ワイヤーフレームの機能

ワイヤーフレームは一見、その後のサイト制作でミスをなくすためのツールだと思われがちです。

しかし、この認識は半分正解で半分間違っています。

なぜなら、ワイヤーフレームは成果の出るWEBサイトを制作するための「コミュニケーションツール」だからです。

通常WEBサイトやランディングページを制作する際、以下のような四者が関わります。

  1. クライアント
  2. ディレクター
  3. ライター
  4. デザイナー、コーダー

それぞれの役割が違うため、立場上の言い分などがあります。

その際、口先だけのコミュニケーションになってしまうと、WEBサイトやランディングページの完成段階で認識のズレなどが生じ、何度も修正する羽目になってしまいます。

一方、ワイヤーフレームがあることで、工程途中でも「仕上がりはこんな風ですよ!」と、チラっと見せるだけでもイメージを共有できるので、コミュニーケーションミスや余計な修正を減らすことができます。

この節でお伝えしたように、ワイヤーフレームは単なるサイト設計ツールではなく、コミュニケーションを円滑にし、成果の出るサイトやランディングページを短時間で作るためのツールなのです。

ワイヤーフレームの事例

ここまでご覧いただき、「で、ワイヤーフレームってどんなものなんだ?」と思ったことでしょう。

参考までに、以下のふたつの事例をご覧ください。

海外でワイヤーフレームを公開しているサイトになります。

ランディングページにおけるワイヤーフレームとは

ここまで、WEBサイト全般のワイヤフレームの解説を行なってきました。

一方、この記事のメインとなる、「ランディングページのワイヤーフレーム」とはどのようなものなのかをこの章で解説します。

はじめに、以下の図をご覧ください。

ランディングページのワイヤーフレームの事例となります。

ランディングページのワイヤーフレーム例

ランディングページのワイヤーフレームはどうしても、縦長になってしまいます。

そのため、情報量が増えてしまい、見る人によっては収集がつかないこともあります。

そこで、ランディングページのワイヤーフレームを作るときのポイントとして、以下の四者が確認したときに、疑問が出ないようにしておきましょう。

  1. クライアント
  2. ディレクター
  3. ライター
  4. デザイナー、コーダー

例えば、図のように各項目ごとに注意書きを行うなど、ちょっとした工夫でコミュニケーションミスをなくすことができます。

自分から別の担当者にワイヤーフレームを渡すときに、疑問に思う点はないかなど、相手の気持ちになって作成することが大切です。

ランディングページのワイヤーフレーム設計術

それでは、実際にランディングページのワイヤーフレームを作成していきます。

手順としましては、次の三つのステップを踏みます。

  1. ユーザー心理を把握し、レイアウトを決める
  2. 手書きで下書きする
  3. ツールでデザインを含んだワイヤーフレームを作る

それでは、ひとつひとつポイントを解説していきます。

ユーザー心理を把握し、レイアウトを決める

ランディングページはコンバージョンすることを目的としています。

つまり、できるだけ外部のページへ離脱させたくありません。

そのため、どうしても単一の縦長のページに情報を詰め込む必要が出てきます。

ランディングページとは?正しい知識を身につけた上で制作会社に依頼しよう!

その際、気をつけなければならないのが、ユーザーの欲しがる情報をどの順番で伝えるかです。

例えば、ユーザーは一辺倒な情報ではなく、以下のようなあらゆる情報が欲しいはずです。

  • どんなベネフィットがあるか
  • どんな特徴があるか
  • どんな時に使うのか
  • サポートはあるか
  • 使用方法
  • 初心者でも使えるか
  • 誰が作ったものか

しかし、いきなりユーザーの思想や認識について否定してしまっては、続きを読む気がなくなってしまいます。

続きを読んでもらうには、ユーザーの心理に対して共感し、「このページ読んでみようかな?」と思ってもらうことが大切です。

上記の事例のように、どんな情報をどのような順番で配置すれば、効果的なのかを考えなければなりません。

他にも、以下の図はユーザーの目線の動きで有名な「Zの法則」「Fの法則」を表した図になります。

Zの法則、Fの法則

文章だけでなく、上記のような「色彩やデザインがユーザーにもたらす影響」を知っておくことで、より良いワイヤーフレームになっていきます。

以下の記事では、ユーザーの心理を把握するために欠かせない、ターゲット選定や訴求ポイントの決定方法についてお伝えしています。ぜひご覧ください。

反応率がアップする!ランディングページの訴求ポイントとターゲットの選定方法

手書きで下書きする

ユーザー心理を元に、情報のレイアウトが完成したら、手書きで清書を行いましょう。

ワイヤーフレームを作成する上で気をつけて欲しいのは、「最初から完璧なものを作ろうとしないこと」です。

ワイヤーフレームを作っている途中で「あ、この情報載せるの忘れてた・・・!」「あ、余白が足りない・・・。」といった状態になるかもしれません。

情報は途中で追加されたり、削除されたりするものです。

そこで手書きで書くことによって、情報の追加や削除をしやすくしていきます。

何度も修正を繰り返しながら、完成に近づけていきましょう。

以下のツールを使うことで、手書きでも簡単にランディングページのワイヤーフレームを作ることができます。

http://www.raincreativelab.com/paperbrowser/

ツールでデザインを含んだワイヤーフレームを作る

手書きが終了したら、清書を行います。

以下のようなツールを使い、デザインを含んだワイヤーフレームを作成します。

完成したら、共有を行いましょう。

ランディングページのワイヤーフレーム例

ワイヤーフレーム設計の際のポイント

ワイヤーフレーム作成の際のポイントとしては、必ず以下の順番で情報配置・デザインを行うことです。

  1. 大枠(順番)
  2. 項目(中身)
  3. 詳細

大枠から進めていき、詳細を詰めることで、大枠の変更をすることはなくなるので、「一からやり直し」という事態を避けることができます。

また、ワイヤーフレームが少しでも完成に近づいてきたら、早い段階で各担当者と共有しておきましょう。

擦り合わせを行ないながら、ワイヤーフレームを作ることで、デザインの出戻りを減らし、時間短縮に努めることができます。

短時間で成果の出るランディングページを作るには

ランディングページ制作で求められることは、短時間で成果の出るランディングページを制作することです。

多くの場合、スピードを求めるあまり、コミュニケーションや準備の量を減らしてしまいます。

しかし、前述したようにコミュニケーションが足りないと、あとでやり直しが多くなってしまい、結果的に非効率になってしまいます。

そこでこの章では、短時間で成果の出るランディングページを制作するための準備方法や小技をお伝えしていきます。

ぜひ現場で試してみてください。

成果実証済みの型を事前に準備しておく

ひとつ目のポイントは「成果実証済みの型を事前に準備しておく」ということです。

例えば、ランディングページのコンテンツ構成について、以下のような型があります。

鉄板の型を用意しておく

「これを使っておけば、間違いない!」という型を持っておくだけで、一から情報配置の順番を考える時間が必要ないので、時間短縮できます。

また、すでに成果が出ている型なので、ある程度の成果を期待できる安心感も担保されます。

ながら制作をしない

ふたつ目のポイントは「ながら制作をしない」ということです。

よく、ワイヤーフレームを作りながらコーディングを行なっているところを見かけます。

しかし、このようながら制作は、以下のふたつの理由でオススメしません。

  1. クライアントやディレクターに制作したページを見せると、フィードバックの項目が多くなってしまう
  2. 行き当たりばったりになるので、企画や成果の精度が落ちる

例えば、スポーツでは、ウォーミングアップをしながら試合を行うことはありませんし、料理では、下ごしらえをしながら盛り付けをすることはありません。

同様にランディングページ制作でも、準備と制作を分けることで初めて成果の出るページが仕上がります。

慣れていな方にとっては、多少面倒臭いかもしれませんが、制作後のフィードバックや修正作業のことを考えると、準備に時間をかけておいた方が良いのは明白です。

事前の打ち合わせに時間をかける

「ながら制作」をしないに関連しますが、「事前の打ち合わせに時間をかける」ことも重要です。

例えば、以下のようなヒアリングを行なっておくことで、ズレを減らすことができます。

  • ターゲット
  • ページの雰囲気
  • 心理的なハードルを下げる工夫
  • 原稿内でわからない部分
  • どのようなサイトをイメージして原稿を仕上げたか

打ち合わせに時間をかけることで、意図やイメージの共有ができます。

このポイントも面倒臭いですが、後先のことを考えると外せないポイントとなります。

まとめ

「意図が伝わっていなくて、泣きそうになる・・・。」

「修正が多すぎて、先に言っておけよ!と思ってしまう・・・。」

このようにならないよう、少しでも楽に作業できるように、ぜひワイヤーフレームや打ち合わせなど、準備に力を入れてみてください。

必ず、成果の出るランディングページを短時間で作れるようになります。


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

無料E-BOOK|0から始めるワードプレスマーケティング実践ガイド

0から始めるワードプレスマーケティング
このE-BOOKは次のようなノウハウをお伝えしています。

  •  ・ワードプレスブログを立ち上げてから、実際にビジネスに繋げる方法
  •  ・ブログを使った集客方法の全体像
  •  ・ブログやメルマガなど、様々なツールをより効果的に使いこなす方法

以下のボタンからダウンロードしてください。

ダウンロードする