ボタンデザイン再考だったりして

では、まずタイムラインからご覧下さい。

こうして見ると、yahoo.com のページ上部にあるボタンは、やはりファイルサイズが大きくなりすぎるのを嫌うポリシーだからか、昨年までは実に地味なボタンでした。というか、一見して何のボタンなのか分かりにくいという感想をずっと持っていたんですが、他の方はどうなんでしょうか。My Yahoo! のボタンとかは使い始めると慣れるんですが、90年代の後半に Yahoo! を使い始めた頃は、このメガネが「Cool」という意味にどうしても連想できなくて、ずっと違和感を覚えていました。サイトについて cool って言うときは「頭がよい」って意味じゃないだろ、って。まぁそうしたつまらない混乱を引き起こすボタンはそのうち消えてしまい、Yahoo! が提供するメールやオークションのボタンに取って代わられています。その後は My Yahoo! のボタンを追いかけていましたが、2007年になって大がかりなリニューアルを経てから、ロゴのすぐ下という押されやすい位置へ移動したからか、絵柄もなくなっています。それまでロゴの左右に配置されていた他のユーティリティは、もっと大きく絵柄もカラフルになって、タブの Ajax 切り替え表示へと変更されています。ボタンがどうのという以前に、「ディレクトリ検索からの撤退表明」という読み方ができるリニューアルですが、見た目としては Windows Live のテイストと似た落ち着きがあります。あ、ページのデザインはどうでもいいですね。

次に Adobe Acrobat Reader (Adobe Reader) のボタンですが、長らく黄色いボタンだったのが数年前から角丸のボタンになって、本年からサイズも大きくテイストも変わりました。ボタンのテイストは流行で色々と変わるのでしょうが、Adobe Reader という言葉が小さくなって視認し辛くなった点はマイナス評価しています。かといって、代わりに左の赤い四角（中に描かれている Acrobat のロゴは綺麗な曲線なのだと思いますが、線が細すぎて、解像度の高いモニターでは潰れてしまっているという皮肉に終わっているのではないか）が Acrobat のイメージとして直ちに理解できるかと言うと、これから慣れてくればそうでもないのかもしれませんが、どうなんでしょう。Adobe という会社のロゴも同じだと思いますが、赤色と白色が互いに占めている面積の比率も「Adobe っぽい」という印象の一つだったと思うので、いまの Adobe Reader のロゴはその印象よりも赤すぎると思うんですね（個人的には Acrobat Reader と言えば、昔の黄色の方が印象は強かったですけれど）。

で、最後に apple.com のホームボタン（アップルボタン）です。いやはや、2000年に Aqua 風のテイストが登場してから、途中で 2002 年に少し洗練されたり 2003 年にカーボネイトのテイストへマイナーチェンジしていますが、そう大きな変化はないと言えます。んがしかし、Apple もついに今年に入ってテイストを変更し、Yahoo! と同じくページの横幅も 980px に広げています。５年くらい前なら（ノートユーザに優しくないという理由で）一も二もなく却下されていた筈のワイドサイズです。あ、またページデザインの話にズレ始めてるな（笑。ということで、apple.com のヘッダー部分に置かれているボタンはソリッドな印象になっており、ハイソな演出を狙っているのかどうかわかりませんが、それまでのテイストと比べてウェルカムな雰囲気から一歩どこかへ進もうとしているように思えます。

こうして見てきて、ボタンデザインについて少なくとも３つのサイトから言える転回点はいつだったのでしょうか。 一つは明らかに apple.com で Aqua 風のボタンが登場した2000年だったと言えます。ウェブページの表示スピードという点では好ましくないと言われてきた、画像に色数を多く使うことになるグラデーションをいきなりぶつけてきました。前年までのフラットなボタンと比べると、公開された当時のインパクトは大きかったでしょう。それは、「Aqua風ボタンの作り方」みたいなページが国内外で乱造されたことにも現れています。

それから一つだけ細かい点で指摘しておきたいのは、Acrobat Reader のボタンが2000年だけテキスト部分にドロップシャドウをかけていたことです。すぐに取りやめとなって、次に出てきたボタンは「Get」と「Acrobat Reader」 の文字の比率が大きく異なっている事実を見ても、バナーやボタンに使う文字の取り扱いという点で Adobe のデザイナーさんが何かを学んだのでしょう。

次に Yahoo! のボタンと Adobe Acrobat のバナーが2005年で同時にテイストを新しくしている点も見ておきましょう。Yahoo! のボタンはだいぶ洗練された印象がありますし、色数もたくさん使えるようになったのか、グラデーションの通し方も不自然さがなくなっています。また、Apple のデザインに影響されたのか、影を落とす方向がそれほどイビツではなくなってきていますね。昔の立体的なロゴって、なんであんなに馬鹿げた方向から影を落とすのかと思えるものもたくさんありました。シャドウと縁取りヘタレのしるし。

あとは言うまでもなく今年の動向ですね。「Web 2.0 デザイン」とか、よくわからないことを言ってる人もいるようですが、デザイナーさんたるもの戯言は聞き流しておくのが精神衛生によいでしょう。やはり基本と言いますか、その時代にあって違和感を伴うほど垢抜けしないテイストを避ければ、あとは本来のサイト全体の設計主旨に沿った（あるいはサイト全体の主旨を損ねない）テイストでよいのかなと思うわけです。