どうもです。iOSアプリを作るときはデザインもコードも自分でやっている@mo_to_44です。

Adobe Creative Cloud高いからなぁという方にオススメしているのがPixelmator。特にレイヤースタイル機能が追加されてからは特にオススメしています。

前回は「Pixelmatorのつかいかた「シェイプツール」編」で矩形の使い方をやってみました。

PixelmatorにはiPhone用のプリセット(320×480)が入っていますが、Retina用でなかったり、iPhone5からの4inch対応でなかったり。今回はiPhone4inch対応、Retina対応のプリセットを作りましょう。

そのうちデフォルトのプリセットに入るかもしれないですけどね。

iPhone用のプリセットを作成

まずはいつもどおりcommand+nを押して新規イメージを作成しましょう。
新規イメージを作成

プリセット一覧の中に”iPhoneのデスクトップ”というものが入っていますが、残念ながらこれはiPhone5の縦長の画面に対応していませんし、Retina対応でもありません。Retina画像は非Retinaの2倍の数値になるので、Retina対応させるにはプリセットに入っているサイズの2倍のサイズのものを用意しなければなりません。
iPhoneのデスクトップ

  • 非Retina 320×480
  • iPhone4〜 640×960
  • iPhone5〜 640×1136

※iOS7でiPhone3GSがサポート外になって非Retinaいらないじゃんって感じかもしれませんが非RetinaのiPad miniがあるので…

左下の歯車アイコンをクリックして”プリセットを管理”を選択します。
プリセットを管理

+ボタンで新規プリセットを作成できます。名前は「iPhone 4inch Retina」とか好きなようにつけてください。
プリセット新規追加

横幅を設定します。320pxの倍なので640pxです。
横幅設定

4inchのiPhoneの縦幅は1136pxです。
縦幅設定

あとは右下のOKを押せば完成です。
プリセット作成完了
iPhoneの画面を作る際はこれを選択すればいいわけですね。

ステータスバー、ナビゲーションバー、タブバーを調べる

iPhoneの画面を作る際、意識しなければならないのはステータスバー、ナビゲーションバー、タブバーの高さ。メインのコンテンツ以外で画面を占めるこれらのパーツを考慮に入れないで画面構成を考えることはできません。

この過程に関してはアップルがデフォルトで入れているSafariや連絡帳アプリなどを参考にしてペーパープロトタイピングで洗いだしておくといいと思います。このスライドが参考になりました。

さて、Xcodeを使って各バーの高さを調べました。
Xcodeログ
“tab:〜”がタブバー。”nav:〜”がナビゲーションバー。”status:〜”がステータスバーとなっています。
横幅は全て320ポイントです。

ポイントとピクセルは違います。ポイント=非Retinaのピクセル数、ポイントを倍にしたものがRetinaのピクセル数という感じです。詳しくはアップルのiOSヒューマンインターフェースガイドラインを参照してください。

各バーの高さはそれぞれ異なります。これに基づいて画面構成を作ってみました。シェイプツールで各バーの大きさの矩形を作成します。RetinaなのでXcodeで表示された数値の倍の大きさにします。

シェイプツールの使い方はこちらを見てください。
各バー込みの画面

ほんとうに正しいのか見てみましょう。先ほどつくったものの下にiPhoneの写真アプリのキャプチャ画像を重ねてみます。
写真アプリと比較
ちょっと分かりづらいですが各パーツとサイズはピッタリですね。

まとめ

今回はiPhoneの画面サイズをプリセットに登録しましたが、何度も使いそうなものはこうやってプリセットを作っておくとすごく楽ですよ。

Pixelmator関連はこちらから

Pixelmatorのつかいかた「シェイプツール」編
Pixelmatorがレイヤースタイル機能を追加! かなりイイ!