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