ios-ux-prototype

iOS UX プロトタイプ

リアルな iPhone のモックアップを使って、モバイルアプリのユーザージャーニーを示すインタラクティブな HTML プロトタイプを作成します。

クイックスタート

1. assets/ios-design-system.css の CSS を新しい HTML ファイルにコピーします
2. assets/sf-symbols.svg のスプライトを <body> の上部付近に一度貼り付けます
3. 構成：ページヘッダー → ジャーニーの行 → コンテンツを含むスマートフォンのフレーム
4. 画面間にフロー矢印を追加し、コールアウト用の注釈を付けます

iOS 26 のデザイン（デフォルト）

現在の iOS 26 のデザイン言語である Liquid Glass のサーフェスと SF Symbols を使用します。ユーザーが古いデザインを求めている場合を除き、デフォルトで適用してください。

• Liquid Glass のフローティングタブバー — .tab-bar を使用します（画面の端から離れた、ぼかしのかかった半透明のカプセル状のバーです。選択中のタブには、独立したガラスの「レンズ」ピルが表示されます）。スクロール画面では .scroll-content に padding-bottom: 104px を指定し、行がフローティングバーと重ならないようにします。
• Liquid Glass のナビゲーション／ツールバーボタン — 末尾のアクションには、通常のテキストではなく .nav-glass-btn（円形）または .nav-glass-btn.text（ピル状）を使用します。
• 絵文字ではなく SF Symbols — UI の操作要素、リストアイコン、タブアイコン、アクションには絵文字を使用しないでください。スプライト内のグリフを参照します。 <svg class="sf"><use href="#sf-house"/></svg>。グリフは currentColor を継承します。
  • 国旗のみ、絵文字の使用が許可されています（SF Symbols に国旗のグリフがないため）。
  • 必要なグリフがスプライトにない場合は、既存のパターンに従って、新しい <symbol>（24×24 viewBox）を追加します。
• CSS により、ガラス風のセグメントコントロールと半透明のシステムアラートをそのまま使用できます。

<div class="nav-large with-action">
  <h1>Proxies</h1>
  <span class="nav-glass-btn"><svg class="sf"><use href="#sf-plus"/></svg></span>
</div>


<div class="tab-bar">
  <div class="tab-item active">
    <svg class="tab-ic"><use href="#sf-house"/></svg>
    <span class="tab-label">Home</span>
  </div>
  <div class="tab-item">
    <svg class="tab-ic"><use href="#sf-gear"/></svg>
    <span class="tab-label">Settings</span>
  </div>
</div>

よく使うスプライトのグリフ：sf-house、sf-globe、sf-antenna、sf-gear、 sf-person、sf-magnifier、sf-bell、sf-star、sf-chevron、 sf-chevron-down、sf-back、sf-arrow-up/down、sf-refresh、sf-plus、 sf-check、sf-xmark、sf-ellipsis、sf-share、sf-trash、sf-heart、 sf-paintbrush、sf-doc、sf-clipboard、sf-folder、sf-photo、sf-qrcode、 sf-link、sf-list、sf-lock、sf-shield、sf-bolt、sf-power、sf-info、 sf-clock、sf-chart、sf-wifi、sf-nosign、sf-compass。

ページ構成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[App] User Journey</title>
  <style>/* Copy from assets/ios-design-system.css */</style>
</head>
<body>
  <div class="page">
    <header class="page-header">
      <h1>Journey Title</h1>
      <p>Description of the navigation flow</p>
    </header>
    <div class="journey-row">
      
    </div>
  </div>
</body>
</html>

基本コンポーネント

ジャーニーのステップ

