マテリアルデザインでの「ボタン」の使用ルールと作り方(サンプルCSS付)

マテリアルデザインでのボタンの作り方

Googleが提唱しているマテリアルデザインは、ユーザビリティに優れた美しいデザインです。その根幹をなす要素の1つに「ボタン」があります。ボタンの使い方についてもガイドラインで細かいルールが決められています。今回はボタンの作り方と使い方について詳しく解説していきます。

マテリアルデザインの3つの標準ボタン

マテリアルデザインでは基本的に以下の3種類のボタンを使用します。

フローティング操作ボタン(押下時) フローティング操作ボタン

浮き出しボタン(静止高度) 浮き出しボタン

フラット フラットボタン

サルワカくんの顔(通常)
サルワカくん

※フローティング操作ボタンはFAB(Floating Action Button)と略されることがあります。

使用例

それぞれ以下のように使われます。

それぞれの使われ方

感覚で「ここに浮き出しボタンを使おう」なんて考えてしまいそうですが、使い分け方がきちんとガイドラインで定められています。

使い分け方

使用頻度の違い

ピラミッドの上にあるボタンほど目立ちます。また下ほど使用頻度が高くなるかと思います。

つまり、最も重要な操作のためのボタン=フローティング操作ボタンとなります。以下で、1つ1つ考え方と作り方を解説していきます。

フローティング操作ボタン(FAB)

フローティング操作ボタン(押下時)

「マテリアルデザイン」と聞いたときに多くの人が思い浮かべるのがFABではないかと思います。

使い方

1ページあたり1つまで

FABは1ページにつき1個だけ使うことができます。本当に重要な操作に対してのみ使うので、必要がなければ使わなくてもOKです(実際GoogleのWebページでも一部にしか使われていません)。

サルワカくんの顔(通常)
サルワカくん

使うページと使わないページがあってもOKです。「トップページだけ表示する」などですね。

本当に重要な目的でのみ使う

FABは重要な操作を行うためのボタンです。

FABの使用例

「作成」「お気に入り」「共有」「検索」など重要な、もしくは使用頻度が高い操作が割り当てられます。

NG例

「メニュー」や「戻る」などのためにFABを使うべきではありません。これらは画面上部のツールバーで実装します。

ページごとにフローティング操作の機能を変えてもOK

たとえば、あるページでは「追加用ボタン」、別のページでは「問い合わせ用のボタン」にしてもOKです。

ボタンは円形

ユーザーが重要なボタンだと直感的に判断できるように、円形にすることが決められています。四角や三角にするのはNGです。

中央にアイコンをのせる

中央にはなど直感的に操作が分かるようなアイコンを使います。文字がのせられることはありません。

影をつける

上側に配置されていることが分かるように常に影がついています。

クリックやhoverにより浮き上がる

クリックやホバーにより浮き上がる

タップ/クリック時やホバー時(カーソルを当てたとき)には、浮き上がるような動きをつけます。これは影を大きくすることで表現します。また、タップ時にはアイコンを回転させることもあります。ホバー時により円形の背景色の明るさを変えることもあります。これは分かりやすさと楽しさの演出のためです。

はじめからアニメーションをつけていてもOK

アニメーションをつける

アイコンに常にアニメーションをつけていてもOKです。こちらはGoogle I/O(開発者向けイベント)の特設サイトでのFABの動きです。 とにかく他とは違う特別なボタン=FABなのです。

配置の仕方

紙のつなぎ目や段差の上に配置できる

紙のつなぎめや段差の上に配置できる

FABはシートのつなぎ目や段差の上にでも置くことができます。

端と近づけすぎない

端と近づけすぎない

FABは画面の端に置かれることが多いですが、周りにはある程度の余白を取るようにします。これは見やすく、かつ押しやすくするためです。

Webサイトの場合、モバイル、PC、タブレットでの快適な操作を考えるのであれば、端から少なくとも24pxの余白を取っておくのが望ましいのではないかと思います。 ※ ガイドラインではモバイルだと16dp以上、タブレットとPCだと24dp以上とされています。

位置は固定

同じ位置に固定

FABはいつでもタップできるように、スクロールしても一定の位置に固定されることがよくあります(必ずしても固定しなければならないわけではありません)。

CSSでのFABの作り方と影の操作

ここではHTMLとCSSだけを使ったFABの作成例を紹介したいと思います。この例ではFontAwesomeのアイコンフォントを使います(参考:FontAwesomeの使い方)。

単純なFAB

HTML
<a id="fab" href="#">
	<i class="fa fa-share"></i>
</a>
CSS
#fab {/*円の部分*/
    display: block;
    width: 56px;/*幅*/
    height: 56px;/*高さ*/
    background: #03a9f4;/*背景色*/
    text-align: center;/*中央寄せ*/
    border-radius: 50%;/*角丸く*/
    transition: .3s;/*滑らかな動きに*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);/*影*/
}

