当ホームページのリンクボタンはカーソルを乗せると、ボンヤリと背景色が変わります。え？微妙すぎてわからないですか？そうです、その微妙な変化に意味があるんです。
※対応ブラウザ：Chrome、Safari、Firefox

微妙な変化＝自然な感覚

注意していないとわからないような微妙な変化、これがユーザーの「感覚」に大きな影響を与えます。次のサンプルにマウスカーソルを合わせて比べてみてください。

リンク1リンク2リンク3

これは今までの一般的なリンクボタンで、カクカクとして無機質な印象をうけます。

リンク4リンク5リンク6

反対にこちらのリンクボタンは、どことなく自然な感じを覚えませんか？これは背景色が?ボンヤリ変わるアニメーションを使用しているためです。

「自然さ」「リッチ感」の演出

こういった微妙な変化は、感覚的に「自然さ」や「リッチ感」といった印象を与えます。

デジタルの世界では、ほぼ0秒でボタンの色を変えることが可能ですが、現実の世界ではありえません。時間をかけて変化することが私たちの感覚では「自然」なのです。この手法はiPhoneのインターフェイスで有名です。例えばiPhoneのスクロールの操作は、画面に表示されたページを実際に触れているような感覚を再現しています。

また、すぐ点灯する蛍光灯よりも、少し時間のかかる白熱灯のほうが高級感を演出できるように、時間にゆとりをもたせることでリッチなイメージや安心感を与えることもできます。

CSS3の機能「CSS Transitions」でより簡単に

今まではアニメーション用のプログラムを組むことで再現していた機能ですが、ウェブサイトのカラーやレイアウトを定義する言語のひとつ「CSS3」の登場で格段に簡易性と自由度が上がりました。今後のデザインの演出として使用してみてはいかがでしょうか。

[contact]