これまで、多くのランディングページ制作担当者の方とお話ししてきました。
その中で以下のような話を伺います。
- 「意思疎通ができておらず、ディレクターの意図がデザイナーに伝わっていない･･･」
- 「全体的に業務の効率化を図りたいが、各担当者間の連携が取れていない･･･」
また、デザイナーの方からはこのような意見をお聞きします。
- 「うちのディレクターは感覚的な説明しかしないので、わかりにくい・・」
- 「コミュニケーション不足で、修正作業がどうしても増えてしまう･･･」
お互いの言い分が食い違ってしまい、結果的に時間をかけているにもかかわらず、成果の出にくいランディングページが仕上がっているようです。
内部がこのような状態であれば、クライアントから急かされたり、責められたりと、心身ともに安定しないことでしょう。
では、なぜこのようなコミュニケーション・説明不足や担当者からの不満が生まれてしまうのでしょうか？
その理由として、「ワイヤーフレーム」が正しく活用されていないことが挙げられます。
WEBサイトのワイヤーフレーム
引用元：http://www.wireframeshowcase.com/wireframes/detail/tape_events
ワイヤーフレームとは、ランディングページやホームページを制作するときの設計図のようなもので、ディレクターやデザイナー、コーダーなどの担当者の橋渡しの役目を果たします。
この、ワイヤーフレームが使われていなかったり、適切に活用されていない現場では、
- 説明不足で修正作業が増えてしまう
- 制作に時間がかかりすぎてしまう
- クライントに急かされる
- もっと良い方法あるんじゃないか？と不満が勃発する
このような状態になってしまいます。
あなたが今後、このような状況に陥らないためにも、この記事では「ランディングページ制作におけるワイヤーフレームの活用法」を解説していきます。
最後まで読んでいただくことで、成果の出るランディングページを短時間で制作できるようになります。
また、今後担当者間のコミュニケーションミスも減り、円満な作業環境が整っていくでしょう。
目次
ワイヤーフレームとは何か
あなたはワイヤーフレームという言葉を聞いて、どのようなものかパッと思いつくでしょうか？
ワイヤーフレームとは、前述したようにWEBサイトの設計図のことです。
WEBサイトのワイヤーフレーム
引用元：http://www.wireframeshowcase.com/wireframes/detail/tape_events
ワイヤーフレームには、WEBサイトのどこにどのような情報を、どのような形で配置していくかを記します。
建物を建てる時に設計士の方が図面を引くように、WEBサイト制作する際にも設計図が必要になります。
もしもあなたがWEBサイトやランディングページを制作するときに、このワイヤーフレームを作らずに進めてしまうと、行き当たりばったりの作業になってしまいます。
後から帳尻合わせが必要になったり、修正回数が余計に増えてしまいます。
ワイヤーフレームがあることで、帳尻合わせや余計な修正は減りますし、担当者同士のコミュニケーションも円滑になります。
ぜひこの続きをご覧いただき、ワイヤーフレームの機能や作り方、使い方を試してみてください。
ワイヤーフレームの機能
ワイヤーフレームは一見、その後のサイト制作でミスをなくすためのツールだと思われがちです。
しかしこの認識は半分正解で半分間違っています。
なぜなら、ワイヤーフレームは成果の出るWEBサイトを制作するための「コミュニケーションツール」だからです。
通常WEBサイトやランディングページを制作する際、以下のような四者が関わります。
- クライアント
- ディレクター
- ライター
- デザイナー、コーダー
それぞれの役割が違うため、立場上の言い分などがあります。
その際、口先だけのコミュニケーションになってしまうと、WEBサイトやランディングページの完成段階で認識のズレなどが生じ、何度も修正する羽目になってしまいます。
一方、ワイヤーフレームがあることで、工程途中でも「仕上がりはこんな風ですよ！」と、チラっと見せるだけでもイメージを共有できるので、コミュニーケーションミスや余計な修正を減らすことができます。
この節でお伝えしたように、ワイヤーフレームは単なるサイト設計ツールではなく、コミュニケーションを円滑にし、成果の出るサイトやランディングページを短時間で作るためのツールなのです。
ワイヤーフレームの事例
ここまでご覧いただき、「で、ワイヤーフレームってどんなものなんだ？」と思ったことでしょう。
参考までに、以下のふたつの事例をご覧ください。
海外でワイヤーフレームを公開しているサイトになります。
ランディングページにおけるワイヤーフレームとは
ここまで、WEBサイト全般のワイヤフレームの解説を行なってきました。
一方、この記事のメインとなる、「ランディングページのワイヤーフレーム」とはどのようなものなのかをこの章で解説します。
はじめに、以下の図をご覧ください。
ランディングページのワイヤーフレームの事例となります。
ランディングページのワイヤーフレームはどうしても、縦長になってしまいます。
そのため、情報量が増えてしまい、見る人によっては収集がつかないこともあります。
そこで、ランディングページのワイヤーフレームを作るときのポイントとして、以下の四者が確認したときに、疑問が出ないようにしておきましょう。
- クライアント
- ディレクター
- ライター
- デザイナー、コーダー
例えば、図のように各項目ごとに注意書きを行うなど、ちょっとした工夫でコミュニケーションミスをなくすことができます。
自分から別の担当者にワイヤーフレームを渡すときに、疑問に思う点はないかなど、相手の気持ちになって作成することが大切です。
ランディングページのワイヤーフレーム設計術
それでは、実際にランディングページのワイヤーフレームを作成していきます。
手順としましては、次の三つのステップを踏みます。
- ユーザー心理を把握し、レイアウトを決める
- 手書きで下書きする
- ツールでデザインを含んだワイヤーフレームを作る
それでは、ひとつひとつポイントを解説していきます。
ユーザー心理を把握し、レイアウトを決める
ランディングページはコンバージョンすることを目的としています。
つまり、できるだけ外部のページへ離脱させたくありません。
そのため、どうしても単一の縦長のページに情報を詰め込む必要が出てきます。
ランディングページとは？正しい知識を身につけた上で制作会社に依頼しよう！
その際、気をつけなければならないのが、ユーザーの欲しがる情報をどの順番で伝えるかです。
例えば、ユーザーは一辺倒な情報ではなく、以下のようなあらゆる情報が欲しいはずです。
- どんなベネフィットがあるか
- どんな特徴があるか
- どんな時に使うのか
- サポートはあるか
- 使用方法
- 初心者でも使えるか
- 誰が作ったものか
しかし、いきなりユーザーの思想や認識について否定してしまっては、続きを読む気がなくなってしまいます。
続きを読んでもらうには、ユーザーの心理に対して共感し、「このページ読んでみようかな？」と思ってもらうことが大切です。
上記の事例のように、どんな情報をどのような順番で配置すれば、効果的なのかを考えなければなりません。
他にも、以下の図はユーザーの目線の動きで有名な「Zの法則」と「Fの法則」を表した図になります。
文章だけでなく、上記のような「色彩やデザインがユーザーにもたらす影響」を知っておくことで、より良いワイヤーフレームになっていきます。
以下の記事では、ユーザーの心理を把握するために欠かせない、ターゲット選定や訴求ポイントの決定方法についてお伝えしています。ぜひご覧ください。
反応率がアップする！ランディングページの訴求ポイントとターゲットの選定方法
手書きで下書きする
ユーザー心理を元に、情報のレイアウトが完成したら、手書きで清書を行いましょう。
ワイヤーフレームを作成する上で気をつけて欲しいのは、「最初から完璧なものを作ろうとしないこと」です。
ワイヤーフレームを作っている途中で「あ、この情報載せるの忘れてた･･･！」や「あ、余白が足りない･･･。」といった状態になるかもしれません。
情報は途中で追加されたり、削除されたりするものです。
そこで手書きで書くことによって、情報の追加や削除をしやすくしていきます。
何度も修正を繰り返しながら、完成に近づけていきましょう。
以下のツールを使うことで、手書きでも簡単にランディングページのワイヤーフレームを作ることができます。
http://www.raincreativelab.com/paperbrowser/
ツールでデザインを含んだワイヤーフレームを作る
手書きが終了したら、清書を行います。
以下のようなツールを使い、デザインを含んだワイヤーフレームを作成します。
完成したら、共有を行いましょう。
ワイヤーフレーム設計の際のポイント
ワイヤーフレーム作成の際のポイントとしては、必ず以下の順番で情報配置・デザインを行うことです。
- 大枠（順番）
- 項目（中身）
- 詳細
大枠から進めていき、詳細を詰めることで、大枠の変更をすることはなくなるので、「一からやり直し」という事態を避けることができます。
また、ワイヤーフレームが少しでも完成に近づいてきたら、早い段階で各担当者と共有しておきましょう。
擦り合わせを行ないながら、ワイヤーフレームを作ることで、デザインの出戻りを減らし、時間短縮に努めることができます。
短時間で成果の出るランディングページを作るには
ランディングページ制作で求められることは、短時間で成果の出るランディングページを制作することです。
多くの場合、スピードを求めるあまり、コミュニケーションや準備の量を減らしてしまいます。
しかし、前述したようにコミュニケーションが足りないと、あとでやり直しが多くなってしまい、結果的に非効率になってしまいます。
そこでこの章では、短時間で成果の出るランディングページを制作するための準備方法や小技をお伝えしていきます。
ぜひ現場で試してみてください。
成果実証済みの型を事前に準備しておく
ひとつ目のポイントは「成果実証済みの型を事前に準備しておく」ということです。
例えば、ランディングページのコンテンツ構成について、以下のような型があります。
「これを使っておけば、間違いない！」という型を持っておくだけで、一から情報配置の順番を考える時間が必要ないので、時間短縮できます。
また、すでに成果が出ている型なので、ある程度の成果を期待できる安心感も担保されます。
ながら制作をしない
ふたつ目のポイントは「ながら制作をしない」ということです。
よく、ワイヤーフレームを作りながらコーディングを行なっているところを見かけます。
しかし、このようながら制作は、以下のふたつの理由でオススメしません。
- クライアントやディレクターに制作したページを見せると、フィードバックの項目が多くなってしまう
- 行き当たりばったりになるので、企画や成果の精度が落ちる
例えば、スポーツでは、ウォーミングアップをしながら試合を行うことはありませんし、料理では、下ごしらえをしながら盛り付けをすることはありません。
同様にランディングページ制作でも、準備と制作を分けることで初めて成果の出るページが仕上がります。
慣れていな方にとっては、多少面倒臭いかもしれませんが、制作後のフィードバックや修正作業のことを考えると、準備に時間をかけておいた方が良いのは明白です。
事前の打ち合わせに時間をかける
「ながら制作」をしないに関連しますが、「事前の打ち合わせに時間をかける」ことも重要です。
例えば、以下のようなヒアリングを行なっておくことで、ズレを減らすことができます。
- ターゲット
- ページの雰囲気
- 心理的なハードルを下げる工夫
- 原稿内でわからない部分
- どのようなサイトをイメージして原稿を仕上げたか
打ち合わせに時間をかけることで、意図やイメージの共有ができます。
このポイントも面倒臭いですが、後先のことを考えると外せないポイントとなります。
まとめ
「意図が伝わっていなくて、泣きそうになる･･･。」
「修正が多すぎて、先に言っておけよ！と思ってしまう･･･。」
このようにならないよう、少しでも楽に作業できるように、ぜひワイヤーフレームや打ち合わせなど、準備に力を入れてみてください。
必ず、成果の出るランディングページを短時間で作れるようになります。
