Overview
こちらは架空の美容室を想定した作品で、顧客に信頼と使いやすさを感じてもらえるブランドサイトです。ユーザー体験を重視し、読みやすさ・使いやすさ・信頼感を感じられる統一的なデザインを目指しました。
Project Title
NEST Hair – Brand Site (Concept)
Live Site
https://hondamasazumi.github.io/NESThair/
Source Code（GitHub）
https://github.com/HondaMasazumi/NESThair
Tech Stack
- ツール： Adobe Photoshop
- 技術： HTML/CSS
My Role & Process
Photoshopを用いて、見本デザインをもとにレイアウト・配色・構成の調整を行い、その後HTML/CSSによる実装までを一貫して担当しました。見た目の再現だけでなく、読みやすさや視線の流れ、信頼感を意識した余白設計を行い、レスポンシブ対応を含めて約1ヵ月で完成させています。
Highlights
ブランドイメージを重視したレイアウト設計
美容室サイトとしての安心感・清潔感・優しさが伝わるよう、写真の見せ方と余白の取り方を意識してレイアウトを設計しました。
ファーストビューでは、店舗の雰囲気が直感的に伝わる構成を重視しています。
タイポグラフィと余白による信頼感の表現
文字サイズ・行間・段落間を丁寧に調整し、情報量が多くなっても読み疲れないUIを意識しました。
また、落ち着いた配色と余白設計により、長く安心して閲覧できる画面を構築しています。
ナビゲーションと導線設計（予約・問い合わせ）
初めて訪れたユーザーでも迷わず行動できるよう、メニュー構成とCTA（予約・お問い合わせ）の配置を整理しました。
視線の流れに沿って自然に次の行動へ進める構成を意識しています。
Insights
制作を通じて確立した設計のポイント：
- Photoshopで作成したデザインをHTML/CSSへ忠実に再現するには、セクション構造を整理したうえで、文字サイズ・行間・余白を数値ベースで調整することが重要であると理解した
- 初見ユーザーが迷わない画面にするためには、メニュー・コンテンツ・CTAまでの視線の流れを意識し、余白で情報を区切るレイアウト設計が有効だとわかった
- 美容室サイトに求められる「信頼感」を表現するには、落ち着いた配色と統一されたタイポグラフィ、画像の見せ方を一貫させることが重要だと理解した