新しいデザインによるSwiftUIアプリの作成

こんにちは Franckです SwiftUIチームのエンジニアをしています このビデオでは 新しいデザインで 優れたアプリをビルドする方法が学べます iOS 26とmacOS Tahoeでは アプリの見た目や操作性や システム体験を 大きく様変わりさせる アップデートが行われました アップデートの肝になるのが コントロールやナビゲーション要素のための まったく新しい適応型マテリアル 「Liquid Glass」です ガラスの光学的特性と液体の流動性から インスピレーションを得た 軽やかでダイナミックな素材は 下に重ねた様々なコンテンツの魅力を 大いに高めてくれます コンテンツをスクロールしていくと 下に重ねたコンテンツに合わせて ライトからダークへと ガラスの見た目が自動的に変わります すべてのプラットフォームが 新しいフレッシュな装いをまとい コントロールも生き生きと反応します たとえばトグルや セグメントピッカーや

スライダは 操作中はLiquid Glassに姿を変えて 楽しい操作体験をもたらします アップデートは アプリを実行する すべてのプラットフォームに適用されます この新しいマテリアルの デザインについて詳しく知りたい方は 「Meet Liquid Glass」をご覧ください 「Get to know the new design system」もぜひご覧になり 新しいデザインにおける ベストプラクティスを学んでください 人生においてはしばしば 物事をクリアに見極め 本当に大事なことに集中するため 自分自身を見つめなおし 視野を広げることも必要になるでしょう 今日は この叡知を Apple Developer Webサイトにある サンプルプロジェクト 「Landmarks」アプリに適用してみます Appleプラットフォーム全体に導入された 新しいデザインシステムの エレメントを紹介しつつ 新しいAPIを適用して Landmarksアプリをより分かりやすく ポイントを絞って説明します Xcode 26 SDKでアプリを構築する場合 UI全体の変化に気付かれることでしょう 「TabView」や 「NavigationSplitView」など 構造的なアプリコンポーネントの 更新から始めたいと思います 次に ツールバーの新しい見た目と 動作について説明します その後 一貫性と使いやすさを さらに向上させた 検索機能の最新情報を紹介します 次に Liquid Glassでコントロールを 生き生きさせる方法を説明します 最後に 皆さんのカスタムUIエレメントに ガラスを適用する方法を紹介します

これら5つのパートでは 自動的に改善されるポイントや 操作性をさらにカスタマイズする 新しいAPIについて取り上げます 「App Structure」は アプリの操作方法を 定義する APIのファミリーを指します

「NavigationSplitView」や 「TabView」や シートなどのビューや修飾子も これに含まれます それぞれが 新しいデザインのために ブラッシュアップされました 「NavigationSplitView」は 多数のルートカテゴリを階層構造に整理し 操作しやすくします

ここではLiquid Glassのサイドバーが コンテンツの上に浮かんでいます このLandmarksの美しいバナーは その一例で 咲き誇るピンク色の花が サイドバーに映えています しかしこのサイドバーがどんなに美しくても Landmarksの制作チームは この切り取られる写真1点のために 実際にこのすばらしい場所に行って 写真を撮ってきたわけではありません 新しい「backgroundExtensionEffect」 修飾子を使うと ビューのコンテンツを切り取ることなく エリアからはみ出させることができます

サイドバーをちょっと消してみると その後ろがどうなっているかわかります セーフエリアの外側に 反転した画像がぼやけて見え 写真が拡大されていますが その内容はすべて見えています 新しいデザインではLiquid Glassが 多用され インスペクタが際立っています サイドバーの反対側には インスペクタによってコンテンツが より繊細なレイヤーで表示されており インスペクタが関連する選択項目に 関連付けられています

「TabViews」は持続的な最上位の ナビゲーションを可能にします それによってコンテンツの概要が 一目でわかるほか セクションの切り替え操作も 最適化されますが 各セクションのコンテキストは維持されます

新しいデザインでは iPhoneのタブバーは コンテンツの上に浮かんで表示され スクロール時には最小化するように 設定できるため 常にアプリのコンテンツを 画面の主役にできます

この動作のために使用する修飾子が 「tabBarMinimizeBehavior」です この例では TVアプリは 「onScrollDown」動作を使用しています

この構成では 逆方向にスクロールすると タブバーが再度拡大されます

