「ボタン」は、Webページでもっとも重要なコンポーネントの1つ。ボタンをデザインするときは、すでに決まっているデザインにしっくりと溶け込むようにしなければなりません。この記事では、新人開発者が自分でボタンを作成するときに役立つCSSのコード、ツールのほか、ボタンデザインに欠かせない3つの考え方を説明します。
ボタンに関するさまざまな考え方について話す前に、ボタンの基礎についても少し補足説明しておきます。どのCSSコンポーネントが変化するのかが分からなければ、フラットUIとマテリアルデザインの観念の違いを知っていても意味はないでしょう。
それでは、CSSボタンの基本について簡単に復習していきます。
最初にCSSボタンの基本を3つ
よいボタンの定義は、さまざまなWebサイトで主観的に書かれていますが、次のような非技術的な基準があります。
- アクセス性 － もっとも重要な点です。ボタンは障がい者や古いブラウザーでも簡単に利用できなくてはなりません。Webの開放性はすばらしいものです。粗雑なCSSで台無しにしないようにしてください
- 簡潔なテキスト － ボタン内のテキストは短く簡潔に。ユーザーは、ボタンの目的とクリックして起こる動作を即座に理解する必要があります
オンライン上のほとんどのボタンには、色の変更や切り替え時間、縁と陰影の変更に対していくつかのバリエーションがあり、さまざまなCSS擬似クラスを活用できます。そのうちの:hoverと:activeの2つに焦点を当てます。:hover擬似クラスは、マウスがある要素の上を横切ったときのCSSの変化を定義します。一方、:activeは通常、ユーザーがマウスボタンを押してから離すまでの時間を計ります。
擬似クラスを使ってボタン全体の見栄えを変更することもできますが、ユーザーフレンドリーではありません。良い方法とは、ボタンの使い勝手の良さを保ちつつ、基本に少しだけ簡単な変更を加えるというものです。ボタンの基本とは、色、陰影、切り替え時間の3つです。
基本1. 色
色は一番よく使われる変更です。さまざまなプロパティのカラー変更ができ、中でももっとも簡単なプロパティはcolor、background-color、borderです。例の前に、ボタンカラーの選択方法を説明します。
- 色の組み合わせ － 互いに相性の良い色を使います。Colorhexaは、良い色の組み合わせを探してくれる便利なツールです。色を決めかねているときは、Flat UI color pickerを参照しましょう
- パレットの適合 － すでに使っているカラーパレットに適合させるのは良いことです。カラーパレットを探している人は、lolcolorsを参照しましょう
基本2. 陰影
box-shadowを使うと、要素の周囲に陰影をつけられます。縁ごとに異なる陰影をつけられます。このアイデアはフラットUIとマテリアルデザインの両方で活用されています。box-shadowについてもっと知りたい場合は、the MDN box-shadow docsを参照してください。
基本3. 切り替え時間
transition-durationを使うと、CSSの変更にタイムスケールを追加できます。切り替え時間のないボタンだと即座に:hover CSSに変わってしまい、ユーザーにとって使いにくくなってしまいます。ここでは自然な動作にするため、多くのボタンに切り替え時間を設けています。
次の例では、:hoverでボタンスタイルを徐々に（0.5秒以上）切り替えます。
.color-change {
border-radius: 5px;
font-size: 20px;
padding: 14px 80px;
cursor: pointer;
color: #fff;
background-color: #00A6FF;
font-size: 1.5rem;
font-family: 'Roboto';
font-weight: 100;
border: 1px solid #fff;
box-shadow: 2px 2px 5px #AFE9FF;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.color-change:hover {
color: #006398;
border: 1px solid #006398;
box-shadow: 2px 2px 20px #AFE9FF;
}
このように見えます。
切り替えを実行するコードは複雑なので、古いブラウザーでは切り替わりの扱いが少し違ってきます。このため、古いブラウザーに対してはベンダープレフィックスが必要です。
transition-duration: 0.5s /* this is standard and works on most modern browsers */
-webkit-transition-duration: 0.5s; /* helps some versions of safari, chrome, and android */
-moz-transition-duration: 0.5s; /* helps firefox */
transitionがCSSにおよぼす変化を修正するには、複雑でおもしろい方法がたくさんあります。ここではとりあえず基礎をおさらいしました。
すぐに使えるボタンスタイル3つ
1. シンプルな白黒
このボタンはシンプルであらゆるスタイルに利用できるので、私がいつも真っ先にサイドプロジェクトに加えるボタンです。このスタイルでは、白黒という完璧なコントラストを生かしています。
バリエーションは2種類です。互いに似通っていますので、白の背景に黒のボタンのコードのみで説明します。もう一方のボタンを作るには、whiteとblackを逆にします。
.suit_and_tie {
color: white;
font-size: 20px;
font-family: helvetica;
text-decoration: none;
border: 2px solid white;
border-radius: 20px;
transition-duration: .2s;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
background-color: black;
padding: 4px 30px;
}
.suit_and_tie:hover {
color: black;
background-color: white;
transition-duration: .2s;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
}
上のスタイルでは、.2sのtransition-durationの間にfontとbackground-colorが変更されているのが分かります。これはとても簡単な例です。ここから構築を進めるには、好きなブランドの色を使ってみても良いです。ブランドの色を見つけるには、BrandColorsを参照してください。
2. フラットUI ボタン
フラットUIは、ミニマリズムや小さな動作で大きな効果を得ることに注目しています。私はいつもプロジェクトが形になってくると、白黒からフラットUIボタンに移行します。フラットUIボタンはとても小さいので、たいていのデザインに合致します。
上のボタンに動きを加えて改良し、3Dボタンをシミュレートします。
例ではボタンは5つありますが、違いは色だけなので最初のボタンに注目します。
.turquoise {
margin-right: 10px;
width: 100px;
background: #1abc9c;
border-bottom: #16a085 3px solid;
border-left: #16a085 1px solid;
border-right: #16a085 1px solid;
border-radius: 6px;
text-align: center;
color: white;
padding: 10px;
float: left;
font-size: 12px;
font-weight: 800;
}
.turquoise:hover {
opacity: 0.8;
}
.turquoise:active {
width: 100px;
background: #18B495;
border-bottom: #16a085 1px solid;
border-left: #16a085 1px solid;
border-right: #16a085 1px solid;
border-radius: 6px;
text-align: center;
color: white;
padding: 10px;
margin-top: 3px;
float: left;
}
このボタンには、レギュラー（状態名なし）、:hover、:activeという3つの状態があります。
:hoverには透明度を高めるコードが1行しか入っていないことが分かります。これは、改めて明るい色を探す手間を省いてボタンの色を明るくするのに便利な方法です。
CSS変数は目新しいものではありませんが、そのうちのいくつかは新しい方法で使われています。borderをある1行で使う代わりに、border-bottom、border-left、border-rightを使用して3D効果を出せます。
フラットUIボタンには:activeがよく活用されます。上の例にあるボタンが:activeになると、次の2つの事柄が起こります。
- border-bottomは3pxから1pxに変わります。これによりボタン下の陰が小さくなり、ボタンオブジェクト全体が数ピクセル縮小します。単純なことですが、この変化1つでユーザーはページのボタンをクリックしている感覚になります
- 色が変化します。背景色が暗くなり、ユーザー側からページ方向に動くかのように見えます。上と同じく、このわずかな変化により、ユーザーはボタンをクリックしている気分になります
フラットUIボタンは、大きな効果に繋がる、簡潔で最小限の動きを特長としています。多くの場合は、border-bottomを使ったわずかな動きを使います。いくつかのフラットUIボタンは動きをまったく付けていないこと、色の変化だけさせていることに注目すべきでしょう。
3. マテリアルデザイン
マテリアルデザインとは、動作を伴う情報カードを促進するデザインの考え方です。マテリアルデザインはグーグルによって考案され、Material Design Homepageには3原則が掲げられています。
- マテリアルはメタファーである
- 力強く、生き生きと、意図的に
- 動作は意味を提供する
この3原則の理解を深めるため、マテリアルデザインを実際に見てみます。
このボタンでは、box-shadowとPolymerという2つの主要な概念が使われています。
Polymerとは、Webサイトをデザインするために作られたコンポーネントとツールのフレームワークです。Bootstrapに精通している人なら、Polymerはよく似たものだと分かります。強いリップル効果（編注：波紋が広がるような表現）は、1行のコードで追加されています。
<div class="button">
<div class="center" fit>SUBMIT</div>
<paper-ripple fit></paper-ripple> /*this is the line that adds a ripple effect with polymer */
</div><paper-ripple fit></paper-ripple>はPolymerコンポーネントです。HTMLの冒頭にPolymerをインポートすると、人気のフレームワークやコンポーネントにアクセスできます。もっと詳しく知りたい人はthe Polymer project homepageを参照してください。
これでPolymerとリップルがどういうものかが分かったので（リップルの動作についてはまた別の話ですが）、ボタンが押されたときに適用される、マテリアルデザインの原則に沿ったCSSについて説明しましょう。
body {
background-color: #f9f9f9;
font-family: RobotoDraft, 'Helvetica Neue';
}
/* Button */
.button {
display: inline-block;
position: relative;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
background-color: #fff;
color: #646464;
margin: 20px 10px;
transition: 0.2s;
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button:active {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
transition-delay: 0s;
}
/* Misc */
.button.grey {
background-color: #eee;
}
.button.blue {
background-color: #4285f4;
color: #fff;
}
.button.green {
background-color: #0f9d58;
color: #fff;
}
.center {
text-align: center;
}
これらのボタンは、デザインの際によくbox-shadowを使用します。変化しないCSSのどれかを削除して、box-shadowの変化とその作用を見てみます。
.button {
transition: 0.2s;
transition-delay: 0.2s;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button:active {
transition-delay: 0s;
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
box-shadowは、各ボタンの左側と下側に細い暗影をつけるのに使われます。クリックすると、影は伸びて薄くなります。この動作では、ボタンがページからユーザーの方へ飛び出てくるような3Dの陰影をシミュレートしています。
Polymerとbox-shadow効果を組み合わせて、マテリアルデザインのボタンを作成できます。
- マテリアルはメタファーである － box-shadowを活用すると、現実の物体のように見せかける3Dの陰影をシミュレートできます
- 力強く、生き生きと、意図的に － これは明るい青と緑のボタンに当てはまり、完全にこの条件を満たします
- 動作は意味を提供する － Polymerとbox-shadowの変化を利用して、ユーザーがボタンをクリックしたときにいろいろな動作ができるようになります
3つのデザイン方法によるボタンの作り方を説明しました。自分でオリジナルのボタンデザインを試作したい人には、the CSS3 Button Generatorをおすすめします。
最後に
白黒ボタンは、誰にでも作れる簡単なものです。自分のサイトに必要なクイックボタンには、白黒をブランドの色で置き換えてみてください。フラットUIボタンはシンプルで、小さな動作や色を利用して大きな効果が得られます。一方、マテリアルデザインのボタンでは、実物の陰影のようなスケールの大きい複雑な動作によって、ユーザーの注目を集められます。
CSS初心者がこのガイドを読んで、パワフルで創造的なボタンを作るための基礎を理解してくれればうれしいです。
（原文：An Introduction to the Basics of Modern CSS Buttons）
［翻訳：Noriko O. Romano］
［編集：Livit］
