WEB DESIGN
ほっとグルーミング教室｜トリミング教室新規サイト制作
※架空の教室を想定した自主制作事例です。
「千葉・津田沼エリアで、ペットサロン勤務のトリマーが、飼い主さん向けのおうちトリミング教室を始める」という想定で、ヒアリング・市場調査・ご提案・デザイン・Studioでの実装・公開の手続きの案内までを、実際の案件と同じ流れで進めました。
クライアント役(ヒアリングへの回答や、確認のお返事)は、AIに演じてもらっています。サイトは、Studioのテンプレートをもとに、配色・構成・文言・ページを設計してカスタマイズしたものです。写真は、AIで生成したイメージです。
担当範囲｜使用ツール
担当範囲
ヒアリング・市場調査・ディレクション・Webデザイン・Studioでの実装／構成:自身で設計
使用ツール
Figma・Studio(進行管理にNotion、資料にGoogleドキュメント)
TARGET & CHALLENGE
ターゲットと課題
ターゲット
・30〜40代で、小型犬(トイプードル、ダックスなど)と暮らす飼い主さん。
・津田沼・船橋エリアで、車がなくても通える方
・サロンのトリミングは経験していて、任せきりで、ふだんの様子が分からないことに不安がある
・爪切りやブラッシングを嫌がる愛犬に、どう触ればよいか分からず、「自分のやり方が悪いのでは」「痛い思いをさせたくない」と感じている
・全部を自分でやる自信はないが、少しはできるようになりたいと思っている
想定する事業課題・目的
・「技術を身につける(爪、バリカン、カットまで)」を前面に出す教室と差別化し、「嫌がる子を慣らす」「いつもと違う様子に気づく目をもつ」教室という立ち位置をつくる
・「プロ並みを目指す教室」と思われないように、「家でここまでできれば十分」という考え方を、最初に伝える
・自宅開催の安心感と、体験から続けて通ってもらう流れ(4つのステップ)を、分かりやすく見せる
PROCESS
ヒアリングから制作開始までの流れ
この制作では、デザインの前段階となる上流工程と、公開の手続きの案内まで、実案件と同じ順番で取り組みました。AIは、クライアント役と、情報収集の補助に使いました。
STEP 01｜ヒアリング
最初に、所在地、価格のイメージ、希望日、掲載NGなどの「必ず聞く項目」をまとめたヒアリングシートを送りました。
質問は1回に7つまで、選べる形にして、推奨案をつけることで、クライアントの負担を減らしました。
回答のあとには、不足の項目を整理して、聞き直しの回数を減らしています。
STEP 02｜市場調査・競合分析
飼い主向けのトリミング教室を調べた範囲では、段階式のカリキュラムや、LINEでの申し込みが目立ちました。
料金は、1回あたり1万円台が中心で、体験は1,000円台からの教室もありました。
多くの教室は「技術を身につける」ことを前面に出していて、「嫌がる子をどう慣らすか」を中心に据えた教室は、見当たりませんでした。(情報収集にはAIを使い、各社の公式サイトで自分でも確認しました。)
クライアントの案は、競合の約3分の1〜5分の1の料金でした。「安くして入りやすくする」か「価値を見せる」かは、クライアントが判断するものなので、事実を並べて、考えてもらう形にしました。
STEP 03｜ターゲットとポジショニング
調査の結果と、ヒアリングで聞いた飼い主さんの声から、本音を言葉にしました。
「触らせてくれない愛犬に、どうすればいいか分からない」
「サロンに任せきりで、少し後ろめたい」
「全部は自信がないけれど、少しはできるようになりたい」
競合が「技術」で戦っている中で、「慣らす」と「異変に気づく目」を軸にした、空いているポジションを狙うことにしました。
STEP 04｜ご提案・情報設計
4つのステップ(慣らす・整える・部分的に整える・カット)の段階制、初回開催のモニター募集、体験の料金をクライアントに提案しました。
サイトは、トップ・ステップと料金・お申し込み・お知らせの構成にして、ターゲットの気持ちに合う順番で、セクションを並べました。
デザインは、色の確認を含めて、1案にしぼることで、やり取りを減らしました。
STEP 05｜デザイン・実装
色(クリームとベージュを基調に、オリーブグリーンを差し色に)、写真(大きく、触れ合いが伝わるもの)、書体(丸みのあるゴシック)、文章(やさしく、短く、言い切りすぎない)の方向性を、デザインシステムとして先に決めました。
トップページは、Studioのテンプレートをもとに、Studio上で、色・書体・セクションの順番・文言を調整して、テンプレートらしさを抑えました。
ステップと料金のページは、テンプレートにないページのため、Figmaで画面をデザインしてから、Studioで実装しました。
DESIGN POINT
制作のポイント
「難しそうに見せない」配色と書体
「トリミング教室=専門的で、難しそう」という印象を避けるために、クリームとベージュを基調に、オリーブグリーンを差し色にして、やわらかく落ち着いた雰囲気にしました。ボタンやリンクの色は、文字とのコントラスト比を計算して、読みやすさも守っています。
申し込みのボタンだけをオレンジにして、いちばん押してほしい場所が、迷わず分かるようにしました。
「何をするのか」が分かる、ステップごとの詳細
初めての人がいちばん知りたいのは、「当日、何をされるのか」だと考えました。各ステップに、「こんな方に」「当日の流れ(開始からの時間つき)」「終わったときのゴール」「お持ち帰り」を、同じ順番で入れました。流れはトグルにして、ページが長くなりすぎないようにしています。
申し込みの入り口を1つにする、フォームの設計
問い合わせの窓口を、フォーム1つにしぼり、「初めての方」「モニター」「2回目以降の方」「ご質問のみ」で、種類を分けました。
誰が、何を希望しているかが、受け取る側にすぐ分かり、運営の手間も減らせます。ワクチンの接種状況や、愛犬の情報も、最初に聞くようにして、やり取りの回数を減らしています。
料金と条件を、先に見せて不安を減らす
料金は、ステップごとに、1名・1頭あたりで、人数と一緒に見せました。参加条件(犬種、ワクチン)、キャンセル、お支払い、ご同伴の方の見学は、よくある質問に、先にまとめています。
問い合わせる前に疑問が解けるようにして、「聞きにくい」という気持ちを、やわらげることを意識しました。