VB開発者のためのWindowsストアアプリをリリースするための13の極意
極意2： タイトルの必要性、Splash Screen／画面の配色、etc.
Windowsストア・アプリの認定要件ではないが、Windowsストア・アプリの基本的な作法となっているUI／UX関連の注意点と、その実装方法を紹介する。
前書き ―― 今回の極意について
Windowsストア・アプリは、従来のアプリとは異なり、特にUI／UX（ユーザー・インターフェイス／ユーザー体験）に重点が置かれている*1。もちろんアプリの機能も重要だが、それと並行してUI／UXもより良いものにすべきである。最低限、下記の2点は実施してほしい。
- 必ずタイトルを入れる（通常、アプリ画面の左上に表示）
- アプリを起動したときに表示されるSplash Screen（スプラッシュ・スクリーン）の色と、アプリの画面の色は、基本的に同じ配色にする
確かに、これらは「MSDN： Windows 8 アプリの認定の要件」の中に記載されている要件ではなく、これらを実施しないからといって、ストアの審査でリジェクトされることはない。しかし、これらはWindowsストア・アプリの基本的な作法となっているので、できるだけ守るべき点であることに注目していただきたい。
- *1 筆者は、UI／UXを専門としているわけではない。そのため、今回の極意は、Windowsストアに実際にアプリを申請して認定された結果を基に、筆者独自の感覚で解説している点をご了承いただきたい。
今回の極意に対する筆者の体験
必ずタイトルを入れる
筆者はつい最近まで、申請するアプリには全くタイトルを入れていなかった。アプリ起動直後に、Splash Screenでタイトルを表示していたため、タイトルは不要だと思っていた。しかし、「これは作法上、誤りである」と（マイクロソフトの方から）指摘を受けた。「Splash Screenでタイトルが最初に表示されるのに、なぜタイトルが必要なのか？ それは、人間は自分の使っているアプリが、何というアプリなのか、タイトルが付いていないと、忘れる可能性があるからだ」と教えられた。
私としては納得できる答えではなかった。だが、タイトルが無いよりは有る方が、画面が引き締まって見えること（＝画面上に基本情報がそろうので1つのアプリとしてまとまった感じになること）は確かだ。その意味でもタイトルを入れることは、作法上、やはり必要なのかもしれないと思った。
画面の背景色
また、画面に関しても、背景色もデフォルトの「DarkTheme（黒）」のままで申請していた。それでも認定されるものだから、「これでいいのだ」と思い違いをしていた。これも「作法上、誤りである」との指摘を受けた。
「画面の背景色は、Splash Screenの色と合わせたり、『LightTheme』や明示的に背景色や背景画像を指定したほうがいい」と助言された。
UI／UXに配慮した画面の作り方
では、実際にVisual Studio 2012（以後、VS 2012）を起動して、タイトルと画面の統一性のあるアプリの作り方を見ていこう。UI／UXの解説がメインで、プログラム・コードの解説は、全く出てこないので、ご了承願いたい。
サンプルとして今回紹介するのは、「盆栽が好き」（次の画面を参照）というアプリの画面の作成方法だ。
この「盆栽が好き」というアプリは、Webカメラで写した画像に、リストボックス内に表示されている盆栽の画像を好きなだけ、任意の位置に拡大／縮小して配置し、合成保存するアプリだ。［一覧］ボタンでは、保存された画像の一覧もできるようにしている。
アプリのタイトルと配色
左上隅に、TextBlockコントロールを配置して、Textプロパティに「盆栽が好き」と指定している。これがこのアプリのタイトルとなる。基本的に、タイトルの位置は左上隅となる。
タイトルとなる文字のサイズは特に決まりはない。このアプリが何というアプリであるかが分かる程度のサイズであればOKだ。
文字色には「White」を使った。その理由は、背景色が「Green」で色が濃いめなので、文字色は「White」にした方がコントラストの違いから見やすいし、文字は色を持たない白や黒の方が落ち着いて見えると判断したからである。
背景色は「Green」にした。このアプリのテーマが「盆栽」であるためだ。（筆者の感覚では、「盆栽」をイメージすると、葉などの色から直感的に「Green」が思い浮かぶのでこれを使った）。
ボタンの配置場所
またWindowsストアが始まった初期のころ（今から約1年前）は、この手のアプリを作成する場合、［写真を撮る］ボタンや［一覧］ボタンは、画面の下端または上端からスワイプするか、マウスの右クリックで表示されるアプリ・バー内に配置していた。「Windowsストア・アプリでは、画面上にはあまりボタンを配置してはならない」と、何かで読んだ記憶があったからだ。例えば、日本マイクロソフト社員のブログ記事「良いWindowsストア アプリの作り方 vol.02 ～アプリバーの使い方～ - 田中達彦のブログ - Site Home - MSDN Blogs」の中の「[アプリバーの概要]」の項には、以下のように書かれている。
Windowsストア アプリでは、ユーザーがコンテンツに集中できるように、極力画面上から余分なボタン等を排除します。
そのため、コマンド類をアプリバーと呼ばれるバーの中に配置します。
アプリバーは、画面の下端または上端からスワイプするか、マウスを右クリックすると表示されます。
筆者はこの考えに則って各ボタンをアプリ・バーに配置していた。しかし、この方法も「作法上、誤りである」と指摘を受けた。
「ボタンはユーザーに分かりやすく、操作しやすい場所に配置するべきものだ。それに、アプリ・バーの多用は避けた方がいい」と教えられた。……先ほど引用した内容と矛盾しているではないか (-_-;)。
だがこれも、「しゃくし定規に考えるのではなく、適材適所でアプリ・バーの使い方を考えていけばいいのだ」と解釈した。今回の「盆栽が好き」のようなアプリでは、ユーザーの操作性を考えると、必ずしも引用した内容のとおりにはならないということだ。
ボタンを配置する
上述のような指摘を受けて以来、筆者はこの手のアプリを作る場合は、ボタンはできるだけユーザーの操作しやすい位置に配置するように心掛けている（先の画面を参照）。また、このアプリには［合成保存］というボタンがあるが、デフォルトのButtonコントロールではなく、画像ボタンなどを利用すると、もっと美しい画面に仕上がる。筆者はデザイナーではないので、ボタンのデザインをしたり、絵を描いたりは不得意であるため、ここはあえてデフォルトのButtonコントロールを使用している。
【コラム】Windowsストア・アプリのUIデザインに関して
プログラマーとデザイナーがコラボできる環境であれば、画面の配色や、ボタンの画像など、デザイナーの力を借りてデザインしていけば、もっと美しいアプリの画面が完成するだろう。しかし、現在ではプログラマーもデザイン力を身に付けねばならない時代に来ていると思う。今までのように、プログラマーはプログラム・コードだけを書いておけばいいという時代は終わった。デザイナーはプログラム力を身に付け、プログラマーはデザイン力を身に付ければ、各自が自分の力だけで、変幻自在にアプリを作成できるようになる。
今は独立独歩、自分の力で全てを賄う時代ではないだろうか、と筆者は考える。
画像一覧ページのUI／UX
このアプリは2画面構成になっている。「画像を一覧」するページも用意している（次の画面を参照）。
アプリ・バーに［削除］ボタンと［一括削除］ボタンが表示されている
ここでは、画面の下端または上端からスワイプするか、マウスの右クリックで表示されるアプリ・バー内にボタンを表示している。最初は、表示される画像ごとにButtonコントロールを追加して、［削除］ボタンとしていた。例えば、10枚の画像が保存されていれば、画像ごとに10個の［削除］ボタンが作成・追加された。しかし、「この手法は、Windowsストア・アプリの作法上、最も適切でない方法だ」との指摘を受けた。そこで、この画像一覧のページでは［削除］と［一括削除］ボタンは、アプリ・バーに配置した。臨機応変、適材適所で使い方が異なるのだ。
この「画像の一覧」ページでもタイトルは表示されたままで、背景色も先のTOP画面と同じ色に統一している。また、画面の下端または上端からスワイプするか、マウスの右クリックで表示されるアプリ・バーの背景色は、メイン画面の背景色と同系統の色を使用している。こうすることで、画面全体に統一感が生まれる。仮に、メイン・ページの背景色が「Black」で、画像一覧のページが「Green」だと想像してみてほしい、そこには統一感のない、不自然なページが存在することは容易に想像できるだろう。
Splash Screenと各種ロゴの作成
VS 2012で作成したWindowsストア・アプリ・プロジェクトした場合、ソリューション・エクスプローラー内のAssetsフォルダー内には、4つの.pngファイルが入っている。デフォルトの画像は全て「☒ 」（＝□に×印）という表示の画像となっている。このままの状態の画像では、「アプリ・パッケージ」を作成後に実行される、「Windows App Certification Kit 2.2」の検証*2で不合格になる。
- *2 Windowsストアの認証とリストについて、作成したアプリを提出する前に、そのアプリをテストし、それを提出するための準備ができていることを確認するために、「Windows App Certification Kit 2.2」を使用して検証する。
Assetsフォルダー内の画像の種類とサイズは、「Assetsフォルダー内の画像に関する表」のようになる（次の表を参照）。
| ファイル名 | サイズ |
|---|---|
| Logo.png | 150×150 |
| SmallLogo.png | 30×30 |
| SplashScreen.png | 620×300 |
| StoreLogo.png | 50×50 |
この4つの.pngファイルは必須画像だが、これ以外に任意の310×150サイズのWideLogo.pngを含めることができる。
SplashScreen.pngはアプリを起動した際に、最初に表示される画像だ。Windows 8のスタート画面にピン留めされるのはLogo.pngだ。ただし、WideLogo.pngを作成して登録しておくと、Windows 8のスタート画面にWideLogo.pngがピン留めされることになる。
まず、筆者がこの「盆栽が好き」で作成した「5つのPNG画像」を紹介する（次の画面を参照）。これらの画像はPhotoShop Elementsを使って作成しているが、今ではロゴを作成するツールもあるので、それを利用するのもいいだろう*3。
- *3 Windowsストア・アプリ用のロゴを作成するツールに、「Windows Store App logo maker v1.3」というのがある。このツールを使うと一度に各サイズのアイコンを作成できる。興味のある方はダウンロードして使ってみていただきたい。
作成した、各PNG画像を見ていただくと分かるが、背景色は、アプリの画面の背景色と統一させている。また文字色も、アプリのタイトルの文字色と統一させている。このように各アイコンの色を、アプリの画面の色と同じにすることで、このアプリ全体に統一感を持たせている。
WideLogo.pngの登録方法
WideLogo.pngは任意のアイコンであるため、登録しないと、Assetsフォルダーに入れていても、何の役にも立たない。そこで以下ではWideLogo.pngを登録する方法を説明する。
まず、ソリューション・エクスプローラー内の［Package.appxmanifest］ファイル項目をダブルクリックして開く。それにより表示されたデザイナー画面で［アプリケーション UI］タブを選択すると、左側に［すべてのイメージ資産］というメニュー欄が存在する。その中に各ロゴ名のメニュー項目（具体的には［ロゴ］［ワイド ロゴ］［小さいロゴ］［ストア ロゴ］）が入っている。［ワイド ロゴ］以外を選択したときは、Assetsフォルダー内にある画像が右側の［ロゴ］欄などに表示されている。
ここでは［ワイド ロゴ］をクリックする。右側の下に4個のスケール（＝［スケーリングされた資産］）が表示されるので、［スケール 100］の下に表示されていて、［310 x 150 px］の横にある［…］ボタンをタップする。画像を選択するフォルダーが表示されるので、Assetsフォルダー内の「WideLogo.png」を選択する。これにより、［スケール 100］内の右上に「赤い●に×が描かれたアイコン」が表示される（次の画面参照）。
この状態でソリューション・エクスプローラー内のAssetsフォルダー内を見ると、「WideLogo.scale-100.png」というファイルが作成されているのが分かる（次の画面を参照）。
このWideLogo.scale-100.pngファイルを削除する。すると、［スケール 100］内に「WideLogo.png」の画像が表示される（次の画面を参照）。
この状態でデバッグしてプログラムを実行する。すると、実行されたプログラムのWideLogo.pngが「スタート画面のタイル」として表示される（次の画面を参照）。
WideLogo.pngがない場合はLogo.pngが表示される。
以上が、「盆栽が好き」のようなWindowsストア・アプリを作成する際に注意しなければならない、最低限のUI／UXだ。この程度のことなら、誰にでも対応が可能であると思う。今回の極意を参考にWindowsストア・アプリ作成に挑戦していただきたい。
- *Windows 8の[検索]チャームで「ストア」を指定し、検索欄に、「kuniyasu」または「YakushijiKuniyasu」または「eightman」と入力すると、筆者の公開しているアプリの一覧を見ることができる。
■
今回はこれで終わりだ。筆者はUI／UXの素人であり、デザイナーでもない。しかし、自分はプログラマーだからデザインは適当でいい、という考えではWindowsストア・アプリは作成できない。しかし、何度も言うが、Windowsストアの審査に受かることはできる。
たくさんのユーザーに、自分の作ったアプリをダウンロードしていただくためには、やはり美しいUI、使いやすいUXのアプリをダウンロードしていただき、満足していただきたいと思う。アプリの価値は、本来は、Windowsストアの審査員が決定するものではない、と筆者は思っている。アプリの価値はユーザー自身が決めるものだ。
美しくて使いやすく機能に優れたアプリは、ダウンロード数も増え、プログラマーにとっては、次のアプリ作成の励みにもなる。逆に、いくら多くのアプリを作っていても、ユーザーから見向きもされず、ダウンロード数も伸びないなら、やる気が失せる。
しかし、「UI／UXに優れ、機能も申し分ないアプリを作ったから、そのアプリのダウンロード数が増えるのか？」と問われれば、その答えは「NO！」である。いくら美しく機能に優れたアプリであっても、ユーザーが必要としていないアプリなら、それはダウンロードされない、それが現実だ。
最後に筆者の数多くのアプリの中で、ダウンロード数が1万を軽く超えているアプリ（公開国は日本のみ）を紹介する。「線路図」がダウンロード数1万をオーバーしているアプリだ。見ていただくとお分かりになるが、タイトルも入っていないし、UI／UXも特に際立ったものではない。背景色も「DarkTheme」のままだ。それでもダウンロード数は1万を超えている。恐らく、ユーザーがこの手のアプリを必要としていたのだろうと想像する。このアプリにタイトルを入れ、UI／UXに優れたものにすれば、もちろん、もっとダウンロード数は増えると確信している。
今回の記事が、ダウンロードを増やすためのアプリ作成の、お役に立てばうれしい限りだ。
では、また次回の記事でお会いしよう。
※以下では、本稿の前後を合わせて5回分（第1回～第5回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
1. 極意1： ここがポイント、Windowsストアアプリ認定の要件
「Windowsストア向けのアプリ申請で、いかにしたら認定されるか」についてのノウハウを紹介する連載がスタート。今回は認定要件のドキュメントから注目ポイントを取り上げる。
2. 【現在、表示中】≫ 極意2： タイトルの必要性、Splash Screen／画面の配色、etc.
Windowsストア・アプリの認定要件ではないが、Windowsストア・アプリの基本的な作法となっているUI／UX関連の注意点と、その実装方法を紹介する。
