この連載も、今回で最終回となりました。デザイン的にかなり細かい話をしてきたので退屈だったかもしれませんが、デザイナーとしてこだわりたいところとそれに対するXMLコーディングについてはしっかりとお伝えしてきたつもりです。

 最後に、ボタンやリストをタップしたときの変化を解説して、テクニカルなことは終了です。その後、全体を通してのまとめに入ります。

タップしたときのデザインの考察

 それではさっそく見ていきましょう。

 この画面においてタップできる箇所は、2種類(5カ所)です(検索ボックスも入れると正確には3種類(6カ所)ですが、今回の説明では省きます)。

 それぞれにおいて、タップしたときにどういったデザインの変化を起こすかを決めておきます。

図1●タップ可能箇所とそのデザイン
  • アクションボタン:背景の茶色が濃くなるように(ただし、背景のテクスチャは見えるように残しておきたい)
  • リストビューの背景:茶色っぽいグラデーション

 今回のデザインは、ふんわりやわらかいのが特徴ですので、はっきりとした派手な色での変化ではなく、同系色の茶色系にまとめています。

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

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