読み込み中アイコンに「中割」が入っている

loadingicon-circle-dotページ読込中など、これが回転しているアイコンをWebサイトやアプリでまあまあ見かける。
私はこれにかなりの確率で違和感を感じる。
しかも、結構デザインに力が入ってそうなサイト・アプリでも違和感のあるコイツが出てきたりする。
違和感のない場合もある。

時々みかけた読み込み中アイコン

時計っぽいものが回るタイプiconic-clock
このアナログ時計のアイコン化タイプも、かつてはチラホラあった。最近はあまり見ない。
小さな丸が円形に並んでいるのは、これの派生形なのだろうか。
サイズが大きい丸から小さい丸へのグラデーションもある。
loadingicon-landoltWindowsやFacebookだとこういう「C」を回転させている。
かなり小さいアイコンだと、単純にフラットな「C」が回るだけのもある
 
Android 5.0 Lollipopでは、円形のバーが伸縮しながら回転する。
Twitterも同じように、伸縮しながら回転。
どうもSVGとCSSで実装できるようだ。

Android Lollipop Material Design Spinner
Android 5.0 Lollipop のデフォルトタイプ

回転するアイコンは単純に回転させてはいけない

なぜなら、不要な「中割」が表示されるからだ。
「細かく間の止め画を入れる」=「中割を増やす」=滑らかに動いて見える。
そこが逆によくないのだ。
時計のようなアイコンが一番分かりやすいので、比べてみる。
時計型アイコンの比較
「中割」が入ると、時計の針が進んでいるのではなく、
時計が文字盤ごとぐるぐる回転しているように見えてしまう。
違和感の正体はこれである。
CSSやjQueryで単純に「回転アニメーション」を指定すると右側の状態になってしまう。
静止画を回転させる場合、このドットや時計型は「1/8秒ごとに45度ずつ回転」などと指定しなければならない。

視覚情報と認知能力

これは人間の視覚と知覚に関わることであり、アニメーションや動画が本来的に持っている特性である。連続する静止画を短時間に見ると、人間は動いているように感じる。
時計型の例では、元の一枚ずつはこうなっている。
時計型アイコンのフレーム分解図
映画の説明で『残像』を利用しているという説を聞いたことはないだろうか。
最新の研究では、これも違うのではないかと言われているらしい。
「視覚からの情報を元に、脳が動画を再構築しているのではないか」…
錯視(だまし絵)とも関係している。
この辺りから先は、認知科学とかの領域に入ってしまうので、
私にもよく分からないし、恐らく最新の研究でも分かっていない領域だろう。
しかし、どうもこの辺り「変に感じる」人は少ないのだろうか。
私の観測範囲ではハンバーガーアイコンの問題は提起されても、
このアニメーションの問題が提起されているブログやサイトは見たことがない。
なので詳細を解説してみた次第である。

Cool Japanなのに情けないぞ

では「本家」たるアニメの世界ではどうなのか。
日本のアニメでは相当に「動きの間の状態」を描いていない。
魔法つかいプリキュアを例に取る。
キャラクターもカメラもスピーディーに動いているオープニングのワンカットである。
魔法つかいプリキュア後期オープニングの1カット
山吹色の髪の「みらい」が画面にインしてくる画は、髪が見え始めてからたった3枚。
1枚目の「動画」2枚目の「動画」
3枚目の「動画」4枚目の「動画」
5枚目の「動画」6枚目の「動画」
つまり、間を描かないことによってこそ描ける動きがあることを、日本のアニメーターは知っている。
こういう風に静止画を繋げると、
「綺麗に動いて見える」「スピーディーでかっこいい」「ゆったりと情緒的になる」等々
そういう表現を最先端で追求しているのが日本のアニメーターなのだ。
まさにCool Japan。
なのにWEBデザインやアプリは画像持ってきて、jQuery/CSSで回転の命令をコピペして済ませてるんじゃないか?
そうじゃない。
ちょっとしたアイコンのエフェクトだって、同じアニメーションなんだ。
もっと気を配って作るべきではなかろうか。

Comments

  • KitamiAkiya より:

    円形の読込アイコンは、
    Windowsではプロセスリング
    Androidではスピニング待機カーソル
    というプログレスバーの一種らしい。
    また、このアニメーションはベータ運動という錯視を利用した、かなり高度な表現手法なのではないだろうか。
    ファイ現象 Wikipedia

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください