最近はフラットデザインが主流となり、リッチな画像を作成する必要が減り、ノンデザイナでもデザインしやすくなっています。プログラマだからと言わず、バンバンUIをデザインしましょう。
##シンプルに
###余分な要素を取り除く
シンプルに物事を伝えるのはデザインとしてとても重要なことです。1つの画面でできることを減らし情報量も減らしましょう。情報量が増えるとUIは迷いやすくなります。重要な要素を2箇所以上強調表示しなければいけない状況に陥ったら、それは要素を詰め込み過ぎです。
###空白は大切
要素を取り除くと「落ち着いた感じ」に見えるのか「スッカスカ」に見えるのかのどちらかになります。「スッカスカ」に見せないためにも、レイアウトを意識するのが大切です。
##設計
###コンポーネントを設計する
画面によってボタンの色や形状が違うと、ユーザは操作方法がわからなくなります。まずはテキスト入力の表現、ボタンの表現などを統一しましょう。画面を設計するときに、作成したコンポーネントセットからチョイスするようにし、設計した画面からコンポーネントセットを作成するのはやめましょう。
###ポリシーを統一する
コンポーネントの設計と同じですが、文言、レイアウト、配色が画面でバラバラだとユーザは操作に迷います。
##インターフェイス
###アフォーダンスはそこまで重要ではない
明らかにクリックできる要素であるのが明確であれば、ボタンを無理やり立体にする必要はありません。立体にしなければ目立たないのであれば、それは他の要素が多すぎるのが原因です。
###フィードバックを明確に
デスクトップならマウスオーバーやマウスダウン、タッチパネルならタッチなどの操作によってUIの表現を変化させ、ユーザに「押されたよ」というのを伝えなければいけません。
###方向
操作の順番があちこちに飛ぶと操作しにくいです。上から順に選択する、情報は左から右へなど方向を意識しましょう。
##色彩
###HSVで色を決める
RGBではなく輝度、色相、彩度のバランスで決めましょう。文字が読みにくくなる原因の1つとして背景色との輝度差があります。輝度は常に意識する必要があります。
###カラフルにしない
それぞれの色の意味が不明瞭化すると、色以外で情報を増やす必要があります。例えばECサイトで、どの商品のカテゴリが選択されているかを明確にすれば、商品カテゴリ毎に背景色を変える必要はありません。
###リッチブラックとピュアホワイトをカラースキームで選択しない
＃000000と＃FFFFFFの色は極力避け、近い色を選択しましょう。ハイライトやシャドウが必要になった時に#000000や#ffffffを使用します。
##アニメーション
###アニメーションは重要
アニメーションは単なるエフェクトではありません。ユーザの要求に対する応答の表現であり、コンテキストの変化を表すためのものです。例えば画面が右から左へスライドするのは、次のページへ移動したという表現です。ユーザは前に戻ることもできると認識するでしょう。前に戻ることができるということを認識させることができれば、「現在のページはN/Mです」というような表現を省くことができ、画面をよりシンプルにすることができます。
###フレームレートを高くする
24fps程度だと遅い印象を与えます。常時60fps出るようになると使用感がとても上がります。昔のAndroidと昔のiPhoneを比べるとよくわかります。
##フォント・テキスト
(画像を作るとき用)
###フォントがダサいと全体がダサく見える
和文フォントなら新ゴシックやヒラギノゴシック、欧文フォントならHelvetica系を選んでおくと無難です。
###カーニングを調整する
イラストレータを使うならオプティカルカーニングを使用すると無難です。
###行間を調整する
行間を適切に調整しないと文章が読みづらくなります。
###UIとのバランスを考慮する
UIフォントと画像のフォントがアンバランス過ぎるとまとまりのない印象を与えます。
###和文フォントは大抵無料ではない
ライセンス的に画像に含めて配布するのは問題ないのが殆どですが、TrueTypeのままアプリに含めるのは大抵の場合ライセンス違反です。Flashの埋め込みフォントや、AndroidのAPKに含めるなども該当します。
##パクる
###丸コピーはしない
いいとこ取りをしましょう。Pinterest辺りに参考になる元ネタが沢山あります。
###大体トレンドに収束する
デザインは大体がトレンドに収束するため、トレンドのデザインを抑えておけば、ユーザに馴染みのあるデザインになります。奇抜すぎるデザインは操作方法に迷うでしょう。