ここで例えばアプリに追加の コントロールがあり それを このMusicの再生ビューのように 手近に配置したいとします

「tabViewBottomAccessory」 修飾子で ビューをバーの上に配置します これはタブバーの縮小動作によって 生まれるスペースを利用しています

次にアクセサリビューの中で 「tabViewBottomAccessor Placement」を環境から読み取ります そしてアクセサリがタブバー領域に 格納された際のコンテンツを調整します

これでLandmarksの 「NavigationSplitView」の 新しいデザインのすばらしさをご紹介し 「TabView-based」アプリを調整する 方法も説明したので 次に シートに移りたいと思います 新しいランドマークの コレクションを作成する際は ランドマークオプションのシートが 表示されます iOS 26ではデフォルトで Liquid Glassを 背景とする中間的な高さのシートになります

高さを低くすると 下端が引き上げられて 丸みを帯びた画面の角に収まります

シートを完全な高さまで広げていくと ガラスの背景が徐々に変化して 不透明になり 画面の端に固定されます 「presentationBackground」修飾子を 使用して シートにカスタムの背景を 適用している場合は それを削除して 新しい素材を際立たせてみましょう

シートはそれを表すボタンから 直接モーフィングさせることもできます 表示要素のコンテンツを ソースビューからモーフィングさせるには そのツールバー項目をナビゲーションの ズームトランジションのソースにします そしてシートの内容を トランジション先としてマークします

メニュー アラート ポップオーバーなど 他の表示要素もシートと同様に Liquid Glassのコントロールから スムーズに流れ出て 焦点がそのアクションから 表示要素のコンテンツに移ります

新しいデザインでは ダイアログもそれを表すボタンから 直接モーフィングさせることができます

アプリの構造は 非常にしっかりしていますので 次に ツールバーを見てみましょう 新しいデザインでは ツールバー項目が配置される Liquid Glass表面は アプリのコンテンツ上に浮かび その下にあるものに自動的に適応します ツールバー項目は自動的に分類されます Xcode 26で Landmarksアプリを構築すると カスタムのツールバー項目は システムで用意された戻るボタンとは 別に分類されます

ここで強調したいのは 「お気に入り」と 「コレクションに追加」ボタンは 関連アクションだということです そのため新しい「ToolbarSpacer」APIを 固定間隔で使用して それらを独自のグループに分類しました

これでグループ内のアクションが 関連していることがわかりやすくなります 一方 別に分けられたアクションである リンク共有やインスペクタは 独特の動作をします また「ToolbarSpacer」を使うと ツールバー項目の間で拡大する 柔軟なスペースを作成できます

メールアプリではこの手法を使って 前方揃えのフィルタ項目と 後方揃えのグループに属する 検索や作成などの項目が作成されています

ツールバー項目によっては この視覚的な分類が不要なこともあります 例えば私のアバターを表示した このBooksの項目などです 「sharedBackgroundVisibility」 修飾子を適用すると 項目が背景のない 独自のグループに分類されます

私はLandmarksアプリで 友人が私のランドマークコレクションに 反応を返せる機能を作成したので 新しい反応があったときに 通知を受け取るための インジケータを追加したいと思います 外部からの優しい言葉を 見逃したくありませんから

ツールバー項目で バッジの修飾子を使えば たった1行のコードで その優しい言葉を受け取れます

ツールバー項目のコンテンツに 「バッジ」修飾子を適用すると このインジケータが表示されます 新しいデザインでは ツールバーの項目を分類したり バッジを付けたりできる他にも いくつかの変更が加えられました アイコンはツールバーを含む様々な場所で モノクロ表示されるようになりました

モノクロのパレットを使うことで 視覚的なノイズが減り アプリのコンテンツが強調されて 見やすさも保てます

「.tint()」修飾子を使えば アイコンの色も調整できますが それは単なる視覚効果としてではなく 必要な操作や次の手順など 何かの意味を表すために行ってください

新しいデザインでは 自動の 「スクロールエッジエフェクト」によって コントロールの見やすさが保たれます

これは微妙なぼかしとフェードの効果で ツールバーの下のコンテンツに適用されます アプリでバー項目の後ろに追加的な背景や 暗くする効果を適用している場合は このエフェクトに干渉するので 削除しておいてください

