Webサイトをつくるコンセプト ～FLASH vs HTMLについて～

「これからのWebのあり方について考えてみた。」で述べたように、今後のWeb世界において『コンテンツ』が重要な役割を果たすということに変わりはないのですが、だからといって「FLASHは必要なくなる」とか「全てのコンテンツはHTML5でマークアップしておけばいい」ということにはなりません。最近「HTML5 vs FLASH」のような記事やお話を見聞きするのですが、どちらが生き残るのかという観点そのものに疑問があります。

クロスプラットフォームにおいては、HTML5が独占しているわけではないので、"競争"という捉え方もできます。しかし、すでに次世代プラットフォームとして注目されている『WebKit』は言わずもがなHTML5が基盤になっていますし、『Google Chrome OS』はもちろん、Adobe『AIR』、Microsoft『Silverlight』もHTML5に対応する見通です。つまり、HTMLはFLASHを代表するリッチな技術の対抗勢力になるのではなく、アプリケーションを開発する上での標準技術になるというが正しい認識なのではないかと思います。

FLASHも『Flash for iPhone』というプロジェクトを発表していますが、それは「基盤」と「手段」という意味で全く異なる次元の問題です。それはFLSAHが優れていないと言いたいわけではなく、そもそも白黒つけようとすることが誤りなのではないかと思うのです。ここでWebサイトを作る目的について考えてみてください。「私たちがWeb世界を作っているということ。」で述べましたが、誰もがインターネットを持ち歩く時代、もう一つの"世界"といっても過言ではないWeb世界を、私たちが政治家として執政にあたっています。私たちの役割は、率先して市民の声に耳を傾け、ニーズを汲み取り、執行機関の施策に反映していくことです。

つまり「どのような施策を反映させ、国民を満足させるのか」ということが重要であって、FLASHやHTMLというのは、それに応える為の手段でしかありません。先に述べた通り、HTMLはリアル世界でいう国民保険のようなもの(意思に関わらず、住所を有する者であれば必ず加入しなければならない)になりつつありますが、現時点ではFLASHと同様、一つの手段として然るべき役割を担っているといえるでしょう。どちらかがという狭い視野で捉えるのではなく、それぞれの特性を理解して、また共有し合って『ユーザーエクスペリエンス(以下UX)』を創り出すことが本来の目的ではないでしょうか。

ユーザーエクスペリエンス

User Experienceの"Experience"という単語は「経験、体験」という意味合いがあり、直訳するとユーザー体験になります。つまり、ユーザーが製品やサービスなどを利用する際に得られる体験のことをいいます。Donald A. Normanによって提唱されたということもあり『ユーザー中心設計』が基盤になっているUXは、ヒューマンインタフェースやユーザビリティなどよりも広い概念を示すための造語として提唱されました。

どのような違いがあるのかというと、インタフェースにおけるレイアウト設計、色彩計画というのはあくまで"一つの構成要素"であって、それ自体が「体験」を提供しているわけではありません。例えば、ある製品に対してユーザーが形が格好いい、操作が分かりやすいと思っても、それが購買に結び付くかどうかは別の話です。ユーザインタフェースがそうした機能的なものに対してUXは、そもそもその機能がユーザーにとって必要なものであるのかという観点なのです。

大型ショッピングセンターには、カレーを作る為にカレールーや野菜を買いに来る人もいれば、電化製品を買いにくる人など、様々な目的を持ったユーザーが訪れます。カレーの材料を買いに来たユーザーが電化製品を買うということはまず考えられません。仮に電化製品売り場を通りかかる機会があって、いつか欲しいなとは思っても「カレーのついでに買っちゃおう」という人はそうはいないでしょう。かなり無理がある話ですが、もしカレーの材料を買いに来たユーザーに電化製品を買わせたいという目的があるのなら、その場合においてどのような「体験」を与えればユーザーの購買意欲を発起できるのかということを検討する必要があります。

