nao tune your bodyの公式サイトは、白とベージュを基調にした淡い色づかいと、線の細い明朝体、そして施術の場面を写した実写でまとめられています。装飾を足して伝えるのではなく、余白と写真の質感で雰囲気を届ける組み立てになっており、落ち着いた印象を求めるサービス業のサイトづくりに応用しやすい見本です。
このサイトが紹介しているのは、鎌倉市内・藤沢市内・横浜市内へ伺う出張型の整体です。店舗の外観や内装を見せられない業態で、どのように安心感と必要な情報を届けているのかを、実際の画面から読み取れる範囲で分析します。配色、写真の選び方、情報の並べ方、ボタンの扱いという順に見ていきます。
淡いトーンでそろえたファーストビュー
最初に目に入る画面は、白いヘッダー、横幅いっぱいの実写、写真に重ねた二行のコピーという三つの要素だけで構成されています。要素を絞り込み、写真の中にある色をそのままページの色として使う考え方が、サイト全体のトーンを決めています。ここでは上から順に、それぞれの役割を確認します。
細いロゴと五項目のナビゲーション
画面最上部は白い帯で、左端に小文字の「nao」、その下に小さく「tune your body」が添えられています。ロゴは線が細く面積も控えめで、主役になろうとしていません。右側には横並びのグローバルナビゲーションが置かれ、ホーム、代表挨拶・コンセプト、お客様の声、お問い合わせといった入口が同じ文字サイズで並びます。
項目数を五つに抑えているため、どこに何があるのかを一度で把握できます。ナビゲーションの文字も細い書体で統一され、白地に黒い文字が浮かぶだけの構成です。帯の下端には細い罫線が一本引かれ、下に続く写真との境目だけを静かに示しています。
施術風景の実写を全幅で見せる
ヘッダーの下には、横幅いっぱいの写真が置かれています。うつ伏せになった女性の背中に施術者の両手が添えられている場面で、白い上衣、ベージュのタオル、右手前の観葉植物、やわらかい自然光が一枚に収まっています。手の位置と体の向きが画面中央へ向かうため、重ねられた文字へ自然に視線が移ります。
出張整体は、どこで、どのように受けるのかを想像しにくいサービスです。文章で説明を始める前に施術の場面そのものを見せることで、初めて訪れた方が抱きやすい不安を先回りして小さくできます。受け手の表情が穏やかで、力を込めている様子が写っていない点も、後に続く「痛みのない手技」という説明と食い違いません。
写真に重ねた二行のコピー
写真の中央には、明朝体の二行のコピーが重ねられています。一行目は「からだもこころも」で、二行目には「ほどける」という和語が選ばれ、体の状態と気持ちの両方に触れる姿勢が短い言葉で示されています。漢字を最小限にしてひらがなを多く残した表記も、やわらかい印象づくりに働いています。
文字は字間が広く取られ、色は黒に近いグレーです。写真の中でも明るく模様の少ない部分に重ねられているため、背景に沈まずに読み取れます。文字の下にボタンを置かず、ファーストビューでは行動を促さないという判断も特徴的です。まず雰囲気を受け取ってもらい、行動の入口は読み進めた先に用意しています。
読み手の理解の順に沿った情報設計
トップページは、導入、悩みの提示、施術の特徴、連絡手段、営業情報という順に並んでいます。読み手が自分に関係のある内容かどうかを確かめてから説明へ進み、最後に行動へ移る流れです。それぞれのブロックがどのような形で見せられているのかを整理します。
「はじめての方へ」という導入ブロック
ファーストビューの次には、中央そろえの見出しを持つ文章ブロックが置かれています。カウンセリングと検査に時間をかけること、方針を言葉だけで終わらせず実際に確かめてもらうこと、施術後の説明やLINEでの相談にも対応することが、三つの段落に分けて書かれています。
段落ごとに空きを取り、行間も広めに設定されているため、文字数のわりに読み進めやすくなっています。左右には大きな余白が確保され、一行あたりの文字数が長くなりすぎないよう調整されています。文章量の多いサービス紹介では、この余白の取り方が最後まで読まれるかどうかを左右します。
悩みを並べた左右二分割のセクション
続くセクションは、左に施術中の手元を写した写真、右に見出しと項目を置いた左右構成です。写真は画面の左端まで届いており、余白の多いページの中で視線の流れに変化を作っています。項目には、痛み、原因の分からない不調、動かしにくさ、パフォーマンスの向上、他で改善しなかった経験という五つの状態が並びます。
症状名を細かく列挙するのではなく、日常の言葉で状態を示している点が参考になります。読み手は専門用語よりも自分の実感に近い表現で当てはまりを判断するためです。写真と文字の分量が近く、どちらか一方が重くならない配分も保たれています。
三枚のカードで並列に見せる施術内容
「施術内容」のセクションでは、同じ大きさの写真カードが三枚横に並びます。各カードには半透明の白い帯が重ねられ、その上に短いラベルが置かれています。根本原因への働きかけ、一人ひとりに合わせた組み立て、痛みのない手技という三つの軸が、順位を付けずに並列で示されています。
写真の上へ直接文字を置くと読みにくくなりますが、白い帯を一枚挟むことで文字のコントラストが確保されています。三枚とも同じ処理で統一されているため、内容の違いだけに注意が向きます。カードの下には黒い角丸のボタンが中央に置かれ、詳しい説明のページへ進む導線になっています。
行動につながるボタンと導線
ページ全体は色数が少なく、装飾も控えめです。その中で押せる場所だけが明確に区別されており、迷わずに次の行動へ進めるようになっています。ボタンの色と形、そして連絡手段の並べ方から、その考え方を読み取れます。
濃い色を使うのはボタンだけ
白、ベージュ、薄いグレーでまとまったページの中で、黒い角丸のボタンだけが強いコントラストを持っています。ボタンは横長で丸みを帯びた形に統一され、文字は白抜きです。同じ形が繰り返されることで、押せる場所の見分けが一目で付きます。
彩度の高いアクセントカラーを使わず、明度差だけで注目を集める方法は、落ち着いた世界観を崩したくないサイトで有効です。色を足すほど印象は賑やかになりますが、このサイトは黒一色に絞ることで、静けさと分かりやすさを両立させています。
メールと公式LINEを並べた問い合わせ
「ご予約・お問い合わせ」のセクションでは、薄いグレーの面が左右に二つ並びます。左はメール、右は公式LINEで、それぞれの中に同じ形のボタンが置かれています。二つのパネルは幅も高さもそろえられ、どちらかが優先されているようには見えません。
連絡手段は多いほど親切に見えますが、選択肢が増えるほど比較の手間も増えます。ここでは二つに絞り、面の背景色を変えて領域を区切ることで、迷う時間を短くしています。メールでのやり取りは返信までに時間がかかる場合があると断り書きが添えられている点も、受け取る側の期待とのずれを防ぐ配慮です。
出張という業態に合わせた情報の置き方
店舗を構えるサービスと違い、出張型では来てもらえる範囲かどうかが最初の判断材料になります。このサイトは、その条件と運営者の背景を、それぞれ適した場所に配置しています。
フッターに集約した営業情報と出張エリア
ページ最下部は薄いグレーの帯になっており、営業時間、定休日、出張エリア、電話番号が同じ書式で並びます。出張エリアには鎌倉市内、藤沢市内、横浜市内が挙げられ、範囲の外でも相談を受け付ける旨が添えられています。木曜日だけ受付の開始時刻が異なること、土曜・日曜・祝日が休みであること、施術中は電話に出られない場合があることまで記されています。
これらは問い合わせの直前に確かめたい情報で、全ページ共通のフッターに置くことで、どのページから読み始めた方でも同じ内容にたどり着けます。項目名を【】で囲んで行頭にそろえる書き方も、必要な部分だけを拾い読みしやすくしています。
運営者の経歴を独立したページで伝える
「代表挨拶・コンセプト」のページには、牧原直子様の経歴が掲載されています。理学療法士の免許を取得したのち、病院や施設で十年以上にわたり一万人を超える方の臨床に携わり、脳梗塞やパーキンソン病、整形外科の術後といった幅広い状態のリハビリテーションに関わってきた経緯が書かれています。2020年に現在の業務へ移り、2024年に開院しています。
個人で施術を行うサービスでは、誰が担当するのかが選ぶ理由に直結します。トップページでは雰囲気と概要を伝え、別ページで背景や考え方を詳しく述べるという役割分担は、情報量を増やしながらトップページの読みやすさを保つ方法として参考になります。
整体・治療系サイトのデザインで押さえたい観点
ここまで見てきた特徴は、同じ業種のサイトを作るときの判断材料になります。写真、書体、手順の見せ方という三つの観点で、一般的な考え方とこのサイトの選択を照らし合わせます。
施術の様子を写真でどこまで見せるか
体に触れるサービスでは、施術の様子が分からないことが申し込みのためらいにつながります。一方で、痛みや治療の場面を強調しすぎる写真は緊張感を生みます。このサイトは、手元と受け手の表情が穏やかに写った場面を選び、色味もタオルや壁の色に寄せてそろえています。
写真を選ぶ際は、明るさと色味を一本のトーンにそろえることが大切です。撮影日や機材の異なる写真を混ぜると、それだけで雑多な印象になります。ここでは複数の写真が使われていますが、白とベージュという共通の色があるため、ページ全体が一つの世界としてまとまっています。
書体の選択で伝わる印象が変わる
このサイトの日本語は明朝体で統一されています。明朝体は線に強弱があり、静かで丁寧な印象を与えます。視認性を最優先する場面ではゴシック体が選ばれますが、落ち着きや品位を伝えたい場合には明朝体が向きます。
細い書体を使うときは、字間と行間を広く取り、文字色を真っ黒より少し薄くすると、線の細さが読みにくさに変わりません。このサイトでも見出しの字間が広く取られ、本文の行間にも余裕があります。書体の選択と余白の設計は、常に組み合わせで考える必要があります。
予約から施術後までの流れを見せる
施術内容を紹介するページには、予約、問診表の記入とカウンセリング、検査と測定、施術、施術後の説明という段階が番号付きで並んでいます。完全予約制であることや、メールとLINEで日時を相談できることも、この流れの中で示されています。
初めて利用する方は、当日の進み方が分からないと申し込みに踏み切りにくくなります。手順を番号で区切って見せると、全体の流れと自分がすることが把握でき、心理的な負担が下がります。文章だけで説明するよりも、視覚的な区切りを付けたほうが理解が早くなります。
まとめ：淡い配色と実写で静けさを伝えるサイト
nao tune your bodyの公式サイトは、白とベージュの淡い配色、細い明朝体、施術風景の実写という三つの要素を軸に、静かで丁寧な印象を組み立てています。押せる場所だけを黒いボタンにすることで、装飾を増やさずに導線を明確にしている点も参考になります。
情報設計の面では、導入で受け手を確かめ、悩みの提示で自分事にしてもらい、三つの特徴で施術の考え方を示し、二つの連絡手段で行動につなげるという順序が保たれています。出張という業態に欠かせない対応範囲や営業条件を、全ページ共通のフッターに集約している点も、同じ形態のサービスがすぐに取り入れられる工夫です。
- 白・ベージュ・薄いグレーでまとめ、濃い色はボタンだけに使います
- 実写を全幅で見せ、写真の中の色をページ全体のトーンへ広げます
- 見出しと本文の字間・行間を広く取り、細い書体の読みやすさを保ちます
- 連絡手段を二つに絞り、同じ形のボタンで並列に見せます
- 対応できる範囲と営業条件をフッターに常設します
落ち着いたトーンでサービスの世界観を伝えたい方や、店舗を持たない業態でどこまで情報を見せるか迷っている方にとって、実際の画面は参考になるはずです。配色や余白の取り方を確かめたい場合は、鎌倉の整体で根本改善を目指すnao tune your bodyの公式サイトをご覧ください。
