BA

Windows 8 用デモアプリ作成

プロジェクトの概要

Windows 8 で動作する Windows ストアアプリのデモを作成しました。
ご相談をいただいてから実質20日程度の期間で開発することになりましたが、短い期間の中、弊社はコンセプト提案からビジュアルデザインとUI設計、実装までを手掛けています。
デモに求められた主な要件は以下の通りです。

  • 商品を扱うEコマースアプリとし、Webpayによる決済の機能まで実装する
  • Windows 8 用アプリの特徴である「ポートレート」「スナップ」のビューに対応する
  • デモとして活用するほか、実装サンプルとして配布する可能性もあるため、配布に耐えられる構造にする

また、ご依頼いただいた背景として、弊社が日本マイクロソフト様と共同で開発したサイト "The Shodo" の評判が良かったことが挙げられました。そのため、ビジュアルデザインのクオリティについても、"The Shodo" と同等かそれ以上のものが期待されていました。

コンセプト提案

今回のデモはEコマースアプリとだけ決められており、どのような商品を扱うのかは決められていませんでした。
一口にEコマースアプリと言っても、扱う商品によって、ビジュアルデザインのテイストやインターフェイスのあり方が異なるものになってくる場合があります。
そこで、まずは今回のアプリの開発コンセプトを決める必要がありました。

米国マイクロソフトでは既にこのようなデモアプリが作られていましたが、今回は日本発のデモとなるということでしたので、「日本」の色を生かす、ということをコンセプトの柱に据えました。そこで提案したのが「和モダン」のテイストです。

このコンセプトに基づき、和の食材を扱うアプリとして全体を設計していきました。

ビジュアルデザイン・情報設計

通常のWeb制作では、コンセプトや戦略の部分をまず固め、それを前提にして基本デザインを行います。今回は開発期間が短かったため、コンセプトの検討と同時に基本デザインと情報設計も並行して進める形をとりました。
情報設計としては、Eコマースアプリとして必要な機能を盛り込み、リアリティのあるデモアプリを追求しています。

この際、ショップ全体のVIとなるロゴも合わせて提案しています。
最終的には、WindowsアプリのUIとの差別化も考慮して四角いロゴを採用しました。
また、家紋をモチーフとした商品カテゴリのアイコンもデザインし、合わせて「和モダン」なデザインを創り上げています。

UIデザイン

Windows 8 アプリの特徴は、タッチ操作によるさまざまな操作を行える点です。
Windows 8 の作法にのっとり、UI部品にはフラットなデザインを採用しています。ボタンの形状やスタイルを工夫することで、どこが押せるのか明確になるように配慮しています。
Windows 8 特有の画面表示にも対応しました。通常のビューに加え、画面を縦にした際の「ポートレートビュー」、および画面の横に小さく表示する「スナップビュー」の表示パターンを用意しています。

また、カートに商品を追加する操作の際には、購入数の数字がアニメーションして移動するエフェクトを追加しています。これはユーモラスなだけではなく、利用者が次にどこを操作すれば良いのか、直感的に伝わるようにする狙いがあります。

実装

実装にはVisual Studioを用いましたが、この際、HTML5、CSS3、JavaScriptなどのWeb技術を活用しています。

ポートレートビュー、スナップビューについては「レスポンシブウェブデザイン」の実装手法を取り入れて柔軟に対応しています。