モバイルアプリUI/UXデザインマスター

# Figmaの基本操作とデザインシステム構築 ## 今日の学習内容 - Figmaのインターフェースと基本操作 - コンポーネントとバリアントの作成 - カラーパレットとタイポグラフィの設定 - デザイントークンの概念理解 ## 実践した内容 - ボタンコンポーネントの作成（Primary、Secondary、Ghost） - カードコンポーネントのデザイン - 8pt Grid Systemの適用 - ブランドカラーとセマンティックカラーの定義 ## 理解したこと - デザインシステムの重要性と効率性 - コンポーネント設計の考え方 - 一貫性のあるデザインを作る方法 ## 次回の予定 - ワイヤーフレーム作成 - ユーザーペルソナの設定

# ユーザーリサーチとペルソナ作成 ## 実施した調査 - ユーザーインタビュー（5名） - アンケート調査（50名回答） - 競合アプリの分析 - ユーザージャーニーマップの作成 ## 作成したペルソナ - プライマリペルソナ：田中花子（28歳、会社員） - セカンダリペルソナ：山田太郎（35歳、フリーランス） ## ペルソナの詳細 - 利用シーン、課題、ゴール - 技術リテラシーとデバイス使用状況 - アプリに対する期待値と不安要素 ## 学んだこと - ユーザー中心設計の重要性 - 仮説と実際のユーザーニーズのギャップ - データに基づいたデザイン判断の価値

# ワイヤーフレームとUIデザイン作成 ## 作成したスクリーン - オンボーディング（3画面） - ホーム画面 - 商品一覧・詳細画面 - 購入フロー（4画面） - マイページ ## デザインプロセス 1. 情報アーキテクチャの整理 2. ローファイワイヤーフレーム作成 3. ハイファイワイヤーフレーム作成 4. UIデザインの詳細化 5. インタラクションの設計 ## 適用したデザイン原則 - Material Design Guidelines - iOS Human Interface Guidelines - 8pt Grid System - アクセシビリティ（WCAG 2.1） ## 工夫した点 - タップターゲットのサイズ最適化 - カラーコントラストの確保 - 直感的なナビゲーション設計

# プロトタイピングとユーザビリティテスト ## プロトタイプ作成 - Figmaでインタラクティブプロトタイプ作成 - 主要なユーザーフローの実装 - マイクロインタラクションの追加 - スマートアニメーションの活用 ## ユーザビリティテスト - 5名のユーザーでテスト実施 - タスク完了率、エラー率、満足度を測定 - Think Aloud法で思考プロセスを観察 - 定量・定性両面での分析 ## 発見した課題 - ナビゲーションの迷いやすさ - CTAボタンの視認性不足 - フォーム入力の煩雑さ ## 改善実施 - ナビゲーション構造の見直し - ボタンのサイズとカラー調整 - フォームの段階分割と自動入力機能追加 ## 学習効果 - ユーザー視点の重要性を実感 - データに基づく改善の価値 - 継続的な検証の必要性