mobile-app-interface

Expo iOS デザイナー 基本デザインプロンプト 「Expo と React Native を使用して、Apple の Human Interface Guidelines に準拠した、モダンで洗練された iOS アプリをデザインします。明確な階層と調和を優先し、安全領域を尊重します。レスポンシブな Flexbox レイアウトと SF Pro による Dynamic Type を使用し、セマンティックなシステム対応カラーでダークモードをサポートします。タップ領域は最低 44pt を確保します。ネイティブのナビゲーションパターン（タブ、スタック、モーダル）と標準的なジェスチャーを使用します。バー、シート、ポップオーバーなどのオーバーレイには Liquid Glass マテリアルを控えめに適用し、AA コントラストを確保します。目的に沿ったモーションと穏やかな触覚フィードバックを加えます。視差効果を減らす設定と透明度を下げる設定に対応します。Apple のガイドラインに従って、アイコン、スプラッシュ画面、ストア用アセットを用意します。」。

デザインルール

1. 安全領域ルール 画面を SafeAreaProvider/SafeAreaView で囲み、ノッチやホームインジケーターを避けます。インセットをハードコードしてはいけません。

tsx import { SafeAreaView } from "react-native-safe-area-context";

export function Screen({ children }) { return <SafeAreaView style={{ flex: 1 }}>{children}; } 2) タイポグラフィルール SF Pro Text/Display（またはシステムフォント）を、文書化された書体スケールで使用します。ユーザー設定に合わせてテキストが拡大するよう、Dynamic Type をサポートします。

tsx <Text style={{ fontSize: 17, fontWeight: "600" }} accessibilityRole="header"> タイトル <Text style={{ fontSize: 15, color: "#6b7280" }}>補足テキスト 3) タップ領域ルール 正確にタップできるよう、操作可能なコントロールのサイズを最低 44×44pt にし、タップ領域同士に十分な間隔を設けます。

tsx <TouchableOpacity style={{ minHeight: 44, minWidth: 44, justifyContent: "center", alignItems: "center" }} accessibilityRole="button"

操作 4) 色とテーマのルール セマンティックな役割を使用し、テキストや重要な UI で AA コントラストを確保してライトモードとダークモードをサポートします。外観に応じて変化する、システムに適したパレットを優先します。

tsx const scheme = useColorScheme(); const bg = scheme === "dark" ? "#0B0B0B" : "#FFFFFF"; const fg = scheme === "dark" ? "#E5E7EB" : "#111827"; 5) ナビゲーションルール 最上位のセクションにはタブバー、詳細画面への遷移にはスタック、短いタスクにはモーダルを使用します。戻るナビゲーションは iOS のジェスチャーと慣習に合わせます。

重要：Liquid Glass を使うタブバーについて 必ず Expo Router の NativeTabs を使用し、カスタムタブバーは使わないでください。NativeTabs は Liquid Glass エフェクトを内蔵したネイティブの iOS UITabBarController を提供するため、手動で実装する必要はありません！

tsx // ✅ 正しい：Liquid Glass を内蔵したネイティブタブバー import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";

export default function TabLayout() { return ( <NativeTabs.Trigger name="index"> <Icon sf={{ default: 'house', selected: 'house.fill' }} /> ホーム </NativeTabs.Trigger> <NativeTabs.Trigger name="settings"> <Icon sf={{ default: 'gearshape', selected: 'gearshape.fill' }} /> 設定 </NativeTabs.Trigger> ); }

// ❌ 誤り：カスタムタブバーでは Liquid Glass の手動実装が必要 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; const Tab = createBottomTabNavigator();

NativeTabs の機能：

• Liquid Glass のぼかしを内蔵（iOS 26 以降では自動）
• アイコンに SF Symbols を使用（sf プロパティでデフォルトと選択状態を指定）
• ネイティブ iOS のアニメーションと触覚フィードバック
• ライトモードとダークモードに自動で適応
• システムネイティブの動作（Safari、Apple Music などと同様）
• カスタムスタイルは不要

