ブロックワークス

2010.02.05

アイコン・UI:iPhone/iPodtouchアプリ EDGEtouch

TAKABOSOFTさんが制作するiPhone/iPodtouch向けアプリ「EDGEtouch」のアイコンデザイン及び、ユーザーインターフェース案の制作作業を行いました。作者様より、現状バージョンのEDGEtouchの操作感の向上と見た目をもっとおしゃれにしてほしいとの依頼を受け、制作を開始しました。

インターフェース

旧バージョンはツールやレイヤーを選択する度にダイアログが表示され、作業の非効率につながると感じたため、できるだけダイアログは出さないUIを考えることを自分の中の方針としてインターフェースを考えました。幸い、旧バージョンで実装されていたカラー選択UIがシンプルで効率的でしたので、その考え形を流用したインターフェースを考えました。

インタフェースの提案には、以前書いた記事「fireworksCS3とCS4で使えるiPhoneUI画像|ホームページ制作,静岡|ブロックワークス」にあるfireworksの素材を元に、出来るだけ実際のイメージに近いものを作り、その後の大幅変更がないように配慮しながら提案いたしました。

IMG_0166

アイコンデザイン

アイコンは、様々なサイズに対応できるよう、illstratorで制作しました。
iPhoneの画面サイズで押しづらいを感じさせないギリギリのサイズを決めるために、作成したアイコンをiPhone上で実際に表示し、イメージを確認しながら作業をすすめました。

iPhoneは、32bit透過PNGを使用できるので、綺麗に透過することができました。アイコンはカラーorモノクロで迷いましたが、アイコンがそこまで主張する必要はないと考え、モノクロにしました。

edgetouch_icon01

edgetouch_icon02

その他

イメージの用のサンプルも書きました。
edge_anime

お互い制作作業のツボを心得ているので、簡単な言葉でイメージが伝わったのもスムーズに制作できた要因の一つだと思います。

リンク

イラストのご依頼は、お気軽にお問い合わせください。

(「イラスト実績」でご紹介しているタッチ(絵柄)のみお受けしております。お問い合わせ前にご確認ください。)