PR

Windowsストアアプリデザインの実例

2013年2月20日(水)
インプレスジャパン コンピューターテクノロジー編集部

本記事は、書籍『JavaScriptで作る Windowsストアアプリ開発スタートガイド』(田中賢一郎/著)の原稿の一部を、インプレスジャパン コンピューターテクノロジー編集部がWeb用に再構成したものです。※本記事の最後で、無償版電子書籍についてもご案内していますので、ぜひご覧ください。

Windowsストアアプリ「Paint Drops Free」のユーザーインターフェイスとデザイン/田中 賢一郎

書籍『JavaScriptで作る Windowsストアアプリ開発スタートガイド』でソースコードを解説しているお絵描きアプリ「Paint Drops Free」は、実際にWindowsストアのエンターテイメントカテゴリに登録されています。このアプリは、Webデザイナーの山本麻美さんと共同開発した点が重要です。この記事が、皆さんのアプリデザインの参考になれば幸いです。

図1:Paint Drops Free のトップ画面。この素敵な画面とロゴは、もちろん山本麻美さんの手による。

Web の知識が共通言語になる

個人でアプリ開発を行う場合、わざわざWebデザイナーに依頼するということは、あまりないかもしれません。しかし、デザインのプロと共同制作することで、完成度は格段に高まります。

Webデザイナーと開発者は、異なる分野の人間です。特に開発者が、Webデザイナーにとっては理解しにくいコンピューター言語で開発しようとするとき、その2人が協業するには、認識合わせのプロセスに時間を要するものです。

しかし今回、JavaScript/HTML/CSSなど、お互いにWeb関連については共通の知識を持っていました。これは、でアプリを作るうえで大きなメリットでした。「技術的に何ができて何ができないか」、「こんな機能を実装するにはどんな作業が必要か」、「このスタイルは使えないか」、「どうしたら工数を減らせるか」、といったことを、共通の言葉を使って議論することができたのです。

見るからに無骨なプロトタイプ

私はさっそく、デザイナーである山本さんに、以下のような2 段階のプロトタイプを示しました。

図2:開発者側(田中)が、最初に考案した画面。操作に必要な最低限の配置をしている。周辺のアイコン類の形などが、かなり簡易的であることに注目してほしい。
図3:先の画面に工夫を加え、多少はアプリらしくしたもの。なお、キャンパスの絵は私のいたずら描きであるが、「Paint Drops Free」はただのお絵描きアプリではない。シーソーのように重みによって傾くパーツを用意するなど、開発者としての遊び心もたくさん盛り込んである。ただし、デザイン面での素人くささは否めない。

これらのプロトタイプに対し、山本さんからいただいた提案は、次のようなものでした。

著者
インプレスジャパン コンピューターテクノロジー編集部

連載バックナンバー

開発言語書籍・書評

ブック・インサイド『Python機械学習プログラミング』―単純な例でADALINEのイメージをつかむ

2016/9/16
今回も前回に引き続き、書籍『Python機械学習プログラミング』の2章の内容についてより分かりやすく理解するためのヒントを解説していきます。今回は、ADALINEのイメージがつかめるように、ADALINEのシンプルな例を取り上げます。
開発言語書籍・書評

ブック・インサイド『Python機械学習プログラミング』―パーセプトロンを読み解く

2016/8/8
前回は、書籍『Python機械学習プログラミング』を読むために必要な知識、読み方等について説明しました。今回は、2章の内容についてより分かりやすく理解するためのヒントを解説していきます。
開発言語書籍・書評

ブック・インサイド―『Python機械学習プログラミング』学び方ガイド

2016/6/30
本記事では、書籍『Python機械学習プログラミング』を読むために必要な知識、読み方等について説明します。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています