PHENOMENA フェノメナエンターテインメントのトップページへ
ユーザーインターフェースデザイン研究室back研究室のホームへ戻る
画面切替エフェクトの有効性
パソコン画面の影響を受け、電子機器の操作画面にもGUI要素のアニメーションやエフェクトを実装するケースが発生してきています。
電子機器の非力なCPUパワーでパソコンのように大胆な動きはなかなか実現できませんが、ユーザに対して画面遷移の構造を伝えたり、フォーカス状態を分りやすくする手段としてアニメーションやエフェクトは有効な場合があります。
しかしながら、アニメーションやエフェクトは動く速度と細かい変化の指定をきちんと行う必要があるため、設計・開発現場では扱いに困るGUI要素の一つとなっています。
フェノメナエンターテインメントでは、ビデオ制作やマルチメディアコンテンツの制作を通じて得た経験をGUI上のアニメーションやエフェクトでも応用しています。
本稿では、画面の切替エフェクトを中心に、GUI上での効果について触れてみたいと思います。
[ エフェクト or アニメーション ]
区別「エフェクト」と「アニメーション」という言葉はGUI上では混同して使われることが多く、仕様指定の際に誤解が発生することがよくあります。
私たちでは、ほぼ画面全体を切り替えて別画面に遷移する際に適用するのを「画面切替エフェクト」と呼んでいます。一方、画面全体は変化せず、一部のオブジェクトが変化することを「アニメーション」として位置づけるようにしています。操作の際にボタンが「ピカッ」と光ることを「エフェクト」とも呼んだりしていますが、これは「アニメーションの1種類としてのエフェクト」として扱うように注意をしています。
[ 画面切替エフェクトの種類 ]
画面全体を切替えるエフェクトは基本となる数種類に区分することができます。ビデオ作成ツールやPowerPoint等に様々なエフェクトが用意されていますが、利用しやすいのは基本的な数種類に絞られると思います。

↑ 左側リストをクリックすると右側でサンプル再生します
[その他]として、マスク、サイズ変更、上下左右の動き、透明度を組み合わせた様々なエフェクトが存在しますが、定型化しにくいので、エフェクトの基本種別は上記[オーバーラップ]〜[フェードイン/アウト]の5種類ととらえておけば十分だと思います。
[ 状態遷移に対するエフェクトの使い分け ]
「切替エフェクト」を状態遷移に使用する場合、遷移の意味(パターン)に対して規則的にエフェクトを割り当てることで、ユーザが操作内容を理解しやすくすることができます。
遷移例左図は、シンプルな画面の遷移構造を想定した例ですが、
[ a ] :「上位画面から下位に遷移する」
[ b ] :「下位から上位に戻る」
[ c ] :「同一階層内で遷移する」
という3種類の遷移種別がここでは存在しています。

上記3種類の遷移に対して最もベーシックな切替エフェクトを割り当てると、下表のような構成になります。
[ a ]　上位から下位に遷移する Effect例ズームイン
[ b ]　下位から上位に戻る Effect例ズームアウト
[ c ]　同一階層内で遷移する Effect例スライド
「ズームイン/アウトで別階層への移動」、「スライドにより同一階層内での移動」という切替エフェクトを割り当てることで、ユーザに対して状態遷移を説明しようとするものです。

留意すべき事は、「切替エフェクトの適用は全遷移に対して規則として割り当てる」点にあります。
ユーザに対して「□□の動きをした場合は、○○○という処理が行われた」と認識してもらうためには、一貫したエフェクトの運用によりユーザ側に学習してもらうことが必要だからです。
多様な切替エフェクトを乱用すると、設計側が期待するほどユーザにエフェクトの意味は伝わらず、「オオッ! 画面が動いた」とユーザは感心するだけで機能的な意味合いまでは伝わりません。
以下の3つの画面切替エフェクトのサンプルは、同じ階層遷移を別のエフェクトで作成したものです。
どの動きが操作に対して適切なものと感じるかを試してみてください。
※それぞれ右下の[back] : [next]をクリックすると画面が遷移します。

階層移動を全て[ズームイン/アウト]で処理したサンプルです。
実機実装の開発負荷を想定して、エフェクトは次画面ではなく単色の矩形を使用しています。
「選択/確定した対象が拡大」という直接的な表現になっています。

階層移動を[上下のスライド]で処理したサンプルです。
「階層感覚」よりも「ユーザが操作を進めていく感覚」を強く伝えることができる雰囲気になっています。

ちょっとトリッキーな動きで処理したサンプルです。
「選択/確定した対象が拡大」というズームイン/アウトに近い動きにデコレーションを加えたものです。
[ 画面エフェクトを使用するにあたり ]

◆使用は控えめにする
「状態遷移を表現するための画面エフェクトはできるだけ少なくする」は製品のGUI開発を行う上で重要なことになります。
広告的なホームページ等のように、同様の操作をくり返すことの少ない場合はいいのですが、機器操作においては、毎回行わなくてはならない操作にエフェクトが付帯していると、最初は良くても使いこなすうちにエフェクトが苛つく原因になりがちです。
ただ切替るだけであれば遅延時間の無い操作も、エフェクトを付帯させることで1秒近い遅延が発生し、目的の設定を行うために数階層を遷移しなくてはならない場合は、エフェクトが邪魔に感じてしまいます。
画面エフェクトを実装させる際には、必要最低限の使用箇所を吟味するとともに、「できるだけ短時間で完了するエフェクトをデザインする」必要があります。

◆時間軸の管理
画面切替エフェクトの質感表現において、加減速を含めたエフェクトの速度が重要になります。しかしながら、デザイン担当者がプログラム担当者に微妙な速度の雰囲気を伝えることはとても難しいため、適切なコミニケーション手段が必要です。
「スッ」と動かす、「フワッ」と登場などと言葉で表現して伝えることはまず無理です。
Flashなどにより動くサンプルを作成し、さらに文章や図による説明資料を提示する必要があります。
また、実際の機器へ実装した際にはエフェクトの実行速度が機器の性能で変化するため、実機上での速度の再調整が必要になります。
map_iconページのトップ