iPadアプリのデザインの向上

こんにちは Rene Leeです Apple Designチームのデザイナイーです 本日は iPadの新しいアップデートにより アプリのデザインが どのように強化されるかをご紹介します iPadの基本はシンプルさです iPad OS26は その確かな 基礎の上に構築されています ウインドウを滑らかにサイズ変更できる 新しいジェスチャでマルチタスクも簡単です

ツールバーには新しい ウインドウコントロールがあり 拡大して機能を表示できます

新しいポインタは 正確さと応答性が向上しています 最後に新しいメニューバーを紹介します ユニークでパワフルなアプリを 作成するためのすべてを入力できます

これらの新機能により 必要なすべての 構成要素が揃ったので iPadアプリのレベルアップが実現します このセッションでは これらの 新機能について詳しく説明します 最初は アプリのナビゲーションです 次に iPadでマルチタスクを行う際の ウインドウ操作について説明します 次に iPadの新しいポインタと ホバーエフェクトのアップデートを紹介します

最後に iPadの新しいメニューバーで このセッションを締めくくります では ナビゲーションから始めましょう iPadのアプリをレベルアップするには ナビゲーションパターンを選択します 最初のオプションはサイドバーです サイドバーは 多数のサブビューがあるアプリや メールのように ネストの深いアプリに最適です

メールのサイドバーの中を見てみましょう メールのサイドバーには すべてのメール ボックスと複数のアカウントが表示され コンテンツ階層が最上位まで開きます メールのサイドバーを使用し フラットな ナビゲーションで迅速に操作できます 次は Musicを見てみましょう このアプリでは メールボックスの代わりに タブ、ライブラリ、プレイリストを使います そのため Musicのサイドバーには これらが配置されており ナビゲーションは非常に高速です

Musicのサイドバーにはもう１つ タブバーのようなボタンがあります タップすると サイドバーが滑らかに変形して タブバーになります

タブバーは よりコンパクトで柔軟な ナビゲーションパターンです サイドバーよりもはるかに小さいので アプリは以前より 多くのコンテンツを表示でき よりイマーシブ感が高まります 変形したタブバーをサイドバーに 戻すのもシームレスに行えます タブバーが滑らかに動作するので 好みのナビゲーションを選択できます

アプリに最適なナビゲーションが不明なら タブバーから始めてください

タブバーは簡単にサイドバーに変形でき アプリを徐々に拡大するのに役立ちます 次に各ナビゲーションが小さいサイズに どう適応するかを見てみましょう iPadを縦向きにすると サイドバーが応答して タブバーに戻ります しかし レイアウトの観点から言うと 画面の向きが変わったら アプリは幅の変化に 対応する必要があります ナビゲーションに適応性があれば アプリは任意の幅にリフローできます

この適応性は 幅が狭くなる フローティングウインドウにも拡張できます タブバーを使用すると 任意の ディメンションにスマートに適応できます

タブバーを使用しないアプリも ナビゲーションに適応して 列を折りたたむことができます

サイズ変更に適応させる場合 レイアウトの変更が悪影響を 及ぼさないことを確認してください アプリをサイズ変更した時 レイアウトが 永続的に変更されないようにします 機会があれば可能な限り 開始したときの状態に戻してください

次に コンテンツを ナビゲーションに拡張します

ユーザーはコンテンツを求めて アプリにアクセスします ディスプレイを最大限に活用して 最もイマーシブな体験を作成しましょう まず新しい「スクロールエッジエフェクト」 を使用して ツールバーの下にコンテンツを描画します コンテンツの拡張は フルスクリーンアプリよりも小さい フローティングウインドウに特に有益です

サイドバーの下にあるコンテンツも 拡張できます このように コンテンツが境界を越えた時は どの行がどれだけスクロール されたかもわかります ナビゲーションのまとめです コンテンツに最適な ナビゲーションを選択します

タブバーから始めてみてください 小さいサイズにナビゲーションを適応させます

またコンテンツを ナビゲーション全体に拡張します

次はウインドウについてです iPad OS26の新しいウインドウシステムは よりシンプルで強力になっています マルチタスクをサポートする すべてのアプリで 右下にハンドルが 表示されるようになりました

