はじめに

この記事はロボP Advent Calendar 2018の16日目の記事です．

MaterialDesignって？

Googleが推奨してるデザインのガイドラインです。
なんだかんだで公式サイトが一番分かりやすいです。

Writing

「書き方」のデザインです。

色合いやアニメーションが滅茶苦茶かっこいいのにボタンのテキストに
メッセージを送る時に押してください。
とか書いてあったらガッカリしますよね。

MaterialDesignのかなり奥の方に書いてあったのですが、何気に大事で既存のプロダクトにも反映しやすい部分なのでまとめておきます。

Text should be understandable by anyone, anywhere, regardless of their culture or language.
テキストは言語や文化関係なく、誰が何処にいても理解できるようであるべきである。

原則

UI text can make interfaces more usable and build trust. Text should be clear, accurate, and concise.
テキストはUIをより良くして、信頼を築ける。テキストは明確で正確、そして簡潔でなければならない。

簡潔にする

必要な情報に焦点を絞って、簡単に分かりやすい文章にしようってことです。

//Bad
納豆を美味しく食べるために、まず棒状の箸でグルタミン酸が粘るまで素早く混ぜましょう。粘らないということは、まだ試行回数(もしくは速度)が足りていないということです。

//Good
納豆を食べるために粘り気が出るまで混ぜましょう

直接的な表現を使う

ユーザのために簡単で直接的な言い方にしてあげようってことです。

//Bad
納豆を混ぜる必要があります

//Good
納豆を混ぜる

ユーザに対処する

日本語だと少し難しいのですが、要はUIが語りかけるユーザを統一させようってことです。

//Bad
「あなたの住所」を登録するために「私の現在位置」を使用する

//Good
「私の住所」を登録するために「私の現在位置」を使用する

必要な情報のみを伝える

ユーザが利用する上で知らなくていい情報は表示すべきでないってことです。

//Bad
納豆を発送しています。倉庫から出荷され、トラックが発進しました。AM10:00に発進したため、到着はAM11:00頃になります。

//Good
納豆を発送中です。到着はAM11:00頃になります。

誰でも理解できる共通語を使う

パッと見で分かるためには絶対数の多い共通語のほうがいいよねってことです。

//Bad
納豆がばいうまかあ(佐賀)

//Good
納豆おいしい

あと専門用語もあまり使わないほうがいいですよね。

//Bad
納豆のグルタミン酸を混ぜ合わせ、フラクタンが補助することで美味しくなります。

//Good
納豆を混ぜると美味しくなります。

現在の時間の状態で示す

将来や過去の時制で語られるとユーザが混乱してしまうから現在で表記しようってことです。

//Bad
納豆を混ぜました

//Good
混ぜられた納豆

数字を使う

{一,二,三}や{one,two,three}じゃなくて{1,2,3}の表記を使おうってことです。
なお複数使う場合は片方がテキスト扱いであればOKです。

//Bad
四つの納豆

//Good
４つの納豆

//OK
三秒間、4つの納豆を混ぜる

句読点を使わない

基本的に一行の文章の場合は。は無い方がいいってことです。
複数行の場合は必要ですが、そこまで長くなるなら他の原則に当てはまってるかチェックしたほうがいいかも・・・？

//Bad
納豆を混ぜましょう。

//Good
納豆を混ぜましょう

ついでに:はやめましょう。

//Bad
一緒に混ぜる:

//Good
一緒に混ぜる

構造

さらなる応用。進化系。第二形態。

目的から表記する

ユーザに動作を求める時はその目的から書こうってことです。

//Bad
箸をでかき混ぜて、納豆を美味しくしましょう

//Good
納豆を美味しくするために、箸でかき混ぜます

必要に応じて詳細を表記する

そのタイミングでユーザに必要な情報か考えましょうってことです。
ユーザが自発的に探して見つけることができる情報をわざわざ書く必要は無いですよね。

//Bad
納豆を食べますか？この納豆は高級な納豆で、粘り気が凄いです。

//Good
納豆を食べますか？

一貫した言葉を使う

場所によっていろんな言葉遣いだと、混乱しちゃうよねってことです。

//Other
〇〇の納豆を食べます
△△の納豆を食べます

//Bad
納豆を食べます

//Good
私の納豆を食べます

他のUI要素を表記しない

UIの情報をテキストで表記することは、そのUIは何処か破綻してるってことです。

//Bad
「納豆を食べる」ボタンを押してください

//Good
納豆を食べてください

おわりに

この記事の内容は全てGoogleのMaterialDesign-Writingにまとめられています。

これを書いてた自分が勉強になりました。
日本語難しい・・・