「美容室のホームページを作りたいんですが、相場はどれくらいですか？」
この質問を受けるたびに、正直に答えるのが難しかった。相場は20〜50万円。でもその「相場」の内訳を知ると、少し複雑な気持ちになる。
名古屋で美容室HP制作の市場を調べていたとき、一つの会社が浮かび上がってきた。名古屋市内に拠点を置く、創業15年以上の美容室専門のWEB制作会社だ。
競合の実態を分析して気づいたこと
その会社のサイトを見ると、実績ページに30件以上の美容室が並んでいる。名古屋の有名サロンが多く含まれていた。
実績サイトをいくつか見ていくうちに、気づいたことがある。デザインが違う。カラーも違う。ロゴも違う。しかし何か、構造が似ている。
ソースコードを見てみると、確信に変わった。専用のWordPressカスタムテーマを、複数のサロンに使い回していた。
つまり、骨格は同じテンプレートで、写真・カラー・テキストを差し替えて納品している。それで20〜50万円を受け取っている。
「これより良いものを10万円で出せないか」という問いが生まれた。
9サイトを分析して骨格を解析する
まず市場を正確に把握することにした。名古屋・東京・京都の美容室サイトをSEO上位から10件前後抽出して分析した。評価基準はデザイン・UX・情報設計・モバイル対応・SEOの5点。
市場平均は6.0〜7.0点で、8点超えは分析した中の1サイトのみだった。競合会社の実績サイトは7.2〜7.5点に集中していた。テンプレートの使い回しがあるため、ある水準以上にはなるが、突き抜けた品質にはなりにくい構造だ。
9サイトを分析して見えてきた共通パターンを書き出した。
- ヒーロー：フルスクリーン静止画（動画採用なし）＋英文大見出し＋日本語サブ
- ロゴ：左上ヘッダー内（SVG・白版と通常版の2色）
- ナビ：右上配置・英字大文字・トラッキング広め
- CTA：ヘッダー右端に「WEB予約 / TEL / LINE」の3本セット
- 配色：白ベース＋黒/グレー＋差し色1色
- セクション順序：HERO→CONCEPT→MENU→STYLIST→STYLE→DIARY→SALON→FOOTER
この骨格さえ押さえれば、市場上位10〜20%のサイトが作れる。そのことがデータで確認できた。
3つの骨格パターンを設計する
分析から、美容室HPには大きく3つのデザイン方向性があることがわかった。それぞれを独立したテンプレートとして開発した。
LUMIÈRE（ナチュラル系）は、競合他社が得意とする定番骨格だ。左ロゴ＋上ナビの対称グリッド。フルスクリーン静止画ヒーロー＋左下コピー。白ベース＋ダスティベージュの差し色。量産向けで汎用性が高い。
RIVAGE（西海岸系）は、差別化を最大化したマガジン型骨格だ。センターロゴ風＋ハンバーガードロワー。大胆斜体タイポグラフィ（Cormorant Italic）。ホバーで画像が浮遊するメニュー。マーキー（流れるテキスト）。海外の有名サロンサイトを参考にした設計だ。
NOIR（シティ系）は、工業的ミニマリズムのタイポグラフィ駆動型だ。全モノクロ画像（grayscale(100%)）。テキスト駆動ヒーロー「FORM / FOLLOWS / EMOTION.」。座標表示（35°39’42″N 139°43’30″E）。エレクトリックイエロー（#F5F500）を差し色に使う都会派スタイル。
技術選択でWordPressをやめた理由
3テーマのHTMLプロトタイプを作り、デモサイトとして公開した。次のステップとして、CMS構成をどうするかを決める必要があった。
競合他社はWordPressカスタムテーマを使っていた。しかしWordPressには限界がある。テーマ更新時にカスタマイズが崩れるリスク。プラグインの競合。管理画面が複雑で更新が怖い。そして決定的なのが、AIとの相性の悪さだ。
WordPressのブロックエディタやカスタムフィールドはGUIで操作する前提で設計されている。AIがAPIを通じて直接制御することが難しい構造だ。これからの時代、AIが更新・管理できる構成の方が長期的な競争力がある。
選んだのはNext.js + microCMSのヘッドレス構成だ。CMSはAPIでデータを返すだけ。フロントエンドはNext.jsで描画する。AIがAPIを通じてコンテンツを更新できる。Vercelでホスティングすれば表示も速い。
実装で躓いたモバイル真っ白問題
プロトタイプを実装していた段階で、予期しない問題が起きた。Tailwind CDNを使って開発していたところ、モバイル端末でフェードインアニメーションが付いた要素が「真っ白」になって表示されない問題が発生した。
再現条件を絞り込んでいくと、Tailwind CDNのパースタイミングとJavaScriptの実行順序に起因していることがわかった。DOMContentLoadedのタイミングでCSSが完全に適用されていないため、opacity: 0のまま要素が固まってしまっていた。
解決策はwindow.loadイベント＋requestAnimationFrameの組み合わせだった。すべてのリソースが読み込まれてから、1フレーム待ってアニメーションを開始する。これによってCSSが確実に適用された状態でフェードインが始まるようになった。
「小さい問題」に見えるが、実際にモバイルで確認して初めて気づく類の問題だ。テンプレートを量産する立場として、この種の問題は徹底的に潰しておく必要がある。
価格設定10万円の根拠
競合他社の推定価格は20〜50万円。品質スコアは7.2〜7.5点。
graciautoのテンプレートの目標は7.5〜8.0点。同等以上の品質を10万円で提供する。
なぜ10万円で可能なのか。テンプレートという設計が工数の大部分を削減するからだ。骨格設計・デザインシステム構築・コーディングの工数はすでに済んでいる。クライアントごとに異なる部分は「画像・テキスト・カラー・店舗情報」だけだ。
従来の制作会社が費用をかけているのは「毎回ゼロから作る工数」だ。その工数を共通化した分を、そのままクライアントへの価格還元にあてている。
まとめ
美容室HPテンプレート開発の出発点は、競合他社の構造を分析した日だった。長年独占してきた市場の「仕組み」が見えた瞬間、「同じ仕組みでもっと安くできる」という確信が生まれた。
市場分析→骨格パターン確定→3テーマ開発→ヘッドレスCMS構成。このプロセスを経て、graciautoの美容室HPテンプレートが形になった。
美容室・ヘアサロンのホームページ制作・リニューアルをお考えの方はご相談ください。