0. 忙しい人へ
Claude 3.7 Sonnet に依頼して、架空のECサイト管理画面を生成してもらいました。
すごい…！
1. イントロダクション
私は Rehab for JAPAN でレセプトのフロントエンド開発を担当しています。
1年半ほど前は Web 制作に従事し、ピクセルパーフェクトを目指して 1px 単位で細かく調整していました。
社内では生成AIの活用が急速に進んでいると感じ、私自身も AI 情報をキャッチアップしなければという危機感から、話題の Claude 3.7 Sonnet を試してみることにしました。
今回は、架空のECサイト管理画面の制作を通して、AIがどのように開発プロセスに貢献できるのかを検証した内容をお伝えします。
2. プロジェクトの流れ
2-1. テーマの決定
今回のテーマは、実際の業務に即した 架空のECサイト管理画面 の制作です。
目的は、AI が業務効率化にどれだけ寄与できるかを具体的なケースで確認することでした。
2-2. AIによる要件定義
次に ChatGPT に依頼し、管理画面の要件を作成してもらいました。
- **レイアウトの基本構造**
- **サイドバー（左側ナビゲーション）**
主なメニュー項目：
- ダッシュボード（概要・統計情報）
- 商品管理（登録、編集、削除）
- 注文管理（新規注文、発送状況、履歴）
- 在庫管理（在庫数、入出庫記録）
- ユーザー管理（顧客情報、会員ステータス）
- レポート・分析（売上推移、アクセス解析）
- 設定（各種パラメータ、管理者アカウント）
特徴：常に画面左側に固定し、どの画面からでも素早くメニューにアクセス可能。アイコンとテキストを併用して視認性を向上。
- **ヘッダー（上部バー）**
要素：
- ロゴ：ECサイトのブランディングを強調
- 検索バー：キーワードで素早く情報検索が可能
- 通知アイコン：システムからのお知らせ（例：新規注文、エラーログ）
- ユーザーアカウント：プロフィール、ログアウト、設定アクセス
- **メインコンテンツエリア**
各種画面に応じて、カードレイアウト、テーブル、グラフ、フォームなどを配置。適切なホワイトスペースを確保し、情報が詰まりすぎないようにする。
- **ダッシュボード画面の例**
- 概要セクション：売上高、注文数、ユーザー数、在庫数などの主要指標をカード型で表示。各カードはクリックで詳細画面に遷移。
- グラフ・チャート：売上推移グラフ、アクセス解析チャート、商品別売上ランキング。折れ線グラフや棒グラフを用いて、データの傾向がひと目で分かるようにする。
- 最近のアクティビティ：最新の注文履歴、問い合わせ内容、在庫更新状況などをタイムライン形式で表示。
- **商品管理画面の例**
- 一覧テーブル：商品名、在庫数、価格、カテゴリー、公開状況などのカラムを配置。フィルター機能・ソート機能を追加し、目的の商品を簡単に絞り込み可能。
- 詳細・編集フォーム：商品の基本情報（タイトル、説明、画像、価格、在庫数）を入力するフォーム。バリデーションやリアルタイムプレビューを組み込み、入力ミスを防止。
- バッチ処理機能：複数商品の一括編集や削除を可能にし、大量更新にも対応。
-
UI・UXのデザインコンセプト
- カラースキーム：ベースはホワイトまたはライトグレーを用い、清潔感と読みやすさを確保。アクセントカラーとしてブランドカラー（例：ブルー、グリーン）をアイコンやボタン、リンクに使用し、視認性を向上。
- タイポグラフィ：見出し、本文、補足情報に階層を持たせ、情報の優先度が直感的に分かるようにする。シンプルで読みやすいフォント（例：Helvetica、Noto Sans）を推奨。
- レスポンシブ対応：PCだけでなく、タブレットやスマートフォンでも利用可能なレイアウト。メニューは折りたたみ可能にし、画面サイズに合わせた最適な表示を実現。
- インタラクション：ホバーやクリック時のアニメーションを適度に採用し、ユーザーの操作フィードバックを充実。ローディング時はプログレスバーやスピナーで、待機状況を明示。
3. デザインと実装のステップ
3-1. デザイン作成
Galileo AI に依頼して、商品管理画面のデザインを作成してもらいました。
※今回の対象は商品管理画面のみです。
3-2. マークアップの実装
次に、Claude 3.7 Sonnet にマークアップの実装を依頼しました。
個人的には、デザイン画像を渡してどこまで正確にマークアップできるかが最も気になる点でした。
前職で Web 制作に携わっていた際、生成AIにマークアップを任せられないかと試行錯誤していた経験があるため、話題の Sonnet がどのような結果を出すのか非常に興味深かったです。
結果は驚くべきもので、完璧とはいかなくともレイアウトやスタイルにおいて非常に優れた成果を出してくれています。
少し調整を加えれば、実際の業務でも十分利用できるレベルと言えるでしょう。
3-3. 機能追加と最終成果物
Claude のマークアップ成果に感銘を受けたため、追加機能の実装も依頼してみました。
まず ChatGPT で必要な処理内容を整理し、その内容を元に Claude に実装を依頼。
何度かの試行錯誤の末、実際に動作するデモが完成しました。
4. まとめ
1年半ほど前は、どうにか生成AIにマークアップを任せられないかと試行錯誤していたものが、今では容易に実現できるようになっており、非常に驚かされます。
もし AI がマークアップや簡単な処理を担ってくれれば、UX 改善など他の重要なタスクにより多くの時間を割くことができ、やりたいことに集中できる環境が整うのではないでしょうか。
今回の成果を通して、今後ますます生成AIに対するアンテナを広げていく必要性を実感しました。
Discussion