デザイナーのためのiPhoneアプリUI/UX設計
補足説明と注意事項

ドキュメントの内容
本ドキュメントには、以下の補足説明が含まれています。作成したアプリケーションをApp Storeに申請する際に参照してください。

Retinaディスプレー用画像について
・アプリケーションの4インチRetinaディスプレー対応について
・「あたみ割り勘」
アプリケーションの4インチRetinaディスプレー対応について
・「北欧Slow」
アプリケーションの4インチRetinaディスプレー対応について
・「北欧Slow」
アプリケーションのRetinaディスプレー用画像のファイル名について・iOSシミュレータで4インチRetinaディスプレー用画像を確認する方法

そのほかの補足説明と注意事項
・iOSシミュレータでアプリケーションのスクリーンショットを保存する方法
・「北欧Slow」
アプリケーションのIcon画像について
・「北欧Slow」
アプリケーションのカスタマイズ
・iOSシミュレータやIllustratorで設定が反映されない場合

Retinaディスプレー用画像について作成したアプリケーションをApp Storeに申請するときには、3.5インチと4インチのRetinaディスプレー用画像を用意しなければなりません。
インターフェースビルダーを使ってアプリケーションに画像を指定すれば、3.5インチ標準ディスプレー用と3.5インチRetinaディスプレー用の画像はデバイスに合わせて自動的に選択されます。しかし、iPhone 5などの4インチRetinaディスプレー用画像を自動で選択させるには、プログラミングで対応しなければなりません。サンプルプログラムは、4インチRetinaディスプレーでの表示に対応させているので、その設定と同じサイズ、同じファイル名で4インチRetinaディスプレー用の背景画像を作成します。完成した画像を適切な場所に配置すれば、4インチRetinaディスプレーで表示したときに自動で選択されます。

アプリケーションの4インチRetinaディスプレー対応について
2012年秋に4インチのRetinaディスプレーを搭載したiPhone 5が発売されましたが、現在は3.5インチディスプレーのiPhone 3GSやiPhone 4、iPhone 4Sユーザーのほうが多いと思われます。そのため、アプリケーションのデザインは3.5インチで固め、画面の一部が可変となるようにして4インチRetinaディスプレー画面（640×1136ポイント）に対応させるのが一般的となっています。
※画面の一部が可変となるようなデザインの例は「iOS ヒューマンインターフェイスガイドライン」に掲載されています。
https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

1

デザイナーのためのiPhoneアプリUI/UX設計 補足説明と注意事項「あたみ割り勘」アプリケーションの4インチRetinaディスプレー対応について
このアプリケーションはドラッグして操作するスライダーが下部にあるので、画面を上部で固定して下を伸ばせば、より操作しやすくなります。
以下の3種類の画像を4インチRetinaディスプレーにマッチしたサイズでつくり、iPhone 5などの表示に使います。背景画像は3.5インチRetinaディスプレーでも使うので、専用の画像を別途用意する必要はありません。
・「AMOUNT（請求額）」画面の背景画像
・「MEMBER（メンバー）」と「PAYMENT（支払い）」画面共通の背景画像
・スプラッシュスクリーン用画像【手順】
・完成した3.5インチ標準ディスプレー用UIファイルを複製します。UIパーツを200%拡大して3.5インチRetinaディスプレー用にして、背景画像を除き画像を書き出します（本書P142参照）。
・さらにファイルを複製します。背景用UIパーツ以外を非表示にしてアートボードの下を176ポイント伸ばし、背景画像の下部を176ポイント伸ばして高さを1136ポイントにします（図1、2）。
・「AMOUNT（請求額）」画面のみ、下の空きスペースにボタンと同じ外観のテクスチャーを配置します（図1）。
・スプラッシュスクリーン用画像も200%拡大して3.5インチRetinaディスプレー用のアートワークをつくり、さらに高さを176ポイント伸ばします。ここでは上下に伸ばして泡のオブジェクトの位置や大きさを調整しています（図3）。
・UIパーツが完成したら、以下のようにファイル名を付けて書き出します。
「AMOUNT（請求額）」画面：background_amount@2x.png「MEMBER（メンバー）」と「PAYMENT（支払い）」画面：background@2x.png
スプラッシュスクリーン用画像：Default-568h@2x.png
・書き出した背景画像はXcodeのナビゲーションペインの「images」
グループに、スプラッシュスクリーン用画像は「Supporting Files」グループに配置します（本書P167参照）。