#fab:hover {/*ホバー時*/
	box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}

#fab i {/*中央のアイコン*/
	color: white;
	line-height: 56px;/*=幅と高さ*/
	vertical-align: middle;
	font-size: 18px;/*サイズ*/
}

解説

【大きさ】ガイドラインでは円の大きさを56dp以上にすることが推奨されています。このdpというのはAndroid特有の大きさの単位です。pxに換算すると1dp=1〜3px程度になります(解像度によって異なるのです)。ここでは、56pxの大きさにしてあります。【アイコン】説明するまでもないかもしれませんがHTMLの<i class="fa fa-share"></i>の部分を変えれば種類が変えられます。font-sizeは適宜調整すると良いでしょう。

アニメーション付き

FABをホバー時に回転させたり、アイコン種類をサッと変えてしまったりしても面白いのではないかと思います。例えば、以下のような感じですね。



このサンプルのようなアニメーションはCSSだけで実装できます。少し長くなりそうなので具体的な作り方は別の記事で解説します。

2. 浮き出しボタン

浮き出しボタン(静止高度)

「浮き出しボタン」は長方形の少し浮き上がったようなボタンです。

使い方

浮き出しボタンの特徴

立体感があり目立つため、比較的重要な操作のために使われます。

重要な部分に使う

例えば文字がたくさん並んでいる中で使えば「どこがボタンなのか」を分かりやすく示すことができます。

別のマテリアル上には使わない

他のマテリアルの上にのせない

別のマテリアル(立体感が表現されたシート)の上で使うことは推奨されていません。見た目がくどくなってしまうからです。

タップすると波紋が広がる

ボタンの波紋

タップ(クリック)するとインクの上に触れたように波紋が広がります。このようなエフェクトは「リップル」と呼ばれます。

色にメリハリをつける

背景色をカラフルな濃色にして文字を白くする表現がよく使われます。このとき、文字がハッキリと見えるような背景色を選びましょう。

浮き出しボタンの作り方

では実際に作り方を見てみましょう。少し厄介なのは「リップル」です。タップした部分から波紋が広がるようにするためにはCSSだけでなくJavascriptが必要になります。

ホバーで浮き上がるだけ

HTML
<a class="raised" >BUTTON</a>
CSS
.raised{
	display: inline-block;
	background-color: #26a69b;/*背景色*/
	color: #FFF;/*文字色*/
	font-size: 1em;/*文字サイズ*/
	line-height: 1;
	text-decoration: none;
	letter-spacing: 0.05em;/*字間*/
	padding: 0.2em 1em;/*ボタン内の余白*/
	border-radius: 3px;/*角の丸み*/
    cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
}

.raised:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}

解説

ホバー時には影の形を変えれば良いだけなので簡単です。-webkit-tap-highlight-color: transparentはiPhoneなどでタップしたときにかかってしまうグレイのレイヤーを消すためのものです。

リップルエフェクトをかけるには?

ボタンの波紋

タップすると波紋が広がるような表現をするためには、CSSだけでなくJavascriptも使う必要があります。以下の記事で作り方を解説しているので、よろしければ目を通してみてくださいませ。

フラットボタン

フラット

フラットボタンは3つの中で最も目立ちにくく、使いやすいボタンです。つまりはシンプルな「テキストリンク」ですね。

フラットボタンの正しい使い方

このように別のマテリアルの上で使ってもクドさは感じられません。

注意点

ボタンであることが分かるようにする

普通の文章と区別することができるように、カラフルな色を使ったり英語なら大文字を使ったり、しっかりとスペースを空けたりします。

【ダメな例】 文字 ボタン 文字 【良い例】文字 ボタン 文字 【ダメな例】 TEXT BUTTON TEXT 【ダメな例】 text button text 【良い例】text BUTTON text

基本的には色を変えるのが良いでしょう。

余白をしっかりと取る

モバイル端末でもタップしやすいように、ボタンの周りには十分な余白を取るようにします。また、テキストから少し外れたところをクリックしても反応するとユーザビリティが高くなります。

まわりに余白を確保する

ガイドラインでは「クリックして反応する範囲」を36dp(≧36px)以上にすること、また48dp(≧48px)より内側には他の要素を入れないことが推奨されています。

フラットボタンの作り方

ほぼテキストリンクなので、とても簡単です。

単純なテキストだけの場合

HTML
<a >BUTTON</a>
CSS
a {
	color: skyblue;
	text-decoration: none;
}

ホバー時に色をつける

フラットボタン

カーソルを当てたときに色をつけ、クリック(タップ)するとリップルエフェクトがかかるような表現もよく使われます。このボタンの作り方も以下の記事で解説しています。

同じカテゴリーの記事
同じカテゴリーの記事一覧
マテリアルデザイン入門
サルワカ