iPadのためのデザイン

こんにちは WWDCへようこそ

“iPadの設計” iPad用アプリケーションデザインの セッションへようこそ Apple Designチームの グラント･ポールです 今回は iPadOS 14の 新しい機能と変更点 そして皆さんが開発する アプリケーションへの影響と 優れたiPad用アプリケーション作成の ヒントをご紹介します 自動レイアウト Mac Catalyst ユニバーサル購入などのテクノロジーにより 複数のデバイスやプラットフォームに アプリケーションを展開できます ユーザーはお気に入りのアプリケーションを どのデバイスでも使え― その都度 デバイスを選べます 私たちデザイナーとデベロッパにとって それぞれのプラットフォームの ベストを模索し あらゆるデバイスとプラットフォームで 優れた体験を提供する必要があります 例えばMacでは画面サイズが最も大きく 入力方法は正確です Mac OS用アプリケーションでは 最先端のユースケースをサポートしつつ アクセシビリティも保たれます 一方 iPhoneでは すばやく簡単に アクセスできることが重要です 使用中 最も重要な機能に Multi-Touchでアクセスします 両方ともアプリケーションデザインの 方向性は明確です では iPadはどうでしょう？ iPadはその中間です とはいえ 単にMacとiPhoneの 間を取るだけでは 優れたiPad用アプリケーションにはなりません iPadのユニークさ すばらしさを 尊重する必要があります iPhoneやMacで これらを考慮するのと同じです 今回は このことについて お話しします iPadOS 14に適用した デザインの原則をご紹介し― 同じ原則を適用したアプリケーションの 作成方法をご説明します まず アプリケーションのレイアウトを更新し iPadの大型ディスプレイを 最大限に活かす方法についてです その後 iPadの複数の入力方法をサポートする ベストな方法を見ていきます そこで ヴィンス･レインに交代して 今年 iPadOSに追加される 新しいUIコンポーネントを説明してもらいます 新しいスプリットビューや サイドバーナビゲーションなどです

最後に ツールバーを使用して ボタンとアクションの 配置方法の変更点を見ていきます iPadの最も重要で目立つ機能は 何と言ってもディスプレイの大きさです iPad用アプリケーションの開発では まず ディスプレイを活かして コンテンツとユーザーインターフェイスが 最もよく見えるようにします 例を見ながら やり方をご説明しましょう まず 最初のテクニックは アプリケーションのナビゲーションを フラット化することです 画面の一部を更新するときに 画面全体を遷移させないようにします 例を見てみましょう iOS 13のフォトアプリケーションです アルバムやポートレートモードなどの メディアタイプを選ぶと 全画面でコンテンツを表示します シンプルかつ おなじみのiPhoneの機能です

iPadでも同じナビゲーション構造を 導入しました 全画面遷移です しかし iPadでは 画面の右側のスペースが 余ってしまいます そこで iPadOS 14では 新しいサイドバーナビゲーションを 使用しました 空のスペースには写真などの コンテンツが表示され 左側にナビゲーションコントロールも 表示されます スペースを利用して 意味のあるものを表示しています しかし コンテンツとナビゲーションを 同時に表示することで 他にも良いことがあります 例えばフォトライブラリを 切り替えたいときに アルバムとすべての写真を １回のタップで切り替えられます ドラッグアンドドロップも高速にできます 写真をドラッグする時点で ドロップ先のアルバムが すでに画面に表示されているためです 次にご説明したい原則は より多くのコンテンツを 表示することです アイデアはシンプルです iPadの画面は大きいので 全体を より多くのコンテンツで 埋めるようにします ただし これを正しく行うには 意図的なデザイン選択が必要です こちらは iOS 12の iPadのホーム画面です アイコンが離れていて 広めの間隔で配置されています iPadOS 13では アイコンの行と列が追加され さらに iPadOS 14では 新しくウィジェットを追加しました より多くのアイコンが 大きいまま表示されます よりよいスペースの使い方です もう１つの例は iPadOS 13の“ファイル”です ファイルが画面の右側全体の スペースを埋めています 抜けている場所や 空きスペースはありません

ただし 一度に12個しか アイコンを表示できません 改善の余地ありです

