OVERVIEW
作品概要
架空のビジネス英会話スクールを題材に、TOP、コース案内、講師紹介、料金・アクセス、よくあるご質問の5ページで構成したWebサイトです。
指定された参考サイトと制作条件をもとに、ChatGPTでページ構成や共通デザインを整理したdesign.mdを作成し、ClaudeでHTML、CSS、JavaScriptを実装しました。
生成された5ページを横断して確認し、情報の見やすさ、共通要素の統一、レスポンシブ表示について問題点を整理して修正指示を行いました。
制作情報
| 制作期間 | 約3日 |
| 制作形態 | 自主制作（架空サイト） |
| 本人担当 | 制作条件の確認 / 生成内容の確認 / 修正箇所の特定・指示 / 5ページ間の表示統一確認 / PC・スマートフォンでの表示確認 |
| 使用ツール | ChatGPT / Claude |
| 使用技術 | HTML / CSS / JavaScript |
| ページ数 | 5ページ |
| 対応端末 | PC / スマートフォン |
SITE STRUCTURE
5ページを通した情報構成
TOP、コース案内、講師紹介、料金・アクセス、よくあるご質問の5ページを用意し、それぞれに必要な情報を整理しました。
ヘッダーやナビゲーション、見出し、ボタンなどの共通要素をそろえ、各ページから必要な情報や無料体験レッスンへ移動しやすい構成になっているか確認しています。
REVIEW
PC・スマートフォンでの確認
生成されたページをPC・スマートフォンで表示し、画面幅によるレイアウトの崩れや文章の折り返し、画像サイズなどをチェックしました。不自然な箇所は対象部分と修正内容をAIに指示し、再生成後の画面を見ながら調整しています。
AI WORKFLOW
生成AIを活用した制作の進め方
ChatGPTで制作条件をdesign.mdへ整理し、その内容をもとにClaudeで5ページを実装しました。本人は各ページの生成結果を比較し、共通UI、情報の見やすさ、レスポンシブ表示について修正箇所を判断しています。
1. 制作条件とページ構成の整理
指定された参考サイトと制作条件を確認し、必要な5ページと掲載内容を整理
2. design.md作成と実装
ChatGPTでページ構成と共通デザインをdesign.mdにまとめ、ClaudeでHTML、CSS、JavaScriptを実装
3. 5ページの確認と修正
ページ間の表示統一、情報の見やすさ、レスポンシブ表示、ナビゲーションやUI動作を確認して修正を指示
※本作品は架空のビジネス英会話スクールを題材とした自主制作です。スクール名、住所、電話番号、料金、講師情報、キャンペーン、実績などは制作上の設定です。