動くWebサイトと、うるさいWebサイトの違い

プログラマーなので、Webサイトのどこかに自分の技術を見せるものを置きたくなります。昔はそれが格好いいとさえ思っていて、ファーストビューに動きを2つも3つも共存させていました。技術を見せることに悦に入っていた、というのが正直なところです。

詰め込むほど高級に見えるはずだと思っていたのですが、逆でした。動きは、足すほどダサく見えます。

動きは脇役で、脇役が出すぎると主役と喧嘩する

サイトの主役は、写真だったり、短いキャッチコピーだったり、つまりは店そのものです。動きはその脇に置くもので、主役を引き立てるためにあります。

脇役の主張が強いと、主役と喧嘩します。ファーストビューで背景が派手に動いていれば、その前に置いたひとことは弱くなる。仮に動きを一つに絞ったとしても、それが主役より目立ってしまえば同じことです。

技術を詰め込んだ画面が素人っぽく見えるのは、これが原因です。技術は優れていても、余裕がない。

内容と合っていない動きは、浮く

動きの出来とは別に効いてくるのが、その動きがサイトの内容と合っているかどうかです。合っていない動きは、どれだけ凝っていても浮いて見えます。そうなってしまうと、それはもう自己満足でしかありません。

いまでは、そのサイトで何を伝えたいかに合わせて、何を入れるかを考えています。

• 毎朝すこしずつ豆を焼く店なら、熱を入れ続ける時間
• からだをゆるめに行く場所なら、ゆるんでいく時間
• 数字を預かる事務所なら、散らばった数字が最後に確定する
• みんなで手を動かす作業所なら、ひとりずつ違う、はたらく速さ

画面の上ではどれも同じ「背景が動いている」ですが、それぞれに固有のメッセージを乗せています。

画面の外に出たCanvasは、描画を止める

見え方の話とは別に、作法として決めていることもあります。

スクロールで画面から出たCanvasは、誰の目にも入っていません。裏に回ったタブも同じです。見られていないあいだは描き続けても、電池と処理を使うだけなので、そこは止めます。地味ですし、たいてい気づかれません。でも、どのサイトでも徹底しています。

いまは、動きで腕を見せようとは思わなくなりました。店がよく見えていれば、それでいい。