background_amount@2x.png
図1「AMOUNT（請求額）」の背景画像

640ポイント

1136ポイント960ポイント

640ポイント

176ポイント176ポイント

960ポイント

640ポイントbackground@2x.png
図2

Default-568h@2x.png
図3「MEMBER（ メン バ ー）」と「PAYMENT（支払い）」画面の背景画像

2

スプラッシュスクリーン用画像

デザイナーのためのiPhoneアプリUI/UX設計 補足説明と注意事項「北欧Slow」アプリケーションの4インチRetinaディスプレー対応について
このアプリケーションはパズル部分が画面の中央付近にあるため、画面を下部で固定してロゴから上を伸ばすことで4インチRetinaディスプレーに対応させます。必要な画像は次の7種類です。
・各画面用の背景画像6種類
・スプラッシュスクリーン用画像【手順】
・Retinaディスプレー用のUIパーツまで作る場合は、UIをデザインするときにサンプルファイルの「SlidePuzzle_temp.ai」に設定してある分離型のスライスを使わない方が効率よく作業できます。スライスツールでスライスを削除して、ガイドに沿ってUIをデザインしてから一体型のスライスを設定しましょう（本書P130参照）。
・完成した3.5インチ標準ディスプレー用UIファイルを複製して、アートボードの大きさをを２倍にします
（図4）。

図4
完成したUIファイルのアートボードを2倍にする

3デザイナーのためのiPhoneアプリUI/UX設計 補足説明と注意事項

・UIパーツを200%拡大して、図5に示す背景画像を除いたUIパーツを、3.5インチRetinaディスプレー用に書き出します。背景画像は4インチRetinaディスプレー用のものを使うので、ここでは書き出しません。ファイル名は、スプラッシュスクリーン用と地図のピンの画像を除き、「@2x」
ではなく「-hd」
を追記します（詳しくは次ページを参照）。
・さらにファイルを複製して、4インチRetinaディスプレー用の画像をつくります。
・スプラッシュスクリーン用画像と6種類の背景画像以外を削除して、高さを176ポイント伸ばしたときにアートボードの外にはみ出さないようにUIパーツの位置を調整します。
・スプラッシュスクリーン用画像の高さを176ポイント伸ばします。ここでは下に伸ばしてロゴやピクトのレイアウトを調整しています（図5）。
・背景画像は、上部を176ポイント伸ばします（図5）。
・UIパーツが完成したら、図5のようにファイル名を付けて書き出します。
・書き出した7種類の画像は、サンプルプログラムの「chapter03→XCODE→SlidePuzzle→SlidePuzzle→Resources」内に配置します。

背景画像（3.5インチと4インチのRetinaディスプレーで同じものを使う）
640ポイント

640ポイント

640ポイント

Default-568h@2x.png

bg_puzzle-hd.png

bg_roulette-hd.png

roulette_glass-hd.png

bg_info-hd.png

bg_about-hd.png

bg_access-hd.png

872ポイント

176ポイント

872ポイント

1136ポイント

640ポイント

176ポイント

4インチRetinaディスプレー用のスプラッシュスクリーン用画像

