栃木県大田原市にある耳ツボダイエット・よもぎ蒸しサロン oluche の公式サイトは、クリーム色の余白と淡いミントグリーン、そして差し色のローズピンクという少ない色数でまとめられたトップページが印象に残ります。写真とイラストの分量を抑えつつ、読み手が知りたい順に情報が並んでいるため、個人で運営するサロンのサイトを設計するときの見本として参考にしやすい作りです。
この記事では、フルページのキャプチャで確認できる範囲に絞り、ファーストビューの見せ方、配色と背景の使い分け、見出しと余白がつくるリズム、セクションごとのレイアウト、下層ページへ導く動線という順に読み解いていきます。デザインの意図を言葉にしておくと、同じジャンルのサイトを企画するときの判断材料になります。
ファーストビューで落ち着いた世界観を伝える構成
結論から述べますと、このサイトのファーストビューは「写真で空気感を伝え、文字数を絞って主題を示す」という役割分担が明確です。画面を開いた直後に見える範囲へ詰め込む要素を、写真とコピー、連絡手段の三つに絞り込んでいる点が、静かな第一印象につながっています。ここでは写真の置き方、コピーの見せ方、ヘッダーの組み立てという三つの側面から確認します。
額縁のように余白を残したヒーロー写真
ヒーローの写真は画面の幅いっぱいまで広げず、左右と上下に白い余白を残した状態で配置されています。写真は耳への施術を寄りでとらえたカットで、施術する手元と横顔が大きく入るため、説明を読む前に施術の様子が想像できます。
周囲に残された白い余白が額縁のように働き、写真が一枚の作品として見える点も特徴です。背景を全面写真で覆う手法に比べて主張が穏やかになり、サロンの雰囲気に合った静けさが生まれています。
白いパネルに載せたコピーと部分的な色替え
写真の左下には白いパネルが重ねられ、その上へ二行のコピーと、一回り小さな一行が置かれています。書体は手書きの筆致を思わせる丸みのあるデザインで、二つの単語だけをローズピンクに変えることで、視線がその位置で一度止まる仕掛けになっています。
写真の暗い部分にパネルを重ねているため、文字と背景のコントラストが確保され、読みやすさが保たれています。サロンが掲げる方針を短い言葉で示す位置づけの要素で、長い説明文を置かずに主題だけを伝える判断は、写真の力を弱めないための工夫だと読み取れます。
左右に振り分けたロゴとメニューボタン
ヘッダーは背景をごく淡いクリーム色にとどめ、左端に円形のロゴ、右端にメニューを開くボタンを置くだけの構成です。中央を空けたまま両端へ要素を寄せているため、ヘッダーが写真の邪魔をせず、ロゴの存在感だけが際立ちます。
ロゴは二重の金色の円で囲まれ、水彩のようなピンクの地に花のイラストと欧文のワードマークが重なり、その上へ小さくカタカナが添えられています。円形という形そのものが柔らかい印象を持つため、四角い写真と並べたときの対比がアクセントとして働いています。
クリームと淡いミントグリーンを軸にした配色設計
このサイトの配色は、背景に使う色と、行動を促す部分に使う色をはっきり分けています。背景は彩度を抑えた淡い色でそろえ、押してほしい場所にだけ濃い色を置くという原則が最後まで崩れないため、どこを見ればよいのかが直感的に分かります。ここでは差し色の扱い方と、背景の切り替え方を順に見ていきます。
差し色のローズピンクをボタンに集約する
もっとも彩度が高い色は、くすんだローズピンクです。この色は各セクションの末尾に置かれた角丸のボタンにほぼ限定して使われており、本文や見出しには使われていません。背景が淡いため、面積の小さいボタンでも十分に目立ちます。
色の役割を限定すると、読者は「この色は押せる場所」と学習しながら読み進められます。ページが縦に長いサイトほど効果が出る考え方で、迷いを減らすうえで有効な整理の仕方です。
背景の切り替えでセクションの区切りを示す
セクションの境目には罫線をほとんど使わず、背景色と質感の変化で区切りを表現しています。サロンの紹介部分は淡いミントグリーンに植物のイラストを添え、方針を語る部分はクリーム、施術内容を並べる部分は木目のテクスチャ、案内の部分は緑のグラデーションという具合に、章ごとに景色が変わります。
さらに、特徴を紹介する部分では淡いピンクからサーモンにかけての幾何学的なグラデーションが敷かれ、予約を促す部分では施術写真に暗いオーバーレイをかけて白い文字を載せています。色数そのものは絞りながら、明度と質感で変化をつけているため、単調にならずに読み進められます。
見出しの型と余白がつくる読み進めやすいリズム
縦に長い一枚のトップページでは、同じ形の見出しを繰り返すことが読みやすさに直結します。このサイトは欧文と日本語を組み合わせた見出しの型を最初から最後まで守りつつ、いくつかの場所であえて崩すことで、単調さを避けています。見出しの組み方と、本文まわりの余白の取り方を確認します。
丸みのある欧文見出しと日本語サブコピーの二段構え
各セクションの見出しは、線が細く丸みのある欧文を大きく置き、その下へ日本語の説明を小さく添える形で統一されています。欧文は装飾ではなく章の名前として機能し、日本語がその内容を補うという分担です。書体の角が丸いため、施術の柔らかさという印象と矛盾しません。
一方で、案内のセクションと特徴のセクションでは、欧文と日本語を上下ではなく横に並べ、位置も中央から左寄りへ変えています。同じ型を繰り返しながら二か所だけ崩すことで、下へ進むほど画面が変化して見え、読み疲れを抑える効果が生まれています。質問と回答のセクションだけは細いセリフ体を使い、他とは違う落ち着いた表情を持たせています。
短い段落と広い行間で圧迫感を抑える
本文はゴシック体で、行間と字間がどちらも広めに設定されています。一つの段落は二行から三行程度で終わり、次の要素との間には十分な空白が確保されています。文字を詰め込まないことで、初めて訪れた読者でも負担を感じにくくなっています。
セクションとセクションの間にも大きな余白が取られており、無地のまま何も置かない領域が続く箇所もあります。要素を足さずに空白のまま残す判断は、静かな雰囲気を保ちながら章の切り替わりを感じさせるための設計だと考えられます。
セクションごとに変化をつけたレイアウト
トップページは、同じ形のブロックを積み重ねるのではなく、内容に応じてレイアウトを変えています。並列で見せたい情報は横並び、人物は写真を大きく、条件を確認したい情報は一覧という具合に、目的と形が対応しています。代表的な四つの型を取り上げます。
三つ並びのカードと二分割のレイアウト
方針を紹介するセクションでは、三つの項目を横一列のカードで並べています。各カードは見出しを上に、写真を中央に、説明文を下にという順で統一され、背面にわずかにずらした枠が重なることで、平面の中に奥行きが生まれています。三つとも同じ形なので、内容を比べながら読めます。
その下の施術内容を紹介するセクションは、木目のテクスチャを背景に、細い罫線で画面を左右二つに分割しています。左右それぞれに欧文見出し、二行の日本語、説明文、写真、ボタンが同じ順序で入っており、二つの柱を対等に見せる意図が読み取れます。
切り抜き写真を使った人物紹介
あいさつのセクションでは、背景を抜いた人物写真を左側に大きく置き、右側に名前と経歴を並べています。背景が抜かれているため、クリーム色の地に人物だけが浮かび、写真の四角い枠に閉じ込められた印象がありません。
右側の情報は、名前を大きめに置いたうえで細い罫線で区切り、項目名の前に金色の短い横線を添えて視認性を高めています。ここで紹介されているのは代表の木村 紗悠美様で、日本痩身医学協会の認定資格と作業療法士としての勤務経験が経歴として記載されています。誰が施術を担当するのかを写真と経歴の両方で示す構成は、初めて訪れる読者の不安を和らげる情報設計です。
質問と回答の折りたたみと店舗情報の一覧
質問と回答のセクションは、左側の白いカードに質問、右側に回答という左右対の形で五件が並びます。質問側には大きな「Q」、回答側には金色の「A」が置かれ、その間に金色の三角形が差し込まれているため、視線が左から右へ自然に流れます。回答は途中で省略記号によって切られており、続きは専用ページで読む形です。
案内のセクションでは、店舗の情報が項目名と内容の二列で整理されています。住所、電話番号、営業時間、定休日、予約の要否、設備といった確認したい項目が縦に並び、罫線を使わず余白だけで区切ることで、表組みでありながら硬さを感じさせません。地図を開くためのボタンも同じ角丸の形で用意され、その下にはLINEとInstagramのアイコンが小さく添えられています。
発信系コンテンツで見せ方を変える工夫
更新していく情報は、二つのセクションに分けて掲載されています。日々の様子を伝える側は、サムネイル画像を大きな円形に切り抜き、その下に日付と記事タイトルを置く形です。円形という形が植物のイラストとなじみ、写真の四隅がないぶん柔らかく見えます。
もう一方の読み物を集めた側は、細い金色の枠で囲んだ横長のカードで、日付、帯状の背景を敷いたタイトル、本文の書き出しという順に左から右へ並びます。同じ「更新情報」でも形を変えているため、どちらのページに何が載っているのかが形だけで区別できます。
回遊と問い合わせを支える動線設計
トップページは、それ自体で完結させるのではなく、下層ページへの入口をまとめたハブとして設計されています。各セクションの終わりに必ず出口を置き、画面の端には常時使える連絡手段を残すという二段構えです。三つの要素に分けて確認します。
セクションを締める角丸ボタンの統一
すべてのセクションは、末尾に置かれた角丸のボタンで締めくくられています。形も色も文字の大きさもそろっており、違うのは中の文言と行き先だけです。右向きの矢印が文言の後ろに添えられているため、押した先に続きがあることが一目で分かります。
トップページには各テーマの要約だけを載せ、詳細は専用ページに委ねるという分担が徹底されており、トップが長くなりすぎるのを防ぎながら、興味を持った話題だけを深く読める構造になっています。
画面右端に固定した連絡と予約のタブ
画面の右端には、二段に重なったタブ状のボタンが表示されています。上段はローズピンクの地に電話番号と受付時間、そしてスマートフォンのアイコン、下段は落ち着いた黄土色の地に予約を促す文言とカレンダーのアイコンという組み合わせです。
左側の角だけが丸められ、右端は画面外へ抜けているため、常に画面の縁に貼り付いているように見えます。本文の読みやすさを損なわない位置に留めながら、連絡先をいつでも参照できるようにする配置で、店舗型サイトでは有効な考え方です。
最下部の予約セクションとフッターのリンク一覧
ページの最後には、施術写真に暗いオーバーレイをかけ、白い細枠で囲んだ予約のセクションが置かれています。ここだけ背景が暗くなるため、下までスクロールした読者の視線が自然に集まります。中央には欧文の見出しと日本語の一行、そして同じ形のボタンが並びます。
その下のフッターは、クリーム色の地に四列のリンクを並べた一覧です。サロンの方針や施術内容といった主要ページに加えて、耳ツボ、よもぎ蒸し、食事制限なし、運動なし、産後といった目的別のページも並んでおり、サイト全体の構成がここで把握できます。深い階層のページにも直接たどり着けるため、検索から下層ページへ入ってきた読者にも親切な作りです。
同じジャンルのサイトを企画するときに参考になる視点
ここまで見てきた作りは、サロンのサイトを新しく作る場面でも応用できます。とくに個人や少人数で運営する店舗のサイトでは、情報量よりも「伝わる順番」と「迷わせない配色」が仕上がりを左右します。実際にこのサイトから読み取れる工夫を整理すると、次のような点が挙げられます。
- 背景に使う色は彩度を抑え、押してほしいボタンにだけ濃い色を割り当てる
- セクションの区切りは罫線ではなく背景の色や質感の変化で表現する
- 見出しは同じ型を繰り返し、数か所だけ配置を変えて単調さを避ける
- 誰が施術を担当するのかを写真と経歴で具体的に示す
- 住所や営業時間などの確認したい情報は一覧の形にまとめる
- トップページには要約だけを置き、詳細は下層ページへ渡す
栃木のように車での来店が中心になる地域では、駐車場の有無や最寄りの停留所からの所要時間といった情報を、探さずに読める位置へ置いておくことも大切です。このサイトでは案内のセクションに情報がまとめられ、最寄りの停留所からは徒歩でおよそ9分という説明と、駐車スペースを用意している旨が併記されています。
まとめ：耳ツボダイエット・よもぎ蒸しサロン oluche のサイトから学べること
耳ツボダイエット・よもぎ蒸しサロン oluche のサイトは、色数を絞った配色、繰り返しながらも要所で崩す見出しの型、たっぷりとした余白、そして各セクションを締める統一されたボタンという四つの要素で、縦に長いトップページを最後まで読み進められる形に整えています。派手な演出に頼らず、読み手の視線がどこへ向かうかを丁寧に設計した例だといえます。
施術内容を並べる二分割のレイアウトや、背景を抜いた人物写真、項目名と内容の二列で整理された店舗情報など、そのまま参考にできる型も多く含まれています。同じ地域で店舗型サービスのサイトを検討している方にとって、構成を考える際のたたき台として役立つはずです。
配色の作り方や下層ページへの導き方を実際の画面で確かめたい方は、栃木でダイエットに向き合うサロンの公式サイトをご覧ください。
