初めてのiOSアプリを作るまで【デザイン編】

今回は、前回の【きっかけ・企画編】の続き【デザイン編】です。
アイデアをまとめずフワフワした状態でデザインをすると余計に時間がかかるので、まずはしっかりアイデアを練ってからデザインを始めることをオススメします。

テンプレートをダウンロードしよう

iOS 5 GUI PSD (iPhone 4S) | Downloads | Teehan+Lax

文句なしにコチラを使うのがいいでしょう。各パーツが揃ってます。

ヒューマンインターフェイスガイドラインに沿ってデザインする

いざ、PhotoshopやFireworksなどでデザインを起こす前にヒューマンインターフェイスガイドラインを読んでおきましょう。
iOS ヒューマンインターフェイスガイドライン(PDFが開きます)

多くて読んでられない!って人は、最低でもこの辺は読んでおきましょう。

背景画像のサイズに注意!

アプリでステータスバー・ナビゲーションバー・ツールバー・タブバーは表示させますか?

例えばステータスバー・ナビゲーションバーは表示しますって場合。
ポートレート表示(縦)なら、480px(iPhoneのディスプレイ高さ)-20px(ステータスバーの高さ)-44px(ナビゲーションバーの高さ)=416pxが背景画像となります。
書き出しの時にステータスバー・ナビゲーションバーを非表示にして書き出し!じゃいけないので注意が必要です。

※Retinaディスプレイ用の画像は×2で計算してください。

私はコーディングしながら気づいて、何度か書き出しをすることになったので、ぜひ覚えておいてください。

各バーのサイズがわからない場合はコチラを見るといいでしょう。
iPhone画面名称 – iPhoneアプリ開発の虎の巻

この動画を見ても自分のデザインは完成したと言える?


Convert Design Evolution from tap tap tap on Vimeo.

Camera+で有名なtap tap tapのConvertというアプリのデザイン過程。
いきなりこんな高いデザインのレベルで話しされても・・・って思うかもしれませんが、デザインだけではなく、最初は単位選択・結果・電卓とバラバラとあったのが、途中で単位選択と結果がくっついて一つになるとかUIの大きな変更もあります。

いきなりこんな高いデザインのレベルで話しされても・・・って思うかもしれませんが、パッと見のパーツ単位のデザインだけではなく、最初は単位選択・結果・電卓とバラバラとあったのが、途中で単位選択と結果がくっついて一つになるUIの大きな変更があります。

ユーザーにアプリを使ってもらうには、アプリを起動してすぐに解決できるシンプルかつ賢いUIである必要があると思います。
初めて作るのにいきなり最善のデザインができるはずありません。アプリを開発しながらでも納得のいくデザインに作りなおしていきましょう。

次回は【開発編】をお送りします。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