【エステサロン】ポートフォリオ

Transcript

1. ｒ エステサロン 公式サイト 親しみやすさと上質感を両立し、 予約につながるデザインへ クライアントワーク 制作期間 2025/8/4〜13(10日間) 使用ツール Figma/Photoshop クライアント エステサロン「&BELL」
3. 要件定義 Before 個人経営のエステサロンのホームページ 事業紹介 20〜50歳代の女性。 （特に多いのは20・30代） 美容への関心が高く本格的なケアをしたい人から 何をケアしていいか分からない初心者の方まで ターゲット 既存のサイトにメニューが網羅的に掲載されていない テキストではなく画像をそのまま貼り付けているので、SEO対 策、アクセシビリティへの配慮ができていない サロンの強みや雰囲気が分からず、新規予約のハードルが高い 課 題 新規予約数アップ 目 的 韓国風で、白やゴールド、淡い茶色系で柔らかく少しラグジュアリ ーな雰囲気にしてほしい。ただサロンはアットホーム感強めなので ギャップが起きないぐらいの高級感を希望 ご要望
4. コンセプト キーワード 韓国エステ導入の本格ケア 施術をオーダメイド提案 サロンの強みが 伝わる 01 メニューをカテゴリで整理 予約までの動線がスムーズ 欲しい情報に 直感的に辿り着く 02 親しみやすさや温かみ どんな人が施術するか サロンの雰囲気が 伝わる 03 ＃高級感 #親しみやすさ #トレンド感 #洗練 #韓国美容 #女性らしさ #リラックス #落ち着いた 制作の方向性 サロンの魅力が伝わる、韓国のトレンド感×上質なトーン #予約がスムーズ ３つの方針を決定
5. UI/UX デザイン 参考デザイン ▼(参考)美容クリニック公式HP PICK UPメニューを上部に持ってくることでサロ ンの強みやウリとなるメニューを効果的に伝える スマホ表示は下部に予約ボタンを固定することで 迷わずスムーズな予約につなげる ▼(参考)美容クリニック公式HP ▼ピンタレスト「韓国風デザイン」 ブラウンベージュで落ち着いた雰囲気に、アクセント カラーのビンクでフェミニンさを表現 枠線をつかったシェイプやスターのモチーフで韓国風 のトレンドデザインを表現
6. フォント The Seasons 英語見出し Noto serif jp 日本語見出し 英語見出し以外 Lato 日本語本文 Noto sans jp 画像 シェイプ カラー デザイン 背景色はピンク寄りのベージュで柔らかく温かみのある印象に ご要望のブラウン系の色味は文字色やモチーフに取り入れ落ち着き を演出 アクセントにピンクベージュをボタンなど強調したい部分に使用 見出しは上質さや高級感を感じるセリフ体を使用し、本文は視認性 を高く保つフォントを選定 角のないやわらかなシェイプを用いることで、サロンの持つ“フェミ ニンさ”や“心地よさ”を視覚的に表現し、ブランドイメージの統一感 を高める サロン内の写真は、清潔感を意識した明るいをピンク寄りに加工し、安 心感と温かみを表現 メニューの写真はターゲット層に合わせたAI生成画像を活用し、利用者 が自分ごととして想像しやすいビジュアルに
7. サロン名の「bell」は英語で「幸せを 呼び込む」という意味がある。 『施術 によって美と心地よさを届け、幸福感 を味わって欲しい』という想いをから 考えた キャッチコピー CTAボタン FV 写真 ▼2枚目 予約への動線をスムーズにするため、ボ タンはページ下部に固定表示 サロンのアットホームな温かい雰囲気 を伝えるため笑顔で施術している写真 を選定 FVの写真上に配置した白文字の視認性 を高めるため、ピンクと黒を混ぜた半 透明のオーバーレイを挿入 写真をサロンの内部の写真に切り替え デザイン
8. コンセプト TOP モチーフ 韓国らしいスターのモチーフを入れ、施術を通じて一人ひとりに輝 いて欲しいという思いを込めた 英語のコピーが横に流れていくデザインでサイトに動きをもたせる クーポンメニュー SNS広告でクーポンメニューを配信しており、その流入先が本サイ トであるため、ユーザーが迷わないよう上部に配置 「view more」ボタンでbefore&afterなど施術のさらに詳し い情報がわかる サロンの強みである「①施術のオーダーメイド提案、②韓国式の本 格エステ」を伝える 余白を十分に用い、洗練された上質な印象に デザイン ◀︎３つ表示。 　クライアントが 　CMSで更新可
9. メニュー TOP スタッフ紹介 施術者の顔や想いを伝えることで安心感をもってもらい、新規予 約のハードルを下げる 写真の周りに枠線のあしらいをずらして設置することで、韓国風 のトレンド感のあるデザインを演出 カテゴリごとにメニューを整理 ボタンに枠線をつけ視認性向上 カテゴリをイラストのアイコンで表示し、親しみやすさと識別の しやすさをアップ デザイン
10. お客様の声 信頼感につながるようお客様の口コミを複数掲載 スライダー形式でコンパクトに表示し読みやすくする TOP FAQ よくある問い合わせをあらかじめ掲載することで、問い合わせ対応 を削減 疑問や不安な点を解消することで信頼感アップ 回答をアコーディオン形式で表示し、コンパクトに整理 アクセス 住所や営業時間などの基本的な情報を掲載 デザイン フッター Instagamを積極的に配信しているため、アカウントへのリン クを掲載 ページ最上部へ遷移するボタンを設置し、サイト内回遊をスムーズ に
11. タブ切り替え 脱毛メニューは女性・男性・ キッズでメニューが変わるた め、ターゲットごとにタブで 表示 下層ページ デザイン before/after 施術の効果が視覚的に分 かるよう写真を掲載 キーワード 施術効果をキーワードで 表示し、美容知識がない 人でも直感的に理解でき るよう工夫 ダウンタイム 重要なダウンタイム情報 を説明文と区別し、見落 としを防ぐ