よりぶろ

アプリのUIとかについて書いてく予定

スマホアプリデザイナーひとりAdvent Calendar #3 /Windows Phone/ フォントを変えてみた

というわけで3日目はWindows Phoneです。しかしWPは先述の通り手元に動ける端末がないため、小ネタでいきたいと思います!

(そろそろLumia920届かないかなぁ。。)

 

タイトルは「フォントを変えてみた」。

ただし、デザインデータ上で。

 

Windows Phoneで使われるフォント

日本語環境のWindows Phoneで使われるフォントは、主にSegoe UIとYu Gothic、Meiryo UIがあります。

WPにはReadingフォントとUIフォントというカテゴリがあるのですが…興味のある方は高橋忍さんのブログ記事をご参照ください。

MSDN ドキュメントに見るフォントの話

http://blogs.msdn.com/b/shintak/archive/2011/06/05/10171434.aspx

 

タイポグラフィが大切

Windows PhoneアプリやWindows ストア アプリではタイポグラフィが重要とされています。メニューに使われている大きなサイズの文字がそれを物語っています。

タイポグラフィというのは、ざっくり言うと文字に関するデザインのことですね。フォントの大きさとか色とか配置とかをちゃんと考えれば見た目の印象が良くなったり、アプリならユーザビリティが上がるよーという話です。

じゃあフォントの種類そのものを変えてみたらどう印象が変わるんだろう?というのを体験して頂こうかなと思って、今日のネタを考えました。

なんとか手元にあるデータでいい材料はないかなーと探した結果、以下の2つを選出。

f:id:ryo_pan:20121206232310p:plain

アプリの一覧画面と、

f:id:ryo_pan:20121206232355p:plain

自分の新着情報。

ホントはメールの画面とかがあればよかったのですが、残念ながらキャプチャが見つからず。。

 

使用したフォント、そして実際の画面

今回使用したフォントは

・AXISフォント

・小塚ゴシック

・新ゴ

・UD新ゴ Pro

ヒラギノ角ゴ Pro

ヒラギノUD角ゴF

メイリオ

・MS Pゴシック

の8つです。

*Photoshop上で作成したデータのため、実機で見るものとは違いがあります。

*サイズはあまり調整していません

*ウェイトは、細字があるやつは大体細字を選んでいます。

それでは、若干見難いですが比較画像をどうぞ。

サイズが大きいためSkydriveにアップロードしました。

 

アプリ一覧

新着情報

 

いかがだったでしょうか。

同じように見えても、よく見ると少し印象が違うのに気付きましたか?

普段は何気なく視認している文字情報も、本当によく考えられて作られています。特に日本語は英数字の他に漢字、ひらがな、カタカナがあるため、文字のバランスを取るのがとても難しいです。まさに職人さんの仕事ですね。

もし「等倍画像を個別に欲しい!」という奇特な方がいらっしゃれば追記でアップロードします。

 

P.S.

ホントならこういうテストはWindows 8でも、いやWindows 8こそやるべきなのですが、、今回はちょっと勘弁ということで。