イメージ写真

Webサイト制作におけるワイヤーフレームのポイント

投稿者:

こんにちは。ウェブ解析士の佐藤佳です。
今回は、「Webサイト制作におけるワイヤーフレームのポイント」のお話です。

■ワイヤーフレームとは?

簡単に言うと、Webページの設計図のことです。
ポイントは、

「どんな情報を」
「どこに置いて」
「どうコンバージョンを取るか」


この3つを掛け算して、もっとも最適な設計をすることです。

この3つは別の言葉で置き換えると、
「コンテンツ選択」「レイアウトの構成」「サイトの導線」とも言えます。

私はこのワイヤーフレームを作る作業がとても好きで、
サイト制作の中でも特に時間を割いている工程になります。

また、ワイヤーフレームを【作る前に】行う大切なことは、
ターゲットとなる人(ペルソナ)と、その人のニーズやウォンツです。
つまり、「誰に」という部分ですね。

ここをあいまいにしたままワイヤーフレームを作ってしまうと、
刺さらない内容になってしまうので、まずはターゲットを定めましょう。

■鉄板の流れ

ワイヤーフレームの構成については、いわゆる「鉄板」があります。
例えば、AIDMAとかAISASを始めとした購買心理を取り入れたものなど。

以下に、よくある流れをご紹介します。

★ファーストビュー(一番はじめに目にする部分)で、
 簡潔に自社や商品の良さを伝える(サービス概要、強み、コンセプト等)
 ※ここの出来具合で、下の項目が見られるかが決まる重要な部分。
  ファーストビューの切り口は、ABテストで決めてもいいと思います。

★問題提起
 こんなお悩みありませんか?などと、
 ユーザーが顕在的・潜在的に持っている課題や悩みを書くことで、
 「自分事」に感じてもらう。

★解決法の提案
 こんな方法で解決できますよ!などと、
 対策案や方法論などを提示して、行動の必要性をユーザーに気づかせる。

★具体的な解決法の紹介(商品など)
 ここのフェーズはいくつかに細分化できると思いますが、
 簡潔に言うと「誰に」「何を」の2つがポイントで、
 そのターゲットに対して【共感】してもらうことが重要です。

★料金提案&オマケ
 いくらかかるのかといった商品の料金について明示します。
 ※〇月までのお申込みで○○の特典が付くなど、
  オマケ訴求もあるとユーザーの行動を促しやすい。

★選ばれる理由
 どうしてこの会社・商品が選ばれるのか?ポイントを絞って紹介。
 数字やエビデンスを盛り込む。

★お客様の声
 実際に体験した人の感想などを掲載。
 ※匿名よりも実名、そして顔写真や、権威のある人ほど信頼性があります。

★お問い合わせの流れ
 お問合せから商品購入までにどのようなフローがあるのかを説明して、
 購入に対する不安を軽減する(その1)

★Q&A
 よくある質問などは先に出しておいて、事前に解決できるようにしてあげる。
 購入に対する不安を軽減する(その2)

★お問い合わせ

以上、いかがでしたでしょうか?
「なんかこのつくりのサイト見たことある」って思いませんでしたか?

世の中にはいろいろなサイトがありますが、
「自分が買いたくなるなぁ」と思うようなページを参考に、ぜひ作ってみてください。

今回はここまでです。
また次回のブログでお会いしましょう。

Follow me!

この記事を書いた人

Kei Sato
面白いと思ったモノ・コトを解析し、広く報せることに喜びと生きがいを感じる人です。B to Bの広報と採用が本職。個人ではウェブ解析士、キャリアトランプ ダイバーシティ ナビゲーター、インターネットラジオパーソナリティとしても活動中。ブログでウェブ解析×キャリア支援×広報に役立つお話や、日々の気づきを綴っています。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください