Web Site架空の美容室「hair atelier soelu」

Background - 制作背景

古賀駅近くに新しくオープンした､ 自然由来の薬剤を使用する架空の地域密着型ヘアサロン。 ｢hair atelier soelu｣のブランド設計およびWebサイト制作｡

“髪にも心にも優しい時間” を提供する完全予約制サロンとして､ 新規オープンに伴う認知拡大と顧客獲得を目的に制作しました｡

Objective - 制作目的

• 新規オープンに伴う認知度向上
• 地域の家族層への訴求
• リピーター獲得を前提とした信頼感の構築
• 自社ホームケア製品の販売導線設計
• 予約システムの導入

単なる紹介サイトではなく､
集客と運用を想定した構造設計を目指しました｡

Persona - ペルソナ

20代後半〜50代の男女。 古賀市および近隣地域に住む家族層｡ 日々忙しい中でも､ “自分を整える時間” を大切にしたいと考える層を想定｡ リピーターを主軸とし､ その家族も来店することを想定した設計としました｡

特に「自然体の美しさ」や「癒しの空間」を求める大人層が中心。 子育て中のママ層や仕事帰りの女性にも人気。

Concept - コンセプト

キャッチコピー： 「今日が少し、やさしくなるように。」 （髪をととのえて、気持ちもふわっと。 soelu は、そんな“やさしい時間”を届けます。）

キーワード： ナチュラル / 落ち着く / 癒し / 日常に小さなご褒美を

Design デザイン設計

■ 全体設計

• 余白を大きく取り､呼吸ができるレイアウト設計
• Noto Sans を中心に使用し､ナチュラルで柔らかな印象に
• 行間・文字間をやや広めに設定し､穏やかな視認性を確保

トップページでは､ コンセプトとアクセスセクションにおいて Z視線を意識した構成を採用｡ 画像を左右に交互配置することで､ 単調にならないリズムを演出しました｡

■ 色の設計

メインカラー オリーブ

ベースカラー アイボリー

アクセント ベージュ

■ 演出・アニメーション

• ヒーロー画像のスライドショー /JavaScript 実装
• スクロール時のフェードイン / ブラー演出

過度な動きは避け､ブランドの“静けさ” を壊さない演出に留めています｡

■ レスポンシブ設計

モバイルファースト設計｡

基本はSP / PCの2軸設計とし､ 必要に応じてタブレットサイズのメディアクエリを追加｡ 単純な縮小ではなく､ デバイスごとにカラム数や余白比率を調整し､ 世界観が崩れない構造を意識しました｡

■ UI設計

オンラインショップ

• 数量増減機能をJavaScript で実装
• 将来的なデータベース連携を想定した構造設計

現在はUI設計まで実装

予約ページ

JavaScriptでカレンダー機能を実装

• 定休日・過去日を選択不可に設定
• 当日表示の視覚的変化
• 月切り替え時にカレンダーを再生成
• 日付選択時､フォームへ自動反映

今後はPHP等を用いた予約管理機能の実装を予定｡

Reflection - 振り返り

ブランド設計からWebまで一貫して制作することで､ 視覚的な統一感と構造的な整合性を両立させました。 制作において最も大切にしたのは､ そのお店の世界観を崩さないこと｡

アニメーションやUI機能を実装する際も､ “目立たせる” ことよりも “空気を壊さない” ことを優先しました｡ デザインを足すのではなく､ 本来持っている魅力を引き立てる設計を意識しています｡