バーバーや美容室の多くは、数人〜数十人以下の小規模で、集客も大手予約サイトに依存しています。
「ホームページをつくりたくても中々手が回らない」
という方も多いでしょう。
そこで今回はバーバーや美容室、サロンなどのホームページがつくれるWordPressテーマ「HOMME」をご紹介いたします。
かっこいい雰囲気やスタイルを表現できるデザイン、スタイリストのプロフィール掲載や、予約や来店へ繋がる導線設計をパーケージ化したサイトテンプレートです。
雛形に沿って操作してていくだけで、低コストでイケてるサロンのホームページを作成できます。
>> 販売ページはこちら
目次
WordPressテーマ「HOMME」とは
WordPressテーマ「HOMME」は、TCDシリーズ107作目のテンプレートです。
バーバーや美容室のサイト制作を想定した仕様です。基本仕様や実現できること、つくれるサイトについて解説いたします。
基本仕様・できること
- バーバーや美容室の雰囲気の表現
- 豊富なスタイルギャラリーの掲載
- スタイリスト一覧の掲載（北店、南店など店舗別も可）
- スタイルと担当スタイリストの紐付け
- メニューやコース、お客様の声の掲載
- 予約やお問い合わせへの導線の配置
- スタッフブログや店舗のお知らせの発信
つくれるサイト
HOMMEでつくれるサイトは、バーバーや美容室以外にも次のようなサイトを想定できます。
- ネイルサロン
- タトゥースタジオ
- アートメイクサロン
- まつげエクステサロン
- クラフトショップ（アクセサリーや工芸品など）
- スタイルブック（アパレル系のコーディネート集など）
作品とスタッフが紐づいており、予約や販売へ繋げたいサイトと相性がいいです。
HOMMEの主要機能の解説
先ほどの基本仕様の具体例や、HOMMEの主要機能をご紹介いたします。
ロード画面
ページの読み込み中や、サイトのファーストビューなどに設定できるロード画面。
↑のようにキャッチコピーやロゴを設定することも可能です。
サイトに初訪問時だけ表示、トップページでは毎回表示する等の設定も可能です。
単に読み込み中を示すだけでなく、お店の世界観を伝える役割もあります。
ロゴ画像やキャッチコピーを用意できるなら、ぜひ設定しておきたい機能です（テーマ内蔵のシンプルなアイコンも利用可）。
サイトの配色
サイト全体の配色を一括変更する機能です。
プリセットカラー
あらかじめ5色のプリセットカラーを用意しています。
いつでもワンタッチで切り替え可能です。
ブラウン
プリセットカラーは、文字の視認性や美しさを考慮したTCDのデザイナーが推奨する配色です。
カスタムカラー
プリセットカラー5色以外にも、カラーピッカーで自由に変更可能です（色コードの指定も可）。
デモサイトはバーバーなので落ち着いたブラウンにしていますが、ネイルサロンやアパレル系のサイトなら、少し明るめの色に変更していいかもしれませんね。
ネイルサロンのイメージ
上の例では、ロゴやフォントタイプ、画像、テキストを差し替えているので、ガラッと雰囲気が変わります。
トップページ
HOMMEのトップページは、ヘッダーコンテンツとコンテンツビルダーに分かれます。
ヘッダーコンテンツ
ヘッダーコンテンツは、色々とカスタマイズ可能です。
まず背景には、次の設定が用意されています。
- 画像（複数枚も可）
- mp4動画
- YouTube動画
また、背景に重ねるコンテンツには、デモのようにロゴ画像を表示するほか、キャッチフレーズ＋ボタンの表示も可能です。
画像の場合は、背景のみ or 手前のコンテンツも一緒にスライドさせる2タイプから選択できます。
スライドのサンプルを用意していますので、ぜひこちらの記事もチェックしてみてください。
>> ロゴ画像を魅せる多機能なヘッダースライダー
コンテンツビルダー
ヘッダーより下のコンテンツは、コンテンツビルダーで作成できます。
アイテムごとに用意されている入力項目を、番号通りに埋めるだけで簡単に作成可能です。
こういったアイテムを複数組みわせて、1枚のトップページをつくります。アイテムの追加・削除・非表示・並び替えも直感的に可能です。
編集にコーディングは一切不要です。HOMMEで追加できるアイテムはこちらで一つずつ解説しています。
スタイルページ
バーバーや美容室ならヘアスタイルギャラリーとして使う、ネイルサロンやタトゥースタジオなら作品ギャラリーとして使えるカスタム投稿タイプです。
複数の画像をスライダー形式で設置可能です（画像が1枚なら中央表示）。
ページ下部には「スタイルについてのコメント」を表示できます。
コメントの設定は必須ではありませんが、プロ目線のコメントは、スタイル選びの参考になるかもしれませんね。
また、後述するスタッフページとも紐づくので、プロフィールや別のスタイルページへの導線にもなります。
スタッフページ
バーバーや美容室のスタッフプロフィールを掲載できるページです。ページ下部には、そのスタッフと紐づいたスタイルページが表示されます。
スタッフの得意のスタイルなどを効果的にアピールできます。
WordPressのユーザーとスタッフは連動していますので、設定はすぐに済みます。ユーザー設定ページに専用項目があるので、番号通りに登録すればOKです。
あとは、用意されている固定ページテンプレート「スタッフ一覧」を使えば、スタッフ一覧ページに表示されるという仕組みです。
スタッフ一覧ページの編集画面は次の通りで、並び替えや非表示もワンタッチです。
そのスタッフのブログ記事一覧ページにもサクッと移動できます（そのユーザーの投稿が無い場合、ボタンは自動で非表示に）。
デモサイトのスタッフページから操作してみてください。次のようなスタッフ別の記事一覧ページが表示されるはずです。
つまり、次のようなページの行き来がスムーズにできるんですよね。
スタイル（作品）、担当スタッフ、その人のブログ記事が紐づいているので、
「このスタッフの別のスタイル（作品）を見たい」
「担当スタッフのプロフィールを見たい」
「このスタッフのブログ記事を見たい」
こういったニーズを解決できる仕様です。スタイル、プロフィール、スタッフブログをそれぞれ充実させると相乗効果を期待できます。
メニュー/コース（料金表）
バーバーや美容室に便利なメニュー/コース（料金表）は、固定ページ内の機能で簡単に作成できます。
設定画面はこのような感じです。
用意されている入力項目を埋めれば、ページ本文内の表示したい箇所にコピペするのみです。
メニューのデザインは2タイプあり、並び替え・追加・削除も簡単です。同じ仕組みで「お客様の声」も作成できるようになっています。
ブログ投稿/お知らせ
>> ブログページのデモを見る
WordPressテーマなので、ブログ投稿機能ももちろん使えます。長期的に運用すれば集客に貢献します。
バーバーやサロンならスタイリングのコツや髪型のトレンドなどを発信するのもありですし、有名人や俳優、モデルの髪型の解説などもおもしろいかもしれません。
通常の投稿と分けて使えるカスタム投稿タイプ「お知らせ」は、キャンペーンやクーポン情報、新サービスの告知などに便利です。アイキャッチ無しもで使えますし、カテゴリーも設定可能です。
ランディングページ
このような独立したページは、固定ページテンプレート「ランディングページ」でつくれます。
独立したページとは、サイトを構成するページのほか、特別なキャンペーンページや後から追加したページなどを指します。
ヘッダーの形状や本文内の幅、各要素の表示/非表示はワンタッチで切り替え可能ですので、バリエーション豊かなページが作成可能です。
いくつかサンプルを作っているので、作成例としてご覧ください。
ヘッダーやフッターを非表示にしているものは、サイト内の他のページと別の体裁にしているためです。バーバーやサロンの基本情報を掲載しているページとは性質が異なるため、ユーザーの選択肢をあえて減らしています。
なぜ選択肢を減らすのか。ランディングページの構成のヒントになるので、こちらの記事も参考にご覧ください。
検索エンジンや広告をクリックしたユーザーが、最初に辿り着くページをランディングページ（LP）と言います。本稿ではランディングページのコンバージョン率を引き上げたいときに確認するべき、ストーリー性とブラッシュアップするときに注目するべき要素について考えていきます。 LPOとは何か LP...
ヘッダー
HOMMEでは、ロゴやメニューに加えて、予約ボタンも表示可能です。PCでは、右上に位置するボタンです。スマホのドロワーメニュー内にも連動します。
また、スマホサイズのデバイスでは、上記のように「電話ボタン」も表示できます。
スマホユーザーは、サイト内でスタイルや店舗情報を確認しながら、スムーズに予約が可能です。PCサイトの設定を済ましておけば、スマホ時も連動しますので、難しい設定は不要です。
フッター
フッターは、ロゴ・ウィジェット・メニューで構成されています。
↑の赤枠部分がウィジェットエリアです。デモでは、住所/電話番号・営業時間・予約ボタンという構成ですが、お好きなウィジェットを設置可能です。
スタイル情報やスタッフプロフィール、ブログ記事一覧なども設置いただけます。設定例をご紹介していますので、こちらの記事も参考にご覧ください。
HOMMEのフッターは、以下の要素で構成されています。
また、フッターの背景には画像を設定できますが、サイトのアクセントカラー（デモではブラウン）にも変更可能です。
背景画像の設定は必須ではないので、制作時間を短縮できます。
バーバー・美容室のサイトはHOMMEでつくろう
バーバーサロンや美容室に最適なWordPressテーマ「HOMME」の主要機能をご紹介いたしました。
店舗の基本情報だけでなく、スタッフ一覧やスタイルギャラリー、予約や来店に繋げる導線設計までカバーできるサイトがつくれます。
かっこいいバーバーや美容室なら、大手予約サイトだけでの集客はもったいないです。店舗独自のウェブサイトを持つことで、集客・ブランディングのレベルアップが可能です。
バーバーサロン・美容室のホームページ制作には、ぜひHOMMEをご活用ください。
コメント