カレンダーアプリのように 浮動する要素が多く高密度なUIの場合は コンテンツに対するエフェクトの シャープさを 「scrollEdgeEffectStyle」修飾子で 調整します

ではツールバーから目を移して 次に 新しいデザインによる 優れた検索機能の 実装方法を説明します 今回 すべてのプラットフォームで2つの 主な検索パターンが刷新されました 「ツールバーで検索」を使うと 検索フィールドが画面下部の使いやすい 位置に配置されます iPadとMacでは このフィールドは ツールバーの上部末端に表示されます 2つ目は このフィールドがマルチタブ アプリの専用ページとして扱われることです Landmarksアプリでは 検索フィールドを 上部の右隅に配置しました この配置を使う場合は アプリのコンテンツをできるだけ多く 検索対象にする必要があります

検索フィールドは独自の Liquid Glass表面上に表示されます

タップすると起動し キーボードが表示されます Landmarksでこのモードを有効にするため 「NavigationSplitView」に 「searchable」修飾子を適用しました ここで この修飾子を宣言することは 検索がいずれかの列だけでなく 「NavigationSplitView」全体に 適用されることを意味します

iPhoneではこのモードが 自動的に適用されて 検索フィールドが画面の下部に表示されます

デバイスの大きさやツールバーボタンの数 その他の要素によっては このメールアプリのように 検索フィールドが最小化されて ツールバーボタンになることもあります

このボタンをタップするとキーボードの上に 完全な幅の検索フィールドが表示されます

最小化された表示を 明示的に選択する場合 例えば検索がアプリの 重要な機能でない場合などは 新しい「searchToolbarBehavior」 修飾子を使います

マルチタブアプリでの検索は多くの場合 専用の検索ページで行われます このパターンは例えば健康状態を チェックするアプリなど Appleのプラットフォーム全体の アプリで採用されています

アプリでこれを実装するには いずれかのタブに検索ロールを設定し TabViewに searchableモディファイアを追加します

ユーザーがこのタブを選択すると タブバーに代わり検索フィールドが表示され タブのコンテンツが表示されます

ユーザーは検索候補を選択したり 検索フィールドをタップして キーボードを表示し 特定の検索語句を入力したりできます

iPadとMacでは ユーザーが検索タブを選択すると アプリの中央に検索フィールドが表示され その下に検索候補が表示されます このパターンにより アプリでの検索体験を より柔軟に管理できます 次に 標準コントロールの アップデートについて説明します 新しいデザインでは すべてのプラットフォームにわたり ボタン スライダ メニューなど コントロールの類似性が強化されています

まず ボタンの アップデートについて説明しましょう 最も一般的なコントロールの1つです ボーダー付きボタンが デフォルトでカプセル形になりました コーナーに丸みを持たせた 新しいデザインと調和しています MacOSのミニサイズ 小サイズ 中サイズ コントロールは角丸四角形のままなので 水平方向の密度が維持されます

既存のボタンの BorderShapeモディファイアを使用すると どのサイズでも形状を指定できます

新しいデザインではコントロールの 高さがアップデートされました

macOSでは ほとんどのコントロールが わずかに縦長になり コントロールラベルの周囲の余白が増え クリックターゲットの サイズが大きくなりました

複雑なインスペクタやポップオーバーなど 既存の高密度レイアウトとの 互換性については 既存のcontrolSizeモディファイアを 単一のコントロールまたは すべてのコントロールに適用できます もっとも重要かつ目を引くアクションは 特大サイズのボタンが サポートされるようになったことです 新しいボタンスタイル glassとglassProminentにより アプリのすべてのボタンにLiquid Glassを 適用できるようになりました 次はスライダについて いくつかヒントをご紹介しましょう

目盛りがサポートされるようになりました stepパラメータを使用して スライダを初期化すると 目盛りが自動的に表示されます

個々の目盛りを 手動で配置することもできます

ticksクロージャを使用して 目盛りの位置を指定します ここでは 目盛りの位置を 60%と90%に指定しています スライダのトラックフィルを 特定の位置から開始することもできます これは 先頭以外のデフォルト値から 値を左右に 調整する場合などに役立ちます 例えば 再生速度を速くする／遅くする などが考えられます

