mobile-design-ios

このスキルはiOS 26以降と、そのLiquid Glassデザイン言語を対象としています。古いiOSバージョンを対象とするアプリでは、標準のApple Human Interface Guidelinesを使用してください。これらのパターンは一般的なAIの知識で十分にカバーされています。

このスキルでは、プラットフォーム向けに本当にデザインされたと感じられるiOSインターフェースの作成方法を説明します。AIが生成するモバイルUIにはびこる、ありきたりな「テンプレートアプリ」の見た目を避けます。すべてのデザイン上の判断で、iOS 26のLiquid Glassデザイン言語と、プロフェッショナルなアプリと素人っぽいアプリを分ける原則への理解を示す必要があります。

ユーザーは、画面、フロー、コンポーネント、またはアプリ全体のインターフェースなど、iOS UIの要件を提示します。目的、対象ユーザー、技術的な制約に関する情報が含まれる場合もあります。

デザインの考え方

UIを生成する前に、明確なデザインの方向性を決めてください。

• 目的：この画面では何を実現しますか？ユーザーはこの画面にたどり着いたとき、どのような感情を抱いていますか？
• 個性：方向性を選びます。穏やかで静謐、力強くエディトリアル、温かみのあるオーガニック、精密でテクニカル、遊び心がありエネルギッシュ、贅沢で洗練、ミニマルで集中しやすい、などです。アプリの個性には、意図と一貫性が感じられる必要があります。
• コンテンツ優先：iOS 26の哲学は、コンテンツを主役にすることです。Glassはコンテンツの上に浮かび、コンテンツを引き立てます。決して競合しません。まずコンテンツのレイヤーをデザインし、その後にナビゲーションを加えます。
• 差別化：デフォルトのテンプレートではなく、デザインされたアプリだと感じさせる要素は何ですか？ユーザーが気づき、魅力に感じる細部をひとつ挙げるとしたら、何ですか？

重要：Liquid Glassは装飾ではなく、階層を示すためのツールです。Glassを使うのは、ナビゲーション／コントロールのレイヤー（タブバー、ツールバー、フローティングボタン、シート）だけにしてください。コンテンツは不透明にし、コンテンツのレイヤーに配置します。このルールひとつで、iOS 26でありがちな素人っぽいミスの大半を防げます。

iOS 26 Liquid Glass デザインガイドライン

以下に重点を置いてください。

• 階層：厳密な2層モデルを採用します。機能レイヤー（ナビゲーション、ツールバー、フローティングコントロール）には Liquid Glass を使用します。コンテンツレイヤーには標準の不透明なマテリアルを使用します。カード、リスト行、背景などのコンテンツ要素には、決してガラスを適用しないでください。ガラスを重ねて使用しないでください。
• ガラスのバリエーション：デフォルトでは Regular ガラスを使用します。視認性を保つため、ぼかしを加えて輝度を調整します。Clear ガラスは、暗くすると体験が損なわれる写真や動画など、視覚的に豊かなメディア上でのみ使用します。.interactive() モディファイアは主要な操作要素にのみ適用してください。GPU 負荷が増加します。
• グループ化：近くにある複数のガラス要素は GlassEffectContainer で囲みます。これを行わないと、各要素が個別に描画され（パフォーマンスが低下します）、滑らかに結合したり変形したりできません。これは必須であり、任意ではありません。
• タイポグラフィ：重要な場面では、より太く、左揃えにします。セクションヘッダーには、ALL-CAPS ではなくタイトル形式の大文字表記を使用します。ウェイトを強調した Dynamic Type を活用します。テキストはすべて最低 11pt にします。本文には Dynamic Type を完全にサポートする SF Pro を引き続き使用します。ただし、ヒーロー見出しには特徴的なディスプレイフォントを使い、「ありきたりな iOS」の印象を避けます。
• ガラス上の色：ガラス面への色の適用は控えめにします。色付けは、目立たせる単一のアクション（色付きの Done ボタンなど）やステータスインジケーターに限定します。ブランドカラーを使う場合は、ガラスではなくコンテンツレイヤーに配置します。すべてのガラス要素を同じように色付けすると、何も目立たなくなります。
• アイコン表現：SF Symbols 7 には 6,900 種類以上のシンボルが用意されています。バーではテキストラベルよりアイコンを使用します。このプラットフォーム全体の変化を取り入れてください。状態の遷移には、シンボルアニメーション（Draw、Variable Draw、Magic Replace）を使用します。単一のソースカラーから自動グラデーションを適用してシンボルを描画します。
• モーション：ガラス要素は、フェードイン／フェードアウトするのではなく、出現・消失します。状態の変化には変形するトランジションを使用します（スクロール時にタブバーが縮小する、ボタンがポップオーバーに展開する、シートが起点のアンカーからバネのように現れるなど）。モーションは機械的なアニメーションではなく、ゲルのような柔軟さを感じさせるものにします。触覚フィードバックをモーションと組み合わせます。出現時には軽いインパクトを与え、変形の完了に合わせて中程度のインパクトを与えます。
• 形状：ハードウェアの曲線に合う同心円状の角丸半径（ConcentricRectangle）を使用します。シートの角丸半径を大きくし、ハーフシートは画面の端から内側に配置します。iOS 26 より前のバージョンよりも、行の高さ、パディング、間隔を大きくします。
• 奥行き：Liquid Glass は、ドロップシャドウや高さの値ではなく、レンズ効果／屈折、動的な鏡面ハイライト、状況に応じたシャドウによって奥行きを表現します。テキストとの分離を高めるため、シャドウの不透明度は自動的に上がります。奥行きの表現はシステムに任せてください。
• スクロール時の動作：コンテンツはガラスのバーの下をスクロールします。スクロールエッジエフェクトを設定します（コンテンツがバーに近づくと、ぼかし／不透明度が増加します）。下方向にスクロールするとタブバーはコンパクトな形に縮小し、上方向にスクロールすると元に戻ります。
• サイドバーとシート：サイドバーはガラスとともに内側に配置し、背景拡張のぼかし効果で、その背後にもコンテンツを表示できるようにします。ハーフシートはディスプレイの端から内側に配置し、角丸半径を大きくします。アクションシートは画面下部ではなく、必ず起点となる要素からバネのように現れるようにします。アラートはトリガーとなったボタンから直接展開します。

