📌 概要
画面設計と実装が「バラバラ」になっていませんか？このスキルは ASCII アートのワイヤーフレーム提案 から XAML + ViewModel の実装 まで、UI 設計の全流れをサポートします。設計承認後に実装するため、仕様ズレが激減します。
🤔 背景・なぜ必要か
従来の UI 開発の課題
❌ 従来フロー:
実装者が勝手に XAML 書く
↓
ユーザー「イメージと違う」
↓
一から作り直し（時間ロス）
スキルの解決方法
✅ スキル2のフロー:
1️⃣ ワイヤーフレーム提案（ASCII アート + 説明）
2️⃣ ユーザーと認識合わせ
3️⃣ 承認後に XAML 実装
メリット:
- 設計段階で「コンポーネント配置・ボタンサイズ」を確定
- 実装者が XAML 書くまでに迷いがない
- アクセシビリティ（SemanticProperties）を最初から組込み
💻 実装方法
ステップ1: ワイヤーフレーム提案を依頼
スキルに指示:
「習慣追加画面のワイヤーフレームを提案してください」
生成例:
# 画面名: 習慣追加画面 (AddHabitPage)
## 🎯 画面の目的
新しい習慣を登録し、目標・頻度・リマインダーを設定します。
## 📐 レイアウト構成
┌────────────────────────────┐
│ ← Back Add New Habit │
├────────────────────────────┤
│ Habit Name │
│ [____________] │
│ │
│ Goal Time │
│ [____________] /day │
│ │
│ Category │
│ [Category ▼] │
├────────────────────────────┤
│ [Cancel] [Save] │
└────────────────────────────┘
ステップ2: 認識合わせ
ユーザーがフィードバック:
「Category ドロップダウンではなく、タグ式で複数選択できるようにしたい」
スキルが修正案を提案 → 承認
ステップ3: XAML 実装
承認後、スキルに指示:
「このワイヤーフレームを XAML で実装してください」
生成例:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
Title="Add New Habit"
BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#1E1E1E}">
<VerticalStackLayout Padding="20" Spacing="15">
<Label Text="Habit Name"
FontSize="16" FontAttributes="Bold"
SemanticProperties.HeadingLevel="Level2" />
<Entry Placeholder="e.g., Running"
Text="{Binding HabitName}"
SemanticProperties.Hint="Enter habit name" />
<Label Text="Goal Time"
FontSize="16" FontAttributes="Bold" />
<HorizontalStackLayout Spacing="10">
<Entry Placeholder="30" Text="{Binding GoalTime}" WidthRequest="80" />
<Label Text="minutes/day" VerticalTextAlignment="Center" />
</HorizontalStackLayout>
<Button Text="Save"
Command="{Binding SaveCommand}"
Padding="15" CornerRadius="8"
HorizontalOptions="Fill"
SemanticProperties.Hint="Save habit" />
</VerticalStackLayout>
</ContentPage>
⭐ ポイント
1. 設計段階でのチェック項目
- ✅ タッチ領域: ボタンは最小 48x48dp か？
- ✅ カラー: 明テーマ・暗テーマ両対応か？
- ✅ テキスト: フォントサイズ最小 12sp か？
- ✅ アクセシビリティ: SemanticProperties を含めるか？
2. Android UI のベストプラクティス
<!-- ✅ 良い例 -->
<Button Padding="15" CornerRadius="8" FontSize="16"
SemanticProperties.Hint="Save habit"
HeightRequest="48" />
<!-- ❌ ダメ例 -->
<Button Text="Save" Padding="2" FontSize="8" />
3. AppThemeBinding で明暗対応
<Label Text="Title"
TextColor="{AppThemeBinding Light=#000000, Dark=#FFFFFF}" />
<Frame BackgroundColor="{AppThemeBinding Light=#F5F5F5, Dark=#2D2D2D}" />
4. 実装後の確認
- 実機テスト（エミュレータでなく実物）
- 暗いテーマでテキスト見えるか
- タッチして反応するか
✅ まとめ
UI 設計スキルは、「ユーザーの期待」と「実装」のギャップを埋める 仕組みです。ワイヤーフレーム段階で「これでいいか」と合意することで、無駄な作り直しがなくなり、Android 最適化も最初から組み込めます。
毎回、設計 → 実装の流れで進めることが、品質の高い UI 開発の秘訣です！
コメント