当記事では、GUIコンテンツ（Webページやスマートフォンアプリなど）において、ユーザーの操作に対してアニメーションを使って反応を返すときの効果時間・演出時間に関する思いつきを書き残しています。
1. はじめに
私は、あらゆるGUIコンテンツはユーザー操作に対して視覚的な反応を返すべきだと考えています。
Webページで言えば、リンクにマウスカーソルを載せると、リンク色が変わり、マウスカーソルの形状が三角形から指の記号に変化し、リンク下に下線が現れるような、そんな反応が大事だと考えています。
ただし、そのような反応はユーザーにストレスを与える原因であることも理解しています。あまりに長々としたアニメーションは鬱陶しいですし、リアクションの数が多すぎるとかえって混乱します。かといって、アニメーションも無しに急激に変化されるとビックリします。
事の本質は、どの程度の反応・演出が好ましいのか、という程度問題なのです。
2. 本題
この問題に対して、いくつかの対策を考え、試みましたが、どれも決定的と呼べるほどのものではありませんでした。なにより、作るコンテンツごとに各アニメーションの時間を調整しなければならないのは厄介な問題でした。
そんなときに思い付いたのが「ユーザーから見たときに『変化』と呼べる事象を階層状に列挙して、深い階層のものほど変化にかかる時間を短くしてく」という閃きでした。
2-1. 例
例えば、普通のWebページを考えてみます。
あるページを開いたとき、真っ先にユーザーが体験する可能性ある変化とは何でしょうか。それはページが開かれるという変化です。まず、ここにアニメーションを挿し込む余地があります。例えば、フェードインされるのなんか良いでしょう。ただし、あまりに長々とフェードインしているのは鬱陶しいので0.1秒だけアニメーションすることにします。
■ 0.1s: ページを開く → ページが開かれる（ページが描写される）
ページが描写された後に起こりうるアニメーションは色々考えられます。よくあるものとしては、リンクとなる文字列にマウスカーソルを載せたときのアニメーションです。マウスカーソルが矢印から手に変化したり、文字色が明るくなったり、文字列に下線が引かれたりと色々なアニメーションが考えられます。
さて、では、このアニメーションにかかる時間はどのように設定するべきでしょうか。私ならばページを開いたときよりも短い時間に設定することを考えます。
何故ならば、このユーザー操作・アニメーションは、先に述べた「ページを開く」という事象よりも深い階層にある（と、私は考える）ためです。
■ 0.1s: ページを開く
└ ■ ?s < 0.1s: リンクにマウスカーソルを重ねる
この考えについて、上手く言語化できない自分がもどかしいですが、何となく言わんとすることは分かってもらえるかと思います。つまり「リンクにマウスカーソルを重ねる」という操作は「ページを開く」という操作なくしてはあり得ず、そこに私は階層構造を見出したのです。
今回は「リンクにマウスカーソルを重ねる」に関連するアニメーション時間を0.1秒とします。そして、それに合わせて「ページを開く」を0.2秒に再設定します。
■ 0.2s: ページを開く
└ ■ 0.1s: リンクにマウスカーソルを重ねる
さらに「リンクにマウスカーソルを重ねる」には「リンクをクリックする」や「リンクからマウスカーソルを外す」という操作などがぶら下がっているでしょう。
■ 0.2s: ページを開く
└ ■ 0.1s: リンクにマウスカーソルを重ねる
├ ■ ?s: リンクをクリックする
└ ■ ?s: リンクからマウスカーソルを外す
これらの親要素である「リンクにマウスカーソルを重ねる」が0.1秒ですが、これら子要素のために0.2秒に設定し直し、「リンクをクリックする」と「リンクからマウスカーソルを外す」の時間に0.1秒を設定します。また、「リンクにマウスカーソルを重ねる」が0.2秒になったため、「ページを開く」も0.3秒に再設定します。
■ 0.3s: ページを開く
└ ■ 0.2s: リンクにマウスカーソルを重ねる
├ ■ 0.1s: リンクをクリックする
└ ■ 0.1s: リンクからマウスカーソルを外す
このように要素同士を階層状に考え、深い階層ほどアニメーション時間を短くしていくと良いのではないでしょうか。
2-2. 副次的な効用
このようにアニメーションを実装していると、ある瞬間に「アニメーション鬱陶しいな」と思うときが出てくるかもしれません。それは1つのページに搭載する要素の階層を深くし過ぎている合図であると考えます。
そのときはサイト構造などを見直すべきかもしれません。
3. おわりに
ところで、この記事を書いているときに気付いたのですが、これって普通に使われている技法ですよね。例えば、ハンバーガーメニューを実装しているサイトなどでは「メニューを開く」ことの演出時間は「メニューを閉じる」よりも長いか、あるいは同等です。その逆になっているサイトはむしろ珍しいでしょう。
良い考えを思い付いたぞ、と歓喜しただけに、ちょっと残念です。