ウェブ制作の５階層モデル
この画像は、「ウェブ制作の５階層モデル」と名付けているダイアグラム。原典は、”Jesse James Garrentt”の「The Elements of User Experiene」と命名されたドキュメントでウェブ業界にいるものであれば、一度は目にしたことがあるかも知れない。もし、まだ目にしたことがない駆け出しのウェブデザイナーがいたら、ぜひこちらからダウンロードして見せてあげて欲しい。本来は、ユーザーエクスペリエンス設計の為に、Jesseが書き上げたものだが、このひとつに図にWebサイトの戦略から、運用に至までの全てが凝縮されていると言ってもよいだろう。
【画像ダウンロード先】
https://blog.jjg.net/
コラボレーションの割合が比較的多いこともあり制作の方針などを伝える時には、必ずこのダイアグラムの出番となる。もちろんクライアントに対しても弊社のポリシーを伝える時には、お出ましになる非常に優秀なスタッフと言ってもよい。
見ていただけば判ると思うが、１階から５階までの建物を模した図で、それぞれの階において役割と目的がある。Webサイトを構築する際に、経験の浅い者 （** と、言っても業界自体がたかだか１５年ちょっとの歴史しかないので、他の業界に比べると、皆、尻の青い若造だろうから、私自身も偉そうに言えるほどものでもない） だと、いきなりトップページのイメージを説明してくる場合も多く、またクライアントの多くも「どういうモノが出来る？」と、簡単なラフイメージをと要求してくることが多い。
まず１階層。たとえばECサイトであった場合は、目的は『商品を売る 』ことが、サイトの目的になることは間違いない。ユーザーのニーズは『商品を買う』ことなる。間違っても、商品の写真を見せる為でも、商品を写真を見る為でもない。企業にとっての利益が、サイトの目的であり、ユーザーにとってはその商品を購入して使うことが目的である。
実際は、それだけでは終わらない目的やニーズもあるが、説明が煩雑になるのでそれはまた別の機会に書くことにする。
企業は、そのためにユーザーにとっての有益となる情報を提供することが求められる。そこで、２階層目のコンテンツ要求が発生する。どのような情報を提供すれば、ユーザーは商品に納得して購入して貰えるか、そのためにはどのような説明が必要になってくるか、そしてそれを手に入れる手段を提供する為の機能が必要になってくる。
ただ情報が整理されておらず、バラバラに存在していたとした場合、ユーザーはそこに用意されている機能を使う前に、疲れ果てて他のサイトに移動してしまうだろう。そのために３階層目で、しっかりと情報を整理して、ユーザーが思うままに情報を引き出せる手順を提供しなければならない。
ユーザーが迷わないように、今時分がどこで何をしていて、いつでも元のところへ戻れるように全体が俯瞰できる状態を維持してあげなければいけない。もちろん、先に進むにはどうすればよいか、先に進むと何があるかもだ。
ウェブページは、一般的にHTMLで書かれているが、そこには目的のページへ移動するリンクがあり、それを辿ると目的のモノへたどり着ける。しかし、そのままだと味気ない報告文書みたいで上から下まで全てに目を通さないと目的のモノを見つけきれないのでは、あまりにも効率が悪すぎる。、それをそれぞれの目的に合わせてブロックごとにレイアウトし、一目でわかるようにしてあげるのが４階層目だ。サイト全体のナビゲーションもここで行う。手書きのペーパープロトタイプを作って進めるのが、無駄な時間を省くことも出来お勧めだ。
そしてようやく５階層目。構造化され骨格が形成されたところに、壁紙やら写真やら様々な装飾がなされてお好みのホームページができあがることになる。もちろん、この部分のビジュアルに関しても個別の設計が必要にはなる。それはブランド形成のための配色であったり、より目的に近づけるように訴求する為のアイキャッチや、コピーであったり様々だ。
５階層目の仕事は、そのまま目に見える部分である為、やりとりをする課程も含めて非常に楽しめる時間だ。また、クライアントにとっても要求がすぐに形に出やすい為、”仕事をしている”という実感が伝わってくる。そのため、ついつい、目的・ニーズをないがしろにして楽しい時間を優先してしまいがちだ。
最上部であるビジュアルから入った制作では、あとからコンテンツの追加がある。また予想していたコンテンツが用意できないなどの諸事情が後から後から出てきて、何度も手直しをしている間に当初考えていた様な効果も得られないWebサイトが残されてしまう。そして整理されていない状態での運用を強いられることで運営も思うようにいかず、早々にリニューアルを計画することになる。そして、また悲劇のストーリーの繰り返しが行われる。
要求によっては、ビジュアル優先である場合も当然ある。その場合でも、必ず目的なりニーズがあり、例え1ページだけのWebサイトでもこの階層モデルが必要になってくる。芸術的作品を求める制作であれば、ちょっとした例外としても認めていいかもしれないが。残念ながら、その様な才能をもったデザイナーはごく一部しかいない。
５階層めのビジュアル設計に関しても、４階層目の各種デザインにおいても、１階層目の『目的』、『ニーズ』に基づく戦略が反映されるモノであることは当然で、最終的な出口までの一貫した統一性は欠かせないし、そのために、常にこの図を念頭に置き、ミーティング時には、このダイアグラムを目の前において全体のコンセンサスの確認を行うようにすると、その悲劇のストーリーを避けることが出来るのでは無いだろうかと…当たり前のことばかりを長々と書いてしまった。この記事が役に立てれば幸い。