アクセシビリティは必須です

• 通常のテキストでは最低 4.5:1、大きなテキストでは 3:1 のコントラスト比を確保します。ガラスの場合、静的なモックアップではなく、スクロールする背景に対してテストする必要があります。
• Reduce Transparency を検出し、不透明なフォールバックを用意します（.identity ガラスバリエーションを使用します）。
• Reduce Motion を尊重し、変形、レンズ効果、弾性のある動作を無効にします。
• Increase Contrast を尊重し、境界線と前景要素をより強調します。
• 見た目の形状にかかわらず、タッチターゲットは最低 44×44pt にします。
• ライトとダークの両方の外観をサポートします。単一の外観のみを採用するアプリでも、ガラスの適応性を確保するには両方を用意する必要があります。
• iOS 26.1 の Tinted／Clear 切り替え（設定 → 画面表示と明るさ → Liquid Glass）を尊重します。ガラスの不透明度はユーザーが調整できます。

絶対に避けること（iOSの「AIスロップ」を示す特徴）

• コンテンツ要素（カード、リスト行、テーブルセル、背景）にガラス効果を使うこと — これが初心者に最もよくある間違いです
• ガラス効果を重ねること — Appleはこれを明確に警告しています
• ナビゲーションバーやタブバーに独自の不透明な背景を設定すること — Liquid Glassが完全に遮られます
• セクション見出しをすべて大文字にすること — iOS 26ではタイトル形式の大文字表記が使われます
• コンパクトなタブバーのスクロール動作を無視すること — 固定タブバーはiOS 26では古く感じられます
• ブランドらしさのない標準の青い色合いを、あらゆるものに使うこと
• すべての要素に同じ間隔とパディングを使うこと — 密度に変化をつけてリズムを生み出しましょう
• 静的なモックアップだけでコントラストをテストすること — ガラスの見え方は、背後でスクロールするものによって変わります
• Liquid Glassを使うべき場所に、古いUIVisualEffectViewのぼかしマテリアルを使うこと
• アクションシートを画面下部から表示すること — 呼び出し元の要素から飛び出すように表示しましょう
• 「UIのちらつき」問題 — 明るいコンテンツと暗いコンテンツが混在し、バーの外観が急速に切り替わること

プロフェッショナルとテンプレートを分けるもの

iOS 26のプロフェッショナルなアプリには、共通する特徴があります。ガラス効果は、「これはコンテンツの上に浮かぶコントロールである」と伝える場所にのみ使われています。デザイントークンは一元管理され、すべての画面で角丸、パディング、ガラスのレベルに一貫性があります。GlassEffectContainerは関連するガラス要素をまとめ、一体感のあるマテリアルを作ります。色合いは装飾ではなく、意味を伝えます。モーションは意図を持たせ、絶え間ない派手な演出ではなく、意味のある操作に限って使います。「透明度を下げる」設定に対応した場合も、ガラス効果を使う場合と同じように丁寧に設計されています。

「見た目はいいか？」と尋ねる前に、「このガラスの表面は、階層について何を伝えているか？」と考えてください。

覚えておいてください。優れたiOS 26アプリは、Liquid Glassが最初からそこにあったかのように感じられます。よくないアプリは、ガラス効果を後付けの装飾として加えたように感じられます。まずコンテンツ体験を設計し、ガラス効果はそのために使いましょう。