「こわくない、整体院です。」床の光と小さな靴だけで、はじめての人の肩の力を抜く整体院サイト

整体院のホームページがどう仕上がるかをご覧いただく制作サンプルです。架空のモデル店舗「ひだまり整体院」を題材に、ボツにした3つの方向性と採用した「窓辺のひだまり」案、5ページの中身、約2時間の制作の流れをご紹介します。

この事例は、整体院のホームページがどんなふうに仕上がるかをご覧いただくための制作サンプルです。題材にした「ひだまり整体院」は架空の院として設定されたモデル店舗で、院名・住所・電話番号、院長やスタッフの人物はすべて架空です。ただし、制作そのものは本番とまったく同じ手順で行っています。デザインの方向性をいくつも検討して捨て、ページを組み、審査を通して公開するまで、実測で約2時間でした。

モデル店舗の設定：川越・本川越駅から徒歩6分、ふたりでやっている整体院

サンプルの設定はこうです。埼玉県川越市、本川越駅から歩いて6分。2020年開業、ベッド2台の完全予約制で、駐車場は2台。院長の小林大輔さん（柔道整復師）が慢性的な腰痛や肩こり、デスクワークの首・頭痛、スポーツ後のケアを担当し、小林美咲さん（柔道整復師）が女性限定で産後の骨盤ケアを担当しています。キッズスペースと授乳スペースがあり、ベビーカーもそのまま入れる。予約はLINEを一番に、次に予約フォーム、電話は施術中に出られないので折り返し。ボキボキしない、痛くない整体で、逆に「バキッ」を期待する方には向かない、とはっきり書いてよい。そういうお店です。

このサイトに置いた合格基準はひとつだけでした。「産後3ヶ月のお母さんが、スマホで3秒で『行っても大丈夫』と思って、LINEを押せること」。病院っぽくもリラクゼーションサロンっぽくもしない。白背景に施術写真と症状アイコン3つ、青と赤の矢印、「こんなお悩みありませんか」という整体院サイトの定番セットは、最初から禁止事項に入れました。

ボツにした3つの方向性

最終形の前に、3つの方向性を検討して捨てています。ひとつめは「夕暮れの縁側」。暗めの琥珀色を下地にクリーム色の文字を置く、静かで映画のような案です。きれいなのですが、モデル店舗の設定にある白・生成りの下地と真っ向から食い違い、なにより「夜のリラクゼーションサロン」に見えてしまう。これは避けたい方向そのものでした。

ふたつめは「絵本」。手描きの太陽や猫や家のイラストで組む、遊び心のある案です。お母さんには親しみやすい。ただ、10年腰痛とつきあってきた50代の方が見たときに「ちゃんとした場所」だと感じられるか、というところで弱い。ひだまり整体院は産後ケアだけの院ではないので、片方の読者を置いていく案は採れませんでした。

みっつめは「清潔な診療所」。すっきりしたゴシック体、情報をぎっしり並べた定義リスト、細い罫線、青みがかったグレー。情報量の面ではいちばん頼もしいのですが、これはこの院がいちばん恐れている「病院っぽさ」そのものです。ここで決めたのは、日本のサイトに必要な情報の密度は残し、臨床的な見た目だけを捨てる、ということでした。

採用したのは「窓辺のひだまり」。光そのものをサイトにする

最後に残ったのが「窓辺のひだまり」案です。コンセプトは一文で「サイト全体がひとつのひだまりである」。生成りに近い紙色（#FBF8F2）を下地に、明るいオーク色の罫線、あたたかい墨色の文字。青も赤も医療っぽいティール色も使いません。緑は一枚の葉のように、1ページに1か所だけ。そして蜂蜜色の光が、ページのどこか1行の見出しの裏側にふわっと落ちています。ただの飾りのグラデーションではなく、スクロールに合わせて画面の光がゆっくり朝の淡いレモン色から正午の蜂蜜色、夕方のアプリコット色へ移ろい、太陽が動くように少しずつ位置を変えていく仕掛けです。動きは呼吸のようにゆっくり、常に動き続けるものは置いていません。