SF Symbols のアイコン例：

• ホーム：house / house.fill
• 設定：gearshape / gearshape.fill
• メッセージ：message / message.fill
• プロフィール：person / person.fill
• 検索：magnifyingglass
• カレンダー：calendar / calendar.fill
• 星：star / star.fill

詳しくはこちら：https://developer.apple.com/sf-symbols/ 6) モーションと触覚フィードバックのルール トランジションは 200～400ms に保ち、ネイティブらしいイーズまたはスプリングを使用します。重要な状態変化や確認には、穏やかな触覚フィードバックを組み合わせます。 tsx import * as Haptics from "expo-haptics"; const onPress = async () => { await Haptics.selectionAsync(); /* action */ }; 7) アクセシビリティのルール accessibilityLabel、Role、Hint、stateを指定し、フォーカス順序が論理的であること、およびすべてのフローでVoiceOverの読み上げが完全であることを確認します。​

tsx <Switch value={isOn} onValueChange={setOn} accessibilityRole="switch" accessibilityLabel="Notifications" accessibilityState={{ checked: isOn }} /> 8) リストとパフォーマンスのルール keyExtractor、任意のgetItemLayout、メモ化した行コンポーネントとともにFlatList/SectionListを使用し、スムーズな60fpsのスクロールを実現するため、不要な再レンダリングを避けます。​

tsx <FlatList data={items} keyExtractor={(it) => it.id} renderItem={memo(({ item }) => )} /> 9) アセットとApp Storeのルール Expoのドキュメントに従ってアイコンとスプラッシュを作成し、Expo GoではなくEASビルドで確認します。ストアのメタデータと権限は、アプリの動作に合わせます。​

json // app.json (excerpt) { "expo": { "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#000000" } } } 10) レイアウトと間隔のルール Flexboxと一貫した間隔スケールで構成し、バランスの取れたアクセシブルなレイアウトになるよう、Dynamic Typeとセーフエリアに合わせてパディングを調整します。​

tsx <View style={{ padding: 16, gap: 12, flex: 1 }}> {/* content */} 11) Liquid Glassマテリアルのルール オーバーレイ面（ナビゲーションバー／タブバー、大きなヘッダー、シート、ポップオーバー、フローティングカード）にLiquid Glassを使用して奥行きを加え、コンテンツの邪魔にならないようにします。ライトモードとダークモードの両方で、変化する背景の上でもAAコントラストを満たしていることを確認します。​

「透明度を下げる」設定を尊重し、不透明または色付きのフォールバックを用意します。彩度が高い、または高周波の背景の上に、密度の高いテキストを配置しないでください。​

マテリアルは控えめにします。読みやすさとパフォーマンスのため、適度な不透明度とぼかしを使用し、画面全体の背景ではなく、UIの装飾部分に限定して適用します。​

12. Expo Glassモジュールのルール 公式モジュール：expo-glass-effect。GlassView、GlassContainer、isLiquidGlassAvailable()を提供し、機能の利用可否を検出して、グループ化したガラス面を構成できます。​

コミュニティ製SwiftUIモジュール：expo-liquid-glass-view。角の半径、スタイル、色合いを細かく調整できます。iOS専用のため、プラットフォームごとのフォールバックを用意してください。​

インストールと基本的な使い方：

bash npx expo install expo-glass-effect tsx import { GlassView } from "expo-glass-effect";

SwiftUIを使用するオプション：

bash npx expo install expo-liquid-glass-view tsx import { ExpoLiquidGlassView } from "expo-liquid-glass-view"; これらはUIVisualEffectView/SwiftUIを介して、ネイティブのiOS Liquid Glassを描画します。サポート対象外のプラットフォームでは、通常のViewに適切にフォールバックします。​

13. 利用可否とフォールバックのルール iOS 26+ではisLiquidGlassAvailable()で利用可否を確認し、フォールバック先の不透明または色付きの面では、AccessibilityInfo.isReduceTransparencyEnabled()も考慮します。​

