• 平岡大輔

ワイヤーフレームに心血を注ぐ


なんでも設計図が大事、というお話。

先月末に「ADviser」という新サービスをリリースしました。ありがたいことにポロポロと問い合わせをいただいています。完成した状態で世に出すのではなく、随時アップデートしていき、徐々に広めていく方針でやっているので、まだまだ整っていない状況です。

なので、まだサービスサイトも立ち上がっていません。デザイナーに制作を依頼するために週末にワイヤーフレームを作りました。ワイヤーフレームはwebサイトのページ構成図です。

webサイトを作る時、目的を達成するために必要なコンテンツと導線をまず考えます。そしてサイトマップと呼ばれるサイトの構造図をつくり、ページ毎にコンテンツの配置や内容などを記した構成図を作ります。この構成図がワイヤーフレームと呼ばれるものです。

ワイヤーフレームの出来栄えが仕上がりの満足度

webサイトを作った経験があればわかると思いますが、ワイヤーフレームはどこにどういう画像やテキストが配置されているかが可視化された骨組みのようなものです。良いサイトができるかどうかはこのワイヤーフレームの出来栄えによるといっても過言ではありません。

なぜなら、ワイヤーフレームを作り込むことで、色味やあしらいなどを除けばほぼサイトデザインが完成しているような状態にできるからです。どこに何を配置するかというレイアウトの指示だけでなく、どんな内容かまでを示すことで、実際に内容を理解して訪問者の動きを想像することができます。

この時点でサイトイメージができる状態になっていれば、実際にデザイン作業を加えると想像以上の仕上がりに思えて、出来上がったwebサイトへの満足度が高まります。

webサイトの目的を果たすための導線設計とコンテンツ設計を、ワイヤーフレームの時点で摺り合わせられていれば、webサイトが完成した時に「なんでこんな風になっちゃったんだっけ?」という失敗を回避できます。

ワイヤーフレームの段階ではやり直しの手間も少ないので、目的達成ができる内容にするためにとことん摺り合わせができます。

要件定義した内容をワイヤーフレームを使って可視化できていないと、デザイン作業に入ってからの出戻りが多くなり、何がいけなくて違和感を覚えているのか見てる方も作る方もわからなくなりがちです。そして、延々と修正が繰り広げられる地獄のような状況に陥ります。さらに不幸なことに、最終的に妥協して満足とは程遠いwebサイトが出来上がります。

自分たちが発信したいイメージを訪問者に表現できることがそのwebサイトの目的なら、とことん見栄えや素材にこだわるべきです。でもほとんどの場合は、購入や申込などのアクションを発生させることが目的です。その行動を促すための理由づくりと、ゴールへの導線として機能させたいからwebサイトを作ります。

目的がwebサイトに訪れた人に何かしらの行動をとってもらうことの場合、見た目の印象よりも、導線の設計やコンテンツの設計の方が重要になります。訪問者が求める情報がきちんと掲載されているか、情報を集めやすい構造になっているか、商品に興味を持ってもらい理解を深めてもらうための情報がわかりやすく十分に用意されているか、など。

なので、サイトの目的を明確にすることと、それを達成するための要素を洗い出して整理すること、そしてそれら定義された要件を設計図に落として可視化することが大切になります。

巨人の肩に乗る

今回、WordPressのテーマとよばれるテンプレートを利用してサイトを作ることにしています。なぜなら、テーマには必要な機能やwebサイトの目的を達成させやすくするための構造と構成が既に用意されているからです。

一般的に配布されていたり販売されていたりするテーマは、多くの人に使ってもらうために奇をてらったデザインになってはいません、

先程お話したようにwebサイトの目的が購入や申込のように何かアクションを取ってもらうことであるなら、訪れた人が使いやすいデザインになっている方が成果につながりやすくなります。

そのため、イメージを売る必要が無い商品の場合は、プロが作ったある程度研究されたデザインのテーマを利用することが、ビジネスを加速させるための賢い選択です。

あとはコンテンツの作り方でその良し悪しが決まります。ここは試行錯誤するところですが、大切なのは「結論は早めに出す」ということです。

より具体的な情報は知りたい人が見に来れるようにしておきます。そして、いつでも購入や申込のアクションが取れるように、どのページからでもゴールへの導線を用意しておけばひとまず大丈夫です。あとは訪問者にとって有益な情報をどれだけ盛り込めているかどうかにかかっています。

今回のワイヤーフレーム作成には、テンプレートを利用しても12時間くらいかかりました。既に必要な要素が頭の中に入っていてそれくらいの時間がかかっているので、まっさらな状態からだと、あとプラス2,3日分の時間がかかると思います。

ページ数にすると5,6ページ程度ですが、それでもこれくらの時間はかかりました。もっとかかってしまっても良いくらいだと思っています。なぜなら、この作業がサイトの良し悪しを決めると言っても過言ではないからです。

#マーケティング

  • Facebook - Black Circle

株式会社テマヒマ 東京都渋谷区渋谷2-24-12 渋谷スクランブルスクエア39F

Copyright © 2015 Temahima .Inc   All Rights Reserved.