iPhone Xジェスチャーガイド（たぶん）完全版

記事公開時のOS：iOS 11.2

iPhone Xの画面を正確に縁取る新カテゴリー、Xスタイルの壁紙を公開しています。表示の正確さに物を言わせてテンプレート風の壁紙も揃えました。

ダウンロードページ ▶︎ Xモニターの壁紙　12セット

ホーム画面用とロック画面用をセットにして並べています。それぞれの画面でのジェスチャーガイドも描きました。空間に余裕もなく文字はかなり小さめです。それでも描くからには本腰入れて研究しました。ジェスチャーの有効エリアまで特定して壁紙に反映しています。

解説の前にまずは壁紙設定の注意点を。

設定上の注意点

壁紙を動かさずに「静止画」のまま設定してください。
Xでは静止画が初期状態です。「視差効果」はタップしないでください。もしもタップしてしまうと位置がずれてしまい、その後「静止画」に戻してもずれたままです。その場合は一度キャンセルして最初からやり直してください。

「視差効果を減らす」はオフ（初期設定）にして設定してください。オンにしていると壁紙が変形表示されます。壁紙設定後は「視差効果を減らす」をオンにできます。

なおホーム画面のアイコンは「視差効果を減らす」をオフ（初期設定）にしている限り、静止画で設定しても若干動きます（アプリやフォルダを開いて閉じると戻ります。傾きを止めると、ゆっくりと少し戻ります）。
ただ幸い？アイコンが止まるバグも頻発するみたいで（再起動やシャットダウンで治ります）、それが出たらこの壁紙的にはラッキーです。

ジェスチャーガイドホーム画面編

中央スペースは従来のiPhoneと同じです。左右スワイプでページ移動、「0ページめ」がウィジェット、下にスワイプでiPhone内を検索するスポットライトとなっています。画面のどこでもかまいませんが、上下のエリアは除きます。

画面上部は通知センターとコントロールセンターの呼び出し。

左側とノッチ全体が通知センターに割り当てられています。画面の端から下にスワイプします。

ノッチの右側はコントロールセンターの呼び出しです。こちらは端じゃなくても、アイコンのあるエリアから引っ張り出せるようになっています。

余談ですが『｢iPhone X｣でノッチ横のディスプレイの片方だけが真っ黒になる事例が報告される | 気になる、記になる…』の不具合と空間が一致。偶然ではない気がします。

コントロールセンターを出した状態で通知センターを呼び出すことはできません（逆は可）。引っ込めるにはどこでもいいので上にスワイプします。

画面下には機能が集中しています。ドックのアイコンより下ならどこでも同じように反応します。

まず画面下を右にスワイプすると、アプリスイッチャーなども経由せずにホーム画面から直接バックグラウンドで動作中のアプリに行けます（直近で使用したもの。更にスワイプすると遡ります）。

アプリ間の移動では、何か操作する前なら左にスワイプして右に戻ることもできます。操作するとそのアプリが一番右になります（順序変更は見えないので少しわかりにくいです）。
ホームに戻るには下部エリアを上にスワイプします（右に戻ってホームは不可）。

斜め上（右でも左でも画面下のどこからでも）にスワイプするとアプリスイッチャー（マルチタスク）になります。個人差はあるかもしれませんが、左から出てくるので斜め右上がスムーズな感じです。

アプリスイッチャーはどれかをタップか下にスワイプでアプリに移動しますが、下スワイプはコントロールが難しいです。
画面のどこでも、上にスワイプするか空きスペースをタップするとホームに戻ります。

下部エリアを下にスワイプすると簡易アクセスで画面上半分が降りてきます。下部エリアを上にスワイプか、画面上半分をタップで戻ります。
12/11追記：どこでも上にスワイプすると戻るようになってました。

Xの簡易アクセスはドックも下がっていくのが特徴です。

ホーム画面上下エリアのジェスチャーは「下から上にスワイプでアプリからホームに戻る」を除いて、アプリ内のジェスチャーと共通です。

ジェスチャーガイドロック画面編

コントロールセンターの呼び出しはホーム画面と同じです。ただしロック画面では下にバーか入ります（iOS 11.2）。

ちなみにホーム画面で通知センターを呼び出すと壁紙もロック画面になりますが、機能もロック画面です。ロック画面からロック画面である通知センターを呼び出すことはできません。ただ通知センターでは時々（条件がある？）背景が暗くなります。

画面の中央エリアをどこでも上にスワイプすると消去していないすべての過去の通知が出てきます。通知センターとしてホーム画面やアプリから呼び出した時は過去通知が最初から表示されます。

中央エリアを右にスワイプでウィジェット、左にスワイプでカメラです。

懐中電灯アイコンとカメラアイコンは押して離すと起動します。

最後になりましたが下部エリアを上にスワイプするとロック解除です。

こうして見ると本当に端から呼び出さないといけないのは通知センターだけですね。ケースを付けた場合が考慮されているのかもしれません。
とすると通知センターもノッチのおかげで余裕があるってことになります。

「Xモニターの壁紙」こだわりポイント

iPhone Xはその特殊な仕様のために正確な位置に表示させるのが難しくなっています。普通に考えれば、きっちり作らせないために幾重にも罠を張っているようにしか見えません。隅から隅まで1ピクセルのズレもなく表示させるのは至難の業でしょう。
設計図風の壁紙は従来から存在しますが、X用に従来どおりの精度で作れるのは私だけかもしれないと思い、作ることにした次第。

ホーム画面用ではアイコンのアプローチR（滑らかに見える複合カーブ）やアイコングリッドシステム（アイコンのデザインガイドライン）もトレースしています。ドックの後ろはアイコンが1〜4個の時の並び位置を重ねました。

ボタン類の位置の指標も入れています。

ロック画面の時計と日付曜日は右に行ったり右に消えたり右端から戻ってきたり（ウィジェットの状態次第）するので右側を開けました。日付曜日の所が長いのは言語によってはここが長くなるからです（WednesdayとかNovemberとか）。
新しい通知がある時の表示エリアには点線を書き込んでいます。通知はアプローチRではなく普通の角丸です。

ロック画面からカメラに行く時は壁紙の右側、コーナーの丸みで隠されている隅っこも見えます。ロック画面用で黒背景の場合は、画面からはみ出す線の右側だけをカメラアプリの背景と溶け込むように黒く潰しています。

（実は外側の線は、画面にはみ出さないという精度を誇示するためにわざわざ書き足しています）

モニターの壁紙の内側は「0.5ピクセルの混色」を逆手にとって1ピクセルの線で構成しました。背景に沈んで画面の邪魔をしません。
ロック画面はフレームだけのタイプ同様暗くされることはありませんが、ホーム画面用は色次第。暗くなる場合は上の方がより暗いグラデーションになるのが問題です。端末との一体感が損なわれます。そこで暗くなる色は下地を最大明度にしておいて、下に行くほど暗くなるカウンターグラデーションをかけました。対になるロック画面用もあらかじめ暗くしています。

気になったのは、ホーム画面のアプリアイコンの縦の間隔です。一番下だけ画面解像度のスケールで1ピクセル広くなっていました（iOS 11〜11.2で確認）。アプリ開発などのUIスケールではその3分の1になるはずなので限りなくゼロに近い違いではあるのでしょうけど。