※本サイトはポートフォリオ掲載を目的として制作した架空の美容室サイトです。
掲載されている店舗、人物、住所、電話番号、料金、サービス等は実在しません。
また、掲載画像には生成AIによる画像を使用しています。
架空の美容室「CAREER」のWebサイトを制作しました。
落ち着いた配色と余白を活かし、サロンの上品で親しみやすい雰囲気を表現しています。
スマートフォン表示にも対応しています。
「作品の概要」
熊本市の架空の美容室「CAREER」を想定して制作したWebサイトです。サロンの落ち着いた雰囲気を伝えるため、白と淡いブルーグレーを基調に、余白を活かした上品なデザインに仕上げました。店舗紹介、メニュー、ヘアスタイル、スタッフ、アクセスの各ページを制作し、スマートフォン表示にも対応しています。
制作目的・ターゲット
制作目的
美容室の雰囲気やこだわり、メニュー、スタッフ情報を分かりやすく伝え、来店や予約につなげることを目的として制作しました。
ターゲット
熊本市周辺に住む20～40代の男女で、落ち着いた空間や丁寧なカウンセリング、自分に合ったヘアスタイルを求めている方を想定しています。
使用ツール・制作時間
使用ツール：
HTML / CSS / JavaScript
ChatGPT / Claude
制作期間：
約2日
AI活用：
ChatGPTとClaudeを活用し、ターゲット設定、サイト構成の検討、キャッチコピーや掲載文章の作成、コーディングの補助を行いました。AIから得た提案をもとに、美容室らしい清潔感と上品さがサイト全体で統一されるよう、配色・画像・余白・レイアウトを調整しながら制作しました。また、掲載画像の作成にも画像生成AIを活用しています。
工夫したポイント
美容室の清潔感と上品さが伝わるよう、白と淡いブルーグレーを基調に、木の温かみを取り入れた配色にしました。写真を大きく見せながら余白を広く取り、落ち着いて情報を閲覧できるレイアウトにしています。また、メニュー・スタイル・スタッフ・アクセスの情報を目的別に整理し、初めて訪れる方でも必要な情報を見つけやすい構成にしました。スマートフォンでも見やすく操作しやすいよう、レスポ
「制作を通して学んだこと」
見た目の美しさだけでなく、ユーザーが必要な情報へ迷わずたどり着ける構成や導線設計の重要性を学びました。また、PCとスマートフォンの両方で見やすくするためのレイアウト調整や、画像の軽量化による表示速度の改善、架空サイトであることを明確に伝える配慮についても理解を深めました。AIの提案をそのまま使用するのではなく、目的やターゲットに合わせて選び、調整することの大切さも実感しました。
コメント