さて、ではカレーの材料を買いにきたユーザーに対して、どのようなインタラクションを提供すれば良いのでしょう。頻繁に訪れている顕在ユーザーであれば迷うことなく目的の商品を見つけることができると思いますが、初めて訪れるユーザーには、何かしらのインタラクションを提供しなければなりません。例えば、普通のスーパーでは商品ごとにカテゴライズがなされており、指標となる目印が設けてあります。その他にもユーザーの購買意欲を発起する為の「体験」として、試食・試飲、医薬品や美容化粧品などのサンプルの提供などが挙げられます。また、ユーザーの性質に関わらず、レジの前に必ずと言ってよいほど置いてあるお菓子や日用品は、誰もが日常的に必要するものばかりが並べられています。

この例でのユーザーインタフェースが、ユーザーを誘導する為の目印や、購買意欲を高める為のサンプル品のことで、UXはユーザーが訪れてから目的を達成するまでの「体験」そのもののことをいいます。どのようなユーザーがいるのか、どのようなニーズがあるのか、何を伝えたいのかなどを把握した上で、どのようなインタラクションを提供すれば満足してもらえるのかという一連のシナリオを組み立てること、上の例でいえばカレーの試食をさせて購買意欲を発起しようなど、「ユーザーが認知する体験のこと」をUXといい、その設計を『ユーザエクスペリエンスデザイン(以下UXD)』といいます。

ユーザーエクスペリエンスの構成要素

先ほど冒頭で「HTMLもFLASHもUXを創りだす一つの手段に過ぎない」と述べましたが、UXを構成する要素について解説したいと思います。以下のモデルは「IA100 ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計」で採用されているものを使用しています。Webサイトは「テクノロジー」「ビジュアルコミュニケーション」「情報アーキテクチャ」という3つの組み合わせでコンテンツが企画され、UXDで一連のユーザー体験を組み立てます。

ユーザーエクスペリエンスの構成要素

【テクノロジー】

テクノロジーは、PCやモバイルといったデバイスを含む「プラットフォーム」、データベースや会員システムなどの技術を含む「サーバーサイド」、そして文書構造を司るHTMLや見栄えを司るCSS、インタラクションを司るFLASHやJavaScriptといった表現技術を含む「フロントエンド」に分けられます。今までも考察してきた通り、今日のテクノロジーにおける進展には目を見張るものがあり、ユーザーに与える体験をより快適なものにしてくれるでしょう。

【ビジュアルコミュニケーション】

ビジュアルコミュニケーションは、サイトの印象や感覚的な表現を司る「アートディレクション」とレイアウト設計や色彩計画などのグラフィカルな表現を司る「グラフィックデザイン」に分けられます。企業ブランドやコンテンツなどを、どのようなモチーフやトーンで伝えるのか、またそれをどのように表現するのかというWebサイトに限らず全ての媒体に必要不可欠な要素です。

【情報アーキテクチャ】

ユーザーが情報探索を行う上で、どのように情報を整理すれば、理解しやすく、利用しやすいものになるのだろうか？という複雑な情報を分かりやすく伝えるための技術です。具体的にはサイトストラクチャ、ラベリング、ナビゲーションの設計によって「情報の組織化/構造化」を行います。Webサイトを作るということは、言い換えれば情報をデザインするということであり、いわゆる『IA』と呼ばれる専門家だけが考えれば良いことではなく、Webに携わる全ての人に必要な要素です。

見つけやすさの重要性

以下の図はPeter Morville氏が提示した「ユーザーエクスペリエンス・ハニカム」です。UXを性質という観点から見た構成要素で、いくつかの性質を同時に満たすことでユーザーの琴線に触れることできると言われています。どの性質を優先するのか、或はさせないのかということを、ビジネスゴールとコンテクスト、ユーザーニーズと行動、コンテンツの有用な混合という観点から鑑みて、バランスの良いコンテンツ作りを目指します。例えば、高齢者のアクセスが想定されるWebサイトでは「好ましさ」よりも「アクセスしやすい」を優先しようなど、避けられない妥協は無意識にではなく意識的にさせなければなりません。

ユーザーエクスペリエンス・ハニカム

役に立つ

図的になされなければならないその商品やサービスが本当に役に立つのか、商品知識や専門的知識を深め多くのユーザーに訴えかける

好ましい

イメージ、アイデンティティー、ブランドが持つ力と価値はバランスを保つことでユーザーの関心を引く

アクセスしやすい

障害を持つユーザーであってもアクセスできることで、より多くのユーザーにリーチする

価値がある