neutralValueパラメータを使用して 開始位置を指定します プラットフォームのメニューが新しくなり レイアウトの一貫性が向上しました メインのアイコンの一貫性が向上し macOSでも使用されるようになりました ラベルまたは標準のコントロール イニシャライザを使用する同じAPIにより どちらのプラットフォームでも 同じ結果が生成されます

SwiftUIのコントロールの アップデートに加え 新しいデザイン向けにコントロールを アップデートする新しいAPIがあります

多数のコントロールは そのコーナーがコンテナ内に 適切に配置されています コンテナがiPhoneの場合も同様です これを「コーナー同心性」といいます 例えば シートの下部に配置されたボタンは シートのコーナーと 同じコーナー中心を共有します

コンテナとの同心性を自動的に 維持するビューを構築するため 同心の長方形を使用します containerConcentric構成を 長方形のcornerパラメータに渡します ディスプレイやウインドウの 形状にかかわらず コントロールの形状が そのコンテナと自動的に一致します 新しいデザインを導入する最善の方法は 標準のアプリ構成 ツールバー 検索の配置 コントロールを使用することです とはいえ アプリのカスタマイズが 必要な場合もあります 次は アプリ用にカスタマイズされた Liquid Glass要素の作成方法です 例えば このマップでは カスタムのLiquid Glassコントロールが マップコンテンツの上に浮かんでいます

同様に Landmarksアプリで 人々が訪れる各ランドマークに バッジを追加します まず Liquid Glass効果を使って カスタムバッジビューを作成しましょう

この効果をカスタムビューに追加するには glassEffectモディファイアを使用します デフォルトでは Liquid Glass効果は コンテンツの背後の カプセル内に適用されます カラフルな背景でも テキストを読みやすくするため SwiftUIによって鮮やかなテキスト色が 自動的に適用されます

このモディファイアに形状を指定して Liquid Glass効果をカスタマイズします

特に重要なビューでは tintモディファイアを使用します

ツールバーのボタンと同様 意味を伝える場合のみ使用し 視覚効果としては使用しないでください

Liquid Glass効果内のテキストと同様 tintでも その背後のコンテンツに合わせて 鮮やかな色が使用されます iOSの場合 カスタムコントロールまたは インタラクティブ要素を持つコンテナでは interactiveモディファイアを glassEffectに追加します ツールバーのボタンやスライダで 提供されている効果により ユーザー操作に反応してガラスが拡大／縮小 したり バウンドしたり 光ったりします これでカスタムバッジを作成できました 次は 複数のバッジを組み合わせて 操作できるようにしましょう 複数のLiquid Glass要素を結合するには GlassEffectContainerを使用します 視覚的に美しく表示するには このグループ化が必須です ガラス素材は光を反射および屈折させ 周囲のコンテンツの色を映し出します この効果を実現するため それ自体より広い 範囲からコンテンツをサンプリングします

ただし ガラスは他のガラスを サンプリングできません そのため 別のコンテナに配置された Liquid Glass要素が近くにある場合 両者の動作に一貫性がなくなります

ガラスコンテナを使用すると これらの要素が サンプリング範囲を共有するため 一貫性のある視覚結果が得られます

Landmarksアプリでは GlassEffectContainerを使用して バッジをグループ化しています バッジを拡張すると このようになめらかに表示されます

これらのトランジションを GlassEffectContainerに追加するには glassEffectIDモディファイアを使用します

これを構成するには まずローカルの名前空間を宣言します 次に その名前空間を バッジの拡張スタックの 各glassEffect要素と トグルボタンに関連付けます このボタンを再度タップすると アワードバッジが再び非表示になります

Liquid Glass効果は 特定の機能を強調して アプリの独自性を際立たせることができる 素晴らしい方法です このクイックツアーでは 新しいデザインの適用方法と Liquid Glassの使用方法を説明しました 次は皆さんの番です Xcode 26を使用して 新しいデザインをアプリに取り入れてください 標準コントロールに自動的に適用できます

アプリのフローを検証し ビューの変更が必要かどうかを確認します 削除可能なシートやツールバーの背景色に 特に注意してください Liquid Glassを使って アプリの存在感を際立たせる 表情豊かなコンポーネントを作成しましょう 新しいデザインを取り入れて 素晴らしいアプリを作成してください 楽しみにしています