図5
背景用アートワークを4インチRetinaディスプレーにマッチしたサイズにする4デザイナーのためのiPhoneアプリUI/UX設計 補足説明と注意事項「北欧Slow」アプリケーションのRetinaディスプレー用画像のファイル名について「北欧Slow」アプリケーションは、ゲームフレームワーク「Cocos2dforiPhone」を使用して開発しています。そのため、 Retinaディスプレー用画像のファイル名にはiOS標準部品（スプラッシュスクリーン用画像と地図のピン）を「-hd 」を追記します。例えば「bg_puzzle.png」であれば「bg_puzzle-hd.png」とします。
除き、「@2x」ではなくiOSシミュレータで4インチRetinaディスプレー用画像を確認する方法
4インチRatinaディスプレーでの表示を確認する手順は以下のとおりです。

【手順】
・Xcodeを起動してプロジェクトファイル（AtamiWarikan.xcodeproj）
を開きます。
「iPhone6.1 Simulator」
を選択し、「Run」
をクリックして一度iOSシミュレータを起動します（図6）。
・iOSシミュレータのメニューからの「ハードウェア＞デバイス＞iPhone（Retina 4-inch）」を選択します（図7）。
・Xcodeに移り「Run」
をもう一度クリックしてiOSシミュレータを起動すれば、4インチRetinaディスプレーでの表示になります（図8）。4インチRetinaディスプレー用画像に切り替わらないときは、iOSシミュレータのホーム画面でアプ
リケーションアイコンを長押しし、該当アプリケーションの「×」マークをクリックして削除してからやり直します
（図9）
。

図6
プロジェクトファイルを開く

図7
デバイスを切り替える
図84インチRetinaディスプレーでの表示になる

図9
アプリケーションを削除する
5

デザイナーのためのiPhoneアプリUI/UX設計 補足説明と注意事項

そのほかの補足説明と注意事項
iOSシミュレータでアプリケーションのスクリーンショットを保存する方法
iOSシミュレータでアプリケーションを実行しているときに、「ファイル＞スクリーンショットを保存」を選ぶと、そのときに表示されている画面が画像として保存されます（図10）。

図10
スクリーンショットを保存する「北欧Slow」アプリケーションのIcon画像について
Spotlightや設定画面で使われるアプリIconは必須ではありませんが、「北欧Slow」プログラムには組み込んであります。
（図11）のアイコンを記載したサイズでつくり、既存のアイコンを上書きしてください。
72×72ピクセル

50×50ピクセル

29×29ピクセル

58×58ピクセル

図11
Spotlightや設定画面で使われるアプリIcon「北欧Slow」アプリケーションのカスタマイズ【パズルの難易度を変更する】
プログラムでは、パズルの開始時にパズルのピースが10回移動するように設定しています。戻る動きもあるので、フォルダー内の「SPBoard.m」
３回ぐらいの移動でパズルは完成します。難易度を変えるときは、「SlidePuzzle」
ファイルを開き、 38行目の「#deﬁne SHUFFLE 10」の数値を書き換えます。

【タイマーの数字の色を変更する】
ゲームの経過時間を示すタイマーの文字色は、UIに合った色にするべきです。変更するときは、「SlidePuzzle」
ファイルを開き、下記の個所をのRGB値を書き換えます（図12）。
フォルダー内の「TimerPlateSprite.m」// 時刻表示の色を設定してください。3 つの数字はそれぞれ R、G、B を表しています。
time.color = ccc3(255, 255, 255);

Objective-C
図12
タイマーの文字色を変更

iOSシミュレータやIllustratorで設定が反映されない場合
iOSシミュレータで変更が反映されないときはiOSシミュレータ内の該当アプリケーションを削除します（5ページ参照）。Illustratorの場合、環境設定が初期化されてしまいますが、環境設定ファイルを削除して起動し直すと設定が反映されることがあります。環境設定ファイルは、「Macintosh HD/ユーザ/＜ユーザー名＞/ライブ
ラリ/Preferences/Adobe Illustrator CS6 Settings」にあります。Mac OS X 10.7以降でライブラリフォルダーを表示するには、Finderでoptionキーを押しながら「移動＞ライブラリ」を選択します。

6