これをドラッグして アプリのサイズを変更すると 壁紙の上に浮かぶウインドウになります

各ウインドウの左上には 新しいウインドウコントロールがあります タップすると大きくなり 機能が表示されます 長押しするとさらに拡大し 様々なウインドウレイアウトを素早く 作成するショートカットが表示されます 多くの機能があるウインドウコントロールは iPadでマルチタスクを行うときの 中心的存在です ウインドウでどのように表示されるか もう少し詳しく見ていきましょう ウインドウコントロールは ツールバーの左端に表示されます 既存のコントロールは右側に移動して 重ならないように配置されます

iPad OS26にアップデートされていない アプリの場合は ツールバーの上のセーフエリアが広くなり その左端にウインドウコントロールが 配置されます

ツールバーの上のこの配置は 互換性のためにのみ存在しています

ツールバーのすぐ上に恒久的な セーフエリアが作成されるため この配置は アプリ内のコンテンツの 最大化には最適ではありません 代わりに ウインドウコントロールを ツールバーに入れて一列にする 必要があります ウインドウコントロールが 表示される場所をツールバーで囲むと セーフエリアを確保する必要がなくなります

スペースが余るので ウインドウサイズを大きくせずに より多くのコンテンツを表示できます

次に アプリが新しいドキュメントを どのような方法で開くかについて 重要な変更を説明します ドキュメントを開くと デフォルトのアプリが起動して そのウィンドウ内に表示されます アプリが非表示になったり 意図的に閉じられるまでは アプリの現在の状態に値があると 想定できます 2番目のドキュメントを 開く時はどうでしょうか

マルチタスク指向の ワークフローが登場する前は アプリがさらに別のドキュメントを 開くように求められた場合 その唯一のウインドウでファイルを開き その処理中に前の内容をクリアしていました マルチタスクに参加するアプリの場合 この種の「Open in Place」動作は 推奨されなくなりました 今後は ドキュメントごとに新しい ウインドウを作成する必要があります マルチタスクを有効にすると アプリは各ドキュメントを それぞれのウインドウで開きます この追加する動きが役立つのは 閉じない限りウインドウが開いている点です しかし この動作では多数のウインドウが 作成されるため 自分の ウインドウの特定が 困難にならないのでしょうか ウインドウを追加するこの新しい動作により だんだんとウインドウが 蓄積しやすくなります

ウインドウを見つけやすくするため アプリメニューの新しいセクションには 開いているウインドウがリスト表示されます しかし ウインドウ名が説明的でないと このリストはあまり役に立ちません アプリのウインドウには わかりやすい名前を付けることが重要です

ドキュメントのタイトルなど ウインドウごとに異なる名前を付けましょう わかりやすい名前を付けておくと ウインドウの特定が はるかに簡単になります

セクションのまとめです ウインドウ コントロールはツールバーで囲みます

ドキュメントごとにウインドウを作成します 最後に アプリのウインドウには わかりやすい名前を付けます 次に iPadのポインタへの変更を 見てみましょう

iPadはすべてタッチ操作用に デザインされていたため 元のポインタの形状は円形でした サイズと精度の両方で指に似せるためです しかしポインタの中身は 実際には指よりも はるかに正確な動作が可能です iPad OS26ではポインタの形を刷新し その真の能力を活用できるようにしました 新しいポインタは より正確で反応が良くなっています 入力を常に1対1で直接追跡するからです 新しい形状に加えて ボタンやコントロールの上に カーソルを合わせたときの ポインタの動作にも変化があります 新しいハイライトエフェクトは Liquid Glassのプラッタで ポインタを合わせたボタンの真上に 出現します

Liquid Glassコントロール上に浮かび 下にある要素を曲げたり 屈折させるハイライトで 現在選択しているボタンを示します 複数のボタンがあるLiquid Glass コントロールにカーソルを合わせると ハイライトエフェクトが現れて ポインタで押そうとしている ボタンが表示されます

クラスタ内を移動すると ハイライトがすぐにポインタを追随するので ターゲットが変わったことがわかります 新しいハイライトエフェクトは ポインタがハイライトになった 以前のホバーエフェクトを置き換えます

新しいポインタはターゲットに 引き寄せられたり ゴムバンドで結合されたりせず 入力を常に直接追跡します

