第一回目のアップデートです！皆さんはじめまして！都内でデザイナーをしているmeiです。仕事でAndroidのデザインもするので、マテリアルデザインの勉強をしようとブログを始めました！

みなさんご存知のように、マテリアルデザインのガイドラインは全部英語で時々わかりづらいところがありますよね。イメージとビデオがついていてわかりやすくはなっているのですが、それでもやっぱりわかりづらいところがあると私は感じたので、勉強も兼ねて日本語に翻訳して、まとめていきたいと思います!!

必要な時に、そういえばこんなブログあったな〜っとここに戻って来てもらえたら嬉しいです！初めてでドキドキですが、これからガイドラインがアップデートされた都度私のブログもアップデートしていくので、どうぞよろしくお願いします！一緒にマテリアルデザインをマスターしていければと思います^^

さて、2015年の12月のアップデートから始めていきたいと思います。

• Responsive UI（レスポンシブUI）: レスポンシブUIに位置やレスポンシブの例が追加
• Text fields（テキストフィールド）：入力必須欄のガイド追加
• Whiteframes （ホワイトフレーム）：Sketchにホワイトフレーム追加
• Punctuation（大文字、句読点）：ダッシュとカッコのガイド追加
  

Responsive UI Patterns

レスポンシブUI

1. Reveal（公開）
   
2. Transform（変形）
   
3. Divide（分割）
   
4. Reflow（リフロー）
   
5. Expand（拡大）
   
6. Position（位置）
   

1. Reveal (公開): 小さいスクリーン上では表示されていなかったサイドナビなど、大きいスクリーンでは表示したままにすることが可能。

また詳細なども同様に、小さいスクリーンの場合はタップ後に詳細が表示されるが大きいスクリーンの場合には最初から表示させることが可能。

2. Transform (変形): 要素はスクリーンサイズによって変形可能。

例えば、サイドナビは以下のようにトップタブに変形して配置することができる。

また、リストは以下のようにグリッドに変形もできる。

メニュー内にあるリストは、アイコン化してツールバーに表示できる。

3. Divide (分割): スクリーンが大きい場合には、サイドナビゲーション、リスト、詳細のコンテンツなどを分割してひとスクリーンに表示。

4. Reflow (リフロー): スクリーンサイズによってコンテンツを可能なスペースに移動。

例えばこの以下のイラストのように、リスト状に並んでいたコンテンツも、スクリーンサイズが大きくなると、右のように可能なスペースを使って色々なレイアウトをすることができる。

また横並びのタブをスクリーンに合わせて縦並びにすることもできる。

5. Expand (拡大): スクリーンサイズに応じて要素を拡大。

例えば、カードの場合はスペースがあればカードの大きさをスクリーンに応じて拡大することができる。

それに対してダイアログの場合は、コンテンツに比例して大きさが変わる。

6. Position (位置): コンテンツの位置は、スクリーンサイズによって適切な位置に変更。

例えば、小さいスクリーンでは下にシートで配置していたものを、大きいスクリーンではメニューとして適切な位置に配置することが可能。

また、フローティングボタンもスクリーンによって見やすい位置に配置しなおすことができる。

Text Fields

テキストフィールド

Required fields (必須欄): 入力必須項目の際にはアスタリスク(*)を使用。フォームの一番下にアスタリスクの欄は必須と記載する。

またヘルパーテキスト、ヒントテキストなどはずっと表示されているか、入力時だけにでてくるようにする。

参考動画はこちらから

Whiteframes

ホワイトフレーム

Whitefrmes: 表面、レイヤー、影に対して一貫したホワイトフレームの使い方をすることによって、さまざまなレイアウトをすることができる。

AI＆Sketchのデータはこちらから

Capitalization & Punctuation

大文字と句読点

タイトル、ヘッダー、ラベル、メニューなどは、最初の文字だけ大文字を使う。

全ての文字を大文字は、マテリアルデザインの仕様で書かれている時とボタン以外は避ける。

プロダクトの名前の最初の文字を大文字にする

気をつける点は、下のイラストのように自分のアクションは大文字にしない。「Google+」だけが商品名でpageは自分が作業しているものになるので大文字にはしない。

ピリオドを使用しない

ラベルや、ホバーテキスト、セッティングラベル、リンク、宣伝広告などにはピリオドは使用しない。これによって、文にまとまりがでてユーザーの混乱を減らすことができる。

ピリオドを使用する場合は？

• 短くても良いので一文以上が文になるようにする。
  
• パラレルラベルで一つでも文になる時。その場合は全て文に直してピリオドを使用する。
  

動詞の短縮系を使用する

読み手にぱっとみて伝わるように短縮系を使用する。

説明文を避ける

「Welcome!」「Good Job!」など一言で書く！右の例の様な「カレンダーの新機能を調べてみて」という説明を最初に書かれても圧倒されてしまいますよね。

数字は「three」ではなく「3」で表記する

Em dash —

emダッシュの使用は避ける。

En dash -
英語で表記する時はスペースなしで、ハイフンの代わりにenダッシュを使用する。

例）8:00 AM–12:30 PM

　　3–5 kg

Parentheses ( )

カッコを使用する時は頭字語や専門用語を使っている時。

例）Secure web connections are based on a technology called SSL (the secure sockets layer).

12月のアップデートはここまでです。

第一回目は早速結構ボリュームがありましたね！
これからもっとわかりやすいようにまとめていけたらと思います。

最後まで読んでいただきありがとうございます！

See you next time!