ウェブページなどで、従来のボタンのデザインのように、立体的に見えるようにデザインしたものをリッチデザインというそうです。マックやWindowsが登場してからごく最近まで、画面上に出っ張りがあるように見せるユーザーインターフェース(UI)がずっと続いていました。それまでのCUIの時代は、ほぼテキストだけだったので、GUIで容易になったことをどんどん活用したのではないかと思います。

一般の人がホームページを作り始めたころは、ホームページビルダーに付属されていたアニメーション画像を多用したサイトもたくさんありました。動きがあるほうが、コンピュータで表示している感じがあったのでしょう。紙では表現できないことだからでしょう。だたし、手作業なので、半年過ぎても記事リンクに「NEW!!」というキラキラした画像がいつまでもあるようなサイトもありました。フラッシュもセキュリティの面から衰退。

このブログを始めたころは、ボタンは立体的で、タイトルなどのクリックしても何も起きない場所まで影を付けて立体的にしていました。だいたいどのサイトもそうだったと思います。このサイトもつい最近までそうでした。そうすることに疑いもなかったです。

最近、iOS7のころから、突然「フラットデザイン」という言葉が出てきました。もちろん一般人にとって「突然」というだけで、いろいろな動きはあったのでしょう。単にユーザーインターフェースを研究しているうちにたどり着いただけではないようです。

アニメーション画像は、広告以外に使われなくなり、企業のロゴがあるトップバーも細くなり、白をベースにシンプルなページ構成。リンクとリンクの行間も隙間があって、見やすくなりました。すっきりしてきたのは、スマホ対応が大きな要因だったようです。指でタッチするので、間隔は広くないと間違ったところをタップしてしまう。

さらに最近、マテリアルデザインという言葉が登場しています。行き過ぎたフラットデザインの揺り戻しのようでもあり、ページをめくったり、タップした時のアイテムが広がる感じなどの物質感を表現したもの。エフェクトは面白いのですが、操作性の統一感はまるでない。もちろんなんでもかんでも立体的にしていたころも、統一感はないのですから、そんなものです。

たぶん、使う側が求めているのは、クリックなりタップなりしたときに、反応がある場所なのかどうかが目で見てわかることだと思います。ボタンをなくしてしまえば、色を変えない限り反応があるものなのかがわかりません。スマホだとマウスを載せてマウスカーソルの変化で判別するということもできません。

どのサイトもスタイルシートを使って色を変えているのですが、確かリンクは青、すでに開いたリンクは紫だったと思います。サイトデザインの統一感のためにその通りになっていないサイトが多いので、そんな色使いだったことを知らない世代もあるかもしれません。しかし、もし統一するなら、もしわかりやすくリンクを表現するなら、青と紫の色分けがわかりやすいのではないかと思います。いわゆるデファクトスタンダート(?)。ただし、濃い青(紺)は、黒との区別がわかりづらいので、却下。

マテリアルデザインを推進する前にやるべきことはあると思います。