マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第２弾

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay23です！

昨日はReact 360で360度動画を背景として使う方法についての記事でした。

360度動画を背景にする【これからはじめるReact 360】

今日は、前回に引き続き私がマテリアルデザインの基礎（Material Foundation）を読み学んだ、実践で使えるデザインテクニックをご紹介します。

前回の記事はこちらですので、読んでない方はこちらを先に読むことをオススメします！
マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第一弾

今回の記事も前回と同様、あくまで私がマテリアルデザインを読んだ解釈です。
元のマテリアルデザインを忠実にというよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところを抜粋しています。ご注意ください。

また、マテリアルデザインがどういうものなのか知りたいという方はこちらの記事をご覧ください。
マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第一弾

ナビゲーション

マテリアルデザインから学ぶ、実践で使えるデザインテクニック第２弾は「ナビゲーション」に関するところからご紹介します。

マテリアルデザインではナビゲーションの種類は大きく３つあります。

lateral navigation (ラテラルナビゲーション)

• 同じ階層間の移動をするときに使うナビゲーション

forward navigation (フォワードナビゲーション)

• 下の階層への移動をするときに使うナビゲーション

reverse navigation (リバースナビゲーション)

• 上の階層への移動をするときに使うナビゲーション

少し長くなってしまいますが、ラテラルナビゲーションを使う際の法則がまとまっていてわかりやすいので、抜粋してご紹介します。

lateral navigation (ラテラルナビゲーション)

ラテラルナビゲーションには大きく、３種類のコンポーネントを使用することができます。

navigation drawer

• 一番上の階層間の移動に使用する
• ナビの数が５つ以上の時に使用する
• モバイル、タブレット、デスクトップ全てのデバイスで使用できる

Bottom navigation bar

• 一番上の階層間の移動に使用する
• ナビの数が2-5つの間の時に使用する
• モバイルでのみ使用できる

tab

• 一番上の階層間の移動に使用する
• ナビの数が2-5つの間の時に使用する
• モバイルでのみ使用できる

タイポグラフィ

マテリアルデザインには13種類の決まったタイプシステムがあります。

こちらのタイプシステムをテキストスタイルとして保存したSketchのファイルもあるので、興味がある方はぜひダウンロードしてみてください。

本リンク先のDownload というところのMaterial Design Type Scaleというファイルです。

ただし、実際に使ってみるとH1, H2, H3あたりは大きすぎて、そのままだと少し使いづらい気がするので、ご注意ください。
また日本語フォントなどにも対応していないので、そこは後ほどご紹介するSketch プラグインを使ってマテリアルテーマをカスタマイズすることをおすすめします。

マテリアルデザインのタイポグラフィで個人的に気になったところは3つあります。

• 数字
• テキストの色の決め方
• 行間、段落の余白の決め方

数字

サービスのデザインを作る際に、ダッシュボードなど数字を多く見せる時にどうすれば数字が綺麗に読みやすくなるか悩んだりします。

マテリアルデザインでは、数字など中身が変わる可能性があるものは等幅フォントを使うことを推奨しています。
文字によって、幅が異なるプロポーショナルフォントと違い、等幅フォントはどんな文字を入れても幅が変わりません。

テキストの色の決め方

テキストの色決めはいつも悩むポイントです。
#565656 にするか、 #222222 にするか、#333333 にするか…。

興味深いことに、マテリアルデザインでは色、ではなく透明度によって色味が決まります。

このように、High Emphasis (強く強調したい文字) は透明度87%, Medium Emphasis (通常文字) は透明度60%, Disabled は透明度38%というように決まりがあります。

行間、段落の余白の決め方

行間、段落の余白などはいろんなところで一般的な数字が決まっているので、すでに法則を決めている方も多いと思いますが、Googleが定めた規定を知って損することはないと思うので、まとめておきます。

一行の長さ:
一般的な文章: 40-60文字 (日本語だと 20-30文字くらい)

キャプションなどの短文: 20-40文字 (日本語だと 10-20文字くらい)

行間:
通常の文章の文字であれば1.4ほど。

段落間の余白:
通常の文章も文字サイズであれば、文字サイズの1.4倍ほど。

アイコノグラフィ

マテリアルデザインではアイコンを作る際のグリッドや細かな仕様なども決めてあり、非常に興味深いです。

アイコンに対するアプローチ

マテリアルデザインでは、実際に紙でプロトタイプを作り、光と陰の様子などを実際に作ってから、アイコン作りに取り掛かるようです。

アイコンのサイズ

アイコンセットを作ってみたけど、縦長のものが入ってきた時にバランスが取れなかったりすることがありますが、マテリアルデザインではアイコンのサイズなども決まっているので、こちらを参考にして作るとアイコンセット全体でバランスが取れるので、便利です。

アイコンの構造

マテリアルデザインのアイコンは大きく5つのパーツで構成されています。

1. Finish
   全体のアイコンの上にかぶさる表面に反射するライト
   

グラデーション目安

種類: 円形
角度: 45º
色: 白 (#FFFFFF)
真ん中: 33%

スライド１
透明度: 10%
位置: 0%

スライド２
透明度: 0%
位置: 100%

1. Material background
   アイコンの基本の土台
   

2. Material foreground
   土台の上に乗る部分
   

4. Color
色が乗る部分

1. Shadow
   Material foregroundによってできる陰部分
   

その他、アイコンの上端には光が当たるtintを、下端には影ができるshadeを加えます。

それぞれの目安

tint:
高さ: 1dp
透明度: 20%
色: 白 (#FFFFFF)

shade:
高さ: 1dp
透明度: 20%
色: 他部分の影の色に合わせる

まとめ

以上、マテリアルデザインの基礎（Material Foundation）を読み学んだ、実践で使えるデザインテクニック第２弾でした。

特にタイポグラフィなどのところはどのデザインにでも応用できるので、ぜひ参考にしてみてください。