ios-ui-craft

iOS UI Craft

独自性があり、Apple Design Award にふさわしい iOS インターフェースを作成します。このスキルは、美的な細部や、ありきたりな AI 生成のデザインを避ける創造的な工夫に格別の注意を払い、実際に動作する SwiftUI コードを生成します。

ユーザーは、作成したい画面、コンポーネント、ビュー、インターフェースなど、iOS に関する要件を提示します。目的、対象ユーザー、技術的な制約についての情報が含まれることもあります。

デザインを考える

コードを一切書く前に、背景を理解し、大胆な美的方向性を定めます。

1. 目的：このインターフェースはどんな問題を解決しますか？誰が使いますか？
2. トーン：方向性を選びます。穏やか／静謐、遊び心／活気、プレミアム／洗練、実用的／集中、エディトリアル／雑誌風、ブルータリスト／生々しい、温かみ／有機的、冷淡／技術的。選んだ方向性を徹底します。
3. インスピレーション：どの Apple アプリを基準にしますか？（Weather、Health、Fitness、Notes、Apple TV、Journal）
4. 差別化：忘れられない体験にする要素は何ですか？ユーザーが覚えているものは何ですか？
5. ガラスの考え方：ガラスはコンテンツを縁取るものですか？それともコンテンツと競合しますか？

重要：明確なコンセプトの方向性を選び、精密に実現します。大胆なマキシマリズムも洗練されたミニマリズムも有効です。重要なのは強さではなく、意図があることです。

次に、以下の条件を満たす、実際に動作する SwiftUI コードを実装します。

• 本番品質で、実用的に動作する
• 見た目に鮮烈で、記憶に残る
• 明確な美的視点で一貫性がある
• 細部まで丁寧に磨き上げられている

避けるべきアンチパターン

以下は、ありきたりな AI 生成の iOS デザインの特徴です。絶対に避けてください。

アンチパターン	問題点	代わりに
退屈な単色背景	奥行きや雰囲気がない	グラデーション、繊細なテクスチャ、または色のレイヤーを使う
どこでもシステムフォント	タイポグラフィに意図が感じられない	意図的な階層を設け、ディスプレイフォントも検討する
既製品のようなタブバー	個性がない	独自のスタイルや、意味のあるアイコンを使う
紫／インディゴのグラデーション	典型的な AI の粗悪なデザイン	独自性があり、文脈に合ったパレットを見つける
平坦で生気のないインタラクション	楽しさがない	触覚フィードバック、スプリングアニメーション、反応を加える
あらゆるものにガラス効果を使う	目的を損なう	ガラス効果はコントロール／ナビゲーション層に限定する
コンテンツ層を無視する	ガラス効果が不適切な場所に使われる	ガラスはコンテンツを縁取り、決して隠さない
ありきたりなカードレイアウト	影付きの白い四角形にすぎない	文脈に合わせ、目的にかなったコンテナを使う
デザイン要素として絵文字を使う	手抜きで、プロらしくない	SF Symbols やカスタムアセットを使う
色を均等に配置する	控えめで、方向性が定まらない	支配的な色に、鮮やかなアクセントを組み合わせる

iOS の美的ガイドライン

以下に重点を置きます。

• タイポグラフィ：明確な階層を作ります。印象を与えるディスプレイフォントを使い、ウェイトを適切に段階づけます。何にでもシステムフォントを使うのではなく、意図的に選びます。見出しには SF Pro Display、ブランドアイデンティティにはカスタムフォントを検討します。
• 色とテーマ：一貫性のある美的方向性を貫きます。主役となる色と鮮やかなアクセントを組み合わせたパレットは、控えめで均等に分散した配色よりも効果的です。ダークモードは、より個性的な仕上がりにつながることがよくあります。まずダークモードをデザインし、その後ライトモードに調整します。
• モーション：スプリング／弾むようなアニメーションを標準にします。状態を切り替えるのではなく、状態間をモーフィングします。意味のある操作にはすべて触覚フィードバックを加えます。.easeInOut ではなく .bouncy を使います。
• 空間構成：間隔を意図的に設計します（8pt グリッド）。必要な場所には余白を設け、適切な場所には情報を密に配置します。デバイスのハードウェアに合った同心円状の角丸を使います。
• 背景と奥行き：雰囲気を作ります。グラデーション、繊細なレイヤー、放射状の光彩を使います。意図的にミニマルなデザインを選ぶ場合を除き、単調な白背景は避けます。

3 つの原則

原則	説明
階層	コントロールはコンテンツの上に配置します。ガラスはコンテンツを縁取り、決して隠しません。コンテンツが最優先です。
調和	ソフトウェアのデザインをハードウェアに調和させます。同心円状の角丸。滑らかなジェスチャー。
一貫性	iPhone、iPad、Mac に合わせて柔軟に適応させます。同じアイデンティティを保ちながら、状況に応じて表現を変えます。