iPadOS 14の“ファイル”では ずっと小さいアイコンを使用しています これでも 見て 読んで タップするのに 十分な大きさです 実用性は保たれています 表示密度のわずかな調整で アプリケーションをより効率的に パワフルにできます これが 画面スペースの有効活用です

この新しいレイアウトでは 従来のおよそ300％もの ファイルアイコンを表示します すごいでしょう？ テキストの可読性が保たれる限り アプリケーションの画面にもっと表示できるか 検討が望まれます 表示量についてでした 次のテクニックは より多くのコンテキストを追加することです iPhone用アプリケーションは 特定の事項にフォーカスします 小さな画面で表示できることが 限られるためです iPadは一度に多くの内容を表示できます この例を見ていきましょう

iPadOS 13の“ファイル”で ファイル名を変更する場合です 名前を変更するファイル以外に 何も表示されません 他のファイルのコンテキストは 失われています

iPadOS 14では ファイル名の変更をインラインで行います

コンテキストに留まることで 画面の残り部分の利便性を 名前の変更中にも保っています 例えば フォルダ内の別のファイルの 名前を参照しながらタイピングできます オーバーレイを使っていたり 画面の一部をブロックしていても ユーザーをコンテキストに留めておけます こうすることでアプリケーションが軽く また よりパワフルに感じられます もう１つの例がポップオーバーです ポップオーバーの利点は 何がどこから来ているかの コンテキストを示せることです 例えば カレンダーで イベントを表示または編集する時に ポップオーバーの矢印が コンテキストを提供し その日の どのイベントか分かります では iPadOS 13のカレンダーの ポップオーバーを見てみましょう これには iPhoneと同じ画面が 採用されていました ポップオーバーの幅は iPhoneと同じなので 移行は単純です しかし ポップオーバーの矢印は “カレンダー”ボタンを指していて 意味のあるコンテキストを 与えていません そこで iPadOS 14では カレンダーのメニューを イベントと同じレベルに移動しました これで カレンダーのイベントの 表示と操作を行えます 一方で カレンダーの可視性は 変更されています 結果は 瞬時に右側に表示されます あなたのアプリケーションが モーダルシートやポップオーバーを 使っていれば 意味のあるコンテキストを ユーザーに提供できているか 他の部分をブロックしていないか 確認してください コントロールをオーバーレイではなく 同じレベルにすることで 良くなるか確かめてください さらに アプリケーションをMac OSで 動作させる場合も モーダルとオーバーレイを 避けることは有効です モーダルUIはMac OSでは iPadOSほどは使用しません Macの画面とウィンドウが 大きいためです 逆に iPhoneのような コンパクトなデバイスでは 一度に複数を表示する スペースがありません 単一の画面に無理やり 押し込まない方が良いかも知れません すべてを同じレベルで 表示する場所がないとき 特定のコンテンツにフォーカスするには やはりモーダルが有効です 最後に 特定のコンテンツに 深く注意を向けることについてお話しします iPadにはディスプレイが ただの画面でなくなる瞬間があります デバイス全体が１つのコンテンツのように 感じられる瞬間です ブックのページをめくったり Apple TVでビデオを視聴したり Apple Pencilで スケッチしたりするときです “フォト”の例を もう１つ見てみましょう 写真の編集では カスタムイマーシブレイアウトを使用します これは iPad向けの特別なデザインです すべてのコントロールを 左と右に寄せて配置しています iPadを固定して 両手で使うときに便利です 画面が大きいため 写真がきれいに大きく見え 編集用のコントロールが 写真に被ることもありません こちらは 新しいiPadOS 14の例です “ミュージック”の 再生中の画面が ディスプレイ全体を占めています 再生中の音楽と歌詞に集中できます Macと比べると単一のコンテンツに 集中できる機能は まさに iPadのユニークで特別な点です ソフトウェアにより ハードウェアの存在が消え １つのコンテンツになったように 感じられます アプリケーションが 単なるパーツの集合以上に感じられます ディスプレイの割り付け方法でした 次の主要な点は iPad用アプリケーションの操作です iPadはタッチ操作優先のデバイスですが 当初から 複数の入力方式を サポートしていました キーボードから始まり 現在はPencilやTrackpadです 優れたiPad用アプリケーションならば これらの入力方式を どれも完璧にサポートするでしょう それぞれの入力方式を ベストな場面で使うと思います ただし 必ずMulti-Touchから 始めてください iPadOSのアプリケーションは 大きく操作しやすいタップターゲットと 高速でなめらかなジェスチャーで構築します 皆さんのiPad用アプリケーションも これらのタッチ操作から始めます それ以外の入力方式を サポートする場合も まずはタッチ操作で優れた体験を 提供するようにしてください Multi-Touchの次のステップは iPadOSに組み込まれた機能を使い 他の入力方式をサポートすることです Magic Keyboardなどの キーボードを利用する人向けに キーボードショートカットを すべての共通のアクションに追加します キーボードショートカットを 多用する人もるので ショートカットがあれば 便利に感じるでしょう ただし そうでないユーザーに 支障がないようにします 追加するか迷う場合は 追加することをお勧めします Mac Catalystで Mac OSに移行する場合は ショートカットもすべて 同じように移行されますので 同じように 利便性が高いと 感じられるでしょう iPadでは キーボードに加え Trackpadもサポートします Trackpadは ほぼ自動的にサポートされます iPadOSの組み込みコントロールは Trackpadをサポートするためです ポインタを拡張し カスタムコントロールや カスタム操作を追加できます Trackpadの動作と カスタマイズの詳細について お勧めしたいセッションは “Designing for the iPadOS Pointer”です 最後に Apple Pencilの スクリブルをサポートする必要があります ポインタと同じく 自動的にシステムの テキスト入力コントロールで サポートされますが カスタムコントロールを使う場合は スクリブルを サポートするようにしてください スクリブルを使うユーザーは すべてのアプリケーションで 機能することを期待するからです iPadOSの組み込み機能を あらゆる入力方式で使う方法でした これらの入力方式の特別な点は すべて同時に使用できることです そして まさにユニークで iPadでしかできない特別なことが 複数の入力を組み合わせて 単一の操作に使えることです 今まで見たことのない 優れた操作を作ることが可能です キーボードとタッチの組み合わせが 良い例です 例えば Safariでは 新しいタブでリンクを開くときに Commandキーを押しながら リンクをタップしたり Optionキーを押しながら タップしたりできます Controlキーを押しながらタップして もっとオプションを表示できます 皆さんのアプリケーションで 特殊キーと他の入力方式の組み合わせを サポートする必要があります TouchやTrackpadなどです 例えば システム標準の動作― Optionキーとドラッグで コピーを作成したり Shiftキーとタップで グループ選択などです もう１つの組み合わせが PencilとTouchです こちらはアニメーション用 アプリケーションの“Loom”です Loomは PencilとTouch入力の 組み合わせで とてもすばやく フレームをスケッチできます 左側では このダイヤルをTouchで操作し アニメーションを描画する フレームを決定します 画面の右側でApple Pencilを使って 実際のフレームを描きます フレームを切り替えて 次々に 描画できます

