【webサイトができるまで⑤】サイト構成その２ーワイヤーフレーム①
記事コラム
こんにちは。Leycoです。
普段はwebページ制作を通じて、お客様の商品やサービスをより多くの人へ届けるお手伝いをしています。
（webページとは、ホームページやLP全般のことを指します）
今回、webページ制作に関するお悩みやギモンを持っている方が多いことに気づき、こちらのブログを立ち上げました。
この記事では次のような方を対象に作っています。
・「webページに興味はあるけど、準備とか大変そう」とあきらめたことがある
・webサイトを作ったほうがいいとは思うけど、webに関する知識があまりなくて、使われている言葉も意味がわからない
「自分にあてはまるかも……」と思われた方は、ぜひ最後まで読んでみてください。
今回は「webサイトができるまで」の５回目です。
【webサイトができあがるまで⑤】ページの中を構成するのが「ワイヤーフレーム」
一般的にwebサイトは、次のような手順で作成されます。
今回は「【２】サイト構成」の続きで、ページの中の構成ポイントをご紹介していきます。
なお、今回は１ページで完結するLPを例としています。
はじめに：「ワイヤーフレーム」作りの目的は、ページの土台を作ること
webサイト制作では、個々のページ内の構成のことを、「ワイヤーフレーム」と呼んでいます。
ワイヤーフレームを作成する目的は次の３つです。
では、実際にどのような手順でワイヤーフレームを作っていくのか、次からご紹介していきます。
【ワイヤーフレームの作成ポイント１】ページに入れたい情報を洗い出しましょう。
webページは「ブロック」や「セクション」などと呼ばれる「個々の情報のまとまり」を組み合わせて作っている場合がほとんど。
よくLPで使われる「セクション」としては、次のようなものがあげられます。
・よくあるお悩み
・商品やサービスの強み
・商品やサービスが提供できる理由
・お客様の声
・申し込みの流れ
・よくあるご質問
・自社紹介
・
ヒアリングで確認した内容を、それぞれのセクションとしてまとめていきます。
この他に、
・ヘッダー
・トップビュー
・フッター
・ボタン
も、webページには必要な要素です。
【ワイヤーフレームの作成ポイント２】このページの「ゴール」を思い出しましょう。
それぞれの「セクション」がまとまったところで、このLPの「ゴール」を確認します。
「ゴール」とは、このLPを見た人にやってほしいこと。
「無料申込」「LINE登録」「お試し購入」など、何かしら見る人からのアクションを「ゴール」としているはずです。
「ゴール」の情報は、ボタンのテキスト作りの土台となります。
必要な場合は、補助となるテキストを作りましょう。
たとえば、「問い合わせる」というボタンであれば、「無料で相談できます」のような感じです。
このようなテキストによって、見る人はボタンを押しやすくなります。
【ワイヤーフレームの作成ポイント３】「ゴール」へ導く「矛盾のないストーリー」を組み立てていきましょう。
「入れたい情報＝セクション」と「ボタン＝ゴール」が決まったら、いよいよワイヤーフレーム作りです。
ここでのポイントは、「見る人が納得する流れでゴールまで導くこと」。
言い換えると、「矛盾のないストーリーを作ること」です。
見る人の興味をしっかり引き出して、ゴールまでつなげることが大切です。
今回は、「無料相談のお問い合わせを増やすこと」をゴールとして、次のように組み立ててみました。
お悩みを解決するということをしっかり伝えるために、最初に「商品の強み」を打ち出しました。
最後の「社員紹介」「代表からのメッセージ」の部分は、商品やサービスに親近感や安心感を与える効果を期待しています。
「【１】ヒアリング」の段階で、ペルソナの悩みをしっかり確認しておくと、矛盾のないストーリーを作ることができます。
まとめ：「ワイヤーフレーム」でページ構成をきっちり固めていきましょう！
今回は、ワイヤーフレーム作成をご紹介しましたが、いかがだったでしょうか。
実は、ワイヤーフレームを１回にまとめてご紹介しようと思ったのですが、構成の流れの話で終わってしまいました。
そのため、「実際にどんな感じなのか、イメージつかない」と思われた方もいらっしゃるかと思います。
そのため、次回は実際のワイヤーフレームをご覧いただくところまで、ご紹介していきます。
ここまでご覧いただき、ありがとうございました。
次回も読んでいただけたら嬉しいです！
