ターゲット Target
20〜30代を中心に、トレンドやデザイン性を重視する男女。
detail DETAIL
ヘアサロンサイト制作
心地よい空間を提供するヘアサロンサイトを制作しました。
Design
Coding
Responsive
プロジェクト概要 Project Overview
本プロジェクトはポートフォリオ用に制作した仮想案件です。
落ち着いた空間と洗練されたデザインをコンセプトにした、ヘアサロンサイトを制作しました。
サロンの世界観が伝わるよう、余白や写真の見せ方を意識し、シンプルで上質感のあるデザインを設計しています。
また、スタイル一覧やニュース、お問い合わせ導線などを整理し、ユーザーが必要な情報へスムーズにアクセスできる構成を目指しました。
レスポンシブ対応を行い、スマートフォンでも快適に閲覧できるよう実装しています。
クライアント Client
業種
落ち着いた空間と洗練されたデザインを特徴とする、トレンド感のあるヘアサロン。
対象
20〜30代を中心に、トレンドに敏感な男女をターゲットにした地域密着型サロン。
強み
丁寧なカウンセリングと高いデザイン提案力を強みとし、一人ひとりのライフスタイルに合わせたスタイルを提供。
現状
SNSからの集客が中心となっており、店舗の世界観やメニュー情報をより分かりやすく伝えるため、Webサイトの刷新を検討。
-
制作期間
2026年5月18日〜2026年6月2日(15日)
-
使用技術
HTML / CSS / javascript
-
担当範囲
デザイン / コーディング
-
サイトURL
目的 Objective
サロンの世界観やブランドイメージを伝えながら、ユーザーがスタイル情報や店舗情報へスムーズにアクセスできるWebサイトを目指しました。 写真を活かしたレイアウトと余白設計を取り入れ、上質感と清潔感のあるデザインを意識しています。 また、スマートフォンからの閲覧にも配慮し、幅広いユーザーにとって使いやすいUI設計を行いました。
Before
- 店舗の世界観や雰囲気が伝わりづらい
- 必要な情報が分散していて導線が分かりにくい
- スマートフォンでの閲覧性や操作性に課題がある
After
- サロンの雰囲気が伝わるデザインへ改善
- 情報を整理し、導線を分かりやすく設計
- スマートフォンでも快適に閲覧可能
課題 Problem
- 店舗の魅力や世界観が十分に伝わっていない
- 情報が分散しており導線が分かりにくい
- スマートフォンでの閲覧性に課題がある
解決策 Solution
- 写真を活かし、世界観が伝わるデザインを設計
- 情報を整理し、分かりやすい導線へ改善
- レスポンシブ対応で快適な閲覧環境を実装
ポイント Point
- 余白を活かしたシンプルで上質感のあるデザイン
- 写真を引き立てるレイアウト設計
- スマートフォンでも見やすいレスポンシブ対応
- 落ち着いたトーンで統一し、ブランドイメージを表現
デザイン Design
白を基調としたミニマルなデザインをベースに、余白と写真を活かした上質感のあるビジュアル設計を行いました。 また、落ち着いた配色とシンプルなUIで統一し、ヘアサロンの洗練された世界観が伝わるよう意識しています。
実装 Development
- HTML / SCSS / JavaScriptを用いて実装を行い、レスポンシブ対応やスムーズなUI表現を意識して制作しました。
- また、コンポーネント設計やSCSSによるスタイル管理を取り入れ、保守性を意識したコーディングを行っています。
- GSAPを使用し、動きのあるインタラクションやスライダー実装にも対応しています。
成果 Result
サロンの世界観と情報の見やすさを両立し、各デバイスで快適に閲覧できるWebサイトとして制作しました。
- 導線設計を整理し、ユーザーが情報へアクセスしやすい構成へ改善
- 世界観と情報の見やすさを両立したデザインを実現
- レスポンシブ対応により、各デバイスで快適な閲覧環境を構築