デザインを何もしらない1日目の自分に "実践的" なマテリアルデザインの使い方を説明する - Layout Color Typography 編


#この記事について
* マテリアルデザインを最低限、使いこなすための手法を説明する。
* この記事は[マテリアルデザインガイド](https://material.io/)の要約、翻訳記事である。
* cocoda!やDailyUIなどでUIデザインをはじめる、はじめた１日目の自分を対象にしている。
* 各コンポーネントの扱い方は説明しない。
* 概念やコンセプトについても説明しない。(興味のある人は[サルワカさん](https://saruwakakun.com/html-css/material)の記事を参考にしてください。)
* オレオレ流です。間違いも多々あると思いますので、指摘お願いします。

# 私について
* 個人開発者としてモバイルアプリをつくって、その収益で生計を立てたいエンジニア
* Flutterで開発を始め、いくつかアプリを作ろうとするも、いづれのアプリもデザインが出来ずに断念
* デザインを学ぶ必要に迫られて、DailyCocoda!でデザインを学び始める。
* デザインは全くの初心者でセンス0
* 7/23日から始めたDailyCocodaが10/15日に目出度く完走 <-- いまここ
* アプリをリリースして生計を立てる <-- これから

# [マテリアルデザインガイド](https://material.io/design/)
* マテリアルデザインを学ぶ上で欠かせない聖書 ブックマークに登録しておこう。
* 英語で書かれているけど、とても読みやすい。必要に応じて翻訳掛けながら読もう。

# まとめ
### レイアウト
###### 基本間隔
* 8dpの間隔を基本単位とする
* ただし、アイコンやタイポグラフィのような小さな要素は4dpを使うこともできる。

###### レスポンシブ
|画面|ブレイクポイント|カラム|ガーター|マージン|
|:----------|:-----------|:-----------|:-----------|:-----------|
|モバイル|360dp|4カラム|16dp|16dp|
|タブレット|600dp|8カラム|24dp|24dp|
* ガーターの幅は(補足: 8dp間隔で)カスタマイズできる
* ガーターとマージンの幅は異なっていても構わない*(補足: コンテンツの内容によってはガーターは使わないこともあります。)*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/b4a46257-4332-a813-b94f-f66e94cc4b12.png)
1がカラム、2がガーター、3がマージン

###### クリック、タッチ領域
* タッチターゲットは少なくとも48 x 48 dpで、それらの間に少なくとも8dpのスペースが必要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/988aa393-dfb5-764d-b38b-5b3a117bebd2.png)
* クリックターゲットは少なくとも24 x 24 dpで、それらの間に少なくとも8dpのスペースが必要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/84f8fd60-b8aa-cd11-98b2-aa6825a45819.png)


### カラー
###### マテリアルカラー
* マテリアルカラーの色は[2014 Material Design color palettes](https://material.io/design/color/#tools-for-picking-colors)から選ぶ
* *(補足: 基準となるのは500番)*
* *(補足: カラーの上に乗っかているテキストの色(白もしくは黒)が相性のいい色)*
* *(補足: 例えばこのグリーンの場合、グリーン500は黒色のテキストと相性がよく、グリーン600は白色のテキストとの相性がいい)*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/97feb7d4-0c79-08e0-19d2-fa1b9b4ead50.png)

###### プライマリーカラー
* プライマリーカラーは最も頻繁に画面とコンポーネント上に表示される色
* セカンダリーカラーを使用しない場合、アクセントとしてプライマリーカラーを使用できる。
* 明るいバリエーションと暗いバリエーションを使用できる*(補足: 例えば、グリーン500をプライマリーカラーとした場合、明るいバリエーションにグリーン300、暗いバリエーションにグリーン700を設定することが出来る。もちろん、バリエーションをより明るい、より暗い色を設定することも出来るし、使用しない選択肢もあり)*

###### セカンダリーカラー
* セカンダリーカラーは使用してもしなくても構わない
* プライマリーカラーと同様に、明るいバリエーションと暗いバリエーションを使用できる
* セカンダリーカラーは以下の場合に適している
 * フローティングアクションボタン　　
 * スライダーやスイッチのようなコントロールコンポーネント
 * 選択したテキストをハイライトする
 * プログレスバー
 * リンクと見出し
 
*（補足: マテリアルデザインにアクセントカラーはありません。代わりにセカンダリーカラーを使います？ <- 自分でもよくわかっていません。誰か教えて！）*

