【iOSのUIデザイン】iOS13のデザインガイドライン〜洗練されたデザインのアプリを作ろう〜

iPhoneの画面サイズについて

iPhoneXが出る前（3年前）までは、画面サイズのレイアウトを揃えるのは、それほど難しくはありませんでした。

しかし、ここ3年間で発売されたiPhoneXにより、画面のサイズのレイアウトを揃えるのがかなり難しくなりました。

iPhone SEに合わせたらiPhone Xでレイアウトが崩れていたり。iPhone SEとiPhone Xがやっと揃ったと思ったら、今度は、iPhone 6sが崩れていたりと。。

iPhoneの画面サイズ早見表

iPhoneの画面サイズ図

iPhoneのデザインは、どのサイズを中心に設計するべきか

どのサイズを中心に、設計・開発を行えばいいのでしょうか。

それは、アプリを利用する客層で考えて決めましょう。

• 老若男女たくさんの人に使ってもらいたいのであれば、現在一番シェアが多い、375×667(iPhone6、6S、7、8)で設計・開発を行いましょう。
• 技術や、デザインに特化しているアプリであれば、新しいiPhoneのサイズの375×812(iPhoneX、XS、11Pro)で設計、開発を行いましょう。
• 開発ベースで考えるなら、小さいサイズで開発をした方が良いでしょう。なぜなら、小さいサイズでハマるのなら大きいサイズでもハマります。しかし、その逆はハマりません。そのため、最初は小さいサイズで開発を進め、最終的に、大きいサイズにレイアウトを合わせていきましょう。

端末のシェア率を確認する。

• If you’re recording analytics on your current app or website, check those* for your audience’s most common screen sizes
• If you’re designing an app for a general audience, use the overall most popular iPhone screen size:375×667 pt
• If you’re designing an app for a tech- or design-savvy audience, the most popular iPhone screen size is likely the newer375×812 pt

引用元：Learn UI Design-“iOS 13 Design Guidelines, Templates, and Downloads “

iPhoneのページレイアウトについて

ここでは、最も新しいiPhoneのレイアウト(iPhone X以降)で解説していきます。

iPhone(X以降)は、大きく分けて5つの領域があります。

上から、

1. ステータスバー
2. ナビゲーションバー
3. タブバー
4. ホームインジケーター

ステータスバー

ステータスバーは、基本的に上部に表示されます。(一部のフルスクリーン画像、動画を除く)厳密にいうと、上から高さ44ptです。

ステータスバーには、主に、時間、モバイルデータ通信レベル、wifi、バッテリーを表示します。

デザインパターンとしては、大きく分けて4つあります。

• 明るい背景に、黒の記号・文字で表示する
• 暗い背景に、白の記号・文字で表示する
• 背景を透明にして白または黒の記号・文字で表示する
• 背景をすりガラスのように、ぼかして白または黒の記号・文字を表示する

やってしまうよくありがちなミスとしては、背景が白ベースなのに、文字色を白にしてしまい、ステータスバーが見えなくなってうことです。

全ての画面で、ステータスバーを見やすい色のコントラストにしましょう。

ちなみに、古いiPhoneでは狭い幅のバーで表示しています。

ナビゲーションバー

ナビゲーションバーは、ステータスバーの下の領域です。主に、戻るボタン、ページタイトル、メニューボタン(主要なアクションボタン)、検索窓を表示します。

IOSナビゲーションバーは、最大３つの行で構成されます。

• 1行目：高さ44pt
• 2列目：高さ54pt
• 3列目：高さ48pt

これらは基準の数値であって、すべてのアプリがこの数値とは限りません。

ナビゲーションバーの3つの構成

ナビゲーションバーの1行目では、キャンセル、戻るボタン、または＋の追加ボタンなどがあります。これらは、あらかじめ、オブジェクトが用意されていますが、自分独自で設定もできます。

ナビゲーションバーの2番目と3行目は、検索バーや、ページタイトル、メニューなどが表示されます。

ナビゲーションバーは、スクロール前とスクロール後で表示を切り替える場合があります。例えば、スクロールすると、ナビゲーションバーの2番目にあったのページタイトルが、一番目に移動します。これは、そのページにタイトルの情報がそれほど重要ではないときに使います。

タブバー

タブバーは、下に表示されるメニューバーです。主に、画面を切り替えるために使います。

基本的に2〜5以下のタブで、アイコンとテキストラベル(10~11pt)で構成されます。

また、選択しているタブはアプリのテーマカラーになり、今どのタブにいるかをわかるようにしています。

タブの動作の2つの基本

• あるタブで、別のタブに移動してから、さっきのタブに戻ると、そのタブは、メイン画面ではなく、別のタブに遷移する直前の画面になっています。つまり、タブ移動すつ時に、処理を中断した形になります。
• 現在居るタブをタップすると、メイン画面に戻る。または、上部にスクロールします。

6個以上メニューがある時の対処法

