ランディングページを制作する際に重要となる要素はいくつかありますが、制作を円滑にし、理想的なサイトを効率的に作り上げるために欠かせないものとして「ワイヤーフレーム」の存在が挙げられます。
ワイヤーフレームはいわばサイトの設計書です。制作に関わる人全てが共有できる完成形の青写真であり、同時に各工程担当者間のコミュニケーションツールとも言えます。ワイヤーフレームを軽視していると全体の意思疎通が図れず、制作目的を見失って見当違いなページが出来上がってしまうことも…。
制作意図を欠いたページを作って何度も修正依頼をされているようでは、クライアントの満足度も下がってしまうでしょう。ここでは、すぐれたワイヤーフレームの作り方とともに、よりスピーディーで効率的なワイヤーフレーム作りのコツやお勧めツールもご紹介します。
この記事を読んだらわかること
・ワイヤーフレームの作り方
・ワイヤーフレームを作るためのツール
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
ワイヤーフレームとは？
ワイヤーフレームとは、先ほども述べたように設計書のことです。いわば、完成予想図です。「このコンテンツはこの位置にこんな感じで入れたい」といったレイアウト計画を一目瞭然にします。また、より良い完成形を目指すためのコミュニケーションツールの役割もあり、ワイヤーフレームを基に制作各担当者が意見を出し合うこともできます。
例えば、建築現場では、基礎や骨組みを造る人・内装をする人・電気を通す人などが別々に作業をしますが、設計図がなければ、そもそも何を造っているのかさえ理解できませんよね。
ランディングページ制作も同じように、主にディレクター・デザイナー・ライター・コーダーが携わります。これらのスタッフが全員共通の認識を持てるワイヤーフレームなしでは、一本筋の通ったページを作り上げることが困難になるのです。
ランディングページとホームページのワイヤーフレームの違い
ワイヤーフレームにはカラム（列）のレイアウト方法によってさまざまな種類があります。主なものにワンカラム・ツーカラムがあり、それぞれ前者はランディングページに、後者はホームページなどに多用されます。
ワンカラムは太いボーダー柄のようにコンテンツが配してある1ページ構成の単純な造りで、画面が細分化されていないのが特徴です。デザインの自由度が高い点が大きなメリットで、広い面積を使い、商材の魅力を伝える画像・動画・文章をわかりやすくレイアウトすることができます。
ホームページで使われるツーカラムはメインコンテンツの横にサイドバーがレイアウトしてあるタイプ。ページ数・情報量が多く、内容が複雑化しがちなホームページに最適です。
細かな情報に気が散らず、扱われている商材の情報に対してユーザーが集中し、なおかつ購買行動や問い合わせといったコンバージョンに移行しやすいという意味では、ランディングページにはワンカラムが最も好都合と言えます。
ランディングページのワイヤーフレームの作り方
ここではランディングページ制作初心者の方のために、ワイヤーフレームの作り方をわかりやすく解説します。また、制作会社にランディングページの制作依頼を検討されている方も、予備知識としてご活用ください。ご紹介する作り方の手順は以下の通りです。
3C分析を実践して情報を整理
ユーザー心理を理解し、ストーリーを企画構成
レイアウトを決め、ワイヤーフレームを制作
それでは早速、それぞれの手順を見ていきましょう。
STEP1.3C分析を実践して情報を整理
ワイヤーフレームを制作するための準備段階として、3C分析による情報整理は不可欠です。3C分析とは、3つのC（Customer＝市場・顧客/Competitor＝競合/Company＝自社）のことで、それぞれのCの現況を細やかに情報収集して整理し、その業界の市場規模やニーズ、さらに展望などを見きわめる作業です。
3C分析を丁寧に行うことで、競合他社がどのくらいいて、どの社にどんな強みや弱みがあるのかを知り、同時に自社が競合に競り勝てるポイントを浮き彫りにすることができます。また、ユーザーのニーズを理解することで、次の工程であるストーリー設計を円滑にします。
STEP2.ユーザー心理を理解し、ストーリーを企画構成
情報をとりまとめたら、次はストーリー作りとも言うべき企画構成に入ります。ランディングページには「結・起・承・転」と呼ばれる独特なストーリー展開が求められますが、これはページの冒頭画面でいきなり商材の効果を知りたいというユーザーの欲求を満たすためです。
冒頭画面である「ファーストビュー」を一瞬目にしただけで、ユーザーはそのページを読み進めるか離脱するかを決めると言われており、ユーザーがどんな「結」を求めてページを見にくるかを徹底的に分析する必要があります。
この分析を的確に行うには、ユーザーの背景・人となり・生活環境・悩みなどをとことん推理することが重要です。ユーザーの心理に寄り添うことで、ランディングページに必要なコンテンツやストーリーが読めてきます。企画構成はランディングページ制作の根幹であり、最も重要な部分です。納得が行くまで練り直すことをお勧めします。
参考：ランディングページ制作で最も重要な工程は企画構成（設計）｜5つのポイントも解説
参考：【ランディングページの構成】売れるストーリー設計と9つの要素
STEP3.レイアウトを決め、ワイヤーフレームを制作
企画構成さえできてしまえば、後は技術者を動員してワイヤーフレームを制作していきます。この前段階である企画構成（設計）がきちんとできていれば、ワイヤーフレーム制作はスムーズに進行します。ワイヤーフレーム作りは専門担当者が素早く行うことが重要です。こうすることで、後の工程も含めて全体をテンポ良く仕上げられ、クライアントの満足度も高められるでしょう。
ワイヤーフレームは、企画構成をデザインに落とし込むための設計書です。レイアウトを決め、参考画像や参考サイトなどを共有し、イメージ通りのデザインに仕上がるよう設計することが重要です。このワイヤーフレームが、企画構成をイメージ通り形にできるかどうかでコンバージョンの結果が異なってきます。
ワイヤーフレームを短時間で制作する方法
前章でもお伝えしましたが、ワイヤーフレームとは、前段階の企画構成（設計）が完璧に出来上がっていれば、そもそも手早くスムーズに作ることができるものです。その前提を踏まえたうえで、さらに完成度の高いワイヤーフレームを効率的に作る方法を手順に沿って解説します。内容は以下の通りです。
フォーマットを事前に決めておく
テンプレートを用意しておく
構成の段階では色やフォントなどのデザインは控えめに
それでは早速、それぞれの方法を見ていきましょう。
フォーマットを事前に決めておく
ランディングページのユーザーは、パソコンで閲覧する場合もスマホで見る場合もどちらもあります。ランディングページ制作では、パソコン・スマホ用を別々にデザインするケースもあれば、パソコン版を作ってからレスポンシブル化するケースも少なくありません。
いずれにしてもパソコンとスマホでは、もちろんコンテンツに必要な横幅が全く異なるため、それぞれの画面サイズに合わせて、あらかじめフォーマットを決めてワイヤーフレームを作っておく必要があります。
テンプレートを用意しておく
ランディングページには、共感コンテンツ・お客様の声・よくある質問など、お約束とも言えるマストなコンテンツが存在します。ワイヤーフレームはあくまで設計図であり、このような必要コンテンツの完成形レイアウトがざっくりわかれば十分です。
それぞれのコンテンツに対し、どんな商材にも応用できるテンプレートを用意しておくことで、ワイヤーフレーム作りがさくさく進みます。具体的かつ最終的なデザインを決めるのはあくまでデザイナー。ひとまずは、文言や内容を差し替えるだけで完成形をイメージできる「ひな型」があることが重要なのです。
構成の段階では色やフォントなどのデザインは控えめに
前述内容のくり返しになりますが、デザインの仕事をするのはデザイナーです。設計書であるワイヤーフレームはあくまでスピーディーに、簡潔・簡素に作ることが要求されます。ワイヤーフレーム制作は基本的にディレクターの役目、最終デザインはデザイナーの役目です。
分業している以上、それぞれが余計な仕事を増やさないことを心がけましょう。また、色や文字フォントなどまで考えだすと、どんどん時間を使ってしまいますし、デザイナーの完成イメージを邪魔しかねません。作業はきわめてシンプルに、ビジュアルの主張は抑えることが重要です。
ワイヤーフレームを作るためのツール
ワイヤーフレーム制作をするためのツールはなかなか豊富です。使用感は人それぞれなので、お好みのツールを使えば問題ありません。ただし、プロジェクトメンバー全員が共有でき、なおかつ全員が使いこなせないと円滑な制作ができないため、その点だけはご注意ください。ここでは、ワイヤーフレーム制作に便利なツールとその特徴をご紹介します。
Googleスライド
Googleスライドとはビジネスにおける資料作成ツールで、MicrosoftのPowerPointのような用途があります。特徴としては多機能なPowerPointよりもシンプルかつセンス優秀で、雰囲気良くさっと作りたいワイヤーフレームにかなり適しているという点です。
Googleスライドを使用するメリット
ランディングページのワイヤーフレーム制作でGoogleスライドを使うメリットは以下の通りです。
・誰にでも使いこなせて互換性も高い
シンプルで扱いやすいため、特別なノウハウがなくても基本的に誰にもで操作ができ、センスの良いテンプレートも豊富に揃っており、楽しく作業が進められます。
・制作物をURLだけで共有できる
メンバー間での共有が可能なため、複数人で同時に編集ができます。また、さまざまなモバイルとの互換性も高く便利です。
・その他のGoogleアプリとの連携が容易
スプレッドシートやドキュメントなどその他のGoogleアプリとの連携ができ、利便性が高い点も魅力です。
Googleスライドを使用するデメリット
ワイヤーフレーム制作でGoogleスライドを使うデメリットは以下の通りです。
・複雑なレイアウトは作成できない
PowerPointのシンプル&おしゃれ版といったイメージのツールなので、きわめて単純な構造の資料しか作成できません。裏を返せばランディングページのワイヤーフレームには向いています。
・情報量の多いホームページには適さない
比較的少ない情報をシンプルな構造で資料化するツールであるため、情報量が多く構成が複雑なホームページなどの作成には対処できません。
・オフラインで閲覧不可
閲覧するにもネット環境が不可欠な点はデメリットと言えるかもしれません。
Googleスプレッドシート
Googleスプレッドシートとは、基本的にはMicrosoftのExcelのような表計算ソフトです。Googleアカウントさえ持っていれば、無料で誰でも使える便利なツールで、意外にもワイヤーフレーム制作に適しています。ここでは、ワイヤーフレーム制作にGoogleスプレッドシートを使うメリットを見てみましょう。
Googleスプレッドシートを使用するメリット
ランディングページのワイヤーフレーム制作でGoogleスプレッドシートを使うメリットは以下の通りです。
・誰にでも使いやすい
アカウントさえあれば誰でも無料で簡単に使え、操作も簡単です。自社のチーム内はもちろん、クライアント様やWeb関連に詳しくない関係者の方でも扱いやすいので、とにかく仕事が早く進みます。
・情報を整理しやすい
チームメンバーで情報共有できるのはもちろん、誰がどの部分を編集しているのか知らせる機能つきで作業効率が優秀。また、URL設定をしてそのままWeb上に公開でき、動線がスムーズです。
・自動更新&データ復元も可
さくさく進めたい作業の中でも、わざわざ保存ボタンを押さずにどんどん更新してくれるうえ、変更履歴もしっかり残すことができます。
Googleスプレッドシートを使用するデメリット
ワイヤーフレーム制作でGoogleスプレッドシートを使うデメリットは以下の通りです。
・複雑なレイアウトは作成できない
ホームページタイプのツーカラム構成など複雑なレイアウトのワイヤーフレーム作りは不可能です。
・情報量の多いホームページには適さない
情報量が豊富で複雑な構造のホームページ用ワイヤーフレームは作ることができません。単純な構造のワイヤー制作にのみ適します。
・レイアウト制作に特化していない
サイトのレイアウト作りのために開発されたツールとは異なるので、専用ツールに多い豊富なテンプレートなどのサービスはありません。
ゼロからはじめるWEBマーケティング株式会社ではクライアント様のワイヤーフレームは全てGoogleスプレッドシートで作っています。理由はEXCELと同じようにワイヤーフレームが作れて、共有がしやすくリアルタイムで変更されるので、一番使いやすいので、オススメです。
Adobe XD
Adobe XDとは、アドビシステムズが開発した各種デザインやプロトタイプ化用のツールです。クライアントへの初期提案から社内協議・完成・公開まで、デザイン決定の段階全てを共有しながら行うことができる画期的ツールとして注目されています。
Adobe XDを使用するメリット
ワイヤーフレーム制作でAdobe XDを使うメリットは以下の通りです。
・複雑なレイアウトでも対応できる
デザインのための機能が充実しており、複雑なレイアウトでも問題なくこなすことができます。
・操作性が高く扱いやすい
デザイナーでなくても初見である程度操作ができてしまうため、さまざまな人に使いこなせます。同じ要素のくり返し作業などが楽にでき、ワイヤー制作向き。
・チーム内で共同編集可
先ほどご紹介した2ツールと同様、チーム内で共有し複数人数で同時編集することができます。
Adobe XDを使用するデメリット
ワイヤーフレーム制作でAdobe XDを使うデメリットは以下の通りです。
・月額の契約料がかかる
基本操作はスタータープランのキットのみ無料でできますが、それ以降は月額利用料がかかります。
・使用している人が少ない
これから認知度が上がっていくことが予想されますが、現在はまだ普及しきれておらず、手軽に関係者と一斉に使えるツールとは言えません。
まとめ：ワイヤーフーレムは時間をかけずに制作しよう
今回はランディングページの骨格とも言えるワイヤーフレーム制作の手順、さらに制作するうえでのコツなどをご紹介してきましたが、参考にしていただけましたか？
ワイヤーフレームは、ランディングページ作成チーム全員が目指すべき重要な設計図です。しっかりと構築しておくことが不可欠ですが、「時間をかけず造りはシンプル」を念頭に置き、イメージ通りのランディングページを完成させてくださいね！
この記事のおさらいポイント
・ランディングページは主にワンカラムのワイヤーフレームが適している
・ワイヤーフレームを作るときは、3C分析からユーザー心理を理解することが重要
・ユーザー心理を理解し、ストーリーを企画構成してからレイアウトを決める
・フォーマットやテンプレートを用意することで時短が可能
ランディングページは、企画構成が重要で、これを怠ると思うような結果は出ません。
我々は数多くの制作実績から蓄積された経験と企画構成力で商材に合わせた売れるためのランディングページを提案できますので、お気軽にご相談ください！