書体は丸みのあるZen Maru Gothicを、見出しはウェイト300、本文は400で。見出しはラベルではなく「こわくない、整体院です。」「治す、ではなく。ゆるむ時間を。」「料金は、これだけです。」と、句点で終わる完全な文にしました。雑誌の見開きのように大きく組み、写真は格子に並べず、大小を段違いに置いて文字を写真の縁に少し重ねています。本文は17px以上、注釈も14px以上。産後で寝不足のお母さんがスマホで読むことを前提にしています。

LINEは緑にしない。スマホの下に帯も出さない

予約導線にも、モデル店舗の設定に沿った判断があります。主な読者は30代のお母さんで、電話は施術中に出られない。だから順番はLINE、フォーム、電話。ただしLINEのボタンはあの緑色ではなく、墨色の地に白い吹き出しのピルにしました。モデル店舗の設定で「緑のLINEボタンは使わない」と決めていたためです。スマホでは、よくある画面下の全幅バーをあえて置いていません。「急がせない」ためです。代わりに、初画面を過ぎたところで右下に「LINEで予約」の小さなピルがひとつだけ現れ、親指の届く位置にずっといてくれる。予約フォームが画面に出ているあいだは、そっと隠れます。

5ページの中身

納品したのは5ページです。トップは、床に落ちた午後の光と小さな靴の写真に「こわくない、整体院です。」のひとことだけ。その下に「ひだまりのように」という短い宣言、院長とスタッフふたりの紹介、産後の腰・骨盤／10年つきあってきた腰痛／デスクワークの首と頭痛／スポーツのあとのケアという4つの「こんな方が、いらしています」、「ボキボキ、しません。」の宣言、初回の流れ、院内とキッズスペース、営業時間とアクセスの要約、と続きます。「施術について」は考え方と初回の流れ、痛くない理由、そして「『バキッ』を期待する方には向きません」という正直な一節。「料金」は初回6,600円（カウンセリング＋検査＋施術・60分）、2回目以降5,500円（40分）、産後骨盤コース5回25,000円（女性のみ・美咲担当）の3行だけを、税込・自費、保険は使えません、回数券は無理に勧めません、前日20時までキャンセル無料という注記とともに。「アクセス・ご予約」には住所、徒歩6分の散歩図、埼玉県の地図、営業時間の表、LINE・フォーム・電話の3つの窓口、子連れや授乳、服装、産後いつからといったよくある質問。「プライバシーポリシー」はフォームを置くために必要な法定ページです。

細かいところで言うと、料金や営業時間の数字だけは、細身のセリフ体Frauncesで組んでいます。「6,600」や「9:00〜20:00」が丸ゴシックのなかで少しだけ上品に立ち、雑誌の目次のような表情になります。アクセスページの地図は、住所が架空なのでGoogleマップを埋め込まず、埼玉県のシルエットに川越・ふじみ野・狭山を記し、本川越駅から院までの道のりは実在しない目印を描き込まない図解にとどめました。

約2時間で、審査を通して公開まで

制作は、方向性の検討から5ページの組み立て、写真の配置、審査、公開までで実測約2時間でした。途中の審査では、見出しの上に添える小さなラベルの薄い茶色がコントラスト基準に届かなかったので墨色寄りに直したり、スマホの初画面で靴と光が真ん中に来るように写真の見せ方を調整したり、「声」の欄を罫線付きの均等なカードから段違いのテキストブロックに組み替えたり、といった手直しを入れています。見出しが1文字だけ次の行に落ちないように、すべての見出しに改行位置を指定してあるのも、地味ですが読み心地に効く部分です。公開後に「次に触るときに折り込む」細かな改善点も記録していて、本番の運用と同じように育てていける状態になっています。

この事例のようなホームページを、あなたのお店にも。専門用語も設計図もいりません。お店のこと、避けたい見え方、どんな人に来てほしいかを、チャットで話していただくだけで、ホームページ番頭が同じように方向性を検討し、形にしてお見せします。まずは hpbanto.com へ。