第10回　トップページのFlashをググっと使いやすくする3つのポイントと心がけ

第10回　トップページのFlashをググっと使いやすくする
3つのポイントと心がけ

現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題がおきないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？

今木 智隆（株式会社ビービット）

切り替え機能の付いたFlashは
強力な「諸刃の剣」と自覚しよう

企業サイトやキャンペーンサイトを構築する場合、Flashが活用されることは多い（特にトップページ）。たとえば、NTTコミュニケーションズ個人のお客さま向けサイトは、右側のメニューへマウスを乗せると、Flashバナーが切り替わる仕様となっている（図1）。

図1　NTTコミュニケーションズ個人のお客さま向けサイト（https://506506.ntt.com/）
トップページに切り替えタイプのFlashバナーを使用している例。

アニメーションムービーであったり、動的なバナーであったり、インターフェイスそのものであったり、Flashの活用方法もさまざまだ。ところが、このFlashが曲者である。数々のユーザービリティテストやアイトラッキング調査の結果から、Flashの使い方を一歩間違えると、途端にユーザーが使えない代物になってしまったり、見向きもされなかったりすることがわかっている。多数の要素を限られたスペースに入れるがゆえに、その実装には細心の注意を払い、ユーザーにきちんと見てもらえるものに仕上げることが重要なのだ。

そこで、今回はトップページにおけるFlash、その中でも「切り替え機能の付いたFlash」について考えてみたい。まずは実装時に配慮すべき基礎的な観点を解説し、その後で効果的かつユーザーにとっても使いやすい見せ方について具体的な例を取り上げたいと思う。

ポイント1：
ユーザーへの視覚的伝達を意識し、
「次にどんな情報があるか」が
わかるようにする

ウェブサイトの役割が多様化し、訴求したい情報をコンパクトに見せるために、切り替えタイプのFlashを利用するサイトも増えつつある。一見、スペースを効率的に使えているように見える「切り替えFlash」だが、がんばって作ったものでも、ユーザーに使ってもらえなければただの「デザイナの自己満足」に終わってしまう。そのためには、ユーザーに対して切り替え機能の存在を明確に伝える必要がある。

具体的には次のような方法があるだろう。

• Flash読み込みのタイミングで、切り替えの動きをわざとユーザーに見せ、機能の存在を伝える。
• マウスの通過しやすい位置、目線の流れの中に切り替え機能を置き、クリックなし（マウスオーバー）でFlashの切り替えを発生させる（ただし、この場合は予想外の切り替わりが生じることでユーザーを混乱させることがないか、確認が必要である）。

逆に、ありがちだが犯してしまいやすい間違いが、「小さなサムネイルだけを表示する」方法である。ちょっと極端な例かもしれないが、図2のような切り替えは要注意だ。この例では、「新卒・第二新卒採用」の下に切り替えボタンが設置されている（図2）。

図2　悪い例（サンプル）
切り替えボタンとなる小さなサムネイルが、デザインに溶け込んでしまっている。ユーザーに気づかれにくいうえ、切り替わりで何が現れるのかがわかりづらい。

この方法は、一見スペースを非常にコンパクトにまとめているように見えるが、切り替えられることがユーザーに気づかれにくいだけでなく、「何が現れるのか」が具体的に想像できず、見過ごされる可能性が高くなってしまう。

Flash切り替えを実装するにあたっては、ユーザーにしっかりと気づいてもらったうえで、「そこをクリック（またはマウスオーバー）することでどんな情報が現れるのか」が伝わるように配慮しよう。たとえば、図2の例であれば、サムネイルの下にちょっとした文言を一言添えるなどのユーザーへの配慮を行うことで、逆にぐっと使いやすくなるだろう。

ポイント2：
ユーザーが切り替えできる環境を
常に維持したうえで
現在地を明示的に伝える

もう1点、切り替えFlash実装の際に気を付けたいのが「ユーザーのアクションによって切り替えができる状態を常に維持する」ということだ。

たとえば、図1で例にあげたNTTコミュニケーションズのFlashでは、右側のボタンへマウスオーバーすることでFlashが切り替わる。常に3つの選択肢が具体的な商品名でわかりやすく表示されており、ユーザーにとって非常に利便性が高い。さらに、現在選択されている情報はFlashと背景色でつながり、他の2つはグレーアウトして表示することで、「今どの情報がメインのエリアに表示されているのか」が一瞬でわかる点でも優れた実装と言えるだろう（図3）。