タッチ入力とApple Pencilを 組み合わせ― クールなアニメーションを すばやく描けます

アプリケーションの入力をよりパワフルにする 方法の紹介でした 最後のテクニックは アプリケーションを高速に感じさせる方法です アプリケーションを高速に感じさせるために 重要なのが反応の速さです 画面で表示されているのが アニメーションであれ トランジションや 処理中であれ 常に反応すべきです これは 入力に対して 常に反応するという意味です iPadOS 14の 新しいドロップダウンメニューの例です 連続した動作で メニュー項目をなぞり メニューは それに合わせて動きます これがもし タップして メニューの表示を待ち― それからアイテムをタップすると すごく遅く感じます 考える速さにデバイスが 追いついていないと感じます 別の例を見てみましょう ドロップダウンメニューを開き― メニューの外側がタップされると メニューを消さなければならず その下のアプリケーションは タッチに反応しません しかし 別のジェスチャーなら 必ずしも競合しません iPadOS 14ではメニューの外側で スクロールし すぐに消え― その下のコンテンツをスクロールするまで 連続した動作で行えます アプリケーションは可能な限り 反応し続けます このような マイクロインタラクションは 小さいことに感じますが 正しく行えば効き目があります ユーザーはアプリケーションのどこであれ 画面の操作中に 画面にタッチやTrackpadの使用に 切り替えた時に 自分の入力にアプリが反応すると 確信を持つようになります ユーザーはアニメーションが遅いと 不満に感じることがあります または トランジションに 時間がかかるときなどです でも アプリケーションが 常に反応するようにできていれば アニメーションは邪魔になるどころか コンテキストを提供できます 常にアプリケーションを操作できるからです では ヴィンスに交代して サイドバーを説明してもらいます ありがとう グラント iPadのレイアウトを最適化する― 新しいiPadOS 14の機能の１つが サイドバーです サイドバーの新機能を 見てみましょう その後で サイドバーを実装するための 戦略についてお話しします こちらは iPadOS 13の“Home”です タブバーをよく見ると 横方向に空きスペースが たくさんあります 美しい12.9インチの ディスプレイなのに残念です それに 特定の部屋への移動に いくつかのステップが必要です まず “Room”タブをタップして ポップオーバーを開き 目的の部屋を探します やっと スイッチがありました ちょっと面倒です 暗いところで照明をつけようと している場合は特にそう iPadOS 14の“Home”では タブバーの代わりに 新しいサイドバーがあります このほうが ディスプレイの 大きさを活かせます 家のどの部屋にも 一回のタップでジャンプできます

