美容室・サロンのホームページにInstagramを表示する｜スタイル写真を予約ページへ

サロンのサイトでの一覧の役目

サロンのホームページを見る人は、多くの場合「このお店で、この人に、このメニューを頼んで大丈夫か」を確かめています。仕上がりの写真は、その判断のいちばんの材料です。一方で、料金、所要時間、メニューの内容、営業時間、場所、予約の方法は、ページに文字で書いておくべきものです。写真の一覧は文字の説明を置きかえるものではなく、隣で裏付けるものだと考えてください。

先にキャプションの目印を決める

スタイリスト別やメニュー別の一覧は、投稿のキャプションに入っている言葉で選びます。そのため、ウィジェットを作る前に、お店で使う目印の言葉を決めて、投稿する全員で共有することがいちばん大切です。サロンでは次のような目印が考えられます。

絞り込みはキャプションの部分一致です。担当スタイリストのアカウントをキャプションで「@アカウント名」とメンションしているなら、その「@アカウント名」をそのままキーワードにできます。ただし、写真の上に付ける「タグ付け」はキャプションではないので、絞り込みには使えません。見るのはキャプションの文字だけです。

スタイリスト名を目印にするときは、表記をひとつに決めます。「#スタイリスト山田」と「#山田スタイリスト」は別の言葉なので、片方だけを指定すると、もう片方の投稿は出ません。英字の大文字と小文字は区別されませんが、ひらがなとカタカナ、全角と半角の英数字は別の文字として扱われます。

すでにある投稿に目印を足すときは、Instagram でキャプションを編集します。Instagram のヘルプ(既存のInstagramの投稿のキャプションを追加、編集、削除する)によると、投稿の右上の「…」(オプション)から「編集」を選び、キャプションを変えて「完了」で保存します。過去の作品をスタイリストのページに出したい場合は、出したい投稿にだけ目印を足していけば十分です。

一致の決まりの全体はキャプションのキーワードで絞り込む方法をご覧ください。

ページの割り振り

埋め込みタグは1行の script タグで、貼った位置に一覧が出ます。ページごとに違うウィジェットのタグを貼れば、それぞれ違う投稿を出せます。サロンのサイトなら、次の割り振りがひとつの目安です。

スタイリストやメニューの数だけウィジェットを作ると、すぐに数が増えます。プランごとに作れるのは、フリーが1つ、ライトが3つまで、スタンダードが無制限です(料金プラン)。作り方と、設定の複製はページごとに違うインスタ投稿を見せる方法で説明しています。

スタイリストの紹介ページ: 一人ひとりの作品集にする

スタイリスト別の一覧は、サロンのサイトならではの使い方です。お客様は「誰に切ってもらうか」で迷っているので、紹介文と得意なスタイルの説明の下に、その人の作品だけが並んでいると選びやすくなります。

1. スタイリストごとの目印を決め、その人の担当した投稿のキャプションに入れます。
2. 1人目のウィジェットを、見た目まで仕上げます。名前は「スタイリスト山田」のように、置くページがわかるものにします。
3. 一覧で「複製」を押し、増えたウィジェットの名前と、キャプションのキーワードだけを2人目のものに書き換えます。
4. それぞれのウィジェットのタグを、それぞれの紹介ページの紹介文の下に貼ります。
5. 紹介ページに、その人を指名して予約できるボタンやリンクを置きます。

投稿の少ないスタイリストは、一覧が数件だけになることがあります。期間は「制限なし」にしておき、表示件数を少なめ(3列なら6件)にすると、空きが目立ちにくくなります。

メニューのページ: そのメニューの仕上がりだけを出す

カラーのページにはカラーの、縮毛矯正のページには縮毛矯正の仕上がりを並べます。メニューの説明、料金、所要時間を文字で書き、その下に一覧を置きます。ネイルなら、ハンドとフット、定額のデザインなど、メニューの分け方に合わせて目印を決めると、ページと写真がずれません。

ビフォーアフターを複数枚投稿(カルーセル)にしている場合は、「カルーセル投稿(複数枚投稿)」の設定を「拡大時に全枚数を送る」にします。一覧に並ぶのは1枚目だけですが、拡大表示で前後の矢印が出て、2枚目以降も見てもらえます。1枚目にアフターの写真を置いておくと、一覧での見栄えがよくなります。

仕上がりを動画で見せたいときは、リールだけの一覧も作れます。作り方はInstagramのリールをホームページに表示する方法をご覧ください。

予約ページのそばに置く

写真で「このスタイルにしたい」と思った人が、すぐ予約に進めることが大切です。一覧と予約の入口は、ページの中で近くに置いてください。

1. スタイリストのページ、メニューのページの一覧のすぐ下に予約のボタンを置く。写真を見終わった位置に入口があると、ページを探し回らずに済みます。
2. 予約の案内のページでは、一覧は脇役にする。予約の方法、キャンセルの決まり、空き状況への入口を先に書き、一覧はその下にスライダーで少しだけ置きます。
3. クリック動作は「拡大表示」にする。「Instagramを開く」にすると、写真を押した人がサイトを離れ、予約の画面から遠ざかります。拡大表示なら、サイトの上で写真を大きく見て、閉じればそのまま予約のボタンに戻れます。

予約サイトのページに貼れるか。予約を外部の予約サイトや予約システムで受けている場合、その予約画面に一覧を入れられるかどうかは、予約サイト側が script タグを入れられるようにしているか次第で、サービスによって違います。貼れるかは各社の案内でご確認ください。入れられない場合でも、自分のホームページの予約の案内のページに一覧を置き、そこから予約サイトへリンクすれば、写真から予約までの流れを作れます。

