Windows Phone 7
販売用に独自の Windows Phone アプリを設計する
優れた設計とは、アプリケーションにすべての機能を実装後、見た目を美しく飾ることだけではありません。設計とは、見た目や機能を決めるだけでなく、ユーザーがそのアプリをどのように操作するかも決定するプロセスです。ユーザーがそのアプリにどの程度満足するかはユーザー エクスペリエンスに大きく左右されるため、このプロセスをおろそかすべきではありません。設計を後付けにはしないでください。
年のせいかもしれませんが、筆者が受けたコンピューター サイエンスの授業はほとんどすべて覚えています。それらの授業は、コーディングを始める前にプログラムを計画することの重要性についての講義から始まっていました。授業では、実際の鉛筆を使い (近くに大きな消しゴムを置いて) 描いたフロー チャートなどをツールとして使用しました。これは、当時の古いハードウェアでは、コンピューターの使用時間に莫大な費用がかかったためです。手元で作業できる時間は最大限に活用することを常に考えていました。今日では、コンピューターの使用時間にかかる費用もずいぶんと安くなり、Visual Studio や Expression Blend などのすばらしいツールもあり、見栄えが良く、非常に迅速に実行できるアプリケーションを実に簡単に作成できます。その結果、何も考えずにコンピューターの前に座ってすぐにコーディングを始めるという風潮が生まれました。今回の記事では、コーディング時間を節約し、Windows Phone Marketplace (windowsphone.com/marketplace) で成果を得られるように、アプリケーションを事前に設計する時間の使い方について説明します。
ブレインストーミング、情報アーキテクチャ、プロトタイピング、ユーザー調査、およびイテレーションなど、コードを書き始める前に行うべき作業を紹介しながら、意図を持って Windows Phone アプリケーションを設計することについて説明します。また、こうした作業に利用できるツールもいくつか紹介します。
設計を行う理由
Windows Phone Marketplace で評価とレビューをご覧ください。レビューでよく見かける不満の 1 つは、アプリケーションがユーザーの期待どおりに動作しないというものです。「動作しない」など否定的でそっけないレビューがあります。もっとひどいレビューもあります。もちろん、正当な不満も、そうでない不満もあります。アプリケーションの動作方法を理解しないでレビューを書き込むユーザーもいます。では、ユーザーが悪いのでしょうか、それともアプリケーションが悪いのでしょうか。以下に、Marketplace のレビューをそのまま示します。
「UI が最悪で動作がすごく遅くて、使いものにならない。」
このレビューは抽象的ですが、携帯電話の複雑なアプリケーションについて一生懸命学ぼうとしたり、長い時間を費やして詳しいフィードバックを返すことをユーザーは望んでいないことを示しています。だれが彼らを責めることができるでしょう。携帯電話は気軽に使用するデバイスです。作成するアプリケーションは、わかりやすくて簡単に使用できるものでなければなりません。入手可能なアプリケーションは数多く存在するため、問題を解決できる、銀行で並んでいる間暇をつぶせる、といったメリットを生み出さないアプリケーションをユーザーが長時間使用する可能性はほとんどありません。
携帯電話画面の UI 表示スペースは広くありません。そのため、ユーザーがアプリケーションをどのように操作するかを慎重にじっくりと考える必要があります。売り上げを延ばすのは、しっかりと設計され、一体感があり、使いやすいアプリケーションです。作成したアプリケーションを Windows Phone Marketplace からダウンロードしてレビューを行うユーザーが増えるほど、レビュー内容が良ければダウンロード数も増えていきます。
Metro 設計原則
Metro は、Windows Phone と Windows 8 で採用される設計理念の名称です。Metro についての記事は既にたくさん書かれていますが、アプリケーションの実際の設計プロセスに入る前に、Metro の設計原則について少し説明しておきます。
- 明確、軽量、オープン、高速 (Clean, Light, Open and Fast): アプリケーションは一目で理解しやすく、ユーザー入力にすばやく反応する必要があります。余白が多く、明確でオープンな外観にします。
- 文字体裁を重視する (Celebrate Typography): 全 UI 設計に共通の単語を使用します。それらの単語の表示方法により、差別化します。文字は美しいものです。目を楽しませるだけでなく、機能的にもできます。太さと位置のバランスを正しくすれば、見た目の階層を生み出すことができます。さらに、文字をうまく配置すれば、より多くのコンテンツをユーザーに提供できます。
- 生き生きとした動き (Alive in Motion): 動きは命であり、Windows Phone に命を吹き込みます。Live Tile、切り替え効果、およびユーザー入力への反応がすべてを決定します。切り替え効果は、ユーザー エクスペリエンス設計の重要な部分です。切り替え効果が優れていれば、アプリケーションのコンテキストについて理解するヒントをユーザーに提供することができます。
- 見かけではなく、コンテンツ (Content, Not Chrome): ユーザーが興味を抱くのはコンテンツです。コンテンツを最も充実し、他は最低限に抑えます。無駄な機能をできるだけ省くことで、コンテンツに焦点が当たります。画面が小さい場合は、このことが特に重要です。コンテンツとは UI であり、ユーザーが直接操作できるべきものです。ピンチ ジェスチャーを使った画像サイズの変更機能などがその例です。
- 真のデジタル (Authentically Digital): タッチ操作、高解像度画面、および単純化した操作形式を使用し、ハンドヘルド デバイスを明確に対象とする設計。つまり、「真のデジタル」を目指します。ノブのようなアナログ コントロールのシミュレーションを試みることはしません。
設計プロセス
勤務する会社にデザイン部門がある幸運な方は、プロセスの開始に当たってデザイナーに参加を要請してください。ユーザー エクスペリエンスの設計を理解している人に協力を仰ぐことは、作成するアプリケーションに大きなメリットとなります。しかし、おそらく読者の多くは小企業に勤務しているか、副業として個人で携帯電話用アプリケーションを開発している方でしょう。したがって、設計は自分自身で行う必要があります。では、設計のプロセスを説明しながら、Windows Phone アプリケーションの作成時にこれらのプラクティスを組み込めるようにしましょう。
ブレインストーミング: 創造力を働かせます。ビルドするアプリケーションについて既にアイデアがある場合もあれば、現在アイデアを生み出そうとしている場合もあります。どちらの場合でも、ブレインストーミングは、それまで考えたことがなかったアイデアを探るのに役立ちます。そして、楽しい作業です。
できれば、ブレインストーミングは他人と行ってください。1 人でアプリケーションを作成している開発者は、家族や友人に頼んで一緒にブレインストーミングを行ってください。ただし、他人のアイデアを利用する場合は、法的な問題が生じる可能性があることを忘れないでください。ブレインストーミングのポイントは、できるだけ多くのアイデアを生み出すことです。
ブレインストーミングのメカニズムについて知識があることが前提ですが、再確認のため、このプロセスに関するガイドラインをいくつか以下に示します。
- アイデアをすべて書き出す。
- この段階では、どんなに突飛なアイデアでもよい。
- 作業が進むよう時間制限を設ける。
- アイデアを深く掘り下げない。
作成するアプリケーションは、ユーザーがなんらかの作業を完了するのに役立つものか、ユーザーを楽しませるものかを考えます。どちらの場合も、話し手は開発者です。ブレインストーミングのきっかけを作るには、以下のような質問を投げかけます。
- 何をするアプリケーションか。
- だれが使用するか。
- 市場にどのように受け入れられるか。
- いつ、どこで使用するか。
- どのような種類のコンテンツを表示するか。
- ハードウェアをどのように活用しているか。
- アプリケーションのアイデアは、Windows Phone Marketplace や他のスマートフォン アプリケーション ストアの同様のアプリケーションと比べてどう違うか。
多くのアイデアを書き出し、一覧を作成したら、複数の制約を設けてそれらのアイデアにフィルターをかけ、実際に作成する対象を絞り込みます。ここで、次のような疑問が浮かぶかもしれません。
- アプリケーションのビジョンを実現するスキルがあるか (習得できるか)。
- 一定の期間内に開発できるか。
- 開発予算はあるか。
- オンライン サービスなど他の資産を活用できるか。
- さらに改良を加えるため、誰かとパートナー関係を結ぶことは可能か。
- このアプリケーションに必要なインフラストラクチャは多いか。ストリーミング メディア サービスは優れたアイデアかもしれないが、そのようなサービスを軌道に乗せるのに必要なサーバー リソースを賄うことができるか、といったことです。
ブレインストーミングがうまくいくと、作成した一覧にはアイデアが満載されています。したがって、非常に厳しい姿勢をとって、このままプロセスを進めたいと強く考える 2 つまたは 3 つのアイデアに絞り込むことがおそらく必要になります。
スケッチとワイヤーフレーム: プロトタイプを設計するには、ブレインストーミングで書き出したアイデアをまとめる必要があります。まず、Marketplace で既に公開されている同様のアプリケーションを複数評価します。おそらく長所と短所を両方発見するでしょう。どちらも学習する良い機会になります。
作業を迅速に進めるため、ホワイトボードか紙と鉛筆を使用します。アプリケーションのナビゲーション アーキテクチャのレイアウトを作成します。デザイナーは、これを情報アーキテクチャと呼びますが、コンテンツ パブリッシングの世界に身を置いている読者の皆さんにとって、情報アーキテクチャはまったく異なる意味を持ちます。どう呼ぶかは自由ですが、この手順によって設計上の矛盾点を検出し、アプリケーションを使いやすくするためのアイデアを生みだすことができます。付箋とホワイトボードを使って簡単に実演したようすを示します (図 1 参照)。非常に簡単な例ですが、この手順がどのようなものかがわかります。各付箋は、オンライン ショッピング アプリケーションのページを表しています。
.png)
図 1 情報アーキテクチャの計画
ここでは、詳細は重要ではありません (各ページは 1 分もかけずに書き上げたものです)。大事なのは、作成するアプリケーションの流れと操作をしっかりと考えることです。付箋は、アプリケーションのページをすばやく模倣できる優れたツールです。また、実際の携帯電話の画面と同じくらいの大きさなので、実際のアプリケーションの感触をつかむことができます。
ナビゲーションのレイアウトにホワイトボードを使用すると、時間をかけずに、簡単にページを移動させたり関連性を見つけたりすることができます。この演習を行うと、計画したインターフェイスのどこに穴があるかを簡単かつ明確に把握することができ、自分のビジョンを実装するために行うコーディング作業の量を見積もるのにも役立ちます。
他の人に参加してもらい、情報アーキテクチャに関するフィードバックをもらってください (個人で作業している場合は同僚、または友人や家族に依頼してください)。参加者に設計全体を説明します。ただし、説明過剰にならないように心掛けてください。アプリケーションの目的と操作は、わかりやすいものであるべきです (わかりやすくなるまで改良を続けてください)。
プロトタイプの作成とユーザー調査: ページとナビゲーションの設計に満足したら、次はプロトタイプを作成して、ユーザーからフィードバックを受け取ります。
プロトタイプは、動作するアプリケーションでなくてもかまいません。紙を利用したプロトタイプは、ユーザーにユーザビリティ テストを行ってもらうために、アプリケーションの外観と雰囲気をすばやく作り出して提示するのに最適なツールです (図 2 参照)。もちろん、紙を使用する場合は、アプリケーションがどのように動作するかをユーザーが理解できるよう説明する必要があります。YouTube で「paper prototype」を検索すると、このプロセスを紹介する数多くのビデオをご覧になれます。
.png)
図 2 紙を利用するプロトタイプ
プロトタイプをいくつか作成したら、ユーザーを招いてプロトタイプを試してもらいます。ユーザーには、UI または操作に関する具体的な提案ではなく、何を目標にアプリケーションを使用するかを述べてもらうよう頼みます。
作成するアプリケーションの機能要素について、以下の疑問点に答えてみてください。
- 何を行うかが明確になっているか。
- 操作方法は明確か。
- 目的と操作の両面においてタスクが直感的か。
このプロセスは、非常に効果があり、有益なものです。以前、ユーザービリティ テストの次の課題が明らかにもならないうちに、新しい設計をすばやく作成するデザイン チームを目にしました。彼らは、1 日で複数の設計をテストしていました。まったくすごい速さです。
イテレーションと改良: ユーザーからのフィードバックを基にプロトタイプの改良を続けます。ユーザーの要求にとらわれるあまり、ますます多くの機能を組み込むことがないよう注意してください。ユーザーからのフィードバックには、UI の問題について指摘するものもありますが、ほとんどは総体的に取り入れるべきものです。アプリケーションは焦点を絞った最小限のものになるようにします。
実装できる段階まで設計を改良したら、コンピューターの前に移動します。実際のページ設計のモックアップ製作を始めるには、SketchFlow (www.microsoft.com/expression/products/sketchflow_overview.aspx、英語) のようなプロトタイピング ツールの使用を検討してください。コーディング中に意思決定を行わなくて済むよう、プロトタイプには以下の項目について十分な詳細情報を含めてください。
- ビジュアル要素: 文字体裁やコンテンツは明確で、読みやすく、簡潔に表示されているか。表示の外観は魅力的か。Windows Phone のテーマ リソース (https://msdn.microsoft.com/ja-jp/library/ff769552(v=vs.92).aspx) を利用すると、ブラシ、色、およびフォントといった特質に関してあらかじめ定義された値が提供されているため、Metro デザインの原則 (およびユーザー設定) に準拠しやすくなります。
- コントロール要素: コントロールは、タッチ操作しやすい大きさや間隔になっているか。Visual Studio のツールボックス内のツールは、既に Metro のテーマに対応しています。
- ブランド要素: 色やロゴが正確に再現されているか。すべての製作物が、著作権を準拠しているか。
必要な要素をすべて実装し、プロトタイピング中に計画した操作を再現するようにします。タスクと操作は、事前に行ったユーザビリティ テストを基に、外観や流れが適切であることを確認してください。
図 3 の簡単なワークフロー チャートに、これまで説明した設計プロセスを示します。
.png)
図 3 設計プロセス
設計のツール
これで、アプリケーションの設計を成功させるために、高価なツールをたくさん使用する必要はないということが明らかになりました。おそらく、読者の皆さんは、現時点で使用可能な次のツールのうちいくつかはお持ちだと思います。
- 紙と鉛筆: 設計ツールの原点ですが、今でも大変役に立ちます。
- 付箋: 携帯電話のページ設計にとって優れた "キャンバス" です。
- ビデオ カメラ: ユーザービリティ テストの記録と、設計のストップモーション アニメーションを作成して、同僚、友人、および家族と共有するのに使用します。
- Windows Phone SDK 7.1: Visual Studio 2010 Express for Windows Phone、Windows Phone エミュレーター、および Expression Blend for Windows Phone が同梱されていて、無償でダウンロードできます (https://www.microsoft.com/downloads/ja-jp/details.aspx?familyid=0a373422-6680-46a7-89e1-e9a468a14259&displaylang=ja-nec)。
- SketchFlow: Expression Blend で、機能設計のスケッチを簡単に作成できます。
詳細情報
Windows Phone アプリケーションを設計する際に役立つオンライン情報はたくさんあります。以下のドキュメントは、これまで説明したトピックについてはるかに詳しく説明しています。
- Windows Phone のユーザー エクスペリエンスのデザイン ガイドライン (https://msdn.microsoft.com/ja-jp/library/hh202915(VS.92).aspx)
- Windows Phone のデザイン リソース (https://msdn.microsoft.com/ja-jp/library/ff637515(VS.92).aspx)
- Microsoft .toolbox (wpdev.ms/designtb、英語)
- Alfred Astort のブログ記事 (wpdev.ms/alfreddesign、英語)
- Windows Phone 用 PhotoShop デザイン テンプレート (wpdev.ms/dsntemplates)
アイデアのヒントはどこにあるかわかりません。したがって情報は重要です。以下の Twitter ユーザーは、設計とユーザー調査に関する興味深く、役立つトピックを頻繁につぶやいています。
まとめ
設計が完成したら、いよいよコーディングを始めます。設計作業は事前にすべて済ませてあるので、ユーザビリティ テストで既に検証してある機能を実装するのに必要なロジックだけに集中することができます。実装途中でアプリケーションを設計し直すことがないため作業時間を短縮できます。また、作成したアプリケーションは、実際のユーザーによって既にテスト済みなので、Windows Phone Marketplace では肯定的なレビューをもらえる可能性が高くなります。
Windows Phone SDK を使用すると、テーマに沿ったコントロールと、ヘッダーやテーマ リソースなどを含む Visual Studio のテンプレートによって、成功に向けての準備を整えることができます。前もって知的作業を行う必要はありますが、これらのツールは、実装段階に移れば優れた Metro アプリケーションを作成するのに役立ちます。
今回の記事は、設計に関して言えば氷山の一角にすぎません。読者が興味を抱き、紹介したプロセスで、次に作成する Windows Phone アプリケーションの品質をどれくらい向上できるかを考える手助けになればさいわいです。設計が優れたアプリケーションは、Windows Phone Marketplace でのより多くのダウンロードと売り上げにつながるフィードバック ループを生み出します。アプリケーションの設計にもっと考えを巡らせてください。皆さんのアプリケーションが大成功を収めることを祈っています。
Mark Hopkins は、Windows Phone 開発者向けドキュメント チームのシニア プログラミング ライターです。彼は、1992 年からマイクロソフトで勤務しており、開発者サポート、Visual C++、MFC、Windows Platform SDK、Internet Explorer SDK、Tablet PC SDK、Surface SDK、Windows Phone SDK など、開発者に重点を置いた製品に携わってきました。
この記事のレビューに協力してくれた技術スタッフの Robert Lyon、Cheryl Simmons、および Matt Stroshane に心より感謝いたします。