利益:
- Jetpack Compose および SwiftUI 用の堅牢なインターフェイス コードを、目的、コンポーネント、4 つの状態 (読み込み/空/エラー/フル)、デザイン システム、アクセシビリティの順序で作成する機能
- 正しいラベル付け、十分なコントラスト、適切なタッチを備えたアクセシビリティを最初から定義することで、すべてのユーザーに開かれたインターフェイスを作成する機能。
- 中心テーマから色と空間を読み取ることで、一貫性のある多言語および明暗テーマに対応したインターフェイスを作成する機能
モバイル アプリの成功は、主にユーザー インターフェイス (UI - ユーザーが見たり触れたりする画面) とユーザー エクスペリエンス (UX - どれだけスムーズで楽しい使用感) によって決まります。ユーザーには悪いコードは見えませんが、最初の 1 秒でインターフェイスが悪いと感じます。 AI はインターフェイス開発において 2 つの強力な役割を果たします。1 つはデザインのアイデア、フロー、テキスト (UX ライティング) を生成することです。一方、この設計は動作するインターフェイス コードに直接変換されます。この単元では、最新の宣言型インターフェイス ツールである Jetpack Compose (Android) と SwiftUI (iOS) に焦点を当てて、AI を使用して高速でアクセスしやすく一貫性のあるインターフェイスを作成する方法を学びます。 「宣言的」とは、画面の描画方法を段階的に説明するのではなく、「この状況では画面はこうあるべきである」と記述することを意味します。残りの作業はツールが行います。
デザインからコードまで: 正しい順序
AIに「美しい画面を作ってください」と言うのは、「美しい」というのは測定できないので曖昧です。適切なインターフェイスの生成は次の順序に従います。
- 目的と内容。画面は何をするのか、どんな情報を表示するのか、ユーザーは何をするのか?
- コンポーネントリスト。タイトル、リスト、ボタン、フォームフィールドなどのパーツ。
- 状況。読み込み中、空 (データなし)、エラー、フル — 4 つの基本的な画面状態。
- デザインシステム。色、タイポグラフィー、間隔のルール。マテリアル 3 (Android) または iOS のヒューマン インターフェイス ガイドラインに概ね準拠しています。
- アクセシビリティ。スクリーン リーダーのラベル、適切なコントラスト、タッチ ターゲットのサイズ。
- コード。ここまで述べたところで、Composable または SwiftUI View の生成。
最も頻繁にスキップされるステップは 3 番目のステップです。開発者は「完全な」状態のみを考慮します。一方、実際のアプリケーションでは、ユーザーはほとんどの場合「読み込み」と「エラー」の状況に遭遇します。 4 つの状態すべてを AI に出力することが、堅牢なインターフェイスの秘密です。
ヒント: プロンプトの最後に「読み込み、空、エラー、完全を個別に生成」を追加します。この 1 つの文により、インターフェイスが現実世界に対応できるようになり、QA (品質テスト) フェーズでのエラーの数が大幅に減少します。
アクセシビリティは交渉の余地のないものです
アクセシビリティ (視覚、聴覚、または運動障害のあるユーザーがアプリケーションを使用できること) は、倫理的責任であると同時に、店舗および法的な期待でもあります。 AI は必要に応じてアクセス可能なコードを生成します。望ましくない場合は、タグのない低コントラストのインターフェイスを返します。 3 つの経験則: 各インタラクティブ要素にスクリーン リーダーにとって意味のあるラベル (contentDescription / accessibilityLabel)、テキストと背景の間の適切な色のコントラスト (少なくとも 4.5:1 の比率)、および少なくとも 48x48 dp/44x44 pt のタッチ ターゲットを指定します。 AIにこれらのことを明確に質問してください。
注意: AI は装飾アイコンに長いアクセシビリティ タグを追加することもできます。これにより、スクリーン リーダーのユーザーは不必要なおしゃべりで圧倒されてしまいます。純粋に装飾的な要素は「アクセシビリティから隠す」必要があります (スクリーン リーダーによるスキップを許可します)。作成されたラベルを確認します。意味のあるものは語らせ、装飾的なものは沈黙させます。
一貫性: デザインシステムとテーマ
プロフェッショナルなアプリケーションでは、ランダムな色や間隔は使用しません。デザイン システム (色、フォント、間隔、およびコンポーネントの標準セット) に従います。 AIにテーマの値（メインカラー、セカンダリカラー、コーナー半径、タイポグラフィスケール）を与えると、すべての画面が一貫したものになります。そうしないと、各画面で異なる青の色合いが使用され、アプリが乱雑に見えます。最も効率的な方法は、まず AI にテーマ/デザイン トークン ファイルの生成を依頼し、その後すべての画面をそのテーマにバインドすることです。
件名
下手なアプローチ
強力なアプローチ
色
各画面を手動で色分けする
中心テーマ、テーマから読み込む画面
状況
「全画面」のみ
ロード中/空/エラー/フルの 4 つの状態
アクセシビリティ
後で追加
請求項に最初から定義されている
テキスト
コードに埋め込まれている
独立したソース、多言語対応
ミニケース3個
ケース 1 — 空のケースが保存されました。ニュースアプリチームはAIに個々の画面状態を出力させました。 「アイドル ステータス」画面 (「ニュースはまだ保存されていません」) のおかげで、ユーザー テストの参加者の 70% が空白の画面でアプリを終了することはありませんでした。以前のバージョンでは、空白の画面が白いままになり、ユーザーは「壊れた」と思って離れてしまいました。少量のコピーで定着率が向上しました。
ケース 2 — コントラストの拒否。あるチームは、ブランドカラーであるライトグレーの文字が入った画面をApp Storeに申請した。 Appleは、コントラストが低いため、アクセシビリティを理由に警告を発しました。 AIに「文字と背景のコントラストを4.5:1以上に増やす」ように指示すると、色が暗くなり問題は解決しました。最初から要望していれば遅れることはなかったのに。
ケース 3 — 装飾的なラベルのノイズ。視覚障害のあるテスターは、AI が生成した画面上ですべての装飾アイコン (「線」、「点」、「影」) が読み上げられ、画面が使用不能になったと報告しました。装飾要素がアクセシビリティから隠蔽されると、スクリーン リーダーのエクスペリエンスは流動的になりました。教訓: アクセシビリティとは、「多すぎるタグ」ではなく、「適切なタグ」を意味します。
弱いプロンプト / 強いプロンプト
弱いプロンプト: 「プロフィール画面をデザインしてください。」
強力なプロンプト: 「iOS/SwiftUI のユーザー プロファイル画面を生成します。コンテンツ: アバター、名前、電子メール、[プロファイルの編集] ボタン、設定リスト。ステータス: 読み込み中 (スケルトン)、エラー (再試行ボタン)、フル。デザイン: 非マテリアル、iOS HIG 準拠、システム カラー、ダイナミック タイプ。アクセシビリティ: 各要素へのアクセシビリティラベル、装飾アイコンの非表示、タッチ ターゲット最小 44 ポイント。別のファイルからテーマ値を読み取り、カラー コードを埋め込まないでください。まずコンポーネント ツリーを描画し、次にコードをエクスポートします。」
コピー可能なテンプレート
画面生成テンプレート: 「[プラットフォーム/ツール] の [スクリーン名] を生成します。コンテンツ: [要素]。ユーザー アクション: [アクション]。4 つの状態を個別に生成: 読み込み中、空、エラー、フル。デザイン システム: [マテリアル 3 / iOS HIG]、テーマ トークンから読み取ります。アクセシビリティ: ラベル、コントラスト >=4.5:1、タッチ ターゲット標準。」
テーマ/デザイン システム テンプレート:「アプリの中心的なテーマ定義を作成します ([テーマの作成 /SwiftUI のデザイン トークン構造]):- プライマリ カラー [16 進数]、セカンダリ [16 進数]、エラー カラー、サーフェイス カラー - タイポグラフィ スケール (タイトル、本文、説明)- 間隔スケール (4,8,16,24)- コーナー半径標準明るいテーマと暗いテーマのサポートを追加します。」
アクセシビリティ監査テンプレート:「この画面コードのアクセシビリティを確認してください:1) タグ付けされていないインタラクティブ要素はありますか?2) コントラスト比は適切ですか?3) タッチ ターゲットは十分に大きいですか?4) 装飾的な要素はスクリーン リーダーから隠されていますか?各問題の修正を提案します。[コード]」
デザインからコードへのテンプレート: 「次のデザインについて説明します: [画面の説明またはスクリーンショット]。これを [Compose/SwiftUI] コードに変換します。間隔と配置をデザインに忠実に保ちますが、4 つの状態をすべて追加します。」
よくある間違い
- 全体的な状況について考えているだけです。ほとんどの場合、実際のユーザーは読み込み/エラー画面を目にします。
- コードに色とスペースを埋め込む。テーマが中心になっていないと、一貫性が失われ、メンテナンスが困難になります。
- アクセシビリティは最後に残しておきます。後で追加するとコストがかかります。最初からご依頼いただければ費用は無料です。
- 過剰なラベル付け。装飾要素を読み取らせると、スクリーン リーダーのエクスペリエンスも中断されます。
- コードにテキストを埋め込む。多言語対応が必要な場合、各画面を手動で変更する必要がありますが、テキストは別にしてください。
- スクリーンショットからの正確なコピーが期待されます。 AI 設計により、約ピクセル精度は手動で設定されます。
要約すれば
AI はインターフェイスの作成において強力ですが、ガイダンスが必要です。正しい順序: 目的、コンポーネント、4 つの状態 (読み込み中/空/エラー/フル)、デザイン システム、アクセシビリティ、次にコード。アクセシビリティは交渉の余地のないものであり、「多すぎるラベル」ではなく「適切なラベル」を意味します。一貫性を保つために、中心テーマから色と間隔を読み取り、コードに埋め込まないでください。強い意志がこれらすべてを最初から定義します。したがって、インターフェイスは現実世界、店舗の承認、およびすべてのユーザーに対応する準備ができています。
アプリケーションタスク
設定画面の「画面生成テンプレート」を使用して、Compose または SwiftUI のコードを AI に要求し、4 つの状態すべてを要求します。次に、同じコードを「アクセシビリティ チェック テンプレート」でチェックします。少なくとも 1 つのアクセシビリティ改善 (ラベルの欠落、低コントラスト、または小さいタッチ ターゲット) を見つけて修正し、実際の使用時にどのステータス (読み込み中/空/エラー) が最も頻繁に表示されると思われるかをメモします。
チェックリスト
- [ ] プロンプトで表示の目的とコンポーネントを明確にしました
- [ ] 4 つの状態 (読み込み中/空/エラー/フル) を個別に生成しました
- [ ] 色と空間は中心テーマから読み取らせたもので、コードには埋め込みませんでした。
- [ ] 最初からアクセシビリティラベルとコントラストが欲しかった
- [ ] スクリーンリーダーから装飾要素が非表示になっていることを確認しました
- [ ] テキストを別々にして、複数の言語に対応できるようにしました