Interface Archive

INTENSIFIES FEMALE SATISFACTION

女性のための興奮剤ｗ「K-Y Brand Intense」のプロモーションサイトです。"REACTION ROOM"や"AROUSAL LAB"に入室し、パソコンなどの物体に「K-Y Brand Intense」を垂らすと、それぞれユニークなリアクションを楽しむことができます。その製品によってもたらされる効能を面白おかしく表現するという発想は、インテルやフリスクのCMと似ていますね。こうした何が起こるか分からないワクワク感を盛り込んだ作品は映像であれWEBであれ好奇心が煽られます。 ユーザーエクスペリエンスを唱えた認知心理学者、ドナルド ノーマン（Donald A. Norman）氏は、作中で「デザインは情動的(エモーショナル)であれ」と唱えています。そうした感動を与える、インパクトを与える、所有欲をそそるなどといったエモーショナルなユーザーエクスペリエンスは、双方向的なコミュニケーションを可能にするFLASHコンテンツならではの演出だと思います。前回FLASHの利点を生かした「TOYOTA SAIスペシャルサイト」では主に音声や映像を駆使した技術的な面での利点を述べましたが、「K-Y Brand Intense」ではインタラクションとしてのFALSHの魅力が十分に伝わってくる良い事例でした。

フリスク CM

インテル CM

INTENSIFIES FEMALE SATISFACTION

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というメディアの双方向性を生かさず、ほとんどテレビと変わらない受動的なコンテンツになっているサイトをよく見かけます。インターネット環境が整い、より表現の幅が広がって、そうしたクリエイティブが活性化するのはとても素晴らしいことですが、それらをどう生かすかをもっと踏み込んで考えていきたいですね。

発想自体はありがちな感じですが、とても表現力に富んだデザインだと思います。メインコンテンツの範囲のみをスクロールさせ、視線を誘導するインタフェースは、理に適った設計だと思います。メインコンテンツと背景のコントラストもはっきりしていることからも、制作者の意図が読み取れますね。私の場合、思わずガイドで囲まれている範囲に注目してしまいますが、これは完全に職業病です。
Fudge @ 100% (Layer 1, RGB/16)