デザイナーがこだわったAndroidアプリのデザインを実現するXMLコーディングを解説する連載の第2回。前回は、デザイナーが作りたいと思うアプリと、こだわりたいポイントについて挙げていきました。

 今回から実際のコーディングに入っていきますが、その前に、作るアプリについてしっかりと考えておきましょう。前回でも述べたとおり、ただのインスピレーションのデザインではなくて、ユーザーが使いやすいインタフェースを設計する必要があるからです。

作りたいアプリを決める

 前回でも紹介しましたが、今回実装するのは、「CAT PATH」と題する仮想アプリです。

 XMLコーディングのサンプルですのでシステム的な仕様はありませんが、画面を作っていく上で、ユーザーのユースケースなどはきちんと考えてインタフェースを設計する必要がありますので、大まかな内容だけ決めておきます。

<アプリの概要>

  • 自分のアカウントを持ち、自分の猫の写真をアップしてアルバム(ギャラリー)にしていく
  • 他のユーザーの猫とフレンド(友猫)になれる
  • 気に入った友猫の写真をお気に入りに追加し、お気に入りギャラリーとしても楽しめる

<アプリの機能>

  • 撮影する(エフェクト効果はとくになし)
  • 友猫を名前で検索できる→フレンドになる
  • 気に入った友猫の写真をお気に入りに追加する

 まずは最小限の機能で考えていきましょう。

 ここで、次のようなインタフェースが考えられます。

図1●CAT PATHの画面
左は自分の猫の写真一覧が並ぶホーム画面(GridView)、右は友猫検索画面(ListView)
[画像のクリックで拡大表示]

 ホーム画面のデザインもアプリのイメージを高めるために起こしましたが、今回のサンプルとしては「友猫検索画面」を実際にコーディングしていきます。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら