CSSから考えるデザインのディテール第1回 画像を使わず、CSSだけでこだわりボタンを作る

CSSの役割

「CSSから考えるデザインのディテール」という連載を新しく始めることになりました。この連載は、「気持ちいい」をデザインする会社、株式会社ツクロアの秋葉秀樹と秋葉ちひろの2人でお届けします。

さて、連載の記念すべき第1回目は、ちひろが担当します。まずは、改めて今のCSSの役割を確認しておきましょう。

今まで、CSSを勉強されてきたみなさんは、CSSをどのようなものと考えているでしょうか。いちばん大きな役割は、「Webページのデザインをする」ということです。

文書構造や内容はHTMLに任せ、デザインのスタイリングを、CSSを使ってやっていきますよね。

しかし、デザインとひとことでいっても、色々な役割があります。

これらはすべて「デザイン」です。

これらのことを表現するためには、決められたCSSを記述すれば、簡単に表現できます。例えば、

color: #666;

と書けば、文字の色はグレーになりますし、

background-color: yellow;

と書けば、背景の色は黄色になります。

ここまでは、知っていれば誰もができることです。重要なのは、このあとの考え方。これらのプロパティをどのように組み合わせて「デザイン」をしていくかということです。

この連載では、そんな「CSSの基本は理解したが、もっと使いこなして色々な表現をしたい」というデザイナーさんに向けて、「CSSからデザインを考えること」をお伝えしていこうと考えています。

ではまず、いちばん簡単な例として、CSSでこだわりボタンを作ってみましょう。

ひとまずCSSでボタンを作ってみる

少し前までは、画像を使ってテクスチャをのせたり、飾りが山盛りのボタンもたくさんありました。

現在では、スマートフォンの普及によって、不要な飾りをできるだけ排除して、シンプルな情報だけを伝えることが重要であると考えられています（画像は容量が大きいので、飾り画像をたくさん使うと、通信に使うパケット量が増える）。

ですので、ここでも画像を使わずにCSSのコードだけで表現する、シンプルなボタンを考えてみます。

これは、ボタン…と言うべきかどうかわかりませんが、とりあえず4色のいちばんシンプルなボタンです。

CSSは、次のように「白い文字」と「各背景色」を設定しただけです。

a{ text-decoration: none; display: block; width: 150px; color: #fff; background-color: #069; padding: 0.8rem; }

Webページのデザインによっては、これだけでもボタンとして認識できるかもしれません。でも、このデザインだけではボタンとしてわかりにくい場合があります。

なぜボタンとしてわかりにくいのか

ボタンとしてわかりやすくしなければならないのですが、その前に、なぜわかりにくいのかということが重要です。

先程のボタンがボタンらしく感じられない理由として、押せるかどうかが視覚的にわかりにくいことが挙げられます。背景色がベタ塗りで、その上に白い文字を置いているだけなので「押せる感じ」がしないのです。

では、これを解決するためにはどんな変更を加えますか？

例えば、次のような解決策が考えられます。

  1. 立体感をグラデーションで表現する
  2. 押せることがわかるように、下に少し影を付ける
  3. 押せることがわかるように、上にハイライトを付ける

これらの表現を単独で加えるだけでもいいかもしれませんし、すべてを盛り込んでもいいでしょう。ここでは、2と3の表現を加えてみます。

「押せる感じ」をCSSで表現する

下側に少し影を付けてみました。フラットな感じですが、下に影が付くことで、少しだけでも浮き上がっている感じを表現できました。

さらに、上側にハイライトを付けました。ハイライトはなくても問題ないですが、付けることで、よりこだわった表現が可能となります。

CSSコードを確認する

それでは、CSSコードを確認してみましょう。
まず、影のみを付けたものです。

a{ （略） border-bottom: 3px solid rgba(0,0,0,0.2); }

borderプロパティを使いました。下側のborderを影として表現しています。

え！ CSS3のbox-shadowプロパティを使わなくてもいいの？

もちろんbox-shadowプロパティを使って影を付ける方法もありますし、それでも構いませんが、ここでは「こんな方法もあるよ」というのを紹介するために、あえていつもなにげなく使っているborderプロパティを、影の表現として使いました。

次に、先程のハイライトも付けたボタンのCSSコードです。

a{ （略） border-bottom: 3px solid rgba(0,0,0,0.2); border-top: 3px solid rgba(255,255,255,0.2); }

今度は上側のborderをハイライトとして使いました。

影とハイライトを効率よく付ける、色の設定

ボタンの色が1色しかない場合は、影とハイライトの色を決め打ちにしてしまってもよいでしょう。でも、ボタンが何色もある場合は、それぞれについて影とハイライトの色を決めるのは一苦労です。

ここで便利なのが、「透過」の色指定です。背景色に関わらず、それぞれ黒と白で20%の透過に設定しています。

borderプロパティは要素の内側に重なる形で描画されますので、透過色を指定すると下の背景色と重なって、それぞれにおいて自然な色を描画してくれるのです。

実際の色も、それぞれの背景色に近い影やハイライトの色となって描画されています。

もう少しディテールを加えてみる

最後に、もう少しディテールを加えてみましょう。まずは、角丸にしてみます。

CSSコードでは、

border-radius: 10px;

を追加するだけで、簡単に角丸になります。

さらに、「Button」というボタンラベルにエンボスを付けてみると、このようになります。

エンボスは、次のようにtext-shadowプロパティを使って影を付け加えるだけで表現できます。

text-shadow: 0 -1px 0 rgba(0,0,0,0.5);

初回ということで、簡単なボタンの表現をCSSから考えてみました。作り方を少しだけ工夫することで、今回の影やハイライトの色指定のように、効率的にデザインすることができます。

次回からは、もう少し複雑なものを考えていきたいと思います。では、また次回をおたのしみにー！