Windows Phone で採用されたメトロデザイン。

一貫性があり、見やすく機能的なこのデザインですが、どうしたらメトロデザインになるのでしょう。

ここからは私個人のイメージです。

  • 基本的に使用するプリミティブは 塗りつぶしの四角か、フレームだけの円
  • 塗りつぶしは原色に近い色で濃すぎても薄すぎてもNG。
  • 1つの画面に使う色は、白黒グレーを除いて最大3色まで
  • 情報を表示するフォントは20pt以上、タイトルは36pt以上
  • 使用するフォントサイズも画面の中で3東リ程度に済ませる
  • 1つのまとまった情報と情報の間は4mm以上あける
  • 全ての操作を行うコントロールは最低でも7mm以上なければならない
  • グラデーションはあまり利用せず、むしろ画像を使う
  • 余白は余裕を取る事

こんなイメージである。違和感のあるアプリケーションデザインの多くは、

  • グラデーションの多様
  • フォントが小さすぎる
  • コントロールの高さが小さすぎるか、隣接するコントロールが狭い

こんな場合が多い気がします。こういう趣旨で作られたメトロUIの展開はこんな感じかも。

image

この部分は今後もいろいろ突き詰めていきたいものです。