Developer の

Developer による

Developer のための

Metro Design のお話

美

術

は

い

つ

も

2

で

し

た

。

イラレってなに？

おいしいの？

男は黙っ

てXA

ML

を

手書き！

Windows Formの背景？もちろん薄水色でしょう。

あっ、もちろん更新とか重要なボタンはでっかくして色はオレンジね。その他は緑でいいかな。

ちなみに入力エラーは背景を真っ赤でお願いね。

絵を書くの

はいつもペ

イント

を使っ

てます。

デザインは

Agenda

• 四角

• 単色

• 文字

四角 Square & Grid

図形は基本的に四角

Grid System 1

Grid System 2

Metro Grid System

1 unit = 20px × 20px 1 subunit = 5px × 5px ( 4×4 = 16subunits = 1 unit)

Metro Grid System 7

un

its

6 units

単色 Simple Colors

B lue

Brown

Green

L ime

Magenta

Mango

P ink

Purp l e

Red

Tea l

図形等の色は基本は単色

アクセントカラー(Windows Phone)

Color Example RGB HEX

Blue 27, 161, 226 #FF1BA1E2

Brown 160, 80, 0 #FFA05000

Green 51, 153, 51 #FF339933

Lime 162, 193, 57 #FFA2C139

Magenta 216, 0, 115 #FFD80073

Mango 240, 150, 9 #FFF09609

Pink 230, 113, 184 #FFE671B8

Purple 162, 0, 255 #FFA200FF

Red 229, 20, 0 #FFE51400

Teal 0, 171, 169 #FF00ABA9

http://msdn.microsoft.com/en-us/library/ff402557%28v=VS.92%29.aspx

文字 Text & Charactor

Segoe (シーゴ)

Segoe UI Light

Segoe UI Semibold

Segoe UI Regular

Segoe UI Semilight

Type on the grid

1 unit 2 units

Type ramp

日本語フォント

今日はDeveloper向けのMetro Designのお話です。

今日はDeveloper向けのMetro Designのお話です。

今日はDeveloper向けのMetro Designのお話です。

今日はDeveloper向けのMetro Designのお話です。

Meryo

IPA ex Gothic

MS Gothic

YU Gothic

アイコン

Design Language

Dialect