Feel Bodyは、東京メトロ丸ノ内線の新宿御苑前駅に近い場所で、パーソナルトレーニングとボディケア、メンズ脱毛を扱っている店舗です。公式サイトは、暗めに整えた写真と白い余白を交互に見せることで、性格の異なる三つの分野を一つの流れにまとめています。
この記事では、Webデザインの見本として、ファーストビューの組み方、色と書体の選び方、セクションごとの構図、予約や問い合わせへつなぐ導線を順に取り上げます。複数のサービスを一つのサイトで見せたいときに参考にしやすい点を、画面で確認できる範囲に絞って整理します。
Feel Bodyのサイトは明暗の切り替えで三つの分野を一つにまとめています
先に結論を述べますと、このサイトの特徴は、明るい面と暗い面を計画的に切り替えている点にあります。最上部の写真、中ほどにある写真の帯、下部の問い合わせの面という三か所に暗い色を置き、その間を白と淡いグレーでつないでいます。
トレーニング、ボディケア、脱毛という違った分野を扱いながら、色の数と書体を絞っているため、ページ全体が一つのトーンに収まっています。分野ごとに色を塗り分けず、写真の題材で違いを伝えている点が、落ち着いた印象につながっています。
ファーストビューは一枚の写真と短い言葉で組まれています
最初の一画面には、サイトの方向性を決める要素が集まっています。ここでは、写真の処理、ヘッダーの組み方、写真の下の端に差し込まれた帯という三つの点を見ていきます。
画面いっぱいの写真に細かな網目を重ねて文字を立たせています
最上部には、施術の様子を写した写真が画面の幅いっぱいに敷かれています。全体は琥珀色を帯びた暗めの色調で、表面に細かな網目状の模様が重ねられています。写真の情報量が抑えられるため、上に載る文字が読みやすくなっています。
中央には白い明朝体のキャッチコピーが一行で置かれ、その下に扱う三つの分野を並べた小さな一文が添えられています。文字の背後には細い線の輪が薄く描かれていて、視線が自然と中央へ集まります。右端には縦に組んだ小さな英字と細い縦線があり、下へ続くことが控えめに示されています。
背景を持たないヘッダーに連絡の入口を並べています
ヘッダーには背景の色がなく、写真の上へ直接要素が載っています。左端には紫のロゴがあり、右側には緑色のLINE公式アカウントのボタン、HOT PEPPER Beautyのボタン、白地に英字を置いたCONTACTのボタンが横に並びます。
いちばん右には二本の横線だけで描いたメニューのアイコンが置かれ、ページ名の一覧は表に出ていません。項目を並べない分だけ画面の上部が軽くなり、写真とキャッチコピーに目が向きます。その一方で連絡の手段は最初から見えているため、すぐに問い合わせたい読者を待たせない配置になっています。
写真の下の端にお知らせの帯を重ねています
写真の下の端には、白い横長の帯が少し内側に寄せて重ねられています。左端に濃い色の地へ白い英字を載せたラベルがあり、その右に日付と見出しが一行で並び、右端には一覧へ進む下線付きの英字が置かれています。
帯のすぐ下には、細い線で囲んだ横長の枠があり、中央に見出し、右側に小さな十字の印が配置されています。お知らせを大きな面積で見せず、一行の帯と一つの枠に収めているため、ファーストビューからサイトの紹介までの距離が短く保たれています。
色と書体を絞って落ち着いたトーンをつくっています
画面を上から下まで見ても、使われている色と書体の種類は多くありません。数を絞ったうえで役目をはっきり分けていることが、静かな印象の土台になっています。
白と淡いグレー、焦げ茶に近い黒を基調にしています
地の色は白と、わずかに沈めた明るいグレーの二種類です。この二色が交互に現れるので、太い罫線や色の帯を使わなくても、セクションの切り替わりが伝わります。文字と問い合わせの面には、焦げ茶に近い黒が使われています。
彩度の高い色は、ロゴの紫、LINEのボタンの緑、HOT PEPPER Beautyのボタンに見える赤紫、記事の分類ラベルに使われた青緑に限られています。どれも小さな面積にとどまっているため、基調の落ち着いた色を崩さずに、押してほしい場所だけが浮かび上がります。
欧文のセリフ体と和文の明朝体を一組で使っています
セクションの見出しは、大きな欧文、細い横線、小さな和文という三つの部品で統一されています。ABOUT USからCONTACTまで、どのセクションも同じ組み方です。
欧文は線の細いセリフ体で大きく組まれ、和文は明朝体で小さく添えられています。本文にも明朝体が使われ、字間と行間がゆったり取られているため、文章の量が少ない画面でも間延びして見えません。見出しの形を一つに決めておくと、読者は英字の形だけで今いる場所を把握できます。
セクションごとに構図を変えて縦長のページに変化をつけています
トップページは縦に長い一枚の構成で、見出しの形はそろえつつ、置く位置と写真の重ね方をセクションごとに変えています。同じ型の繰り返しを避けることで、最後まで読み進めやすくなっています。
ABOUT USは中央の見出しから左右の二分割へ移ります
サイトの紹介にあたるABOUT USでは、見出しを画面の中央にそろえ、その下で左に人物の写真、右に二行の見出しと説明文を置いています。右側の文章の背後には淡いグレーの四角が敷かれ、写真とは高さをずらして配置されています。
要素の端をぴったりそろえない組み方には、整いすぎた印象をやわらげる効果があります。文章の下には英字と、丸い枠に矢印を入れたボタンが並び、詳しいページへ進む場所が明確です。
SERVICEは写真の上にパネルを重ねて三つの分野を並べています
SERVICEでは見出しが左へ寄り、英字と横線と和文が一行に並びます。その下に施術用のベッドとタオルを写した横長の写真が敷かれ、淡いグレーのパネルが写真へ食い込むように重ねられています。
パネルの中は三行のリストで、番号、和文の名称、欧文の表記、短い説明文、右端の矢印という順に整理されています。行の間は細い線だけで区切られ、パーソナルトレーニングとペアトレーニング、ボディケアとオイルボディケア、メンズ脱毛の三つが同じ重みで並びます。写真で空気を伝え、内容は文字で読ませるという役目の分け方が明快です。
STAFFとFAQは重心を右へ移して流れを変えています
STAFFでは見出しが右端へ移り、左側に大きさの異なる二枚の写真が段違いに置かれています。中央寄りには淡いグレーの縦長の四角が敷かれ、説明文の一部がその上に重なっています。
続くFAQでは、見出しと質問のリストが画面の右寄りにまとめられ、左側は広く空けられています。質問は細い線で区切られた三行で、左に欧文の記号、右端に十字の印が置かれています。直前までの左寄せから重心が変わるため、スクロールの途中で視線が切り替わります。
FLOWは写真の帯に四枚のカードを並べています
FLOWは、茶色の小瓶と植物を写した写真を背景にした帯で、全体が暗めに整えられています。見出しは白い文字に変わり、その下に半透明の白いカードが四枚、同じ幅で横一列に並びます。
カードの右上には番号、中央には手順の名称が置かれ、予約から来店、体験、その後の提案までの段階が一目で数えられます。手順を縦に積まずに横へ並べているので、短い高さの中で全体像が伝わります。
SPECIALとCONTENTはカードの使い方で性格を分けています
SPECIALは淡いグレーの地に白い大きなカードを置き、その右端へ人物の写真を重ねた構図です。写真はカードより少し下の位置から始まるため、平らな画面に奥行きが感じられます。
CONTENTでは白い地に戻り、記事のカードが横に並びます。サムネイルの下部に暗い帯を重ねて題名を載せ、その下に枠線だけの分類ラベルと日付を置く形で、記事の情報が小さくまとまっています。
予約と問い合わせへ向かう導線を一貫させています
このサイトでは、次のページへ進む場所と連絡を取る場所が、いつも同じ形で示されています。操作の部品を増やさないことが、迷いにくさにつながっています。
丸い枠の矢印ボタンを各セクションで繰り返しています
ほとんどのセクションの終わりには、小さな英字と、細い線の丸い枠に矢印を入れたボタンが置かれています。形と大きさがそろっていて、多くは右下に配置されているため、続きを読みたいときに探す必要がありません。
暗い写真の上では枠と矢印が白に変わり、背景に合わせて色だけが切り替わります。部品の形を固定し、色だけを変えるという決め方は、サイト全体の統一感を保つうえで有効です。
問い合わせは暗い面に連絡の手段をまとめています
ページの下部にあるCONTACTは、焦げ茶に近い黒の面で構成され、左右にわずかな余白を残して配置されています。白い見出しの下には、電話番号と受付時間を載せた枠線だけの箱と、問い合わせフォームへ進む白いボタンが左右に並びます。
その下に、LINE公式アカウントとHOT PEPPER Beautyのボタンが横並びで置かれています。電話、フォーム、LINE、予約サイトという四つの手段が一か所に集まり、読者は自分に合う方法を選べます。明るい画面が続いたあとに暗い面が現れるので、ページの終点としても分かりやすくなっています。
フッターはサイト内のリンクと所在地を整理しています
フッターは白い地に戻り、左側にサイト内のページへのリンクが二列で並びます。右側には電話番号と受付時間、郵便番号と住所、地図へのリンクがまとめられています。
最下部にはプライバシーポリシーへのリンクと著作権の表記があり、右端にロゴが置かれています。ヘッダーでは表に出していなかったページの一覧を、最後に開いて見せる構成です。
複数のサービスを扱う店舗サイトの見本として参考になります
「新宿 メンズ脱毛 都度払い」「新宿 オイルマッサージ メンズ」「新宿 パーソナルジム」といった言葉で店舗を探す読者は、目的がそれぞれ異なります。Feel Bodyのサイトは、脱毛、ボディケア、トレーニングという三つの入口を一枚のトップページに同じ重みで並べ、どの目的で訪れても自分に関係する情報へたどり着ける構成になっています。
サイトに掲載されている情報によりますと、所在地は東京都新宿区新宿1-17-11 大洋ビル2Fで、東京メトロ丸ノ内線の新宿御苑前駅から歩いて3分の場所です。トレーニングはマンツーマンまたはペアで受けられ、ボディケアでは指圧のケアとオイルを使うオイルボディケアが用意されています。メンズ脱毛は男性に限ったメニューで、一つの部位から全身までを選べると説明されています。
よくある質問では、運動の経験がない方でも通えることや、トレーニングとケアを同じ日に利用できることが案内されています。パーソナルトレーニングとマッサージは女性も利用でき、脱毛だけが男性向けである点も明記されています。スタッフ紹介のページには、店舗責任者の中村 公様の認定資格や経歴が掲載されています。
デザインの面から取り入れやすい点は、次の三つに整理できます。いずれも構成の決め方に関わる内容で、業種を問わず応用できます。
- 写真を暗めに整え、短い言葉を中央に置くことで、最初の一画面で扱う分野を伝えています。
- 見出しの形とボタンの形を一つに決め、位置と写真の重ね方だけを変えて変化をつけています。
- 連絡の手段をヘッダーとページ下部の二か所に置き、読み始めと読み終わりのどちらからでも問い合わせへ進めるようにしています。
まとめとしてFeel Bodyのサイトの特徴を振り返ります
Feel Bodyの公式サイトは、暗めの写真と白い余白の切り替え、欧文と和文を組み合わせた見出し、形をそろえた矢印のボタンによって、静かで整った印象をつくっています。色を増やさずに雰囲気を出したい場合の参考になります。
パーソナルトレーニング、ボディケア、メンズ脱毛という三つの分野を、同じ型のリストと写真で並べているため、どれか一つに偏った見え方になっていません。複数のサービスを持つ店舗がサイトを構成する際に、応用しやすい考え方です。
写真の質感や文字の間隔は、実際の画面で見ると印象がより伝わります。新宿でパーソナルジムを探している方は、Feel Bodyの公式サイトをご覧ください。