基本的な事項かもしれないが、多数のサイトを見ていても案外実装されていないことが多く、ぜひ一度はチェックしてもらいたいポイントだ。

図3　ユーザーのアクションによって切り替えができる状態を常に維持することが重要
右側のボタンへマウスオーバーすることでFlashが切り替わる。常に3つの選択肢がわかりやすく（具体的な商品名で）表示されており、ユーザーにとって非常に利便性が高い。

ポイント3：
「自動切り替え」は
ケースバイケース
アクセス解析を参考に

「自動での切り替えを行うべきか否か」「行うなら何秒で切り替えるべきなのか」といった点で悩んだことがある方もいらっしゃるのではないだろうか？ この部分については、Flashのクリエイティブやサイトの特性がかなり大きく影響するが、

• 一定の文字情報（キャンペーン内容など）が書いてあるにもかかわらず、すぐにバナーが切り替わってしまため、ユーザーがしっかりと内容を読むことが困難。
• 頻繁に動きが生じるため、クリックしようと思っても異なるリンク先へ移動してしまう。

などの事態が生じないように、自動切り替えを行う際にはある程度余裕を持って行うのがいいだろう。

また、切り替えのタイミングを計る数値としてぜひ参考にしてほしいのが、アクセス解析、その中でも特に「トップページにおけるユーザーの平均滞在時間」だ。平均滞在時間が短いページで、あまりにゆったりとした切り替えを行っても効果は薄いし、逆にユーザーが長くページにとどまっているようであれば、その分Flashの動きもゆっくりにしてもいいだろう。実際のユーザーの行動を数値で把握することで、Flashに持たせるべき「間」をより具体的に推し量ることは可能なのだ。

優れた切り替えFlash実装の例

ここまであげた3つのポイントで、切り替えFlash実装時に踏まえるべき基礎的なポイントを解説してきた。最後に、限られたスペースの中での見せ方を工夫することで、有効に切り替えFlashを活用している具体的な事例をいくつか紹介しよう。サイトによって利用できるスペースや表現上の制約は異なると思うが、参考になるインターフェイスばかりだ。ぜひ、自サイトをデザインする際の参考として役立ててほしい。

au by KDDI

図4　au by KDDI（http://www.au.kddi.com/）
アコーディオン型のメニューがFlash内でスムーズに移動して切り替わる。操作結果をユーザーが想像しやすいデザインだ。

アコーディオン型のメニューがFlash内でスムーズに移動して切り替わるように実装されている。初期状態で3つのセグメントがあることが明確であり、暗くなっている領域をクリックないしはマウスオーバーすることによって詳細情報が現れる（であろう）予想をユーザーが立てやすい構成になっている。複数の情報を見てもらうための配慮が行き届いているといえるだろう。

また、Flashを読み込んだあとや、ユーザーがしばらく何もしないでいると、領域が自動的に動き、「このエリアが切り替え可能であること」がユーザーに明示的に伝わる点も見逃せない。ちょっとした配慮であるが、ユーザーにとっては大きなヒントになりうる工夫だ。

IBM

図5　IBM（http://www.ibm.com/jp/）
大きなバナー下でメニューを切り替えるタイプ。非常にわかりやすい見せ方になっている。

大きなバナー下でメニューを切り替えるタイプ。それぞれのメニューが大きく、ユーザーの目線が通過しやすい位置に、サムネイルと具体的なテキストを入れて配置されているため、ユーザーにとって非常にわかりやすい見せ方に仕上がっている。バナーからサイト内への誘導（リンク）がやや弱いのがもったいないところだ。

Yahoo! Kids

図6　Yahoo! Kids（http://kids.yahoo.com/）
3D回転タイプのFlash。直感的に操作を理解できるのが特徴だ。

画面は米国Yahoo!のもの。日本ではアマゾンも取り入れている3D回転タイプのFlashだ。現在表示されているもの、隠れているものが明確であり、かつ左右の回転用の矢印もきちんと目立つようにデザインされている。そのため、このタイプのインターフェイスに慣れていないユーザーでも、動作についてすぐに理解できるだろう。

この方法に限らず、Flashの切り替えを採用する場合は、切り替えの方法をユーザーが直感的に理解できるようデザインされているか、常にチェックするように心がけたい。