2018年12月23日

デザイン

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

目次

  1. はじめに
  2. ナビゲーション
  3. タイポグラフィ
  4. アイコノグラフィ
  5. まとめ

はじめに

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

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

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

1.png (255.2 kB)

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

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

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

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

ナビゲーション

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

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

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

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

image.png (38.6 kB)

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

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

image.png (42.3 kB)

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

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

image.png (41.3 kB)

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

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

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

navigation drawer

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

image.png (84.5 kB)

Bottom navigation bar

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

image.png (28.7 kB)

tab

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

image.png (364.7 kB)

タイポグラフィ

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

image.png (172.1 kB)

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

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

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

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

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

数字

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

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

image.png (55.5 kB)

テキストの色の決め方

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

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

image.png (32.3 kB)

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

POINT!!

特定のグレーの色を使うのではなく、透明度で調整することで、背景に色が付いている画面上にテキストを載せても、背景色がかったテキストの色ができるので、背景に馴染みやしすい色を簡単に作ることができるのです。

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

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

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

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

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

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

アイコノグラフィ

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

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

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

Screenshot 2018-12-21 at 3.20.21 PM.png (243.6 kB)

アイコンのサイズ

Screenshot 2018-12-21 at 3.29.52 PM.png (63.2 kB)

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

アイコンの構造

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

image.png (67.0 kB)

image.png (67.0 kB)

  1. Finish
    全体のアイコンの上にかぶさる表面に反射するライト
    Screenshot 2018-12-21 at 3.42.33 PM.png (17.5 kB)

グラデーション目安

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

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

スライド2
透明度: 0%
位置: 100%
  1. Material background
    アイコンの基本の土台
    Screenshot 2018-12-21 at 3.41.17 PM.png (8.4 kB)

  2. Material foreground
    土台の上に乗る部分
    image.png (67.0 kB)

Screenshot 2018-12-21 at 3.41.23 PM.png (7.8 kB)
4. Color
色が乗る部分

  1. Shadow
    Material foregroundによってできる陰部分
    Screenshot 2018-12-21 at 3.41.40 PM.png (9.9 kB)

その他、アイコンの上端には光が当たるtintを、下端には影ができるshadeを加えます。
Screenshot 2018-12-21 at 3.41.46 PM.png (9.5 kB)

それぞれの目安

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

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

まとめ

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

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

5

1

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

CONTACT PAGE TOP