三重県鈴鹿市。寿福院という寺院の離れで稼働する、施術者がひとりだけのフェイシャルエステサロン「美肌菌育成フェイシャリスト KUMULIPO（クムリポ）」。
本プロジェクトは、既製テーマでの運用から脱却し、サロンの独自性をシステムレベルで実装するWordPressオリジナルテーマのフルスクラッチ・デプロイメントの記録です。
- 制作期間
- 約2週間
- 公開
- 2026年8月
- 実行範囲
- 企画・原稿構成・デザイン・WordPressオリジナルテーマ開発・SEO初期設定
MISSION
課題・目的
プロジェクト初期段階において、クリアすべき3つの壁（課題）を定義しました。
「よくあるサロンサイト」フォーマットの回避
エステサロンのWebサイトには特有の「型」が存在します。それらに当てはめれば綺麗にはまとまりますが、同時にその店である必然性が消失します。
KUMULIPOの強みは「均質化されたサービス」ではなく、「施術者自身の属人性」にあります。したがって、今回は単に「綺麗に整えること」を意図的にミッションから除外しました。
「美肌菌育成」という概念の視覚化
施術のコアである「肌の菌を育てる」というアプローチは、まだ一般的なパラメータとして認知されていません。テキストによる説明過多なトップページは離脱を招くため、言語化の前に、まず視覚情報としてユーザーの脳内にインストールする仕組みが必要でした。
コンプライアンス（薬機法）と具体性の両立
美容領域において、効果を断言する表現はシステムエラー（法令違反）を引き起こします。しかし、安全策を取りすぎて情報を削れば、サロンの輪郭がぼやけます。
表現の強さではなく、事実と具体性によるデータリンクで信頼を構築するタクティクスに切り替えました。
SYSTEM DESIGN / TACTICS
設計・技術的アプローチ
これら複数のミッションを単一のロジックで解決するためのアーキテクチャとして、「粒（つぶ）」をサイト全体の共通言語（UIコンポーネント）として採用しました。
サロン名の「KUMULIPO」は、小さな生きものから生命が始まるハワイの創世詩に由来します。そして、施術の軸となる「美肌菌」もまた、肌上のミクロな存在。この2つの概念は同じ形状を持っています。
サイトのコアコンセプトを「小さなものから、始まる。」と設定し、あらゆる実装基準をこのルールに紐づけました。
Canvas APIによる動的レンダリング
ファーストビューの背景では、漂う粒をcanvasで描画。ゆっくりと浮遊し、ユーザーのカーソル（ポインター）が接近すると周囲の粒が吸い寄せられるインタラクションを実装しました。「肌の上で、小さなものが生きている」という状態を、テキストより先にユーザーの視界へデプロイするための仕掛けです。
スタイリングの最適化
配色はパステルグリーンをベースに設定。業界標準であるピンクやベージュのレイヤーを避けることで、既存フォーマットへの同質化を防ぎます。
「お寺の離れ」という和の立地に、あえて由来である「ハワイ」のデザインベクトルを正面からぶつけることで、他店とは競合しない独自のポジショニングを確立。タイポグラフィは明朝体（Zen Old Mincho）を主軸とし、「大人っぽいけれど柔らかい」という絶対条件をクリアしています。
サイト内で唯一、店名の由来セクションのみ縦組みを採用し、ユーザーの視線誘導の向きを意図的に変えています。
TROUBLESHOOTING / ARCHITECTURE
環境制約や壁への対処
細部の実装においても、妥協なく独自仕様のアーキテクチャを構築しています。
ナビゲーションの再構築
スマートフォンのメニューは、汎用的なサイドスライド方式を破棄。ベースの背景色が手前に浮上し、項目が下部から順に立ちのぼるモーションへ変更しました。
ハンバーガーアイコンも標準の3本線ではロゴの細さや粒の罫線と釣り合わず、UIのノイズとなるため再設計。極細の2本線へ減らし、下部に微小な英字ラベルを添えることで最適化しました。
拡張領域（1920pxオーバー）へのパララックス処理
大型モニタ環境下でコンテンツ幅（1920px）の外側に生じる余白に対し、3層の粒がそれぞれ異なる速度で上昇する視差（パララックス）アニメーションを配置。右側のみにコンセプトテキストを縦組みで配置し、規格外の大きい画面への対応として遊びを入れました。
動的パラメータ（運用年数）の自動計算
「エステ歴◯年」という経年データは、ハードコードすると翌年には虚偽情報となります。起点年月を変数として持たせ、表示のたびに自動算出するロジックを実装。運用側のメンテナンスコストをゼロ化しました。
OGPイメージの最適化
個人サロンにおいて極めて重要度の高いLINE等でのシェア（流入経路）を最大化すべく、ファーストビューの世界観（滲み、粒、書体）を完全に同期させた専用のOGP画像を生成。ユーザーの共有アクションにおける視覚的ロスを防ぎます。
【使用技術・システム要件】
- WordPress（クラシックテーマをフルスクラッチ）
- SCSS（@use によるパーシャル分割）
- JavaScript / jQuery / Canvas API
- Contact Form 7 ＋ reCAPTCHA v3
- Google Fonts（Zen Old Mincho / Zen Kaku Gothic New / Cormorant Garamond）
SUMMARY
完遂の記録・総括
個人サロンにおけるWebプレゼンスの構築は、既存のフォーマットで綺麗に整えることよりも、現場に存在する「固有のパラメータ（その人がそこにいるという事実）」をいかに抽出するかが重要です。
本プロジェクトにおいて、外部から新たに持ち込んだ装飾はほぼありません。サロン名の由来という、クライアントが既に持っていたリソースを掘り起こし、それをサイト全体の文法としてデプロイしました。
「小さなものから、始まる。」
現場の思いをシステムアーキテクチャへ変換し、妥協なく形にする。Web領域における実行支援の一つの完成形として、ここに記録します。
▼ 個人サロンに特化した独自の世界観構築・Web実行支援をお求めの方は、以下よりデータリンク（お問い合わせ）ください。