初めてのiPhone・Andoroidアプリデザイン制作時に、チェックした書籍やサイト(UIパーツやデザインギャラリー)を紹介。
iPhoneアプリのデザインをさせていただいたので、その時の注意点などもまじえつつ、参考にしたサイトや書籍を書いておきます。
アプリをデザインする前に読んでおきたい本
モバイルアプリのデザインということで、ディスプレイの小ささ、タッチの難しさなどから、一番にユーザビリティ、ユーザインターフェースを気にしなければ。というところから考えました。
そうなると、ネットの情報だけでは不安です。なので書籍選びからはじめました。
書籍は以下の2点を購入しました。
アプリのデザイン本となると、あまり発刊されていないようですが、以下2冊は非常に役立ったのでオススメです。
デザインをする前に読んでおきたい記事
アプリデザイン時の必要な基礎的な知識、ユーザーインターフェースに関する知識をつけておくことが大切です。
・WEBデザイナー向け☆iPhoneアプリのUIデザイン
・売れるiPad/iPhoneアプリのためのデザイン必須知識
フレームワークや、様々なパーツデザイン
アプリデザインでもフレームワークは、無いよりはあった方が良いに決まっています。
まずは手書きで大体のモックアップを。そしてテンプレートパーツ等をからめながら、フォトショップやイラストレータでフレームワークを作っていきましょう。
以下のリンク先サイトでは、フレームワーク、モックアップ、アイコンやパーツ等、デザイン素材が一通り揃っています。
アプリデザインのフレームワークを作る初期段階で重宝しそうなパーツ等がありますので、うまく使って作業時間を少しでも減らし、仕上げの細かいデザインに時間をまわしましょう。
・様々なモバイルユーザーインターフェイスが確認出来る「MobileTuxedo」
ベースとなるGUI(グラフィカルユーザインタフェース)のPSD
iPhone、Androidアプリをデザインする際には必須ではないでしょうか。
リンク先ではデザインのベースとなる、フォトショップ用テンプレートパーツがダウンロードできます。
・iPhone GUI PSD Version 4
iPhone用
・
Android GUI PSD (High-Density)
Andoroid用
タッチパネルの操作説明で使う手の動きをデザインで伝える
タッチパネルに慣れていない人にとって、iPhone、スマートフォンのタッチパネル操作は決して簡単ではありません。
そういった方に理解してもらうには、操作方法の説明が必須になります。
ハンドアイコン等の画像を使用して説明すると、直感的に、簡単に理解してもらえます。
拡大・縮小、移動方法等をデザインで伝えたいときには、こういったジェスチャーアイコンは大変助かります。
優れたアプリデザインをギャラリーサイトから見て学ぶ
ウェブのデザインと同じように、アプリのデザインでも様々なデザインを見ること、触れることにより新たなアイデア・発想がうかびます。
気になったアプリはダウンロードして使ってみることをおすすめします。
・参考にしたい!デザインに優れた33個のiPhoneアプリ
・TappGala: The Best in Mobile Interface Design
・TapFancy – An iPhone app design showcase and gallery
・Well-Placed Pixels
スマートフォンサイトからも学ぶ
アプリだけではなく、スマートフォン専用サイトはアプリデザインの参考になります。
UIをしっかりと考えられた使いやすいサイトや、デザインが非常に優れたサイト等。アプリのデザイン制作時に一度は目を通しておくことをおすすめします。
・21の優れたスマートフォンサイト
・優れたiPhoneサイトデザイン集 – iPhoneデザインボックス
ホーム画面などのアプリアイコン
iPhoneユーザの多くはデザインにも非常に高い関心を持っています。アプリアイコンのデザインが気に入らないからホーム画面から削除しよう。なんていうことをされないためにも、アイコンデザインには力を入れましょう。
下記リンク先よりダウンロードしたPSDファイルでは、アイコンが角丸でテカった状態のテンプレートになっていますが、実際にアプリ申請時に提出するアイコンは正方形にしてください。角丸で光らせるのはiOS側で自動的に行ってくれます。画像形式の推奨はPNGになっています。
・iPhoneやiPadのホーム画面向けアイコン作成用のPSDテンプレート・App Icon Template
iOSアプリ上でのフォントについて
iPhone OSに標準で入っているフォントを覚えておくと、画像を使わなくて済むことが多々あります。
何も指定しなければ、英字はHelvetica、日本語はヒラギノ角ゴ ProN W3がデフォルトで設定されています。
アプリ開発環境に、これらのフォントを用意しておくと、カンプを制作するとき完成イメージに近いものを制作できます。
iPhone4からのRetinaディスプレイの登場により、解像度がグッとよくなったために、320px×480pxでデザインするのではなく、640px×960pxのサイズでデザインすると画像でもキレイに見えます。
テキストに関しては、画像ではなくフォントをうまく利用するのをおすすめします。
モバイルアプリのデザインをしてみて
実際には、デザインが一通り完成した公開する前のサンプルアプリを触って、何度も修正するという作業が一番大切なように感じました。
やはり、iPhone、Android上で見て触ってみると思っていたものとは随分と感覚が違ってきます。
デザインがいくら素晴らしくても、使いにくいアプリはすぐに使わなくなってしまいますよね。
今回アプリデザインをしてみて、デザイン、UI、分かりやすさを兼ね備えた使われるアプリを作るのはとても大変だと改めて考えさせられました。
Oh…..really!!!! Thanks for sharing………