岐阜県高山市を拠点に、体を動かすケアとリンパマッサージを組み合わせた出張サロンを営むFountaineの公式サイトです。運動による「動」と、癒やしの「静」を掛け合わせるという事業の考え方を、写真と余白を活かした静かな画面づくりで表現しています。この記事では、Webデザインの見本という視点から、ファーストビューの構成、配色、情報設計、視線誘導のつくり方を具体的に読み解いていきます。
「動」と「静」を伝えるファーストビューの設計
ページを開いて最初に目に入るのは、肌に手を添えて施術する様子を大きく写した実写真です。温かみのあるベージュとブラウンのトーンでまとめられ、柔らかなピント表現が心地よい距離感を生み出しています。写真そのものがサービスの世界観を語るため、余計な装飾を足さずとも雰囲気が伝わる構成になっています。
写真の中央には、体を動かして巡らせ、整えるという一連の流れと、健やかさを取り戻す時間をうたう二行のキャッチコピーが、白いセリフ体（明朝系）の日本語で重ねられています。文字の背後にはうっすらと丸い輪郭の線が配置され、視線を中央へ引き寄せる役割を担っています。コピーの下には施術内容を要約した小さめの説明文が続き、大きな見出しと小さな本文のコントラストで情報に強弱がついています。
画面の左上にはブランド名「Fountaine」のロゴ、右上には白い「CONTACT」ボタンとメニューを開くためのアイコンが置かれています。さらに右端には縦書きの「scroll」という案内があり、下へ読み進めてほしいという意図が自然に伝わります。要素を詰め込みすぎず、必要な導線だけを画面の端に配置している点が、落ち着いた第一印象につながっています。
ニュートラルな配色と余白がつくるトーン＆マナー
サイト全体は、白やオフホワイトを基調に、ベージュや淡いグレーを重ねたニュートラルな配色で統一されています。強い色をほとんど使わないため、写真に写る肌の色や活動着の色みが差し色として引き立ち、清潔感と落ち着きが同居しています。ところどころで使われる控えめなネイビーが、英字ラベルなどに上品なアクセントを添えています。
見出しでは、英語表記を大きなセリフ体で見せ、その下に日本語の補足を添える型が繰り返し使われています。「ABOUT US」「SERVICE」「STAFF」といった英字見出しに細い横線と小さな日本語を組み合わせることで、セクションの切り替わりがリズミカルに伝わります。余白をたっぷりと取ったレイアウトは情報を急がず読ませ、施術で得られるゆったりとした時間の印象とも重なっています。
英字の見出しにセリフ体を用いる一方で、日本語の本文にはすっきりとした線のゴシック体を合わせ、書体をはっきりと使い分けています。読ませたい説明文は視認性の高い書体で、印象を決める見出しは格のある書体でと役割を分けることで、読みやすさと世界観の両立が図られています。派手な装飾に頼らずタイポグラフィで魅せる姿勢は、ミニマルなデザインを目指すうえで参考になる点です。
情報設計と視線誘導のつくり方
Fountaineのサイトは、各セクションで写真とテキストの重ね方を工夫し、読者の視線を無理なく誘導しています。ここでは、サービスへの理解を深める中心的な二つのセクションを取り上げます。
写真とテキストを重ねたABOUTセクション
「ABOUT US」では、左に人物写真、右に見出しと本文を配し、背景に淡いグレーの四角い面を敷いています。要素を少しずつずらして重ねるレイヤード構成により、平板になりがちな紹介文に奥行きが生まれています。読み進めた先には詳細ページへ向かう矢印付きのリンクが用意され、興味を持った読者が自然に次の階層へ進める導線になっています。
写真の上にカードを重ねて見せるSERVICE一覧
「SERVICE」では、ストレッチを行う人物の写真を背景に敷き、その上へ白いカードを重ねてサービス一覧を提示しています。トータルケアコース、パーソナル運動＆ストレッチ、リンパドレナージュの三つが、「01」から「03」の連番、日本語名、淡いネイビーの英字名、一行の説明で整理されています。各項目の右端に矢印を添え、行を仕切る細い罫線で区切ることで、視線が上から下へ滑らかに流れます。
スタッフ・FAQ・コンテンツの見せ方
中盤から後半にかけては、書き手や利用者に寄り添う情報が、それぞれ性格の異なる見せ方で並びます。写真、アコーディオン、カードと、内容に合わせて表現を切り替えている点に注目できます。
写真をずらして配置したSTAFF
「STAFF」では、二枚の縦長ポートレートを左側に段差をつけて並べ、右側に見出しと短い紹介文を置いています。代表を務める福井 枝里子様からのメッセージへ誘う構成で、写真の配置に動きを持たせながらも、全体の静けさは崩していません。ここでも詳細ページへの矢印リンクが添えられ、続きを読みたい読者を受け止めています。
アコーディオンで整理したFAQ
「FAQ」は、質問ごとに「Q.」のラベルと本文、右端の「＋」アイコンを並べたアコーディオン形式で組まれています。細い罫線で一問ずつ仕切られているため、知りたい項目を探しやすく、必要なときだけ開いて読める設計です。運動やマッサージに関する疑問をあらかじめ拾い上げ、初めての読者が抱きやすい不安をやわらげる情報設計になっています。
カードで見せるCONTENT
「CONTENT」では、スタッフブログの記事をサムネイル画像付きのカードで紹介しています。画像の上にタイトルの帯を重ね、その下にカテゴリーのタグと日付を添える、読み物らしい見せ方です。更新情報を一枚のカードにまとめることで、サイトが継続して運用されている様子が伝わります。
導線を締めくくるCONTACTブロックとフッター
ページ全体を通して、詳細ページへ進む矢印を細い輪郭の丸で囲んだボタンが繰り返し登場します。同じ形のボタンを共通の合図として使うことで、読者は押せば先へ進めると直感的に理解でき、迷いの少ない導線が生まれています。こうした一貫性は、複数のセクションを持つサイトを設計するうえで参考になります。
最下部の「CONTACT」は、濃いチャコールグレーの面で大きく区切られ、それまでの明るい画面との対比で問い合わせへの意識を高めています。電話番号を示すブロックと、白い「お問い合わせフォーム」ボタンを横並びに置き、連絡手段を選べるように配慮しています。続くフッターには各セクションへのリンク、電話番号、住所（〒509-3206 岐阜県高山市久々野町山梨2296）がまとめられ、必要な情報へ最後までたどり着ける構成です。
まとめ：落ち着いた世界観を学べるデザイン見本
Fountaineの公式サイトは、施術風景の実写真と余白、セリフ体の見出しを組み合わせ、運動と癒やしを掛け合わせるサービスの世界観を静かに伝えています。ニュートラルな配色、レイヤードなレイアウト、丸い枠で囲んだ矢印ボタンによる一貫した導線など、落ち着いたトーンのボディケア系サイトを考えるうえで学べる要素が数多く見られます。
運動とリンパケアを組み合わせるサロンのWebデザインを実際の画面で確かめたい方は、高山市でのパーソナルトレーニングにも対応するFountaineの公式サイトをご覧ください。写真の使い方や視線誘導の工夫を、細部まで体感できるはずです。
