iOSのモダールを閉じるボタンは右上

iOSのモーダル画面を閉じるボタンの場所は右上か左上かはあまり意識されずにデザインされたり、
配置場所が分からないという人も多いと思う。

モーダルの閉じる画面は例外を除いて右上に配置すべきだろう。

この記事では、その理由と例外について解説する。

I.　理由１ 「戻る」が常に左にある

UINavigationControllerの「戻る」ボタンが、左上にある場合が多いという理由。そのため右上しか場所がない。

ModalとPush

iOSでの画面遷移はAppleによって用意された２種類に明確に分類される。
画面のより深い階層へ移動するものがPushであり、一時情報を表示するものがModalである。

Modalはその時に居るPushで深い階層へ移動するメインストリームから離れた情報を表示する等への利用が推奨される。

またModal内でもPushによる画面遷移を実装ケースは一般的である。

Pushは左上に「戻る」が付く

Pushによる画面遷移には、自動的に左上に「戻る」ボタンが配置される。これはAppleによって定義されたものでほぼ100%このルールに従う。

「閉じる」の場所は右上だけ

左上が「戻る」ボタンで占有されるので必然的にModalを閉じるボタンは右上となる。

II. 理由２　「戻る」がない場合も右上の一貫性

右上という一貫性

Modal画面内でPush遷移を行わない場合は、左上の場所が空いている状態になる。この場合でも一貫性を持たせるという理由からModalを「閉じる」ボタンは右上に配置するのが良いだろう。

「戻る」と「閉じる」は異なる動作なので、それらを一貫した場所へ

「戻る」と「閉じる」は似て非なるものである。「戻る」は一つ上の階層に戻るため、もう一回項目を選択することで「戻る前」へ再度復帰できる。

対照的に「閉じる」は１回以上のPushを含んだ一連のモーダルを全て閉じてしまう。状況によっては一連の作業内容がすべて失われ、「閉じる前」への復帰は困難な場合が多い。

ユーザーが反射的に「戻る」を押したと思って、モーダルが閉じられ情報が失われるようなことは避けるべきである。このような理由からも、「閉じる」は一貫して右上へ配置すべきだろう。

III. Modalを閉じるボタンが２つある場合

Modalを閉じるボタンが２つあるケースがある。
完了を示すボタン（Done, Save etc.)とキャンセルを示すボタン(Cancel, Close、× etc.)などの
ボタンが両方ある場合がこのケースである。

多くの場合右上のボタンは完了を示すものであるので、右上に完了系のボタン、左上にキャンセル系のボタンを配置するのが良いだろう。

VI. 参考文献

WITH IOS BUTTONS, KNOW YOUR RIGHT FROM YOUR LEFT
Back Button Placement