利益を上げ、顧客満足を満たす。利害関係者すべてに価値をもたらす

信頼できる

多くのユーザーに信頼感を与えるデザインである

見つけやすい

ユーザーが欲する情報を迷う事なく即座に見つけられる構造である信頼できる

使いやすい

Man-Machine Interfaceの観点からユーザビリティを考慮する

この性質の中でも、数十億の項目が様々な形で分散して集積しているWebにおいて、「ファインダビリティ(見つけやすさ)」は非常に重要です。どのようにしてユーザーの興味を発起するかというインタラクションや、快適な操作性を提供するユーザビリティの重要性は広く認識されていると思いますが、ファインダビリティはあまり注目されていない節があります。これからさらに情報過多が進み、あらゆるデバイスでインターネットが利用され、Web世界が膨張し続けるということを考えれば、ユーザーのニーズとサイト固有の戦略とを結びつけ、双方のバランスを取り、最適なファインダビリティを提供することがどれほど重要なのかが分かると思います。何故なら、分かりやすさも、使いやすさも、好ましさも、全て見つけられなければ意味をなさないのです。

そういう意味においてサイトのファインダビリティを高めるということは、『SEO(検索エンジンの最適化)』という分野にまで及びます。一部のSEO業者では姑息な手段を使って検索エンジンを騙す手法を適用していますが、検索エンジンが進化し続ける生き物であるということを忘れているのではないでしょうか。一時的に効果があっても、後で取り返しのつかないことになる可能性があります。本質的にSEOを向上させるにはどうすれば良いのかを考え、今ある資源の中から有益なものを活用するしていくという方が、合理的であるといえます。

ノリシロを持つということ

ここまでUXについて述べてきましたが、FLASHやHTMLがUXを創りだす一つの要素でしかないということがご理解いただけたかと思います。私たちがWeb世界を執政するにあたり、一つの概念や手法に捕われてしまっては、物事の本質を見失ってしまいます。何が必要で、何が不要なのかを判断をするには現状を汲まなく把握し、そして把握する為にノリシロを持つ必要があります。「ユーザーエクスペリエンス」で述べた3つの要素では、それぞれのスペシャリストがいるはずです。「テクノロジー」であればマークアップエンジニア、フロントエンドテクノロジスト、フラッシャー、システムエンジニアなど、「ビジュアルコミュニケーション」であればグラフィックデザイナー、アートディレクターなど、「情報アーキテクチャ」ではインフォメーションアーキテクトなどが挙げられます。

もう一度「ユーザーエクスペリエンスの構成要素」の図を見ていただければ分かると思いますが、それぞれの要素は独立して成り立っているわけではなく、それぞれに依存し、また相関があります。つまり、理想的なUXを提供する為には、それぞれのスペシャリストが全体を俯瞰しながらUXDを行う必要があります。例えば、グラフィックデザイナーがパーツを作成する際に、マークアップの知識があればビジュアルと論理構造の相違はなくなるはずです。もう少し噛み砕くと、「資料請求」というボタンを作成するにあたり、論理的意味合いでは重要な意味付けを行っているのにも関わらず、デザイン的な見た目はまるで目立たせていないといった問題は避けられるはずです。また、プロジェクトで進めている場合、スペシャリスト同士のコミュニケーションは不可欠なものであり、それを円滑にさせるにはお互い価値観や考え方、技術に関することまで、認識のずれを出来る限り解消できるに越したことはありません。

構成要素のうちどれか1つを無くしてもUXは成り立ちません。プロジェクトとして1つのサイトを作り上げるのに、全員でUXを創っているという意識があれば、そしてよりユーザーの満足を得られるサイトを作るという意思があれば、自ずとお互いを理解し合える素晴らしい環境が築けると思います。そして、例外なくそうしたプロジェクトは成功しているのではないでしょうか。フラッシャーの人はHTMLの役割を理解し、マークアップエンジニアはFLASHの役割を理解することで、何が必要で、何が不要なのかをお互いの内で共有することができるはずです。繰り返し述べているように、UXは「どのような体験を与え、ユーザーを満足させるのか」という云わばWebサイトの「提供価値」を考えるコンセプトです。FLASHが、HTML5が、という狭い視野ではなく、広い視野を持って取り組みましょう。