iPhoneを触ったことがないのにiPhoneアプリのUIデザインをしないといけなくなったときのまとめ

はじめに

iPhoneを触ったことがないのにiPhoneアプリのUIデザインをしないといけなくなったため
iPhoneアプリのデザインに関する導入編です。

そもそもiPhoneってなんですか？

iPhone（アイフォーン）は、アップル社製スマートフォンです。
操作はタッチパネル（直接触って操作する画面）を指で触って行います。

そもそもiPhoneってどう操作するの？

操作の名称

■タップ
指で軽く叩く操作。マウスのクリックに相当

■ダブルタップ
2回叩く操作。ダブルクリックに相当

■ドラッグ
写真を移動する時に指をずらす操作

■フリック
リストをスクロールする時に指で軽くはらう操作

■ピンチ
2本指でのつまむ操作の総称

■ピンチアウト/ピンチオープン
2本指の間を広げて拡大する時の操作

■ピンチイン/ピンチクローズ
2本指の間を縮めて縮小する時の操作

【永久保存版】iPhone 基本操作・小技・裏技、総まとめ。 | ゼロ・デザイニング [0-designing]

そもそもデザインどうやるの？

iPhoneアプリは、App Storeに展開する際にApple側で審査があります。

その中にUIのデザインの項目が設けられていて、守らなければいけないユーザーインタフェースのガイドラインがあります。
「iPhoneヒューマンインターフェースガイドライン」と呼ばれています。
このガイドラインに沿ってiPhoneアプリを作成しないとリジェクトされる（差戻し）ケースがあります。
そのためデザイン以前にガイドラインを読むことをお勧めします。

●ガイドライン長いよ！！って言う場合
琴線探査: 「iPhoneヒューマンインターフェースガイドライン」まとめ

●リジェクトされる例
売れるiPad/iPhoneアプリのためのデザイン必須知識（4/5）- ＠IT
最低予算1万ポイントで。iPhoneアプリの審査でリジェクトを食ら.. - 人力検索はてな

デザインどうやるの？

iPhoneのUIに似せて作成されているケースが多く見受けられます。
慣れない端末でボタンの配置が換わったら、探すのが面倒でしょ？ってことかと私的には考えています。

よくある例）
・ホームページ
カテゴリはアイコンで区分

・メニューリスト
基本的に縦に並ぶ。幅は人差し指で押せる幅。
左側にアイコン。右側へ次のページが展開することを知らせる　＞マーク

・ボタン
メニューリストより一回り大きいぐらい。

・ページ上部
　前のページに戻るボタンは表示領域の左上にある。
　次のページに進むボタンは表示領域の右上にある。
右側にページの進むボタンが置いてあるのはユーザーは右利きが多いためだと思う。
　閉じるボタンや、Logoutボタンが置いてある

・ページ下部
　サブページから他のページに移動するためのメニューは画面の一番したに
アイコンで表示

解像度は？

■参考URL

デザイン参考先あるの？

始めは色々見てみましょう。

iPhoneアプリのUIデザイン

iPhoneアプリのUIデザインのリンク集

押さえておきたい、iPhoneアプリのデザイントレンド：ekakou フリーフォント/Photoshop

iPhone App Design Trends からのまとめです。

素材あるの？

Photoshop Vip ≫ iPhone 3G, 4, iPadアプリ制作にばっちりなＵＩデザインキット12個まとめ

UIデザインキットの紹介をしています。

終わりに

iPhoneアプリのデザインは立体感とリアルさが大事なようです。
突然仕事を振られても平気なようにしておきたいです。