tsx import { isLiquidGlassAvailable, GlassView } from "expo-glass-effect"; import { AccessibilityInfo, Platform } from "react-native";

const useGlass = async () => { const supported = Platform.OS === "ios" && (await isLiquidGlassAvailable()); const reduceTransparency = await AccessibilityInfo.isReduceTransparencyEnabled(); return { supported, reduceTransparency }; }; 14) マテリアルのパフォーマンスルール アニメーションシーンで画面全体にリアルタイムのぼかしを適用しないでください。ガラスの適用範囲は小さなオーバーレイに限定し、可能な場合はキャッシュして、実機でプロファイリングします。FPSが低下した場合は、静的なぼかしまたは不透明な面にフォールバックします。​

15. アイコンのバリエーションルール システムの色合いや壁紙との一貫した見た目になるよう、更新されたAppleのリソースに従って、ダーク版と色付き版のアイコンを用意します。​

ワークフロー

1. ユーザーへのヒアリング 範囲：画面、フロー、またはコンポーネント。対象のファイル／リポジトリパス。マテリアルの使用例（バー、シート、オーバーレイ）。アクセシビリティとパフォーマンスの目標。​

2. 設計と実装 HIGのパターンと既存のデザインシステムに合わせます。まずUIを構成し、コンポーネントのバリエーションと状態を定義します。​ すべてのルール（セーフエリア、文字、タッチ、色、ナビゲーション、モーション、アクセシビリティ、パフォーマンス、マテリアル、アイコン）を適用します。Dynamic Type、ダークモード、VoiceOver、「透明度を下げる」／「視差効果を減らす」、および iOS 26 での利用可否をテストします。​

デバイス上で、パフォーマンス、ノッチのあるレイアウト、動くコンテンツや壁紙上での読みやすさを検証します。​

3. コンポーネント構造のパターン tsx import { View, Text } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context";

export function ScreenTemplate({ title, children }) { return ( <SafeAreaView style={{ flex: 1 }}> <View style={{ padding: 20, gap: 16 }}> <Text style={{ fontSize: 28, fontWeight: "700" }} accessibilityRole="header"> {title} <View style={{ gap: 12 }}>{children} ); } 品質チェックリスト すべての端と画面の向きでセーフエリアが適切に確保されていること。​

大きな文字サイズで Dynamic Type を検証した、SF Pro／システムフォントを使用していること。​

44×44pt のタッチターゲットと十分な間隔をデバイス上で確認していること。​

セマンティックカラーを使用したライト／ダークモードに対応し、テキストと主要な UI で WCAG AA のコントラストを確保していること。​

iOS に一貫したネイティブのナビゲーションパターンと戻るジェスチャーを使用していること。​

意図的なモーションと穏やかな触覚フィードバックを使用し、「視差効果を減らす」に対応していること。​

アクセシビリティラベル／ロール／ヒント／状態と論理的なフォーカス順序を設定し、VoiceOver で検証していること。​

リストが滑らかでカクつかず、描画と画像が最適化されていること。​

Expo でアイコン／スプラッシュを設定し、EAS ビルドでテストしていること。​

ストアのメタデータと権限が動作に沿っていること。​

Liquid Glass はオーバーレイにのみ使用し、動的な背景上で AA のコントラストを検証していること。​

isLiquidGlassAvailable() で利用可否を確認し、「透明度を下げる」に対応するフォールバックを用意していること。​

マテリアルのパフォーマンスをプロファイリングし、FPS が低下する場合はフォールバックを適用していること。​

更新されたリソースに基づいて、アイコンのダーク／ティント版を用意していること。​

参考資料 Apple HIG：レイアウト、ナビゲーション、マテリアル、タイポグラフィ。​

Expo GlassEffect API とインストールガイド、SwiftUI モジュールのリファレンス。​

Expo のドキュメント：セーフエリア、スプラッシュ／アイコンの設定、プロジェクトのセットアップ、デバイスでのテスト。​

アクセシビリティ：React Native のドキュメントと、ロール、ラベル、フォーカス順序、タッチターゲットのテストガイド。​