OVERVIEW
作品概要
架空の美容室「CAREER」を題材に、店舗の雰囲気やヘアスタイルを写真を通して伝えるWebサイトを制作しました。
指定された参考サイトと制作条件をもとに、ChatGPTでサイトの構成やデザイン仕様を整理し、Claudeを使用してHTML・CSS・JavaScriptを実装しました。
サイト内の人物写真やイメージ画像にはChatGPTを使用し、生成画像の選定・再生成、ページに配置した際の見え方の調整を行っています。
| 制作期間 | 3日 |
| 制作形態 | 自主制作（架空サイト） |
| 本人担当 | 制作条件の確認 / 生成内容の確認 / 生成画像の選定・再調整 / 写真と文章の配置確認 / LOOKBOOKの表示確認・修正指示 / PC・スマートフォンでの表示確認 |
| 使用ツール | ChatGPT / Claude |
| 使用技術 | HTML / CSS / JavaScript |
| 対応端末 | PC / スマートフォン |
VISUAL DIRECTION
写真を主役にした静かな世界観
写真を大きく見せる構成と、白・ベージュを基調とした落ち着いた配色によって、美容室らしい清潔感と静かな雰囲気を表現しています。装飾を抑えた余白のあるレイアウトで、写真が印象に残るデザインになっています。
LOOKBOOK / STRUCTURE
雑誌のように見せるLOOKBOOK
LOOKBOOKでは、4つのスタイルを単純に並べるのではなく、写真ごとに画角や人物の配置、ポーズ、視線を変え、レイアウトにも変化をつけました。それぞれのヘアスタイルの印象を見比べながら閲覧できるよう、LOOKBOOK全体のバランスを確認して画像を選定。構図が似た場合はプロンプトを調整し、再生成しています。
来店前に情報を確認しやすい構成
コンセプト、メニュー、ヘアスタイル、スタッフ、アクセスなど、来店前に知りたい情報を一通り確認でき、ヘッダーやファーストビューから予約へ進める構成です。生成後はPC・スマートフォンの画面を確認し、写真と文章のバランスや、予約ボタンなどの主要な要素が見つけにくくなっていないかを確認しました。
REVIEW
写真の見え方とレスポンシブ表示
生成した写真を実際のページに配置した状態で確認し、人物の顔やヘアスタイルなど、見せたい部分が不自然に切れていないかを確認しました。
特に画面幅によって写真の見え方が変わる箇所では、PC・スマートフォンそれぞれの表示を確認し、必要に応じて写真の構図や人物の位置を調整して再生成しました。
AI WORKFLOW
生成AIを活用した制作の進め方
ChatGPTとClaudeを制作工程に取り入れ、参考サイトと制作条件の確認から、仕様の整理、コード・画像の生成まで進めました。生成結果をそのまま完成とせず、実際のページを確認しながら、写真の選定、LOOKBOOKの見せ方、文章と画像のバランス、レスポンシブ表示を調整しました。
1. 制作条件と方向性の整理
指定された参考サイトと制作条件を確認し、必要な掲載内容と写真を中心にした方向性を整理
2. 仕様書・実装・画像生成
ChatGPTでdesign.mdを作成し、ClaudeでHTML、CSS、JavaScriptと画像生成用プロンプトを作成。プロンプトをもとにChatGPTでサイト画像を生成
3. 確認・修正・検証
生成画像の選定・再調整、LOOKBOOKの見せ方、写真と文章のバランス、予約導線、レスポンシブ・UI動作を確認
※本作品は架空の美容室を題材とした自主制作です。店舗名、スタッフ、メニュー、料金、所在地などは制作上の設定です。サイト内の人物写真およびイメージ画像には生成AIで作成した画像を使用しています。