タブバーに設定する項目の数は、基本的に5個です。

しかし、6個以上のメニューを配置したい場合があると思います。

その場合、以下の画像のように、一番右にその他のタブを設け、その他の欄にメニューの項目を並べましょう。

ホームインジケーター(ホームバー)

iPhoneX以降は、ホームボタンがありません。ホームボタンがない代わりに、ホームインジケーターというものがあります。画面の下にある、短いバーのことです。

このバーは、ホームボタンの代わりで、バーの下から短く上にスワイプすると、アプリの切り替え、上に長くスワイプすると、マルチタスク表示になります。

ダークモードの場合このように、表示されます。

画面遷移について

戻るボタン

戻る画面遷移の仕方は、主に4つの方法があります。

モーダルの画面遷移

ユーザーをメイン画面から完全に離さないで、他の画面で処理を完了するようにしたい場合、このモーダルの画面遷移を使用します。

このモーダルの画面遷移は、iOS13から実装されました。

あたかも、画面は紙でできているかのように、上から新たな紙を重ねます。

アニメーションで下から上へと表示します。上から下にスワイプすると、逆に画面を閉じることができます。

UIオブジェクトについて

リスト(テーブルビュー)

衝撃の事実です。

「モバイルデザインの90%はリストメインのデザイン」なのです。

iPhoneでリストを使用するとき、まず考えなければならないことが4つあります。

1. セルのメインには、どのようなテキストを表示するか。
2. アイコン、サムネ(画像)も表示するか。
3. セルの右側には、どのようなアクションをするか。
4. セルの小見出しを設定するのか。

では、１つ１つ丁寧に解説していきます。

セルのメインには、どのようなテキストを表示するか。

以下の３つのパターンがあります。

1. プライマリテキストのみ
2. プライマリテキストとセカンダリテキスト
3. プライマリテキスト、セカンダリテキスト、ターシャリーテキスト

アイコン、サムネ(画像)も表示するか。

セルの左側に、アイコン、サムネ（画像）を表示できます。

セルの右側には、どのようなアクションをするか。

セルの右側では、色々なアクションができます。

入力コントロール

次は、入力コントロールです。

テキストボックス(テキストフィールド)

テキストボックスをタップすると、キーボードが出てきて入力できます。

薄いグレーの文字は、入力する例です。このグレーのテキストがヒントとなり、ユーザーは何をこのテキストボックスに入力すればいいのかがはっきりとわかります。

日時ピッカー

セルをタップすると、ドラムロール型の選択項目が表示されます。

タップしたセルが広がり、そこにドラムロールが現れる場合と、キーボードの領域にピッカーが現れる場合があります。

スイッチ

オンオフのスイッチです。緑だとオンの状態、グレーだとオフを表します。

テキストのフォントについて

iOSのデフォルトのテキストは、使う場所によって、サイズ、太さ、色、ダークモード時の色が決まっています。

タイトルテキスト

スクロール前のタイトルテキスト

スクロール後のタイトルテキスト

デフォルトのテキスト

基本的なテキストです。

セカンドテキスト

セカンドテキストは、リストでちょっとした説明の時に使います。

サードテキスト

サードテキストは、セカンドテキストよりも細かい説明の時に使います。

最小テキスト

iPhoneアプリでは、最小のテキストサイズが決められています。

それは、10ptです。

タブバーのアイコンの項目名の所に使います。

目次に戻る

ダークモードについて

iOS13からダークモードが追加されました。ダークモードにすると、背景が暗くなり、テキストが明るくなります。また、暗いグレーは明るいグレーになります。

ダークモードで注意すべきこと

テーマカラーは、ダークモードで表示すると、ライトモードで表示した時よりも、目立ってしまいます。

そのため、ダークモードでは、少し明度、彩度を下げる必要があります。

参考資料

Learn UI Design-“iOS 13 Design Guidelines, Templates, and Downloads”

まとめ

iOS13のUIデザインの解説はこれで終わりです。

UIデザインは、本当に面白いですよね。この記事でもまだまだ網羅できていない要素がたくさんあります。

この分野は学んでも学びきれませんね。どれだけ情報を得ることができるか、どれだけその情報を使えるか。ですね。

今回は、デザインメインに記事を書きましたが、次は、開発メインで記事にしたいと思います。

間違えている所があったらツイッターのDMやコメントなどで、教えてください。

あなたにおすすめの記事

【衝撃】2020年のUIデザインのトレンド！？『Neumorphism』とは？時代が進むにつれ、シンプルになっていく。。 【ダメなUIについて】Androidの生年月日の入力フォームで使ってはいけないUIデザイン 【Swift5/Xcode】縦画面固定、ダークモード無効化、iPadでiPhone表示。毎回忘れるので、記事に残しておきます。

iOSエンジニア必見

【17選】MacBook Pro/Air周辺機器のオススメのまとめ。〜作業を効率的かつおしゃれに〜