Accessibility Archive

TOYOTA SAIスペシャルサイト

トヨタの新型車「SAI」のスペシャルサイトです。音声、映像を駆使して、FLASH特有の価値を提供し、リッチコンテンツが得意とする情動的(エモーショナル)な演出が成されています。ビジネスニーズにブランド価値の向上は含まれていると思いますが、サイトゴールは"INFORMATION"から関連リンクやSAI展示情報へ誘導することではないかと思います。そこからお問い合わせに繋げる、資料請求につなげる、展示場に足を運んでもらうなどの導線が確保してあるのかもしれませんが、重要なのはFLASHを活用するのはあくまでも「手段」であって「目的」ではないということです。最終的にユーザーをどこに導き、コンバージョンを得るのかというサイトゴールは、ビジネスニーズ、ユーザーニーズを把握し、戦略的に導き出す必要があります。FLASHを活用すること、映像を活用すること、音声を活用することが目的になってしまい、コンバージョンがまるで意識されていない「アート作品」のようなサイトをよく見かけますが、そういうサイトはこれから淘汰されてくのではないかと考えています。WEB業界でインフォメーションアーキテクチャやエクスペリエンスデザインが注目されているのは溢れている情報の整理という以上に、"出来る限り無駄な費用は抑えたい"というクライアント側の意図も反映されているのではないかと思います。実際、今日のWEB制作会社では、新規案件、リニューアル案件が減っていき、サイト内の一部をリニューアルしたり更新したりする運用案件が増えているようです。それはプロモーションサイトに活用されるFLASHサイトも例外でなく、何のために立ち上げるのか、誰が使うのかを把握した上でインタラクションを考え、戦略的に設計する必要があるでしょう。

前置きが長くなりましたが「SAI」はFLASHの特性が活かし、静的なサイトでは伝わりにくい情報が体感的に伝わるサイトになっていると思います。体感的にというのは、音声によるアナウンスに沿って映像が展開されるユーザーエクスペリエンスを指し、環境性能、スタイリング、インテリアという3つの最適化された"売り"のどれかを選択するだけで、情報を探索する必要がない直観的なインタフェースとなっています。だからといって受動的なわけではなく、マウスポインタに早送り、巻き戻しボタンが配置されているので、能動的に操作が可能です。また、タブインデックスでの操作が可能、音声のみでなく字幕がある、ナビゲーションにマウスオンすると音声で知らせてくれる、アクセスした際に音声を調節できるなど、FLASHサイトにおけるユーザービリティ(ここでは操作上の使いやすさを指します)においても非常に参考になります。FLASHの利点を上手く活用した良い事例でした。

TOYOTA SAIスペシャルサイト

Adii Rockstar

何の変哲もない一般的なブログかと思いきや、画面の下部にナビゲーションが固定されています。ブラウジングをしながら、ふとテレビのリモコンを操作している感覚と似ていることに気がつきました。ブログの普及によって、ある程度はお決まりのひな形というものが認知されているとは思いますが、内容はもちろん、デザインもインタフェースもブログごとに異なるため、必要な情報を探すタイムロスはどうしても出てきます。コーポレートサイトなどのデファクトスタンダードであるナビゲーションシステム、いわゆる「メインナビゲーション（或はグローバルナビゲーション）」もブログにはサイドコンテンツのカテゴリ一覧という位置づけで提供されているケースが多いので、ファインダビリティはやはり低くなります。Adii Rockstarでは、ナビゲーションを固定させているので、スクロールをする機会さえ与えれば、ナビゲーションをすぐに見つけることができます。「固定する」というテクニックは、割と簡単に実装できるし、アテンションとしてかなり有効なので覚えておきたいですね。そして、その後はテレビのリモコンを操作するように、見たいチャンネルを選ぶだけという手軽さが手に入り、一切のフラストレーションを感じずにブラウジングすることができます。情報がいくら分かりやすくても、見つけられないと意味がない、見つけやすさがあるからこその分かりやすさということが改めて確認できる良い事例です。

分かりやすさについてですが、Adii Rockstarのメインナビゲーションでは、文字情報だけでなく、色情報、アイコンなどを用いてより明解さを高め、アクセシビリティにも配慮された設計が成されています。それだけでなく、"Qyites"カテゴリの右隣にカテゴリ内を移動するための機能的なナビゲーションも用意されています。また、このメインナビゲーションに適用されているルールが、サイト全体でも反映されている点も素晴らしいです。例えば、各カテゴリの色情報は記事のアウトラインとして強調され、アイコンはアテンションとして上手く機能させています。そうした一貫性は、サイト全体の学習しやすさや効率を高め、ユーザーの情報探索経路を大幅に短縮させてくれるでしょう。

Adii Rockstar

KARIMOKU NEW STANDARD

素材の生命力を生かし、現代の最新の科学技術を取り入れ、人間工学に適った形を与え、豊かな生活空間を造形するカリモクのプロモーションサイトです。縦軸に沿ってマウスを移動した方向にスクロールし、製品がウィンドウの端に隠れている場合は、横軸にスライドするインタフェースが実装されています。このサイト内で操作していて思い出したのですが、最近ホンダが自動一輪車「U3-X」を開発して話題になりましたよね。二足歩行ロボット「ASIMO」のバランス制御技術を応用して、操縦者は身体を傾けて体重移動するだけで速度や方向の調整ができるというあれです。

誰が使っても直感的に操作方法が理解できる、シンプルでありながら優れた設計ですよね。本当に優れたユーザビリティというのは、ユーザーに一切のフラストレーションを与えずに、目的を達成させるインタフェースだと思います。説明書がなくても、何となく使い方が理解できて、思った通りの動作を実現すること。斬新さなどなくても、こうしたリッチコンテンツの活用は、とても好感が持てます。今日のWEB業界では、映像を使ったFLASHサイトがトレンドになっているようですが、WEBというメディアの双方向性を生かさず、ほとんどテレビと変わらない受動的なコンテンツになっているサイトをよく見かけます。インターネット環境が整い、より表現の幅が広がって、そうしたクリエイティブが活性化するのはとても素晴らしいことですが、それらをどう生かすかをもっと踏み込んで考えていきたいですね。

「TOTOのUD」がリニューアルしました。最初"UD"って何だ？と思ってしまったのですが、UDとはユニバーサルデザインのことで、1，2年くらい前にWEB業界でも話題になっていたような気がします。以下Wikiの引用。

ユニバーサルデザイン（Universal Design、UDと略記することもある）とは、文化・言語・国籍の違い、老若男女といった差異、障害・能力の如何を問わずに利用することができる施設・製品・情報の設計（デザイン）をいう。

簡単に言えばできるだけ多くの人が利用可能であるようなデザインにすることであり、つまりはアクセシブルなデザイン、アクセシビリティのことを指すといって差し支えないでしょう。TOTOでは企業活動の一環としてユニバーサルデザインに力を入れているようなので、「TOTOのUD」はBtoB向けのWEBプロモーションという目的のもと企画されたものではないかと思います。「商品を知る」では、ハナコさん率いる老若男女な家族が、リアルな空間(間取りや製品の図がとても忠実に再現されている)の中で、それぞれの観点からポイントごとにコメントしてくれます。サイトゴールが「ブランド価値の向上」であれば、TOTOがユニバーサルデザインに取り組んでいること、実際に誰にとっても使いやすい製品を目指していることが伝わればゴールでしょう。もし自分だったらどうだろう」と容易に想像できるユーザーエクスペリエンス。覚えておきたい良い事例でした。
UD style:TOTO