スタイル写真の見え方: 一覧は正方形

ウィジェットの一覧では、写真は正方形の枠に合わせて表示されます。縦長の写真は上下が、横長の写真は左右が枠からはみ出した分だけ切れて見えます。拡大表示では写真全体が表示されます。

ヘアスタイルの写真は縦長で撮ることが多く、一覧では毛先や頭の上が切れることがあります。気になる場合は、スタイルが写真の中央に来るように撮る、一覧では雰囲気を見せて全体は拡大表示で見てもらう、と割り切るのが現実的です。

画像の代替テキストには、Instagram で投稿に付けた代替テキストが使われ、無い場合はキャプションの先頭(約100字)が使われます。キャプションの最初に「カット・カラー/ショートボブ」のようにメニューとスタイルを書いておくと、画面の読み上げを使う人にも伝わりやすくなります。

スタイリストが辞めたとき・入ったとき

辞めたスタイリストのページを閉じるときは、そのウィジェットを「非公開」にするか「削除」します。非公開にすると、タグを貼ったままでも何も表示しません。削除は元に戻せないので、どのページに貼っているかを確かめてからにします。トップページなどの一覧に、その人の投稿を出したくない場合は、目印を「含む投稿を除く」に指定したウィジェットを使うか、キャプションに「#サイト非掲載」を足して外します。

新しく入ったスタイリストは、既存のスタイリストのウィジェットを「複製」して、名前とキーワードを書き換えるのが早い方法です。目印のルールも、入ったときに伝えておきます。

スタイリストが自分のアカウントで投稿している場合

一人ひとりが自分の Instagram アカウントで作品を発信しているサロンもあります。そのアカウントがプロアカウント(ビジネス / クリエイター)なら、サロンの管理画面に連携して、そのアカウントのウィジェットを作れます。ただし、1つのウィジェットに出せるのは1つのアカウントの投稿だけで、複数のスタイリストのアカウントを1つの一覧にまとめることはできません。また、ウィジェットの数と月の表示数は、連携したすべてのアカウントの合計で数えます。

連携には、そのアカウントの持ち主の操作が必要です。他人のアカウントを本人に無断で連携することはできません。プロアカウントへの切り替えはサイトにインスタを載せるにはプロアカウントが必要で説明しています。

お客様の写真を載せる前に

スタイル写真には、ほとんどの場合お客様が写っています。Instagram への掲載に同意をもらっていても、ホームページにも載ることまで伝わっているかは確かめておきたいところです。考え方はInstagramの写真を自社サイトに載せるときの著作権・肖像権にまとめています(法的な助言ではありません)。サイトに出したくない投稿は、目印を入れて「含む投稿を除く」で外せます。

公開前のチェックリスト

1. メニュー、料金、所要時間、営業時間、場所がページに文字で書いてある。
2. スタイリストやメニューの目印の表記が決まっていて、投稿する全員が知っている。
3. 各スタイリストのページに、その人の作品だけが並んでいる(プレビューで確認)。
4. 一覧のすぐ下に、予約のボタンやリンクがある。
5. クリック動作が「拡大表示」になっていて、閉じると予約のボタンに戻れる。
6. ビフォーアフターの複数枚投稿は「拡大時に全枚数を送る」にしている。

よくある質問

お客様が投稿した、サロンのハッシュタグ付きの写真を並べられますか?できません。表示できるのは、連携した自分のプロアカウントの投稿だけです。ハッシュタグでほかの人の投稿を集める機能はありません。

スタイリストのページを、フリープランで作れますか?フリープランのウィジェットは1つなので、スタイリスト別に分けることはできません。1つの一覧をトップページなどに置く使い方になります。分けるならライトプラン(3つまで、月額1,200円・税込)かスタンダードプラン(無制限、月額2,980円・税込)です。フリープランについてはInstagramウィジェットを無料で使うをご覧ください。

1つの投稿に2人のスタイリストの名前を書いたら?両方の名前を目印として書けば、両方のスタイリストのページに出ます。部分一致なので、どちらのウィジェットのキーワードにも当てはまります。

貼ったのに何も出ません。公開・非公開の状態と、絞り込みで投稿が0件になっていないかをプレビューで確かめてください。それでも出ないときはInstagramの埋め込みがサイトに表示されない原因と直し方を順に確認してください。

まとめ

美容室・サロンのホームページでは、Instagram の投稿を「新着の一覧」としてだけでなく、スタイリスト別・メニュー別の作品集として使えます。決め手はキャプションの目印です。表記をそろえて全員で使い、ウィジェットを複製してキーワードだけを書き換えれば、紹介ページやメニューのページに合った写真を並べられます。一覧のすぐ下には予約の入口を置き、クリック動作は拡大表示にして、写真から予約までの道を短くしてください。まずは無料で登録してプレビューで絞り込みを試し、ページを分けたくなったら料金プランをご覧ください。製品の紹介はSocial Feed by grip spaceのページにあります。

参考にした資料

Instagram ヘルプセンター「既存のInstagramの投稿のキャプションを追加、編集、削除する」 https://www.facebook.com/help/instagram/1490745927855762

Meta for Developers「IG Media」 https://developers.facebook.com/docs/instagram-platform/reference/instagram-media/

Social Feed by grip space「料金プラン」 https://marketing-labo.jp/function/widget#wig-price