また 部屋の並び替えも ドラッグアンドドロップで簡単です サイドバーの他の例も 見てみましょう “ミュージック”にも サイドバーが 追加されました ライブラリ全体のナビゲーションが ずっと速くなりました “ファイル”では 新しいサイドバーのおかげで ナビゲーションとカスタマイズが かつてなくシンプルです 新しいサイドバーは 編集モードをサポートします コンテンツの表示 非表示 場所変更が簡単です また 重要なコンテンツへの ショートカットも簡単に作成できます サイドバーに ドラッグアンドドロップするだけです 簡単にサイドバーのコンテンツを ニーズに合わせられます サイドバーは スプリングフォルダもサポートします コンテンツの場所を 指一本で変えられます サイドバーで “フォト”の操作も シンプルで高速になりました コンテンツは 折り畳んだグループに 整理されます 例えば メディアタイプを折り畳んで すばやく別のアルバムにジャンプできます 上にあるサイドバーの トグルボタンをタップすると サイドバーが畳み込まれて 写真が画面全体を 占めるように表示されます 左端からスワイプすると戻ります

左端からスワイプすると サイドバーがオーバレイとして表示されます サイドバーをオーバーレイとして使うと 操作が高速でなめらかです サイドバーは いつでも必要なときに表示され コンテンツエリアで操作を始めると 再び非表示になり 写真に戻ることができます サイドバーを自動的に 非表示にしたくない場合は サイドバーのトグルボタンを もう一度タップします オーバーレイ動作なしに戻せます

ポートレートでどうなるか 見てみましょう ポートレートでは自動的に オーバーレイに切り替わります 横方向のスペースを コンテンツ用に確保するためです ここでも いつでも簡単に 表示を戻せます タップ または左端からスワイプです iPadのマルチタスク操作では 同じように動作します このようなスプリットビューでは サイドバーとコンテンツに 十分なスペースがありません そこで サイドバーが オーバーレイ表示になります “メール”を見てみます iPadの“メール”の優れた点は ３列レイアウトを サポートしていることです メールボックスやメッセージの 階層を可視化するのに便利です ただし iPadOS 13では ３列レイアウトが使えるのは 一番大きい iPad Proだけでした 小さいiPadは ２列レイアウトでした 新しいiPadOS 14のサイドバーで これが変わります すべてのiPadに３列レイアウトを 採用しています 左端からスワイプして ３列目を表示します メールボックスとメッセージを 並べて表示できます サイドバーを使い終わると ２列レイアウトに戻り コンテンツのスペースが増えます