新しいポインタでアプリをテストし 想定通りかどうか確認してください いつでもこのセクションに戻って ガイドを参照し ポインタの操作に慣れてください 最後に iPadのメニューバーを 見てみましょう メニューバーは常にmacOSの一部であり その基本原則の多くが iPadのメニューバーでも共有されています このセクションではiPadの メニューバーの特徴に焦点を当てます iPadでは ポインタを上端に移動すると メニューバーが表示されます 指で下にスワイプすることもできます すべてのメニューバーに アプリメニューがあり 続いてシステムが提供する デフォルトのメニュー アプリが提供する カスタムメニューがあります 今後 iPadのすべてのアプリが 独自のメニューバーを持ちます まず優れたメニューバーを デザインするためのヒントから始めます まずメニュー項目を整理します

カスタムメニューを 整理するプロセスを説明します 例として この「メール」の メニューを使用します 最初にすべきことは 名前に関連するすべてのアクションを メニューに入力することです これらのアクションの順番は 使用頻度順で アルファベット順ではありません 関連するアクションを 独自のセクションにグループ化して 細分化する必要もあります メニューが長くなり始めたら 副次的なアクションを サブメニューに移動できます 次に各アイテムに記号を割り当てます 理想的にはアプリで表示されるものと 一致させます 最後にキーボードショートカットを 頻繁に実行されるアクションに割り当てます 整ったカスタムメニューのできあがりです 個々のコマンドだけでなく メンタルマップも提供して ユーザーに習得してもらい アプリの理解を深めます 次にメニューに入力します

システムが提供するメニューの1つに メニューがあります それに有用なアクションを 入力するかどうかはアプリ次第です アプリがタブで整理されている場合は メニューに含めると便利です

タブをメニューの項目として追加し キーボードショートカットを割り当て アプリ内のタブ切り替えを高速化します

これで完全に機能する メニューが完成しました もう1つの便利なアイテムは ナビゲーショントグルです サイドバーを表示／非表示にするボタンは メニューへの優れた追加の機能です サイドバートグルがあるとナビゲーションの 表示／非表示の切り替えが迅速になります

次に心に留めておくべきことは メニューや項目をアプリの内容に応じて 非表示にしないことです ユーザーがアプリを使うにつれて その内容は常に変化します メニューを開いた時 使用できない一部の項目が 薄い色で表示される場合があります これは全く意図的なものです メニュー項目は非アクティブの時でも 常に同じ場所に残す必要があります これらは利用可能になると 完全に不透明になります そうでない時は淡色表示になります 非アクティブなアクションを非表示にすれば スペースの節約になると思いますよね

メニュー項目を非表示にすることは ユーザーに混乱を招くためお勧めしません メニューの内容が常に変化すると ユーザーはメニューを開くたびに 全体を見直す必要があります これは空間記憶に頼れなく なるためです メニューの内容は 動かさないようにしてください メニューバーが予測可能になり 開いたときに新しい機能を 見つけるやすくなるからです 最後に内容によってはメニュー内の 何も実行できない場合があります

このような場合でも メニュー全体を 非表示にすることは避けてください メニュー全体が断続的に消えると メニューバーは予測不可能になります

メニューとその内容は 永続的であるようにしてください 常に期待通りの経験を ユーザーに提供するためです

メニューバーについて 学んだことを復習します メニュー項目を整理します タブとサイドバーのトグルを使い メニューに入力します メニューやメニュー項目を 非表示にしないでください こうしたガイドラインを参考にして 最良の結果になるよう アプリのメニューバーをデザインします 本日の内容は以上となります 滑らかなナビゲーションと 追加のマルチタスク機能でiPadアプリが これまで以上にパワフルになることを紹介し 新しいポインタが 高精度の入力を提供することや メニューバーがアプリアクションの 整理に役立ち 特定が簡単になることも説明しました 新しいデザインシステムについて さらに詳しく知りたい方は 他のセッションもご視聴ください

これらの構成要素をアプリに取り入れると さらなる相乗効果が得られるものと 確信しています 今日学んだことを生かし iPadアプリの体験を 真に変革して向上させていただけると 信じています ありがとうございました