スマホアプリデザイナーひとりAdvent Calendar #8 /Windows Phone/ Windows Phone アプリのデザインを知る
ExpansysでLumia 800がN9よりも安く売られているのを見ると切ない気持ちになります（挨拶）。
N9、UI研究のために1台欲しいなあと前から思ってるのですが、なかなか値段下がらないんですよね。。
そういえばJollaから端末出るのはいつなんだろう。。来年？
というわけでひとりAdvent Calendar 8回目はWP二週目です。何気に1週間続いた！（半分以上が日跨いでるけど）
しかしWPはあまりネタがない！アプリも（少）ない！デザイナーも（少）ない！
ハッ じゃあみんながWP アプリのデザインをいつでも始められるように準備すればいいのでは！
そんな感じで本日は「Windows Phone アプリのデザインを知る」をテーマに書いていきたいと思います。もはや初日に立てたアプリ紹介というテーマはどこへやら。
「基本のキ」的な内容になると思うので、WPを知ってる方、使ってる方には新鮮味はありませんのであしからず。あと先にネタバレすると9割がたmsdnからの転載です。
それとたぶん段々眠くなってきて最後のほうは結構適当になると思います。。ごめんなさい（注：的中しました）
Windows Phoneとは何なのか
というのをまずはご説明するべきかどうか悩みましたが、今回は割愛させて頂きます。
要はアレだよ、マイクロソフトが出したスマホだよ！ちなみに日本国内で初めての搭載端末「IS12T」が発売されて1年と4ヶ月ほどが経ちますが、未だにその1台しかラインナップがありません。
Windows Phoneの設計思想を30秒で感じてみる
デザインを知る、と言っても、見たことも触ったこともないプラットフォームを知るのに文章は正直向いていません。頑張って動画、ベストはやはり直接端末を触ってみるに限ります。さすがに端末を皆様にお配りすることはできないので、まずは動画でWPの設計思想をご紹介しようと思います。
以下はVerizonが出したWindows Phone 8のCMです。WPの魅力を端的に表していて、とても素敵です。
Verizon Commercial - The New Windows Phone "Ummm/Ohh"
多すぎるボタン、複雑でわかりづらいケーブル…どれもユーザーが目的を達成できていません。でもWPならほら！てな内容です。
また、8分と少し長いですが、最近出た端末のレビュー動画がひと通りの機能を紹介しているので、WPとか知らないよーって方は一度通しで見てみるとよいと思います。
改めてWPの主な設計思想を紹介します。
・シンプルに。クリーンに。
グラデーションや質感は持たせない。ディスプレイに広がるピクセル世界のデザインをしよう。
・要素は少なく、効果的に。
無駄にコントロールをべたべた貼り付けない。ユーザーが本当に見たいものにフォーカスさせよう。
・特徴的なタイル。
シンプルでわかりやすいアイコン。拡がるカスタマイズ性。新鮮な情報を届ける。
・フォントとグリッド = タイポグラフィ。
グリッドを意識し、文字を駆使して情報を整理しよう（もちろん、時には魅力的なグラフィックを使って）。
次は、実際にアプリをデザインする際に何に気をつけて考えればいいのかドキュメントからかいつまんでご紹介します。
デザインガイドラインを読む
ガイドラインは熟読とまではいかなくとも、ひと通り目を通しておくとよいでしょう。
参照先は主にDevCenterとmsdnになります。
DevCenterにあるダッサいデザインページ。主に設計思想や概念などを学ぶことができます。
"Windows Phone のデザイン哲学は、すばやい動作が可能で、最小限の入力しか必要とせず、新しい情報を自動的に反映する、クリーンですっきりしたアプリ画面によって体現されます。目的にぴったりフィットする洗練されたビジュアル要素によって、コンテンツとの直接的な相互作用が行われます。"
"アプリを使って何ができるかではなく、ユーザーがどんなことを実行できるようにしたいかを考えます。"
""ノー" を言うことが、強力で明確なエクスペリエンスを作るうえで重要です。"
"外観がコンテンツを決定づけるのではなく、コンテンツが主体となって外観が決まるようにします。"
次で紹介する、msdnにある仕様やUI要素へのリンクがまとまっています。要ブックマークのページと言えるでしょう。
//msdn
msdnとはMicrosoft Developers Networkの略で、まあぶっちゃけ僕もよくわからないんですけど開発に関する仕様やら何やらが集約されているところです。で、WPもちゃんとカテゴリとしてあるわけですね。
デザインライブラリから、WPを知らない人がまず目を通したほうがいいような気がした項目を抜粋しました。最終的には全てに目を通して頂きたいところですが、まずは導入として。
なんという親切なページでしょう！もうこの記事書かなくてもいいじゃん！でも書いちゃう！
主なUI要素の名称と役割、注意事項などが載っています。
デザイン面で特に気をつけたいのは
・アプリバーのアイコンは最大4つまで。
・アプリバーメニューの項目は5つまで。
・タイルには通知機能がある。
らへんでしょうか。
また概念ですが、より詳細に「WP アプリを作るときにどんなことを考えなければいけないのか？」が書かれています。大半はモバイルアプリ全般に言えることなので、他のプラットフォームでも参考になります。
"何をするためのアプリか?
この問いに一文で回答してみてください。そうすることで、アプリの中心的機能を明確にすることができます。最初は一般的な観点から検討するだけにし、特定の機能についてはまだ考えません。アプリの目的と、ユーザーにとって何が有用なのかを明確にします。"
WPの特徴的なナビゲーションの1つであるPanoramaについて解説されています。
Panoramaは機能やページのカテゴリが多いアプリでよく使われるので、そういうサービスをやられてるとこのデザイナーさんはお世話になると思います。
Panoramaに続いて特徴的なPivotの解説。ていうかPivotってアプリタブって言うんだ…（今知った
その名の通り、他のプラットフォームではタブと呼ばれているものです。画面をフリックして切り替えるのが特徴。あまり数が多いとユーザーが迷ってしまうので注意です。
グラデーションは使っちゃだめだよとか、アイコンは白でいこうね、などのビジュアル要素についてと、WPで使われる通知の種類について解説されています。
実は、タイルには様々なガイドラインが存在しています。また、単にアプリアイコンとして置かれるだけではなく、ライブタイルやセカンダリタイルと呼ばれるタイルも存在します。タイルを制するものはWPのホーム画面を制する！
…というのを実はちょうど1年前に先輩が書いてたりしてたり。
http://d.hatena.ne.jp/iseebi/20111201
以上、ガイドラインの中でも、比較的基本として知っておきたいものでした。これらに目を通したからと言ってすぐにWPアプリのデザインができるというわけではありませんが、少なくとも感覚は掴めたんじゃないかと思います。
より上級のガイドライン
より上級ってなんだよと自分に突っ込んでしまいましたが、まあ上に書いたの以外です。
ラベルに対する注意とかテーマカラーについてとか、あれだけ「真にデジタルなものを」と言いながら「見た目にも本物らしくするのもおもしろいかもしれません。」とか割と適当なこと言ってるページとか。
また、デザインライブラリと被るところもありますがコントロールのデザイン ガイドラインはほぼ全てのUI要素のガイドラインへ飛べるので、これもブックマークに入れると後々助けてくれると思います。
デザインリソース
最後に。やっぱりデザイナーと言ったらPSDとAIだよね！ということでデザインリソースのリンクです。何故か言語が日本語だとリンク先がNot Foundになっていたので英語版。
Design resources for Windows Phone
駆け足となりましたが、いかがだったでしょうか。
本来なら、Panoramaとはどういうものでどんな要素が入るのかとか、タイルがあることでユーザーにどんなメリットがあるのかとか説明するべきでしたが、補足説明すら無く、わかりにくかったと思います。すみません。
でも、入り口がどこにあるかくらいは、なんとなーく把握できたのではないでしょうか。
最初に書きましたが、やはり見て読むだけではどんなものかイマイチ理解できません。実際に端末を触り、アプリを使ってコンテキストを把握するまでは、どう頑張っても「知る」止まりになってしまいます。
少しでもWindows Phoneに対して興味が出た方は、ぜひ家電量販店などで端末を触ってみてください。発売から1年と4ヶ月くらい経ってますが、たぶんまだ並んでる…のかな？どうなんだろう。。
ちなみにIS12Tの白ロムはかなりお安くなってきていて、今なら新品でも8000円くらいで入手できます。プロダクトとしての出来もいいので、ぜひ1台。
今日書けなかったこと（iOSやAndroidとの違い、実際のアプリの設計など）はまた追々書いていく予定です。