必読項目

実装を始める前に、API のパターンについて共通の Liquid Glass リファレンスを読んでください。

skills/ios-liquid-glass/ - Liquid Glass のコア API、コードパターン、ナビゲーションパターン、アニメーションの理念、触覚フィードバック

このリファレンスには、技術的な実装の詳細が記載されています。このスキルが美的なビジョンを示し、リファレンスがコードパターンを示します。

伝わるタイポグラフィ

すべてにシステムフォントを使うのは避けてください。タイポグラフィに階層を設けましょう。

// Display fonts for headers
Text("Dashboard")
    .font(.largeTitle.bold())
    .foregroundStyle(.primary)

// Secondary information
Text("Last updated 5 min ago")
    .font(.subheadline)
    .foregroundStyle(.secondary)

// Consider custom fonts for brand identity
Text("Premium")
    .font(.custom("PlayfairDisplay-Bold", size: 32))

フォントのおすすめ

用途	選択肢
ディスプレイ	SF Pro Display、New York、カスタムセリフ
本文	SF Pro Text（システム）、カスタムサンセリフ
テクニカル	SF Mono、カスタム等幅フォント
エディトリアル	New York、個性のあるカスタムセリフ

意図を持った色使い

基調色＋アクセントカラー

色を均等に散りばめないでください。次の色を選びます。

• ひとつの基調色でブランドやムードを定義する
• アクションや強調には鮮やかなアクセントカラーを使う
• コンテンツを読みやすくするニュートラルなベースカラーを使う

ダークモードファースト

ダークモードのほうが、より個性的な仕上がりになることがよくあります。まずダークモード向けにデザインし、それからライトモードに適応させます。

// Semantic colors that adapt
.foregroundStyle(.primary)
.foregroundStyle(.secondary)
.background(.background)

// Accent with purpose
.tint(.accentColor)

開発ループ：スクリーンショットを使った反復

視覚的に確認せずに UI 作業を提出してはいけません。 スクリーンショットスクリプトを使い、画面の機能性と美しさの両方に納得できるまで反復してください。

# Screenshot simulator
xcrun simctl io booted screenshot /tmp/screenshot.png && sips --resampleHeightWidthMax 1800 /tmp/screenshot.png

ループの手順：

1. 変更を実装する
2. シミュレーターのスクリーンショットを撮る
3. 厳しく評価する — 人に見せたくなる仕上がりですか？
4. そうでなければ反復する — 修正して、もう一度スクリーンショットを撮る

次の状態になるまで反復してください。

• 友人に見せるために、誇らしい気持ちでスクリーンショットを撮れる
• App Store の特集に掲載されてもおかしくない
• Apple のマーケティング資料にふさわしいと感じられる

これが品質基準です。人に見せたくなること、賞にふさわしいこと。

品質チェックリスト

UI を完成とみなす前に、次を確認してください。

• 明確な美的方向性を定めた（ありがちなデザインではない）
• Glass の適用先をナビゲーションレイヤーのみにした（コンテンツではない）
• 意味のあるすべての操作に触覚フィードバックを付けた
• バネのような弾むアニメーションを使った（線形ではない）
• SF Symbols を使った（絵文字や無作為なアイコンではない）
• ダークモードでテストし、仕上げた
• タイポグラフィの階層が明確で、意図的である
• 色に目的があり、デフォルトの青ではない
• 適切な箇所にモーフィングトランジションを使った
• ローディング状態をアニメーション表示した
• 空の状態をデザインした
• エラー状態に役立つ情報を含め、スタイルを整えた
• アクセシビリティ設定を尊重した
• スクリーンショットを撮り、目で見て確認した
• 誰かに見せるためにスクリーンショットを撮りたいと思える（そうでなければ、反復する）

必ず守ること

忘れないでください。Claude は並外れた創造的な仕事を成し遂げる力を持っています。「動く」だけで満足せず、記憶に残るものを目指してください。

すべてのインターフェースには、次の要素が必要です。

1. 確かな視点 - 明確な美的方向性
2. 意図的な細部 - 偶然に任せたものがない
3. 心に響く体験 - ユーザーの心を動かす
4. 技術的な卓越性 - 滑らかで、高速で、アクセシブル

目指すのは、Apple Design Award にふさわしいアプリです。生成されたものではなく、本当にデザインされたと感じられるアプリを作りましょう。

関連スキル

• /ios-dev - iOS に関するあらゆる作業はここから始めてください。ガイド、正確性の確認、API リファレンスをまとめて案内します
• /ios-design-consultant - コーディング前にデザインについて相談する場合