３列レイアウトは サイドバーがオーバーレイとして 表示されているときも有効です 左端からスワイプして サイドバーを出します ３列目が必要なときは 引っ張り続けると出てきます まさに手軽です iPadOS 14が動作する すべてのiPadで利用できます iPadOSでサイドバーを構築すると Mac OSのサイドバーに変換されます Catalystアプリケーションの ナビゲーション構造の作成にも最適です これが 新しいiPadOS 14の サイドバーです 新しいサイドバーの機能を まとめましょう iPad用に最適化された アプリケーションのレイアウトを提供します モーダル 非モーダルの 両方の編集をサポートします ユーザーは最も重要な項目に すばやく移動できます ドラッグとドロップで― パワフルなマルチウィンドウ マルチタスク操作が可能です コンテンツは折り畳んだ セクションに整理されます オーバーレイとして使用でき いつでも使えて 邪魔になりません

操作は なめらかな スワイプジェスチャーで ビューに出したり しまったりできます すばやく簡単です

最後に すべてのiPadで ３列レイアウトが使えるようになりました ここでサイドバーを追加するための 戦略を検討しましょう アプリケーションのナビゲーションの ２つのスタイルを見てみましょう 特に サイドバーに向いている― フラットと階層の２つです フラットナビゲーションでは その名のとおり 同じ重み付けの最上位コンテンツの 比較的フラットな構造を使用します １つか２つはコンテンツ内に 深さがあっても 基本的には同じ重み付けです このようなアプリケーションには 通常タブバーでセクションに移動します “フォト”や“ミュージック”などです 階層ナビゲーションでは一般的に― コンテンツを整理したり より深いレイヤーへ移動したりします “メール”や“ノート”などです 皆さんのアプリケーションが ゲームなど没入型でなければ おおむね これらの２つに分類できます 新しいサイドバーは どちらにも効果的です どこから始めればよいでしょうか？ すでにタブバーがあれば そこから始めるのが最適です タブバーはナビゲーションを シンプルにする便利なツールです 見ただけで 今いる場所と どこへ行けるかがわかります iPadやiPhoneのユーザーなら すぐに使いこなせます 初めてアプリケーションに 触る人にも障害なく― 一番重要な場所に 迷わずたどり着けます アプリケーションが複雑になっても タブがアプリケーションの構造を わかりやすく提示します そこで サイドバーの導入を 検討する場合 今あるタブを第一候補にすることを お勧めします サイドバーの一番上のスペースを タブバー相当にすることを考えます ここに置くとアプリケーションの 最も重要な場所だと解釈されます ただし タブバーを完全に 削除しないでください サイドバーは通常幅の レイアウト専用です すでにタブバーがあれば コンパクト幅のレイアウト用に 引き続き使用します iPhoneでも同じです 最上位の項目をサイドバーとタブバーで 同じにしてください これで どのサイズでも なじみやすいアプリケーションになります では サイドバーに何を入れるか 考えていきましょう アプリケーションのすべてのコンテンツを 考えてみましょう サイドバーに配置するのに 最も適しているのは コンテンツの長い リストであることが多いです 特に ユーザーが生成した コンテンツの場合はそうです “フォト”のアルバムや “ミュージック”のプレイリストなど こうしたアイテムを プライマリナビゲーションの下に置きます コンテンツをサイドバーに追加するときは 折り畳んだヘッダーの下にネストします これで 正しい階層を最上位の項目と その下のコンテンツの間で維持できます 同じコンテンツを選択する方法が ２つになっても構いません おそらく最上位レベルの項目と その下のフォルダでしょう まったく問題ありません サイドバーに入れる項目を ユーザーの最も重要なコンテンツへの ショートカットと考えます コンテンツを追加したくなりますが アプリケーション全部を 入れたい衝動は抑えます サイドバーの項目が多すぎると セクションのスクロールと展開が 必要になってしまいます すばやくジャンプするという 目的に沿いません 最後に サイドバーのコンテンツを ユーザーが構成できるようにするには ボタンを使うのが良いやり方です 構成可能なセクションごとに 一番下にボタンを配置します こうすればコンテンツを インラインで作成でき 使用するのと同じ場所で行えます アプリケーションのナビゲーションが 階層モデルに近い場合は 最上位の項目を サイドバーの一番上に配置します 複数の最高レベルの項目を ここに重ねても構いません 例えば“メール”ならば ここに複数のメールボックスが あるかも知れません その下に最も重要な場所への ショートカットを追加します 考慮すべきことは サイドバーは階層の深くネストされたレベルを ブラウズするのに不向きです コンテンツのツリー全体を サイドバーに押し込まないようにします そのようなアプリケーションであれば 階層の移動には コンテンツエリアを使用します サイドバーは階層の中の 最も重要な場所にジャンプするために 取っておきます それではまとめましょう 初めてのサイドバーの実装で 覚えておくと良いことがあります まずは 禁止事項 サイドバーを iPhoneなど コンパクト幅のサイズに使用しないこと コンパクトでは サイドバーをタブバーに変換するか 標準のテーブル行を使ってください また 同じビューにサイドバーと タブバーを混在させないこと サイドバーとタブバーは 同じ内容の異なる表現形式です 混在させると ナビゲーション構造が 紛らわしくなります 最後に全アプリケーションを サイドバーに入れないこと では次に 推奨事項です 初めてのサイドバーを実装する際― プライマリナビゲーションを 一番上に配置すること これは最も視認性の高い場所です 主要なセクションへ移動する際に ユーザーが見る場所です コンパクト幅レイアウトでは サイドバーをタブバーにすること コンパクト幅でタブバーがある場合― ユーザーは主要な場所がサイドバーでも タブバーでも見つかると期待します また サイドバーには アウトライン化されたグリフを使い タブバーには塗りつぶされたグリフを お勧めします

