[CSS]あなたのウェブデザインに繊細を加える珠玉のスタイルシート

繊細のポイントは「気がつくかな？」ぐらいにすること。
そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。

Take Advantage of CSS3 to Achieve Subtle Design
デモページ

下記は各ポイントを意訳したものです。

はじめに

繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。
私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。

繊細なデザインが難しいのは、「もう少し多くした方がいいのかな？」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。
以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。

1. transition

アニメーションで少しずつ変化するトランジション効果はCSSの強力なツールの一つです。
下記は、テキストのカラーが少しずつ変化するナビゲーションです。

デモページ

CSS

マウスのホバーでカラーが「#282828」から「#808080」に変化します。このカラーの変化自体は微妙なものではありません。微妙に変化させるにはカラーを少しずつ変化させることです。
ここでのポイントは持続時間で、これが繊細を生み出します。持続時間が長すぎるとこの効果は目立ってしまうので注意が必要です。

note

トランジションの指定をホバー時ではなく、a要素のスタイルにしていることに気がついてください。これにより、マウスが離れる際にもトランジションの効果が適用されます。

2. nth-of-type

「nth-of-type(n)」や「nth-child(n)」は、n番目の要素に対してスタイルを適用することを可能します。これは数字だけでなく、奇数や偶数、数式などでも指定できます。
下記の例ではn番目に異なるmarginを指定しています。

デモページ

HTML

CSS

このスタイルシートはどこが微妙な点なのでしょうか？　ポイントは二つです。

1. 異なる上下のマージンによって上に配置されたアイテムは、より重要に見えます。上記の例では「Home」「Work」「Blog」が人々の目につくことになるでしょう。
2. 異なる左右のマージンによってグルーピングがされています。「About」と「Work」、そして「Forum」と「Blog」といった類似したページがまとめられています。これは対話型のコンテンツとそうでないものを分けたものとなっています。

ユーザーがこのナビゲーションを初めて見たとき、目につくのは「Home」でしょう。そして、現在見ているページが「Home」であることを認識すると、次に「Work」を見る可能性が非常に高いです。そして「Work」内のページをいくつか見た後、「Blog」に移動するでしょう。

これはユーザーが次に行くべき場所のヒントを提供する効果があります。ただし、必ずその順番でクリックするということを保証するものではありません。
しかし、想定した通りにクリックすることは時々起こるでしょう。その可能性に私は賭ける価値があると思います。

3. gradient

グラデーションはデザインに繊細を加えるシンプルな方法です。しかし皮肉にもこの中で最も複雑なスタイルシートになってしまいます。

デモページ

CSS

Webkit系ブラウザとMozilla系ブラウザ用の指定を別々に記述します。

このグラデーションは、実際にフォームを使用している時でも気づかないくらい非常に繊細なものとなっています。あなたのモニターではグラデーションが見えていますか？

ボーダーを取り除くと、グラデーションがより分かるようになるでしょう。

テキストインプットとテキストエリアの上部がわずかながらシェードになっています。
このような繊細なグラデショーンは入力の邪魔になることなく（気がつかないかもしれませんが）、何もしていないものより少し魅力的に感じる要因になるでしょう。

Bonus

繊細を加えることに失敗はない

デモページをWebkit系ブラウザ（Chromt, Safari）で一目見て、その後にMozilla系ブラウザ（Firefox）で比較をすると若干の相違に気がつくでしょう。そしてIEで見ると、それ以上の相違に気がつくことになるでしょう。

今回紹介した繊細のポイントの一つに、人々がおそらく気がつかないであろう、ということがあります。
言い換えると、最初のトランジション効果は無い状態でも機能します。二番目の「nth-of-type」もグルーピングがあるかないかだけなので、メニューとして機能します。
最後のグラデーションは、それがどこにあったかさえ指摘することもできないかもしれません。

ブラウザ間の差異は問題ではない

異なるブラウザで異なる外観を反対するのは多くの場合、クライアントでしょう。大部分のクライアントは主要なブラウザ全てで正確に同じ外観のウェブサイトを欲するということです。
しかしながら、若干のクライアントは教育されることで、利点について関心を与えることができます。例えば、少し異なる外観を受け入れることは、HTTPのリクエストとHTMLのエレメントを劇的に減らすことになります。

CSS3を利用しようとするときは、ブラウザの非互換性が問題になるのが現在のウェブの状況です。こういった負担の代わりに、創造力に時間をさくようにすべきです。

ほんの少しの繊細な楽しみ

ここで紹介した繊細は、正確にいうとデザインの繊細ではありません。むしろ、デザイナーとしての繊細です。

私の経験では、たいていの人はブラウザを一種類しか使用しません。ウェブ制作者は異なる多くのブラウザと多くのバージョンでウェブサイトをみるにつれ、このことを忘れがちです。
IEを使用してサイトを訪れたユーザーが、コンテンツが明確でサイトを楽しむことができれば、あなたのデザインは成功したことになります。もし、別のユーザーがChromeを使用して訪れ、コンテンツが明確でサイトを楽しむことができれば、やっぱりあなたのデザインは成功したことになります。そして、そのユーザーは少数の繊細な点を正当に評価します。

もしもあなたがこのようなことを同時に体験できたら、その時はほんの少しの繊細な楽しみを持つことに成功していることでしょう。