リハルモのWebサイトは、身体の測定データを扱うサービスの信頼感を、色数を絞った配色と大きな余白で静かに伝えています。派手な動きや飾りに頼らず、書体の使い分けと罫線の引き方だけで情報の階層を組み立てている点が、このサイトの見どころです。
扱う内容は数値や公的な基準が中心ですが、画面から受ける印象は硬くなりすぎていません。ここでは、キャプチャで確認できる範囲に絞って、ファーストビューから最後の誘導までの設計を順番に読み解いていきます。
リハルモというサイトの位置づけ
デザインの意図を読み解く前に、どのようなサービスを扱うサイトなのかを整理しておきます。前提が分かっていると、後半で触れる配色や余白の判断が、なぜそう選ばれているのかも掴みやすくなります。
運営者と紹介しているサービス
リハルモは、熊本県熊本市南区に拠点を置くReharmoManagement合同会社が運営しているサイトです。パーソナルコンディショニング事業を掲げ、InBody測定とその分析、指導を組み合わせたヘルスコンサルティングを紹介しています。
担当するのは理学療法士の柏丸 修圭様で、臨床の現場と地域での身体機能評価に携わってきた経験をもとに、測定と行動科学を結び付けた支援に取り組んでいるとサイト内で説明されています。誰が対応するのかを早い段階で示す構成は、専門性が問われるテーマで効いてきます。
画面全体のトーン＆マナー
基調になっているのは、ほぼ白に近い背景と、うっすらグレーがかった背景を交互に切り替える組み立てです。セクションごとに下地の明るさを変えることで、区切り線を多用しなくても話題の変わり目が伝わります。
そこへ濃紺のボタンと生成りのカードが差し込まれ、画面全体は落ち着いた中間色でまとまっています。健康や身体をテーマにしたサイトで選ばれがちな明るい原色を避けている点が、このサイトの性格をよく表しています。
ファーストビューの設計
最上部の一画面は、主題の提示と行動の入口、そしてサービスのイメージという三つの役割を左右に振り分けています。要素の数は決して少なくありませんが、窮屈に見えないのは役割分担がはっきりしているからです。
見出しの組み方と余白の取り方
左側には、測定と専用アプリを掛け合わせるという主題が、明朝体の大きな見出しで四行に分けて置かれています。一行あたりの文字数をそろえ、行間を広めに取ることで、長めの文でも視線が迷わず下へ流れます。
見出しの下には細い横罫が引かれていますが、これが一様な線ではありません。左側だけが濃紺で、右へ進むと淡いグレーに切り替わる二段構成になっていて、視線の起点が左にあることを示す目印として働いています。
ボタンの形で優先順位を示す導線
説明文のすぐ下には、角を丸めた横長のボタンが二つ並びます。左は濃紺で塗りつぶした形、右は枠線だけの形になっていて、色の強さの差がそのまま優先順位の差として読み取れます。
枠線だけのボタンにはアプリを試すための入口が割り当てられ、いきなり相談するのはためらう読み手にも、別の一歩が用意されています。同じ大きさのボタンを並べながら、塗りと線で主従を付ける手法は、入口が複数あるサイトで応用しやすい考え方です。
右側に置かれた画面イメージの扱い
右側には、スマートフォンの形を模した枠の中にアプリの結果画面が置かれています。現在の状態から目標へ向かう変化と、食事や運動をどのくらい調整するかの目安が、上下に区切られたカードとして並ぶ構成です。
注目したいのは、その真下に小さな注記が添えられ、あくまで結果画面のイメージであること、つまりサンプルであることが明記されている点です。ビジュアルの説得力と説明の誠実さを両立させる配慮で、数値を扱うサービスのサイトでは特に参考になります。
配色と書体の役割分担
このサイトの印象を決めているのは、使う色を絞り込んだうえで、書体にはっきりと役割を割り振っている点です。色と書体、それぞれの使い分けを分解してみます。
濃紺・生成り・金茶という三つの層
濃紺は、ボタンや番号を示す円、ページ終盤の帯など、行動と結び付く場所に集中して使われています。面積は小さいものの明度が低いため、白い画面の中では自然と視線を集めます。
生成りに近いベージュはカードの下地として広い面積を受け持ち、白い背景との差を穏やかにつくっています。そして金茶は、セクション名の小さな英字ラベルや手順の番号にだけ使われ、飾りではなく道しるべとして働いています。
明朝体とゴシック体の使い分け
大きな見出しやサービス名、担当者の氏名には明朝体が使われ、丁寧さと落ち着きを担っています。一方で説明文やボタンの文字はゴシック体で組まれ、読みやすさが優先されています。
二種類の書体を混ぜると散らかって見えることもありますが、このサイトでは主張する文字は明朝体、伝える文字はゴシック体という基準が最後まで崩れていません。基準が一貫していることが、全体の統一感を支えています。
情報設計とセクションのリズム
縦に長い一枚もの構成でありながら読み疲れしにくいのは、セクションごとに見せ方の型を変えているからです。並べ方の違いが、そのまま内容の違いを予告する役割も果たしています。
英字ラベルで始まるセクションの入口
各セクションの冒頭には、短い横線と金茶の英字ラベルが置かれ、その下に日本語の大見出しが続きます。読み手にとっては小さな見出し標識のような役割になり、スクロール中でも今どのテーマを読んでいるのかが分かります。
英字ラベルは文字を小さくして字間を広げてあるため、日本語の見出しと大きさで競合しません。装飾として英字を置くだけで終わらせず、階層の一部として機能させている点が丁寧です。
カードの並びと縦一列のタイムライン
対象となる読み手を示すセクションでは、生成りのカードを横三列に二段で並べ、それぞれに短い問いかけと補足を収めています。粒度のそろった項目を同じ形で並べることで、自分が当てはまるかどうかを比べながら読み進められます。
一方、提供する仕組みを説明するセクションでは、番号を入れた濃紺の円と細い縦線をつないだ縦一列の構成に切り替わります。順序のある内容は縦に、並列の内容は横にという使い分けが、最後まで徹底されています。
罫線で構造を見せるリスト表現
根拠を示すセクションや利用の流れでは、囲みをつくらず、項目の間に細い罫線を引くだけの表現が選ばれています。枠を減らすと画面が軽くなり、文字の内容そのものへ視線が向きます。
さらにこの部分は、本文の幅を画面いっぱいに広げず左寄りに抑え、右側に大きな余白を残しています。余白を情報の一部として使う判断で、落ち着いた読み心地につながっています。
信頼感を支えている見せ方
身体や数値に関わるテーマでは、何を拠り所にしているのかが必ず問われます。このサイトは、その答えを性質の違う三つのセクションに分けて置いています。
根拠を独立したセクションとして扱う
グローバルナビゲーションには根拠という項目が用意され、トップページにも同じテーマのセクションが設けられています。日本人の食事摂取基準やWHOの身体活動に関するガイドライン、健康長寿の地域を対象とした観察研究を挙げる形で、拠り所を明示しています。
見せ方はチェックマークと小さな補足文を添えた素直なリスト表現で、効果を大げさに語る書き方をしていません。参照している基準を静かに並べるという構成そのものが、姿勢を伝える手段になっています。
担当者の写真とことばを見せる
担当者を紹介するセクションでは、縦長の写真を左に、肩書と氏名、短い説明文を右に配置しています。氏名は明朝体で大きめに組まれ、姓と名の間隔を広く取ることで、名札のように落ち着いた見え方になっています。
その下には、左に縦罫を引いた引用の形でサイトが掲げることばが置かれています。文章量を増やさずに人柄と考え方を伝える構成で、誰が対応するのかが画面から素直に伝わります。
よくある質問で迷いを先回りする
ページ後半には質問と回答が並び、四角い枠に入れた記号が各行の頭にそろえて置かれています。記号の位置がそろっているため、質問だけを拾い読みすることも、回答まで読み進めることも選べます。
内容も、測定だけを利用できるか、運動に慣れていなくても取り組めるか、遠方からでも相談できるかという具体的な迷いに向けられています。対応できる範囲については問い合わせを案内する書き方になっていて、言い切りを避ける姿勢が読み取れます。
回遊と行動につなげる導線
一枚もの構成のサイトでは、読み手がどこで読むのをやめても行動できる状態にしておく設計が要になります。このサイトは、繰り返し置かれた入口と、最後の色面の対比でそれを実現しています。
ヘッダーと補助的な操作
ヘッダーは白に近い背景で、左にサイト名、右に会社概要・根拠・ブログ・お問い合わせという項目が並びます。右端には検索窓と濃紺の検索ボタンが置かれ、記事が増えても目的の情報にたどり着ける構成です。
画面の右下には、ページの上部へ戻る円形のボタンが控えめに現れます。縦に長い構成では戻る操作の手間が体験を損ないやすいため、こうした補助が用意されている点は実用的です。
最後の色面で印象を締める
終盤では、それまで白と淡いグレーで進んできた画面が、濃紺で塗られた横幅いっぱいの帯に切り替わります。背景が反転することで文字が白く浮かび上がり、最後の呼びかけが強く印象に残ります。
帯の中には、白で塗ったボタンと白い枠線だけのボタンが並び、ファーストビューと同じ主従関係が保たれています。冒頭と末尾で同じ形を繰り返す構成は、読み手が迷わずに次の一歩を選べる作りです。
まとめ：リハルモのサイトから学べる要点
リハルモのサイトは、扱う情報が数値中心であっても、色と書体を絞り込めば落ち着いた表情をつくれることを示しています。飾りを足すのではなく、余白と罫線で構造を見せる方向でまとめられている点が一貫しています。
- 濃紺・生成り・金茶に絞った配色で、行動と結び付く場所だけを目立たせています
- 明朝体とゴシック体の役割分担を、最後のセクションまで一貫させています
- 並列の情報はカード、順序のある情報は縦一列と、型を使い分けています
- 拠り所にしている基準や担当者を、独立したセクションで示しています
- 冒頭と末尾で同じ形のボタンを繰り返し、次の一歩をそろえています
健康や測定をテーマにしたサイトはもちろん、専門的な内容を扱う事業のサイトを考えるうえでも参考になる作りです。配色や余白の効き方は実際の画面で見るほうが確実に伝わりますので、インボディ測定を軸に熊本から健康づくりへ伴走するリハルモの公式サイトで、ここまで挙げた設計の意図を確かめてみてください。
