iPad Appデザインの最新情報

♪ 明るい音楽 ヒップホップミュージック♪ ♪ 皆さんこんにちは iPad Appデザインのセッションへようこそ Bryant Jowと申します Grant Paulと申します 私たちは Apple Designチームです Bryant：本日は iPadOS 16の 新しいUIKitと SwiftUIのアップデートと これらをAppデザインに 取り入れるための ヒントを説明します iPadOS 16では 拡張ディスプレイサポートと ディスプレイズームにより より大きな解像度を活用して ステージマネージャを 使用することによって 単一ビューでAppを 操作することができます これはiPad Appにとって どんな意味を持つのでしょうか Appのデザインは 常に大画面や さまざまなウィンドウ サイズに対応し iPadOSのさまざまな入力に 対応する必要があります これからは iPadをデスクトップのように 使うことで より高度なユースケースに どう寄り添うかを 考える必要があります そのため Appがより強力に 使いやすくなるように さまざまな改善点を 導入しています ここでは 次の機能について紹介します ツールバーとカスタマイズ ドキュメントメニュー 編集メニュー 検索と置換 ナビゲーション 検索 表 選択についてです 本日は ドキュメント編集と コンテンツ閲覧という 2つの体験において これらのアップデートを どのようにデザインに 反映させることができるか をご紹介します ドキュメント編集から始め これらの改善によって Appを使用した際に 生産性が どのように向上するかを 見ていきます では ツールバーを 見ていきましょう ツールバーは Appの機能を 整理するものであり ワークフローの使いやすさに 影響するため Appデザインにおいて 非常に重要な 要素となります 以前のiPadOS 15のPages Appの ツールバーはこちらです iPadOS 16では タイトルを左側に配置し Appの中央により多くのツールバー アイテムを提供できるようにする 新しいツールバーレイアウトを 導入しています では詳細を見ていきましょう ここにツールバーの最初の セクションがあります 戻るボタンや サイドバーボタンなど ドキュメント内外を 移動する アイテムが含まれている 必要があります 新たにドキュメントタイトルと メニューもこちらに表示されます 後ほど見ていきましょう ツールバーにスペースの 余裕ができたため Appの中央によく使う アクションを表示できます iPadOS 16の Pages App では コンテンツを挿入する アクションがここに表示されます あなたのApp内で最も一般的な ワークフローは何か ワンクリックでアクセス できる利点をどう活かすか 考慮する必要があります Appのツールバーに 多くのアイテムを 詰め込みすぎないように 気をつけてください Appにたくさんの 機能がある場合 さらに2つの ツールを見ていきましょう iPadOS 16では カスタマイズ可能な ツールバーを有効にすることで ユーザーは ワークフローに最も重要な アイテムを 独自にまとめられます Appに多くの ツールバーアイテムや すべての人が必要としていない 高機能がある場合 カスタマイズの有効化を 考慮してみてください このように 中央セクションのアイテムは 追加 削除 再配置ができます このセクション以外のアイテムは ナビゲーションボタンや 常にアクセス可能な 状態にする必要がある 重要な機能が含まれている場合が あるためカスタマイズできません ツールバーのアイテム項目は グループ化したり折りたたむことも可能です グループを使って ツールバーや オーバーフローメニューに 関連するアクションを まとめることができます Pages Appでは 表・グラフ 図・画像の挿入など 似たようなアクションが グループ化されています ツールバーに十分な スペースがない場合 これらのアクションは プラスボタンに折りたたまれます また 小さいウィンドウサイズでは 幅広いツールバーの項目を コンパクトなグリフに 折りたたむことができます では ツールバーの右側の セクションを見てみましょう このセクションには インスペクタを呼び出す任意のボタン どのウィンドウサイズにでも 表示するべき重要なアイテム ツールバーの カスタマイズと同様に 非表示アイテムに アクセスするための オプションの オーバーフローボタンなど さまざまなアイテムが 含まれます ユーザーがAppのサイズを 調整した際に 十分なスペースがない場合 中央のツールバーのアイテムは 自動的にオーバーフローメニュー に折りたたまれます ウィンドウをさらに 小さく調整すると 最初と最後のセクションだけ が表示されます ほとんどのウィンドウサイズで 表示させたい場合は 重要なアイテムを右側に 配置するようにしてください ではここでツールバーについて まとめです ツールバーに昇格できる 共通のワークフローがあるか 検討します 重要なツールバーアイテムを 右側のセクションに配置し 小さなウィンドウサイズ内での オーバーフローを避けます Appにたくさんの ツールバーアイテムがあったり 高度なユースケースに使う場合は カスタマイズを有効化します 可能な限り 類似したアイテムは 整理してグループ化します 次に 前にお話しした 新しいドキュメントメニュー について見ていきましょう App間でドキュメントに 関連する アクションを一箇所で 見つけやすくするために ツールバーに新しいタイトルと メニューを導入しました Quick Lookなどの ドキュメントビューアや Keynoteなどの ドキュメント編集App向けです これらのAppには ドキュメントのタイトル付近にある 戻るボタンとして表示される ブラウザビューがあることを 覚えておいてください Appで主に ドキュメントの編集や表示を 行う場合 この新しいメニューの使用を 考慮しましょう では タイトルをクリックして Keynoteのドキュメントメニューを 開いてみましょう ここには 標準のドキュメント アクションのセットと同様に Appに特化した セットがあります この中には何を 入れるべきでしょうか メニューにはドキュメント 全体に影響する アクションが 含まれるべきです ここでドキュメント メニュー内に入れるべき 標準のアクションを いくつか紹介します それは 複製・名前の変更・移動 エクスポート・印刷です App用のカスタムアクション を追加することもできます 何でもドキュメントメニュー内に 含めるべきではありません App外で実行される アクションは 共有の下に配置し ドキュメント内のコンテンツに 直接影響を与えるアクションは ツールバーの カスタマイズに対応し 必要に応じて編集メニューに 表示させる必要があります ユーザーがiPad Appでより 効率的に操作することができるようになる 2つの機能について 話していきます 編集メニューを 見ていきましょう これらのメニューには テキストの選択や コピー＆ペーストなどの 編集オプションが表示されます iPadOS 16では 編集メニューは新しい見た目で タッチやポインター機能が 最適化されています タッチ操作では メニューが横向きに表示され このように選択肢のリストを スクロールして 確認することが できるようになりました ポインターを使用する場合 編集メニューは このような縦向きで より包括的なオプションの リストを表示します Appはタッチや ポインター機能による操作 どちらにも対応できる 必要があります これらの編集メニューを Appに組み込む場合 いくつか考慮すべき 点があります カットやコピー&ペーストなどの 標準アクションは 削除しないでください これらの編集アクションは複数の ワークフローで重要であり 常に利用可能な状態 にする必要があります 関連するシステムアクションと カスタムアクションは近くに 配置する必要があります iPadOS 16のメモAppでは 同じセクションで チェックリストやテキストの 編集オプションを配置しています 編集メニューはテキストフィールドにだけ 制限されたものではありません ドキュメントキャンバスの オブジェクトにも適用されます ここにタッチ操作によるKeynoteの レイヤ選択の例があります ポインター操作の際も 同じメニューです これらのメニューを編集可能な コンテンツに統合することで App操作時の 生産性を高めることができます これが編集メニューです では 検索と置換について 見ていきましょう iPadOS 16では システムキーボードに 検索と置換を導入しているため ドキュメント内の 特定の単語やフレーズなどを 素早く検索できます これは フレーズの特定した 部分を検索したり すべての検索した単語を 異なる単語に置換する 高度なユースケースに 対応しています iPadをハードウェア キーボードに装着した際 検索と置換のインターフェイスが App上に配置され このようにコンパクトな 外観になります 検索と置換を簡単に 行えるようにするために オーバーフローメニューや システムキーボード ショートカットに アイテムを追加しましょう これらはドキュメント 編集のために 導入した新しい機能です では ここからはGrant Paulに引継ぎ 他の改善点について 話してもらいます Grant ：Bryantありがとうございます これから説明することは ブラウジングの改善点であり iPad Appでよく行われる 操作です 写真ライブラリを管理したり Apple Musicを聴いたり Pagesで ドキュメントを選択したりする際など iPadではブラウジングの 体験がどこにでもあります iPadOS 16にはいくつかの 素晴らしい新機能や コンテンツブラウジングの パターンがいくつもあります Appの この部分について 重要な3つの部分に 焦点を当てて説明します １つ目は Appナビゲーションの アップデートについてです iPadOS 16には 「ブラウザスタイル」と呼んでいる 新しいスタイルの ナビゲーションがあります 例えば ファイルAppでは 戻ると進むボタンを使って サイドバーの別の場所にある フォルダー間を 簡単にブラウズする ことができます ブラウザスタイルの ナビゲーションでは App次第で タイトルの左側に配置する ボタンを選ぶことができます 戻るや進むまたは サイドバーボタンなどの ナビゲーションボタンを 保持するようにしてください ブラウザスタイルの ナビゲーションは Appに複雑な 階層構造があり ファイルブラウザや ウェブブラウザなどの 異なるレベル間を頻繁に 行き来する際に活用できます 写真などの階層構造が浅い フラットなAppの場合 App内のすべての 目的地がすでに サイドバーでワンクリック で利用できるため ブラウザスタイルのナビゲーションは 必要ない場合があります ブラウザスタイルの ナビゲーションを使用する場合 iPadOS 16の別の新しい 機能と良く作用します それは ナビゲーションバーの右上に 検索を配置することで 検索バーを使用して 同じ画面の下に表示されている コンテンツを フィルタリングする際に最適です ナビゲーションバー内に ありながら サジェストに対応しています 入力中のフィールドから すぐにサジェストが表示されます Appが最近の検索を サジェストします 何を検索したらよいか おすすめをサジェストできます 検索を絞り込むための フィルターもサジェストできます 右上の検索は 下に表示されている コンテンツを 検索するためのものです App全体を一度に 検索したい場合は 検索タブに入れておくことで Appのどこからでも 検索できるようになります これがナビゲーションの 新しくなったことです 次に 選択とメニュー について話していきます iPadOS 15で ポインターを使用して 複数のノートを一度に素早く選択できる バンドセレクションが 導入されました ツールバーを使用して 選択範囲で操作し 完了したら編集モードを 閉じる必要がありました iPadOS 16では それがもっと 簡単にできるようになりました バンドセレクションを 使用した場合 iPadOSが自動的に編集モードに ならないようにしました 編集モードにしなくても commandやshiftなどの キーボードで 選択と解除が できるようになりました 一度ノートを選択すると 副ボタンをクリックするだけで すべてのノートをまとめて 操作することができます タッチ操作では 長押しで コンテキストメニューが表示され 同じ操作を 行うことができます このようなインタラクションは リストでも同じように機能します commandを押しながら 複数のノートを選択し ドラッグ＆ドロップで フォルダに移動し コンテキストメニューを 表示して 複数のノートをまとめて 操作することができます これらのマルチアイテム コンテキストメニューでは iPadOS 16は 新しく何かを 作成するために使用する 空白エリアでのコンテキスト メニューにも対応しています 例えばファイルAppに新しい フォルダを作成できます またはカレンダーでコピーした イベントをペーストできます たくさん紹介しましたね チェックリストを 見ていきましょう 矢印キーやタブをうまく使い App内を移動するための キーボードフォーカスに 対応しましょう ポインターを使用して グリッド内の複数のアイテムを 素早く選択できるバンド セレクションに対応しましょう ポインターやキーボードを 使用している際に 編集モードに入らずに複数選択 できるようにしましょう コンテキストメニュー を追加して 同時に複数の選択した アイテムを操作できるようにしましょう 空白エリアでは コンテキストメニューを使用して 新しいアイテムを 作成できるようにしましょう 次にお話ししたいことは サブメニューです iPhoneでは サブメニューは縦向きで開きます スペースが限られており タップしなければならないため 本当に必要な時にだけ iPhoneのサブメニューを 使用することが最適です iPadOS 16では スペースがあれば サブメニューは横向きに開きます これは特にポインターでは より速く操作できます 例えば カレンダーで サブメニューを使用して 異なるカレンダーに 素早くイベントを移行します リマインダーはサブメニューを使用して 締め切り日と 優先順位を素早く変更します iPadでは Appのコンテキストメニューに サブメニューを追加して このような変更を 素早く行えるように 考慮しましょう サブメニューとともに iPadOS 16ではリストに ポップアップボタンの 新しいコントロールが追加されました その他のポップアップ ボタンのように これらはメニューを表示して オプションを選択することができます これらを実際に見てみましょう 今までは リマインダの 優先順位を編集するには 詳細ビューに入り 編集ビューから出る 必要がありました タップの連続で 情報が限られてしまいます iPadOS 16では 適切な場所で 優先順位を設定します より速く より正確に その場にとどまることができます ご覧のように リストのこれらの ポップアップボタンの主な用途は ポップオーバーや モーダルにおけるナビゲーション プッシュを置き換えることです ポップアップボタンを 使用する際は しっかり定義された オプションがある場所に置きましょう オプションが実際にメニューに うまく適合する場合にのみ ポップアップボタンを 使用するようにしましょう オプションとしてスイッチが適している場合 スイッチを使用しましょう コントロールがさらに 必要な場合は 無理に増やさない ことです より多くのコントロールが必要な 場合は メニュー内に カスタムコントロールを追加するのが 良いかもしれません カスタムを選択すると Appは他の選択肢を 邪魔することなく 追加のオプションを 表示することができます オプションの説明が 必要の場合 リストにあるポップアップボタン の下に配置できます これが選択やメニュー における新機能です 最後に 表について 話していきたいと思います 表はiPadOS 16で素晴らしく 新しいコンポーネントであり コンテンツリストを より強力にします これまでも表というコントロールを 使っていたかもしれません ですが 少し違っていました 単一の列だけであれば 表とはあまり言えません iPadOS 16には 本当の表があります SwiftUIの表は 情報を複数列で表示します ヘッダーをタップするだけで ソートできます ここで iPadの画面は 比較的小さいため 最も重要な列しか 表示できません ですが ソートオプションを 選択するだけで サイズを種類に 置き換えるなど 列で表示する内容を 変更できます コンテンツに強力に アクセスするための ものであるため ソート可能な表は 前に説明した 選択機能のすべてに 対応しています 表は実際に 強力なコントロールですが 正しく使用することが 重要となります これらの表をiOS 16に 構築することは データのスプレッドシートを 表示するのではなく コンテンツのリストについて情報をより 表示するために構築されます すでにAppにある リストビューの 拡張バージョンと 考えることができます 実際 Appをコンパクトな 幅に調整すると 表は単一カラムのリストに 切り替わります その際は 二番目の列から 詳細情報を取り出し 各テキスト行の 2行目移動し すべての情報が 利用できるように することを推奨します ソートについては ツールバーボタンを使用して ソートオプションを素早く 表示することができます これがiPadOS 16の 新しいコンポーネントと機能です Bryantに戻して 本日話したことについて 振り返ります Bryant: Grant ありがとうございます 本日お話した たくさんの機能は iPadで生産性を向上させる ことを目的としています これらがどのよう自身のiPad Appに 関連するかを考えながら開発しましょう より多くの機能や より優れた構成を提供し 編集やブラウジングを より効率的にすることで Appをより強力なものに しましょう サイズ調整ができる ウィンドウや大きな画面で Appのデザインを 次のレベルへ進めましょう タッチやポインターで シームレスにAppを操作 できるようにしましょう 優れたiPad Appを 設計するための 概要を知りたい方は 私たちが以前に話した 「iPadのためのデザイン」 をご参照ください ご視聴いただき ありがとうございます ♪