福岡市西区田尻のトリミングサロン「Dog care salon apricot」様のホームページを制作しました。
新しいサロンを知った方が、ケアへの考え方や料金、初回来店時の案内、場所を順番に確認できるホームページです。スマートフォンでは、内容を確認したあと、そのままLINEまたは電話で相談できる導線を設けています。
見た目の印象だけでなく、初めて利用する方の分かりやすさと、公開後の情報更新まで考えて設計しました。
制作概要
- 業種：トリミングサロン
- 制作内容：ホームページ新規制作
- 対応端末：パソコン・タブレット・スマートフォン
- 主なページ：サービス・料金、初めての方、ギャラリー、お知らせ、FAQ、アクセス
- ご相談・予約方法：LINE・電話
- 公開サイト：Dog care salon apricot様
ご相談時の課題
新規オープンに合わせて、サロンのことを知ってもらうためのホームページが必要でした。
トリミングサロンを初めて利用する方が確認したいのは、料金だけではありません。どのような考え方でケアを行うのか、初回に必要なものは何か、店舗はどこにあるのかなど、相談前に知っておきたい情報がいくつもあります。
また、ホームページを見たあとに予約方法を探し直すことがないよう、スマートフォンからLINEや電話へ進みやすくする必要がありました。
制作で重視したこと
制作では、次の3点を軸に構成とデザインを考えました。
- サロンの世界観が最初の画面から伝わること
- 初めて利用する方が必要な情報を順番に確認できること
- スマートフォンから相談・予約へ迷わず進めること
情報を一度に詰め込むのではなく、トップページで全体をつかみ、詳しく知りたい内容は専用ページで確認できる構成にしています。
apricot様らしいデザイン
ロゴに使われているオレンジと緑を、ホームページ全体の基本色にしました。
ファーストビューでは、写真やイラストを少しずつ角度を変えて配置しています。整然と並べすぎず、店頭のポスターやスクラップブックのような、手で作った温かさを感じられる見せ方です。
一方で、料金や営業時間、初回来店時の案内まで装飾を強くすると、必要な情報が読みにくくなります。説明が中心となる部分は背景を明るくし、見出しと本文を落ち着いて読めるようにしました。
遊びのある見た目と、店舗サイトとしての分かりやすさ。その両方を崩さないように調整しています。
色、写真、イラスト、文字をどのように揃えたかは、トリミングサロンのホームページデザインで詳しく紹介しています。
PCでは、写真とイラストを大きく使い、サロンの世界観が最初の画面から伝わるようにしました。
スマホから相談できる導線
スマートフォンでは、ファーストビュー内に「LINEで予約」と「電話で相談」を配置しました。サロンの雰囲気を確認したあと、画面を大きく移動せずに相談方法を選べます。
ページを読み進めたあとも相談先を探し直さなくて済むよう、画面下には予約メニューを固定しています。LINEだけに限定せず、電話で相談したい方の選択肢も残しました。
普段使っているLINEや電話を受付先とし、利用する方が迷わず連絡できる導線にしています。
予約前に情報を確認する順番や、ボタンを配置した場所については、店舗ホームページの予約導線の作り方で紹介しています。
スマートフォンでは、サロンの雰囲気と相談方法を最初の画面で確認できます。
初めての方へ情報を整理
「初めての方へ」のページでは、ご予約からお迎えまでの流れ、持ち物、カウンセリングで確認する内容をまとめました。
よくあるご質問には、怖がりな子への対応や毛玉料金、日常ケアの相談など、予約前に確認しておきたい内容を掲載しています。
アクセス欄には住所や営業時間だけでなく、送迎時の一時駐車、周辺駐車場、地図も掲載しました。キャンセルポリシー・利用規約、プライバシーポリシー、動物取扱業登録情報も、それぞれ確認できるようにしています。
仕上がり写真を見る場所と、利用条件を確認する場所を分けることで、必要な情報を探しやすくしました。
Instagram投稿をサイトにも掲載
トリミング後の写真や店舗からのお知らせは、Instagramへの投稿をホームページのギャラリーとお知らせにも表示できるようにしました。
ホームページ用に同じ内容を入力し直さなくても、普段どおりInstagramへ投稿することで、サイト側にも新しい情報を掲載できます。写真はホームページ内で見やすい形に整え、元のInstagram投稿にも移動できるようにしています。
Instagram連携の具体的な仕組みは、Instagram投稿をホームページに自動表示する実装例で紹介しています。
料金を更新しやすい構成
トリミング料金は犬種やコースによって項目が多く、公開後に金額や内容を変更する場合があります。
そこで、変更が必要になりやすいメニューと料金は、Googleスプレッドシートで管理できる構成にしました。ホームページ全体へ管理画面を設けるのではなく、更新したい情報だけを表へ切り出しています。
使い慣れた表へ入力する形にすることで、ページのプログラムを直接触らずに、必要な情報を管理できます。
更新方法の考え方は、実際の管理画面や内部データを使わない独立したデモを用意し、ホームページの料金表をスプレッドシートで更新する方法で紹介しています。
写真を軽く表示する工夫
店舗の雰囲気や仕上がりを伝えるには写真が欠かせません。ただし、撮影したままの大きな画像を並べると、スマートフォンでの表示が遅くなります。
掲載画像はWebP形式へ変換し、表示場所に合わせて画像サイズを調整しました。ファーストビューの施術室写真も、画面幅に応じて適したサイズを読み込みます。ギャラリーなど、最初の画面に見えていない画像は、必要になるまで読み込みを待たせています。
見た目のために写真を減らすのではなく、見せたい写真を残したまま、読み込み方を整えました。
画像サイズの切り替えや遅延読み込みなど、実際に行った設定は、写真が多い店舗ホームページを軽くする方法で紹介しています。
制作したホームページ
Dog care salon apricot様のホームページを見る
公開後に料金や写真などが更新されている場合があるため、現在の表示は制作時点と異なることがあります。
今回の制作では、サロンの世界観を見せることと、初めて利用する方が安心して相談できることを同じくらい大切にしました。
店舗ごとに必要な情報や普段の運用方法は異なります。決まった形へ当てはめず、事業内容と更新したい情報を確認したうえで構成をご提案します。ホームページ制作については、サービス・料金ページまたはお問い合わせページからご相談ください。
