AutoView
チーム
PM 1名、デザイナー 1名、エンジニア 3名
役割
唯一のプロダクトデザイナー
タイムライン
プラットフォーム
Web、モバイル
概要
プラットフォームの管理中に、私は構造的な課題を特定しました。それは、繰り返しの多いフロントエンドコンポーネントのハードコーディングに、社内の重要なリソースが浪費されていることでした。これを解決するため、プランナーやデザイナーがデータ仕様を定義するだけで、AIを介して1分以内にReactコードを生成できる社内生産性向上ツールとしてプロジェクトが立ち上がりました。
社内での非常に肯定的なフィードバックを受けて、経営陣はこのツールをグローバルな開発者をターゲットとするオープンソース製品へとピボットすることを決定しました。対象ユーザーが外部の開発者エコシステムへと拡大する中で、私の課題はダッシュボードのコアを完全に再設計し、GitHub連携、APIキー管理、共同共有などの機能を導入することでした。
言語を選択してください：
問題
LLMがスキーマを分析し、初期のReactコードを生成するまでにかかる時間です。生成自体は1分未満と非常に効率的ですが、最初の出力がユーザーの正確なニーズに一致することはほとんどなく、その後の修正が避けられなくなります。
さらに、手動によるコード修正中にビルドエラーが発生する頻度です。非技術者が生成されたコードを直接微調整しようとした場合、構文エラーの発生率は35%に達し、システムがクラッシュしてワークフローが中断されました。
最後に、コンポーネントカスタマイズ段階における途中放棄の割合です。ユーザーはほんのわずかなビジュアルの調整であってもテキストベースのコーディングを強制されたため、プログラミング経験のないユーザーは急な学習曲線に直面し、ツールを途中で放棄することが頻繁にありました。
平均UI生成時間
1〜2分以上
コードレベルのエラー率
それ以降の手動編集で最大約35%
離脱率
非技術的なユーザーにとっては著しく高い
ユーザーリサーチ
「AIが1分足らずでコードを生成できるのは素晴らしいことです。しかし、余白（パディング）やヘッダーのタイトルといった細かなUIの調整になると、やはり生のコードを直接書き直さざるを得ません。非エンジニアにとって、導入のハードルは依然として高いままです。」 - ジェーン（デザイナー）
ユーザーインタビュー（PM 3名、PD 3名）を通じて、極めて重要なペインポイントが明らかになりました。それは、ユーザーはAIが最初から完璧なUIを生成するとは期待していないということです。本当の価値は反復的なプロセスにあり、ユーザーがAIと対話しながら、細かいディテールを簡単に調整・洗練させていける点にあります。
仮説
ライブプレビューと自然言語チャットインターフェースをコードエディタと組み合わせれば、技術的な知識がないユーザーでも簡単にUIを構築できるようになります。さらに、チャットコマンドと直接的な視覚的操作を融合させたハイブリッドインターフェースは、柔軟性と精度の最適なバランスを提供するでしょう。
ハイブリッド編集体験
ライブプレビューと自然言語チャットインターフェースをコードエディターと組み合わせれば、技術的な知識がないユーザーでも、生コードに触れることなく、細かいディテールを簡単に調整できるようになります。
ロールベースのセーフワークフロー
外部チームメンバー向けに編集機能を制限する専用の閲覧専用状態を設計すれば、コードの間違った改変を防ぎ、コラボレーション中の摩擦や離脱率を劇的に下げることができます。
ワークボード
デザイン ＋ PRD（製品要求仕様書）
プロトタイピング
私は、定性的な仮説に頼るのではなく、実際の動作環境を通じてこの複雑なインタラクティブ・ダッシュボードのユーザビリティを検証したいと考えました。コーディングにClaudeを活用し、ライブプレビューがリアルタイムでレンダリングされ、自然言語によるチャットコマンドに反応する、高忠実度なインタラクティブ・プロトタイプを個人で構築しました。
ソリューション
Claudeのような汎用AI構築ツールは存在しますが、組織レベルでのコンポーネント資産の管理や、プロダクションのコードベースとのシームレスな統合という点においては不十分です。AutoViewはそのギャップを埋めます。プロジェクトベースのダッシュボードを設計し、安全な閲覧専用の共有システムを実装することで、単なるAIコーディングのサンドボックスから、堅牢でプロダクション対応の開発ワークフローへとユーザーエクスペリエンスを向上させました。
ハイブリッド・ダッシュボード・インターフェース
ユーザーが左側のチャットパネルからレイアウトの大幅な変更を指示できる一方で、プレビュー画面上の直感的なポップアップを通じて特定のコンポーネント属性を直接修正できるインターフェースを設計しました。
文脈に応じたエラー処理
ユーザーが無効なTypeScriptインターフェースを入力した場合、システムは単にクラッシュするわけではありません。その代わりに、下部に明確で実行可能なガイドを表示し、ユーザーのデバッグとワークフローの継続をサポートします。
安全なコラボレーションのためのロールベースの共有
プロジェクトのリンクを共有する際の安全なワークフローを確保するため、外部のチームメンバー向けに専用のビューを設計しました。この読み取り専用の状態により、編集機能が制限され、インタラクティブなテスト環境を維持しながら、誤った変更を防ぐことができます。
反射
AIは実際のところ、本当に楽しい
このプロジェクトは、変化するビジネス要件の中でデザインシステムを急速にスケールさせる私の能力を試すものでした。さらに重要なこととして、AIコーディングツールを活用して高精度のプロトタイプを構築し、自分自身でユーザーテストを推進したことで、デザインとコードのギャップを埋める方法を学び、より技術的かつビジネスにアラインしたプロダクトデザイナーへと成長することができました。