サイドバーに追加する コンテンツを検討するときは ユーザーにとって 最も重要な コンテンツから開始すること プライマリナビゲーションの下に 配置してください リスト形式のコンテンツと ユーザー生成コンテンツは どちらも良い選択です これらを折り畳んだヘッダーの下に ネストしてください 編集モードをサポートすること ユーザーがニーズに合わせて サイドバーをカスタマイズできるようにします そして ドラッグアンドドロップのサポート ユーザーはアイテムを サイドバーのフォルダに ドラッグできることを期待します また コンテンツを直接 サイドバーにドラッグして ショートカットを作れることも 期待されています 以上が サイドバーのまとめです ツールバーを 少し見ておきましょう iPadOS 14で最適化した もう１つの― 有効なスペース活用方法です iPadOS 13では 必要以上に スペースを占めるツールバーがありました 先ほど見た空白のあるタブバーと同じく スペースをうまく使えていないと感じます iPadOS 14では 多くのツールバー項目を 上に移動しました

これなら大きなディスプレイを より有効に使えます ただし コンパクト幅など スペースが少ない場合 ツールバー項目は下に留まります

iPad用アプリケーションのツールバーで 覚えておくと良いことがあります iPadOSではツールバーボタンは 上をデフォルトにすること いつもできるとは限りませんが ボタンが１～３個の ツールバーなら 大体可能です コンパクト幅ではツールバー項目を 下にする代替レイアウトを使うこと 上に配置できない場合です 以上 iPadOS 14のサイドバーと ツールバーの解説でした グラントにお返しして 今回の内容をまとめてもらいます ありがとう ヴィンス 今回のトークのテーマは 優れたiPad用アプリケーションは ただでは作れないということです 特にiPad向けにデザインする 必要があるのです その方法は ナビゲーションをフラット化すること ディスプレイに より多くのコンテンツを表示 そして ユーザーに コンテキストを提供することです つまり iPadのすべての 入力方式をサポートすること Trackpad キーボード Pencil もちろん Multi-Touchもです また それらを組み合わせて 操作を作ります これはナビゲーションに タブバーよりもサイドバーを使い 最上位のコンテンツを サイドバーに含めて どこからでも 一度のタップで機能させることを意味します また アクションとコントロールを 下のツールバーではなく 上のナビゲーションバーに配置し iPadのディスプレイを 最大限に活用します 以上です 詳しく知りたい方は iPadOS 14の 新しいコントロールに関する― こちらのセッションをお勧めします 新しいコントロールはiPadOS用と Mac Catalyst用アプリケーション そしてiPhoneで効果的です アプリケーションでこれらの機能を 構築する方法については “Build For iPad”もご視聴ください これらをコードで使う方法を 説明しています 皆さんの作るアプリケーションを 楽しみにしています ありがとうございました