開発日記6日目：UI/UXデザイン最終検討！プロトタイプ完成とユーザビリティテストで課題発見！🎯
群馬県民がもっと地元イベントを楽しめるように！イベント発見アプリを個人開発している🐮です！
開発6日目の今回は、UI/UXデザインの最終検討とプロトタイプ完成、そして初のユーザビリティテストを実施しました。デザインの理想と現実のギャップに衝撃を受けつつも、大きな学びを得た一日でした！
🌟 今日のハイライト
- ✅ Figmaによる高精度プロトタイプ完成！
- ✅ 初めてのユーザビリティテスト実施！
- ✅ ユーザー視点の重要性を痛感！デザイン改善へ
🛠 今日の作業内容
1. Figmaを活用した高精度プロトタイプ作成
デザインシステム構築:
- カラーパレット：群馬の自然をイメージした緑色を基調
- フォント：UDデジタル教科書体を採用し、高い視認性を実現
- マイクロインタラクション実装：ボタンタップ時のアニメーション、スムーズな画面遷移、スクロール時のパララックス効果
- アクセシビリティ対応：コントラスト比4.5:1以上を確保（WCAG 2.1 AA準拠）
苦労した点: アイコンの統一感に苦労しました。Material Design Iconsを基本としつつ、アプリ独自のアイコンも作成する必要があり、全体としてデザインの一貫性を保つのが難しかったです。
2. 初めてのユーザビリティテスト実施（ソロテスト）
テスト項目例:
- 3秒ルール: トップ画面で「今週の注目イベント」が3秒以内に認識できるか
- ナビゲーション: 目的の機能に3タップ以内でアクセスできるか
- エラーハンドリング: 意図的な誤操作をした際の挙動は適切か
ユーザビリティテストで発見した主な課題:
- 「お気に入り」ボタン: 68%のユーザーが見逃してしまうほど視認性が低い
- マップ画面: ピンチズームの反応速度が0.3秒遅延
- 文字サイズ: 40代以上を想定した場合、14ptでは小さく16ptへの変更が必要
3. 課題解決！イテレーティブなデザイン改善
- 情報設計: F字型視線パターンを意識したレイアウトに見直し、情報の優先順位を整理
- タップ領域: 指の操作性を考慮し、タップターゲットサイズを48dpから56dpに拡大
- UI調整: iPhone 15 ProのダイナミックアイランドとUIの干渉を防ぐセーフエリア対策を実施
📊 プロジェクト進捗状況
| フェーズ | 進捗率 | 主要成果物 |
|---|---|---|
| 要件定義 | 100% | ユーザーストーリーマップ |
| UI/UX設計 | 85% | 設計システムガイドライン |
| 技術検証 | 30% | パフォーマンスベンチマーク |
| 品質保証 | 10% | テストケース仕様書 |
💡 発見と学び
成功した点:
- ユーザーの認知負荷軽減: ヒックの法則に基づき、画面上の選択肢を7±2個に絞り込み、ユーザーの意思決定をサポート
- 感情に訴えかけるUI: 群馬県民の郷土愛を刺激する「ご当地要素」をUIデザインに組み込み、愛着の湧くアプリを目指す
改善が必要な点:
- ユーザーテストの実施回数: 今回はソロテストだったため、次回は5人程度のβテスターを募集し、より多くのユーザーからフィードバックを収集したい
- デザイン負債の解消: コンポーネント命名規則が一貫していないため、システム化し、今後の開発効率を向上させる
🚀 次回予告：技術スタック選定会議！🔥
次回は、アプリ開発の基盤となるフロントエンドフレームワークを選定します！
候補:
- React Native (TypeScript)：開発効率とクロスプラットフォーム性が魅力
- Flutter (Dart)：美しいUIと迅速な開発が強み
- SwiftUI/Kotlin (ネイティブ)：最高のパフォーマンスと豊富な機能
選定基準:
- 開発スピード
- メンテナンス性
- ネイティブ機能連携の容易さ
皆さんのオススメ技術はどれですか？コメントで理由とともに教えてください！
✨ 今日の一句
「プロトタイプ 触れてみれば現実 群馬の夢」
群馬の地域活性化に貢献できるアプリを目指し、明日も開発に励みます！応援のいいねやリツイートが、日々の開発のモチベーションになっています！😊