サイトは画像をクリック

熊本市東区健軍にあるという設定の、架空の美容室「CAREER（キャリア）」の公式サイトを想定して制作したWebサイトです。HOME・CONCEPT・MENU・STYLIST・GALLERY・ACCESSの全6ページで構成しています。

「熊本市東区に住む・働く25〜45歳の女性。仕事や家庭で忙しく自分の時間を後回しにしがちだが、SNSや雑誌で美容トレンドを追っていて審美眼がある」という具体的な人物像（ペルソナ）を先に決め、そのうえでキャッチコピー・写真の雰囲気・余白の取り方までトーンをそろえました。自然光・低彩度・大きな余白・実際の施術風景を軸に、写真を主役にしてテキストは最小限に絞っています。

デザインは「角丸や影をほとんど使わず、1pxの線と余白だけで画面を組み立てる、雑誌の誌面のような見せ方」というルールを決め、全ページで統一しました。

・主な特徴
①ペルソナ設定からデザインのトーンまで一貫させた設計
②スマホ・タブレット・PCで最適化されるレスポンシブ対応
③スクロールに合わせて写真やテキストがゆっくり現れる演出
④GALLERYページはALL/STYLE/SALON/SPAのタブでJavaScriptによる絞り込み表示

・技術的なポイント
React・Vue等のフレームワークは使わず、HTML / CSS / バニラJavaScriptのみで制作しています。スクロール演出はGSAP（アニメーションライブラリ）で実装し、画像は表示速度を優先して軽量なWebP形式に変換して読み込んでいます。検索エンジンやSNSでの見え方を意識して、OGP画像・構造化データ（HairSalon）・「本文へ移動」スキップリンクなどのアクセシビリティ対応も入れています。

・今後の展望
電話番号・SNSリンク・住所などは仮の値のままで、実店舗の情報が決まればすぐ差し替えられるよう、置き換え箇所を制作メモ（README）に一覧化しています。