はじめに
AIによってデザインの仕事が奪われるという話はずっと議論されていますが、
具体的に非デザイナーがAIを使ってどこまでの作業をできるかを試してみました。
前提をお話しすると、私はデザインはからっきしです。とはいえWebアプリ開発をやっていると
「今回、デザインはあまり重視しないので既存踏襲で新規ページを作ってください」なんてことはよくあります。
基本的にセンスはない前提でボタン配置や配色は既存をパクる、変える場合もユーザビリティの観点などから納得感のある修正を意識しています。
今回、現役の女性キックボクサーである西田いるる選手の公式サイト（スポンサー獲得のための名刺代わりとなるポートフォリオサイト）を、デザインから公開まで1人で構築しました。
特にこういった女性らしさを押し出したデザインは私の苦手とするところです。
- 完成したサイト: 西田いるる 公式サイト
本記事では、ノンデザイナーのWebエンジニアが、各種AIツール（Gemini、v0、GitHub Copilot / Claude）をどのように組み合わせて1つのサイトを作り上げたのか、その具体的なステップをご紹介します。
開発フローと使用したAIツール
今回の開発では、フェーズごとに得意なAIツールを使い分けました。
| フェーズ | 使用ツール | 主な用途 |
|---|---|---|
| 要件定義・プロンプト作成 | Gemini | サイトの構成案・デザインコンセプトの言語化 |
| デザインプロトタイプ | v0 (by Vercel) | 4パターンのデザイン生成とクライアント合意 |
| コーディング・素材加工 | GitHub Copilot / Claude | コンポーネント実装、画像切り出し、favicon作成 |
| インフラ構築 | AWS Amplify (＋Claude) | 最小構成でのデプロイ手順作成とトラブルシューティング |
STEP 1: Geminiでデザインコンセプトと構成の整理
v0などの生成AIツールで意図通りのデザインを出力させるには、最初のプロンプトが極めて重要です。
まずはGeminiとやり取りしながら、クライアントの要望を整理し、v0に入力するための詳細なプロンプト（Markdown形式）を作成しました。
こちらの作成にはいくつかの女性格闘家の公式サイトを参考資料として提供してしましたが、
意外としっかり作られたサイトは少なくパターンが少なくなってしまったのは反省点です。
実際に作成した初期プロンプト
# 目的
現役の女子キックボクシング選手「西田いるる」の公式サイト（ポートフォリオサイト）のデザインとコーディングをお願いします。ターゲットは既存のファン、新しいファン、そしてスポンサー企業です。
# デザインコンセプト：甘辛ミックス（可愛さ×強さ）
「アスリートとしての圧倒的な強さ・カッコよさ」と「女性としての洗練された可愛らしさ・美しさ」が共存するデザインにしてください。単にピンクで可愛いだけでなく、エッジの効いたスタイリッシュさを目指します。
# カラーパレット
- メインカラー：ディープブラック（強さ、プロ意識を表現）
- アクセントカラー：鮮やかなマゼンタピンク（またはローズゴールド）（女性らしさと華やかさ）
- 背景色：ホワイト、またはごく薄いグレー（可読性を重視）
# サイト構成（上から順に）
1. ヒーローセクション（TOP）
- キャッチコピー「リングで魅せる、私の強さと美しさ。」
- 試合中のカッコいい写真と、私服の笑顔の写真を対比させて配置できるレイアウト。
2. ニュース（News）
- 試合決定、メディア出演、グッズ販売などの最新情報を数件表示。
3. プロフィール（Profile）
- 名前、生年月日、所属ジム、階級、戦績等
4. ギャラリー（Gallery）
- 試合中の真剣な表情と、普段のオフショットをグリッド状に配置。
5. スポンサー（Sponsors）
- サポート企業のロゴを並べるセクション。
6. お問い合わせ（Contact）
- チケット取り置き、お仕事・スポンサー依頼を受け付けるシンプルなフォーム。
# 技術・UI/UXの要望
- スマートフォンでの閲覧を最優先（レスポンシブ対応）
- 各種SNS（Instagram, X, YouTube, TikTok）へのリンクアイコンを配置
STEP 2: v0でプロトタイプ作成＆クライアント合意
作成したプロンプトを v0 に投入し、デザインのバリエーションを生成しました。
クライアント（選手本人）のイメージと相違がないか確認するため、デザイン方向性の異なる 4パターン を実装・提示して方向性の合意をとりました。
- 生成したプロトタイプ: v0 プレビューサイト
結果、「パターンD」の方向性で行くことが決定。デザインの初期合意が爆速で取れたのはv0のおかげでした。
STEP 3: GitHub Copilot & Claudeで実装・素材調整
デザインの方向性が決まったため、この段階から GitHub Copilot へ移行しました。
v0からソースコードをダウンロードしてGitHubにプッシュした上で、本人の写真素材やスポンサーのロゴ素材を反映させていきました。
この時に特に驚いたのは、Claude Sonnet5の画像認識・マルチモーダル能力の高さです。
Claudeに感動・助けられたポイント
-
実写真のレイアウト・トーン調整
いくつかの写真素材を元のデザインにはめ込みつつ、画像のグラデーション効果などを指示通りかつ綺麗に調整してくれました。 -
AI/PDFデータからのロゴ切り出し
スポンサーロゴ等でaiファイルやPDFしかないデータに関しても、Claudeに読み込ませて必要な部分を正確に切り出して配置してくれました。 -
Favicon（ファビコン）の作成
Faviconの作成や設定コードの記述などもClaudeがスムーズに実施してくれました。
STEP 4: AWS Amplifyへのデプロイとハマりポイント
デザインやコーディングはかなりスムーズに進み、いざ公開の手筈となりました。
自社のAWS資源があるため、基本的にはAWS上で構築することに決定。
ただし、問い合わせフォームやAPIが存在するため「S3にそのまま静的ホスティングとして上げる」といった単純な形は取れませんでした。そこで、まずClaudeに「今回のサイトをAWS上に最小構成でデプロイするための手順」を作成させました。
AIの提案通り、AWS Amplify を使用することに決定。
ハマったポイント：フォーム関連の挙動
デプロイ作業自体は順調でしたが、フォーム関連の挙動でやや詰まりました。
- ハマりポイントの参考記事: AWS Amplifyに関する知見・ハマりポイント
こちらの知見などを参考に調整を実施し、結果として試行錯誤も含めて 約2時間 でデプロイを完了させることができました！
まとめ
デザイナーがいない環境でも、各種AIツールを得意分野ごとに適切に組み合わせることで、**「企画・プロンプト作成 → v0プロトタイプ → GitHub Copilot/Claudeでの実装・画像加工 → AWS Amplifyデプロイ」**という一連の工程を、Webアプリエンジニア1人で爆速かつハイクオリティに完遂することができました。
- Gemini: 思考整理・プロンプト設計
- v0: スピーディなプロトタイピングと意識合わせ
- GitHub Copilot / Claude: 実装・画像処理・Favicon作成
- AWS Amplify (＋Claude): 最小構成のデプロイ
「デザインができないから…」と一人でのWeb制作を諦めていたエンジニアの方は、ぜひこのAIフル活用フローを試してみてください！