はじめまして。

WEBディレクターのあいあいです。


私がアイデアランプに入社して早々のある日のこと。

WEBディレクターとしてまだまともにワイヤーを描いたことのない私に、

社長から「イケてるワイヤーを描けるようになれ!」とのお題が。


この難しくもディレクター必須のお題に挑むべく、考えたこと、勉強したことをご紹介していきます。




そもそも「ワイヤーフレームとは何か?」

ワイヤーフレームとは、サイトの完成イメージが可視化された、サイトの設計図です。

[ユーザーが使いやすいように設計されている]ということと、

[スムーズに制作できるよう制作者に意図が伝わる]ということが重要だと考えられます。




じゃあ、ワイヤーフレームが「イケてる」ってどういうこと?

「ユーザー」「制作者」の2者に対して、イケてるポイントを思いついたままあげてみました。


ユーザーを意識した場合は

・ユーザーの心理プロセスに合わせた情報整理がされている

・わかりやすい動線設計がされている

・ついクリックしてしまうところにボタンがある

・ささるコピーが的確に並んでいる etc.


制作者を意識した場合は

・デザイナーが悩まないように余計なデザインは入れない

・とはいいつつも、重要なポイントが伝わるように指示を整理する

・要素の優先順位がわかるようにメリハリをつける etc.


などが思いつきました。(ベテランディレクターの方々はもっとポイントが思いつくかもしれません...!)



上記のポイントを実現するためには、認知心理学、行動心理学、コミュニケーション学、物語論、

などなど、いろんな分野の知見が必要そうです。


さまざまな知見が盛り込まれ、考えぬかれたワイヤーこそが、イケてるワイヤーなのでは、、!と考えました。



イケてるポイントを作ってみよう(情報整理編)


こういった知見をどうやってワイヤーフレームのイケてるポイントにしていくのか、試してみましょう。

今回は先ほどあげた[ユーザーの心理プロセスに合わせた情報整理がされている]を深掘りしてみます。


グローバルメニューのコンテンツをどう並べるか、悩んだことはありませんか?

私は、最初なんとなく並べてしまいました・・・・。


これでは、ユーザーを考えたイケてるワイヤーとは言えないですね。

そんな優先順位を考える上で使えるのがマーケティング論で使われる【パーチェスファネル】です。




パーチェスファネルとは?

パーチェスとは英語で「購入・購買」のことを指し、消費行動の流れを図式化したものです。認知興味・関心比較・検討購入・申込という段階を経るに従って、だんだん少数に絞り込まれていく様子が、逆三角形の漏斗のような形になることを表しています。


この消費行動のどこにコンテンツABCDが当てはまるのか、を考えることで、

優先順位付けすることができ、ユーザーに効果的なアプローチができるようになります。

コンテンツの並べ方ひとつをとっても、ちゃんと理由が述べられる。

これがイケてるワイヤーフレームを描くということなのかもしれません。



これからもイケてるワイヤーフレームを描くためのジャーニーは続きます。




【今回のイケてるポイント】

優先順位付けに迷ったら、ユーザーの消費行動に当てはめてみる


【もっと知識を深めたい方は下記キーワードで調べてみよう!】

マーケティング学、購買行動モデル、AIDMA、パーチェスファネル



参考サイト https://www.innovation.co.jp/urumo/funnel/


PREV
2021.04.30
超便利!ディレクターが使えるGoogle Chromeプラグイン5選!
NEXT
2021.04.30
アプリデザインの「カラー選び」と「フォーム作成」