<div class="journey-step">
  <div class="step-header">
    <div class="step-number">1</div>
    <span class="step-title">SCREEN NAME</span>
  </div>
  <div class="phone-frame">
    <div class="phone-screen">
      <div class="screen-layout">
        <div class="status-bar">
          <span class="status-bar-left">9:41</span>
          <div class="status-bar-right">
            
            <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor"><path d="M1 4.5C1 3.67 1.67 3 2.5 3h1C4.33 3 5 3.67 5 4.5v4C5 9.33 4.33 10 3.5 10h-1C1.67 10 1 9.33 1 8.5v-4zM6 3.5C6 2.67 6.67 2 7.5 2h1C9.33 2 10 2.67 10 3.5v5c0 .83-.67 1.5-1.5 1.5h-1C6.67 9 6 8.33 6 7.5v-5zM11 2.5c0-.83.67-1.5 1.5-1.5h1c.83 0 1.5.67 1.5 1.5v6c0 .83-.67 1.5-1.5 1.5h-1c-.83 0-1.5-.67-1.5-1.5v-6z"/></svg>
            
            <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor"><path d="M7.5 2.5a6.5 6.5 0 0 1 4.6 1.9.75.75 0 1 0 1.06-1.06A8 8 0 0 0 7.5 1a8 8 0 0 0-5.66 2.34.75.75 0 0 0 1.06 1.06A6.5 6.5 0 0 1 7.5 2.5zM7.5 5.5a4 4 0 0 1 2.83 1.17.75.75 0 1 0 1.06-1.06A5.5 5.5 0 0 0 7.5 4a5.5 5.5 0 0 0-3.89 1.61.75.75 0 0 0 1.06 1.06A4 4 0 0 1 7.5 5.5zM9.25 8.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z"/></svg>
            
            <svg width="25" height="12" viewBox="0 0 25 12" fill="currentColor"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="currentColor" fill="none"/><rect x="22" y="4" width="2" height="4" rx="1"/><rect x="2" y="2" width="17" height="7" rx="1"/></svg>
          </div>
        </div>
        
      </div>
      <div class="home-indicator"></div>
    </div>
  </div>
</div>

注： スマートフォンのフレームには、デフォルトでノッチスタイルのベゼルが使われます。代わりに Dynamic Island スタイルを使用するには、.phone-frame に dynamic-island-style クラスを追加し、<div class="dynamic-island"></div> 要素を含めます。

フロー矢印

<div class="flow-arrow">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
</div>

注釈コールアウト

<div class="annotation right" style="top: 200px; left: -150px;">Tap here →</div>

ナビゲーションパターン

大きなタイトルのナビゲーション

<div class="nav-large"><h1>My Apps</h1></div>

戻るボタン付きのインラインナビゲーション

<div class="nav-inline">
  <div class="nav-inline-left">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
      <path d="M15 18l-6-6 6-6"/>
    </svg>
    <span>Back</span>
  </div>
  <span class="nav-inline-title">Title</span>
  <span class="nav-inline-right">Edit</span>
</div>

セグメントコントロール（3～5 個の選択肢）

<div class="segmented-control">
  <div class="segment active">Tab 1</div>
  <div class="segment">Tab 2</div>
  <div class="segment">Tab 3</div>
</div>

スクロール可能なタブ（選択肢が多い場合）

<div class="scrollable-tabs">
  <div class="scroll-tab active">iPhone 6.7"</div>
  <div class="scroll-tab">iPhone 6.5"</div>
  <div class="scroll-tab">iPad Pro</div>
</div>

コンテンツコンポーネント

アプリリストの行

<div class="app-row selected">
  <div class="app-icon blue">A</div>
  <div class="app-details">
    <div class="app-name">App Name</div>
    <div class="app-meta">v1.0.0 · iOS</div>
  </div>
  <span class="app-badge review">In Review</span>
  <span class="chevron">›</span>
</div>

アクションカードのグリッド

<div class="action-grid">
  <div class="action-card highlighted">
    
    <div class="action-icon blue" style="color:var(--blue)">
      <svg class="sf"><use href="#sf-bolt"/></svg>
    </div>
    <h3>Feature</h3>
    <p>Description</p>
  </div>
</div>

リストグループ

<div class="list-group">
  <div class="list-row">
    
    <div class="list-icon yellow"><svg><use href="#sf-star"/></svg></div>
    <span>Setting</span>
    <span class="chevron"><svg><use href="#sf-chevron"/></svg></span>
  </div>
</div>

フォームカード

<div class="form-card">
  <div class="form-row">
    <div class="form-row-icon">📦</div>
    <span class="form-row-label">Label</span>
    <span class="form-row-value">value</span>
  </div>
  <div class="form-input">
    <label>Field Name</label>
    <input type="text" value="Content">
  </div>
</div>

カラークラス

アイコン：.blue、.purple、.orange、.cyan、.green、.yellow、.red、.gray

バッジ：.app-badge.review（オレンジ）、.app-badge.ready（グリーン）、.app-badge.draft（パープル）

ハイライト：.action-card.highlighted（青い境界線の光彩）

セクション区切り（別のフロー）

<div class="section-divider">
  <div class="section-divider-line"></div>
  <span class="section-divider-text">Alternative Flow</span>
  <div class="section-divider-line"></div>
</div>

リソース

• assets/ios-design-system.css - CSS デザインシステム一式（HTML にコピー）
• assets/sf-symbols.svg - SF Symbols のスプライトシート（<body> に一度貼り付け）
• references/ios-components.md - すべてのバリエーションを含むコンポーネントの詳細ドキュメント