MELLOW / KOREAN HAIR SALON
Researchから実装・検証まで、制作工程をCase Studyとして整理します。
Project Overview
MELLOW / KOREAN HAIR SALON。Research / UX / UI / Developmentまで一貫して設計したConcept Project。
Project Type
Concept Project / 自主制作。Client Workではありません。
- ROLE
- Project Evidence
- STATUS
- DOCUMENTED
- NOTE
- APPROVED CONTENT ONLY
Goal
韓国系サロンらしい上質な世界観と、 スタイル探しから予約までの分かりやすい導線を両立することを目標にしました。 デザインだけでなく、情報整理・レスポンシブ・予約導線まで一貫して設計しています。
Target User
20〜40代の女性を想定し、 韓国ヘアやトレンドに関心がありながらも、 派手さより上品さや自然な仕上がりを求めるユーザーを設定しました。 スマートフォンでスタイルを探し、 気になるメニューや雰囲気を確認したうえで、 そのまま予約へ進める利用シーンを想定しています。
Challenge
課題は、韓国系サロンらしい世界観を保ちながら、 ユーザーが迷わず情報を探し、予約まで進める構成にすることでした。 特に、 ・ビジュアルを重視しても情報が埋もれないこと ・スマートフォンでもスタイルやメニューを見つけやすいこと ・スタイル閲覧から予約までの導線を途切れさせないこと の3点を重視して設計しました。
Research / Direction
韓国系サロンや韓国カフェのビジュアルを参考に、 余白・自然光・ベージュ系カラー・繊細なタイポグラフィを軸に 上質で落ち着いたVisual Directionを設定しました。 一方で、雰囲気だけを優先せず、 スタイル・メニュー・予約といった主要情報が埋もれないように、 Editorialなレイアウトと明確な情報階層を組み合わせています。
UX Decisions
ユーザーが迷わず行動できるように、 情報設計・予約導線・レスポンシブでの使いやすさを重視しました。 特に、 ・PCではヘッダーナビゲーションから主要ページへ直接移動できること ・スマートフォンではメニューを簡潔にまとめ、予約CTAを見失わないこと ・Styleページではヘアスタイルを比較しながら詳細を確認できること ・どのページからでも予約へ進みやすい導線を維持すること を基準にUIを設計しています。
Visual Direction
Visualは、韓国系サロンと韓国カフェの空気感を参考に、 ベージュ・アイボリー・やわらかなピンクを中心とした 落ち着いたカラーパレットで構成しました。 大きな写真、繊細なタイポグラフィ、十分な余白を組み合わせ、 上質さを保ちながらも、スタイルや予約CTAが埋もれないUIを目指しています。 装飾を増やすのではなく、 写真・文字・余白のバランスでブランドの世界観をつくりました。
Key Pages / Sections
主要ページは、Home / Style / Menu / Staff / Contact / Reserveで構成しました。 Homeではブランドの第一印象と主要導線をまとめ、 Styleではヘアスタイルの比較と詳細確認、 Menuでは施術内容と価格、 Staffでは担当者情報、 Contact / Reserveでは相談・予約までの行動を迷わず進められるよう整理しています。 特にStyleページは、作品の見せ方と操作性の両立を重視しました。
Development
Astro / SCSS / Vanilla JavaScriptを中心に実装し、 レスポンシブ対応・画像最適化・SEO・アクセシビリティまで含めて、 実際に公開できるWebサイトとして仕上げました。 コンポーネント構造とSCSSを整理し、 PC / Tablet / Mobileでレイアウトが崩れないよう調整しています。 また、画像の表示方法や読み込み方を見直し、 見た目だけでなく、表示速度や操作性も意識して実装しました。
- ROLE
- Development
- STATUS
- DOCUMENTED
- NOTE
- APPROVED CONTENT ONLY
AI Usage
AIは、画像・動画素材の検討や制作補助の一部として活用しました。 ただし、サイト構成・情報設計・UI・実装・レスポンシブ調整・最終判断は、 制作側で確認しながら進めています。 AIを成果物の主役にはせず、 アイデア展開や素材制作を支援するツールとして取り入れました。
Validation
Desktop / Tablet / Mobileで表示を確認し、 レイアウト・文字量・画像比率・予約導線が崩れないよう調整しました。 特にスマートフォンでは、 Hero・Style・Menu・予約CTAの優先順位を確認し、 小さい画面でも情報を追いやすくしています。 また、キーボード操作・見出し構造・コントラスト・画像の代替テキストなど、 アクセシビリティ面も確認しました。
Outcome
Concept Projectとして、ブランドの世界観づくりから情報設計、 UI設計、レスポンシブ実装、予約導線までを一貫して形にしました。 Home / Style / Menu / Staff / Contact / Reserveまで、 それぞれの役割を持たせながら、全体で統一感のあるWebサイトとして完成させています。 また、Desktop / Tablet / Mobileでの表示確認や、 画像最適化・アクセシビリティ・SEOも含めて調整しました。
- ROLE
- Project Evidence
- STATUS
- DOCUMENTED
- NOTE
- NO INVENTED METRICS
Learning
MELLOWの制作を通して、 Visualの完成度だけでなく、情報設計・予約導線・レスポンシブ・実装まで 一貫して考えることの重要性を改めて確認しました。 特に、写真を大きく使うデザインでは、 世界観を保ちながらも情報やCTAが埋もれないよう、 余白・文字量・レイアウトのバランスを調整する必要があります。 また、Desktopで成立する構成をそのままMobileへ縮小するのではなく、 画面幅ごとに情報の優先順位を見直すことが、 使いやすさにつながると学びました。
CTA
MELLOWのCase Studyをご覧いただきありがとうございます。 Webサイト制作や技術系Webについて、内容が固まっていない段階からでもご相談いただけます。
Webサイト制作について相談する
まだ内容が固まっていなくても大丈夫です。 目的や課題を整理するところから、一緒に進められます。 Web制作・Mechanical / CAD、どちらのご相談でもお気軽にお問い合わせください。
相談する