###### その他のカラー
* サーフェイスカラーはカードやシート、メニューの基準になる色
* バックグラウンドカラーは`FFFFFF`*(補足: 自分の場合、サーフェイスカラーとバックグラウンドカラーはホワイト、グレイ50、グレイ100のいずれかから選択しています。)*
* エラーカラーは`B00020`*(補足: エラーカラー以外にもサクセスカラーがあると重宝します。私は[Theme — Vuetify.js](https://vuetifyjs.com/en/customization/theme)に記載されている''#4CAF50'を使用しています。)*

###### 以下、補足説明
*補足: 以下の画像を参考に説明します。
ブルー700がプライマリーカラーで、600と800がそのバリエーションです。
ボトムアプリケーションバーにブルーが使われているので、
違いを強調するためにフローティングアクションボタンにはセカンダリーカラーのオレンジ500が使用されています。
カードコンポーネント間の幅とマージンがやたらと狭いですね。dpは4でしょうか？
あと、バックグラウンドカラーが白(fffffff)ではありません。おそらくグレイ50だと思います。
代わりにサーフェイスカラー(カードカラー)が白(fffffff)ですね。*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/fb03aaed-f6d9-5170-68c5-ed069c1d7591.png)

###### テキストとアイコンのカラー(不透明度)
* テキスト、アイコンともに黒(000000)もしくは白(ffffff)で表示し、必要に応じて不透明度を調整する
*  *(補足: dividerは12%)*

|割合　　　|強調度　　　　　|備考　　　　
|:---------------|:---------------|:---------------|
|100%|-|エラー
|87%|強調度: 高|タイトル、見出し、アクティブなアイコン
|60%|強調度: 中|文章、コンテンツ、カラーヘルパーテキスト、ヒントテキスト、選択可能なアイコン
|38%|強調度: 低|無効なテキスト、無効なアイコン

見出しがうまく表示できない、なんで？



*(補足: 以下の画像でいうと、
「56歳からコードを書き始めて食べていく方法」が黒(000000)の87%
それ以外のテキスト、アイコンが黒(000000)60%
画像はmediumさんから拝借しました。)*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/0cb97616-57c2-7bf1-a259-9d1a9a6cc557.png)

### タイポグラフィー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/e21645fb-dd45-3054-6442-bc37a306795b.png)

###### Headlines(H1 ~ H6)
* H6はapp bar のタイトルに使用 *(補足: というかH6はappbarのタイトルにしか使わない)*
* *(補足: アプリデザインなら最も大きいのがH6でH1~H5までは使わないことがほとんど(なはず))*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/e52c2c22-4d07-bbea-49b7-aa7d375ec521.png)

###### Subtitles
* Headlineよりも小さい文字に使う。
*(補足: コンテンツ内のタイトルに使用されるイメージがあります。)*

###### Body
* 長いテキストに適している
* 小さいテキストサイズに適している
* *(補足: 記事の本文に使用されるイメージがあります。)*

###### Caption と overline
* 画像に注釈を付けたり、見出しを紹介するために控えめに使用される。

###### Button
* ボタンは通常大文字

###### 具体的な使い方は以下を参照
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/0d801508-7c69-3af1-8e4d-1fe709cc8944.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/b3b5322f-2d44-8f24-77aa-8bb6bac06134.png)

# この記事の参考にしたページ

レイアウト
[layout grid - Material Design](https://material.io/design/layout/responsive-layout-grid.html# Responsive)
[ Spacing methods - Material Design](https://material.io/design/layout/spacing-methods.html#)
[ Applying density - Material Design ](https://material.io/design/layout/applying-density.html#touch-click-targets)
[ The color system - Material Design](https://material.io/design/color/the-color-system.html#color-theme-creation)
[Applying color to UI - Material Design](https://material.io/design/color/applying-color-to-ui.html#top-bottom-app-bars)
[Text legibility - Material Design](https://material.io/design/color/text-legibility.html#text-types)
[The type system - Material Design](https://material.io/design/typography/the-type-system.html# )


カラー
[The color system - Material Design](https://material.io/design/color/the-color-system.html#color-usage-palettes)
[Applying color to UI - Material Design](https://material.io/design/color/applying-color-to-ui.html )
 
タイポグラフィー
[The type system - Material Design](https://material.io/design/typography/the-type-system.html)
[Understanding typography - Material Design](https://material.io/design/typography/understanding-typography.html#type-properties)
[Text legibility - Material Design](https://material.io/design/color/text-legibility.html#text-backgrounds)

dp
[Pixel density - Material Design](https://material.io/design/layout/pixel-density.html#pixel-density)
[【Android】いまさら聞けないdp入門 - Qiita](https://qiita.com/nein37/items/0a92556a80c6c14503b2 )
[dpとは - IT用語辞典 e-Words](http://e-words.jp/w/dp.html)

#リンク
* [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編](https://qiita.com/ampersand-dev/items/e0768faf4b7260fc28d6)
* [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その２ figma準備編](https://qiita.com/ampersand-dev/items/0bbe2de76b39db70551f)
* [デザインを何もしらない1日目の自分に "実践的" なマテリアルデザインの使い方を説明する - Layout Color Typography 編](https://qiita.com/ampersand-dev/items/28e3ba3dfd1871be9e78)
* [自分のfigmaの作業テンプレートを公開するよ[モバイルアプリ向け]](https://qiita.com/ampersand-dev/items/847e149794aaeb20ce12)