いよいよアプリ作り本番！どこからはじめる？

ビジュアル・デザイン

ラフデザイン

実装する処理が決まったら、先の表3と図2をもとに、ラフデザインを引いていきます。

このアプリでは、先に述べたように、俳句を季節別のXML文書に記録していくようになります。そこで、メインページには、季節を選択するための、「春」「夏」「秋」「冬」の4つの画像ボタンを配置することにしました。

これらのボタンは、タイトルの「一日一句」から展開したデザインにします。ただし、単色の塗りつぶしではなく、背景には四季おりおりの花木のイラストを敷くことにしました。春はあたたかみのある桜色に桜の花、夏は爽やかな夏草の色に朝顔、秋は落ち着いた紅葉の色に楓、冬は寒空の青に寒梅です。

当初このメインページは、海外公開予定のバージョンアップ版を見据えて、日本的なるものをアピールできるような、日本画を切り絵風にアレンジしたデザインにする考えでした。ところが、ラフを引いているうちに、俳人のイメージを邪魔するほどデザインが出しゃばり過ぎてはいけない、ツールがイメージを押しつけることはすべきでない、という考えにいたりました。そこで、創作の邪魔にならないように、色も形も絞り込みました（図5）。

メインページのデザインの方向性が決まると、他のページのデザインもおのずと決まります。メインページに合わせて、入力ページも、表示ページも、できるだけシンプルに、創作活動を妨げないデザインを心掛けました。

ラフデザインにおいては、色や形以外にも重要なポイントがあります。それは、使い勝手の良いレイアウトです。実際の操作をイメージし、ユーザーの手の動きを考えながら、入力ボックスやボタンを配置する場所、幅や高さ、並べる順序を決めていきます。

画面が小さいスマホでは、ボタンが小さ過ぎたり、間隔が空いていなかったりすると、誤操作を招きます。また、並べる順序が適切でなければ、手や指の移動距離が大きくなりますし、直感的な操作ができなくなります。

なお、日本語版ではあまり考慮する必要はないかもしれませんが、筆者は実機を左右両方の手で操作してみて、ボタンの位置を決めるようにしています。

こうして、最終的に、前掲の図1のようなデザインに落ち着きました。

ボタン用画像の作成

画面の構成が決まったところで、実際に使うボタンなどの部品を作り込んでいきます。

画面上にボタンを配置するスペースがないか狭い場合、また、絵から機能をイメージしやすい汎用的なボタンの場合は、アプリケーションバーを使ったり、あるいはホールドでメニューを表示させて選択させる方法が考えられますが、このアプリでは十分なスペースがありますから、常時表示される画像ボタンを配置することにします。

次に、ボタンをどうやって実装するか決めます。Imageコントロールに画像を貼る方法、Buttonコントロールを使う方法、Buttonコントロールに画像を指定する方法、Rectangleを使う方法などいろいろ考えられます。

ここでは、無難に、Imageコントロールに画像を貼る方法と、Buttonコントロールに画像を指定する方法を併用します。後者が必要なのは、ImageコントロールにはIsEnabledプロパティがなく、ユーザーのアクションを受け付けない処理を記述できないからです。

最後に、画像ボタンの形式と追加方法を決めます。

方法には2つあります。ひとつはExpression DesignでエクスポートしたXAMLコードを追加する方法、もうひとつはpng形式で保存した画像を追加する方法です。

XAMLをコードとして追加すると、当然、コードはそのぶん複雑化します。XAMLコード中のコントロールのプロパティをプログラムから制御するなどの目的があるのでない限り、画像はpng形式にしておく方が無難です。このアプリでも、デザイン部品はすべてpng形式にします。

ボタン用の部品をデザインする時は、ユーザーが、画像の表す機能をイメージできるかどうかを推測します。

特に、海外展開を考えるなら、ユーザーが、説明されなくてもその意味の分かるボタンをデザインできれば、そのぶん英語での説明を省くことができます。

筆者は、「保存」機能がフロッピーディスクの絵であったり、「カメラ」がアナログな形であることに、多少の疑問を持っています。これから育つ世代は、フロッピーディスクなど見たことがないはずですから。そのため、「保存」ボタンは、フォルダの絵にしています。

以上のような考えで作成した部品は、図6のとおりです。すばやく作成するために、フォルダのマークと、ペンを持つ手は、絵文字のフォントも利用しています。また、ボタンの背景色は、紺の薄い色ではなく、インスピレーションを表す若干紫色寄りの紺にしました。

これらの部品の中で、ひと工夫しているのが、季語検索ボタンの画像です。

メインページで季節を選択すると、入力ページにその「季節」のテキストを渡します。そして、その季節を検索キーとしてbing検索する処理を実装します。例えば、メインページで「春」のボタンをタップした時は、入力ページに「spring」という文字列を渡し、これを受け取った入力ページでは「季語検索」ボタンをタップした時に、「春」の季語をbing検索できるようにするというわけです。

入力ページでは、メインページから季節のデータが正しく渡ってきているかどうかを確認するため、TextBlockを配置して表示します。このTextBlockを、2枚のpng画像で挟んで、検索用ボタンのデザインの一部として利用しています（図7）。

さて、これで画面レイアウトが固まり、部品ができました。次回は、いよいよプログラミングに取りかかります。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

【関連リンク】

Windows Phone 実機に関する参考ページです。こちらも参照してください。

• Windows Phoneの魅力を知ろう！

その他、開発に役立つリンク集を紹介します。

■開発者向け技術情報サイト MSDN

全ての情報は、ここから。

■App Hub / Windows Phone マーケットプレイス Windows Phone フォーラム

App Hub の利用や Windows Phone マーケットプレイスに関する話題や情報交換の場です。

■UX-TV

アプリケーション開発に関する情報をエバンジェリストの方々が定期的に発信しています。Windows Phone開発に関する番組が充実しています。
マーケットプレイスへのアプリ申請については、9月14日(水)、9月16日(金)、9月21日(水) の番組を参照してください。

■Windows Phone 開発者向け技術情報

■facebook 公式 Fan Page「Windows Phone Japan」

■Windows Phone 関連ブログ

■コミュニティ: Windows Phone Arch

＜リンク先最終アクセス：2012.03＞