大阪市中央区に拠点を置く株式会社ONIのサイトは、巡回健診という専門性の高い事業を、医療らしい硬さに寄りすぎない柔らかな表現でまとめた一枚構成のWebサイトです。縦にスクロールするだけで、事業の考え方から現場の体制、よくある質問、会社情報までが順に読み取れる設計になっています。ページ数を増やさずに伝えきる構成の見本として参考になります。
この記事では、配色や写真の切り抜き方、縦組みの見出し、背景の斜め処理といった視覚表現を中心に、このサイトがどのような意図で組み立てられているかを読み解いていきます。介護施設や企業の健康管理という、読み手が慎重になりやすいテーマをどう和らげているかという視点で見ると、他の業種にも応用できる工夫が多く見つかります。
写真と縦組みコピーで役割を分けたファーストビュー
結論として、このサイトのファーストビューは「写真で状況を見せ、文字で姿勢を伝える」という役割分担がはっきりしています。画面の左側に大きな写真、右側に縦組みのコピーという配置で、視線が左から右へ流れたあと、そのまま下のリード文へ落ちていきます。ここでは、その構成を支えている二つの要素を見ていきます。
右端を円弧で切り抜いた写真の効果
ヒーローの写真は、右端が大きな円弧を描くように切り抜かれています。四角い画像をそのまま画面幅に敷く場合と比べて輪郭がやわらかくなり、背景の淡い水色と写真の境目が角のない曲線でつながります。曲線は画面のさらに右下にも薄く反復されており、ページの入り口全体に丸みのある印象が広がります。
写真そのものの選び方にも意図が見えます。検査機器や数値の画面を先頭に置くのではなく、スタッフが高齢の利用者と向き合って握手をしている場面が採用されており、後ろには居室の窓や観葉植物が写り込んでいます。検査の正確さよりも先に、人と向き合う姿勢を伝えたいという順序が読み取れます。
縦組みの明朝体と手描きの線
写真の右側には、明朝体で縦に組まれた短いコピーが置かれています。中心となる語だけを二重引用符で挟み、他の文字と同じ大きさのまま強調している点が特徴です。文字を大きくして目立たせる代わりに、記号と余白で語の輪郭を立てています。
コピーの下には、手描き風の細い曲線が一本だけ添えられています。整然としたレイアウトの中に手の跡を思わせる線が入ることで、デジタルな冷たさが和らぎます。この手描きの線はこのあとのセクションでも繰り返し登場し、ページ全体をつなぐ合図のような役割を担っています。
連絡手段を常に見せるヘッダーの考え方
ページ最上部の左には、ハート型の線画アイコンとサイト名を組み合わせたロゴが置かれています。右上には角丸の淡い水色のパネルがあり、受話器と封筒のアイコンを添えた連絡先が二段で並びます。
上部にメニュー項目は並んでおらず、代わりに連絡手段だけが見える位置に確保されています。ページ全体が一枚構成であるため、リンクで移動させるよりも読み進めてもらうことを優先し、必要になった時点ですぐ連絡できる状態を保つという判断だと読み取れます。ページ下部に置かれたリンク群が、その役割を補っています。
一枚のページを読ませる情報設計とセクションの切り替え
縦長の一枚構成は、区切りが曖昧になると同じ画面が続いているように感じられ、途中で離脱されやすくなります。このサイトは、見出しの置き方と背景の面の処理という二つの方法で、その単調さを避けています。
縦組みの見出しを左右交互に置くリズム
各セクションの見出しは横書きではなく縦組みで、しかも左右交互に配置されています。特徴を紹介するセクションでは左端に、提案のセクションでは右端に、続くメッセージのセクションでは再び左端に、チームの紹介では右端にというように、振り子のように位置が入れ替わります。
この繰り返しによって、同じ幅のブロックが続いても画面の印象が変わり、スクロールのリズムが生まれます。縦組みの明朝体は日本語として素直に読める上に、健康や医療というテーマに落ち着いた表情を与えています。見出しを本文の列から外に出しているため、本文の読みやすさを損なわない点も利点です。
斜めのオフホワイトの面で場面を切り替える背景
背景は淡い水色を基調にしながら、ところどころに白に近いオフホワイトの面が斜めに差し込まれています。罫線を引かずに、面の色と角度だけでセクションの切り替わりを示す手法です。
直線の区切り線を何本も並べると事務的な印象が強くなりますが、斜めの面で緩やかに分けることで、ページ全体が一続きの読み物として感じられます。斜線の角度が浅く取られているため、動きが出すぎず、内容の落ち着いた調子を壊していません。
課題から解決までを段階で見せる図解レイアウト
このサイトでもっとも図解的な工夫が集中しているのは、課題の発生から解決までを三つの段階に分けて示すセクションです。文章だけでは理解に時間がかかる流れを、番号と写真と短い解説文の組み合わせで整理しています。ここでは番号まわりの装飾と、続くカード形式の見せ方を取り上げます。
手描きの数字と傾けた写真がつくる親しみ
段階を示す一から三までの数字は、既製の書体ではなく手書きに近い細い線で描かれ、その脇に短い曲線が添えられています。写真はわずかに角度をつけて配置され、やわらかな影と小さな光の記号が重なることで、台紙に貼った写真のような表情になります。
写真と文章の左右関係も交互に入れ替わります。一段目は写真が左、二段目は写真が右、三段目は再び写真が左という並びで、視線がジグザグに送られます。読み飛ばしを防ぐと同時に、三つのブロックが独立した紹介ではなく順序のある流れだと直感的に伝わる配置です。
内容としては、入居者の状態が悪化することで看護や介護の業務が増え、施設の運営にも影響が及ぶという流れが最初に示されます。次に、症状が表に出ていない段階で要因を拾い上げ、施設内で完結できる初期対応につなげるという考え方が続き、最後に業務量が安定し滞在期間が短くなるという結果が置かれます。三段構成のまま読み進められるため、専門的な話題でも順序を見失いません。
白いカードと左端の縦棒で整理したサービス紹介
続くセクションでは、白いカードを縦に三枚並べる形式へ切り替わります。セクションの冒頭には濃いめの水色で塗られた角丸の横長バナーが置かれ、健診をどこで実施するのかという前提が先に示されます。前提を一行で示してから各項目に入る順序は、読み手が状況を想像しやすい構成です。
各カードの見出しには左端に短い青の縦棒が置かれ、見出しの背景には細かい方眼のような薄いパターンが敷かれています。装飾は控えめですが、見出しと本文の境目が明確になり、三枚のカードが同じ書式で書かれていることが一目で分かります。
カードは背面にもう一枚の面をずらして重ねたような影の付き方をしており、平坦な白い箱よりも奥行きが出ています。写真は右、左、右と交互に置かれ、前のセクションで作られたジグザグの流れがそのまま引き継がれています。セクションをまたいで同じ視線の動きを保つことで、切り替わっても読み方を覚え直す必要がありません。
文字組みと配色に見るトーン＆マナー
このサイトの落ち着いた印象は、装飾ではなく文字と色の扱いから生まれています。書体の統一と、色数を絞る判断の二点から、その組み立てを確認します。
明朝体と広めの字間がつくる表情
本文から見出しまで、ほぼすべての文字が明朝体で統一されています。見出しには広めの字間が取られ、縦組みでも横組みでも文字が詰まって見えないよう調整されています。書体を一種類に絞ることで、セクションごとに雰囲気が散らばるのを防いでいます。
本文の文字色は真っ黒ではなく、青みを帯びた濃紺に寄せた色が使われています。背景の淡い水色と同じ系統の色相にそろえているため、文字と地の対比が強くなりすぎず、長い説明文でも視覚的な負担が少なくなります。行間もゆったり取られ、一行あたりの文字数は読みやすい範囲に抑えられています。
三系統に絞った配色と写真が担う差し色
配色は、淡い水色、オフホワイト、生成りに近いベージュの三系統にほぼ絞られています。彩度の高い青は、セクション冒頭のバナー、質問欄の記号、ページ最下部の帯といった限られた箇所にだけ現れ、押さえどころが明確です。
色数を絞っても単調にならないのは、写真の中の緑や木目の色が自然な差し色として働いているためです。装飾で色を足す必要がないため、画面が静かなまま情報だけが立ち上がります。医療や検査を扱いながら白一色の清潔感に寄りきらず、施設の生活空間に近い温度感が保たれている点は、同じ分野のサイトを設計する際の参考になります。
線画イラストと質問欄で信頼感を補うページ後半
ページの後半は、写真中心だった前半から線画イラスト中心へと表現が切り替わります。伝える内容が実績の紹介から考え方や体制の説明へ移るのに合わせて、見せ方も静かな方向へ寄せられています。
写真ではなく線画でチームを紹介する判断
会社の姿勢を伝えるセクションでは、聴診器を提げた人物を一本の線で描いたイラストが、生成り色の面の上に大きく置かれています。実際の人物写真ではなく線画を選ぶことで、特定の個人ではなく組織としての体制を語っているという印象になります。
チームの紹介では、放射線技師、臨床検査技師、看護師という三つの役割が並び、それぞれ円形のベージュ地に線画のアイコンが添えられています。線の太さやタッチが三点でそろっているため、同じシリーズとして自然に読み取れます。文章の幅は狭めに設定され、一行あたりの文字数が抑えられているので、専門的な内容でも視線が迷いません。
記載されている内容も、現場の視点に寄せられています。撮影を担当する技師が現場をまとめる役割も担うこと、検査の波形が緊張の影響を受けやすいため受診する方にくつろいでもらう工夫をしていること、採血は熟練した担当者を中心に組み立てていることなどが、それぞれ短い段落で説明されています。
質問欄と会社概要で締めるページ下部
よくある質問は、質問側に濃い水色の丸、回答側に淡い水色の丸を添える形式です。丸の中には頭文字が入り、質問文は本文より一回り大きな明朝体で組まれています。色の濃さと文字の大きさだけで質問と回答を区別しているため、記号が増えすぎません。
項目の間は細い横罫だけで区切られ、開閉式のパネルではなく最初からすべての回答が読める状態で並んでいます。会社の立場、他社との違い、検査の内容、実施場所、相談できる範囲、受診の頻度という順で並ぶ構成は、初めて訪れた担当者が抱きやすい疑問の順序に沿っています。
会社概要は、左に小さな項目名、右に内容を置く定義リストの形式で、項目の間に細い罫線が入ります。大阪府大阪市中央区高麗橋二丁目二番七の東栄ビル二階という所在地、連絡手段、対応時間が並び、その下でページ最下部が明るい青の帯に切り替わります。帯の中には白抜きのロゴと各セクションへのリンク、著作権表記が置かれ、水色で通してきたページが最後に一段濃い青で締まる構成になっています。
大阪で巡回健診を検討する担当者に向けたまとめ
結論として、株式会社ONIのサイトは、専門性の高いサービスを扱いながらも、色数を絞った配色、縦組みの見出し、手描きの細い線といった要素で読み手の緊張をほぐす設計になっています。一枚のページに情報を積み上げる構成でも、背景の面の角度と写真の左右を交互に変えることで最後まで読ませられるという点が、この見本のいちばんの学びどころです。
巡回健診は、受診する側が医療機関へ出向くのではなく、検査を行う側が施設や職場へ出向いて実施する形式を指します。移動にかかる時間を抑えられることや、業務や生活の場を大きく離れずに受診できることが、施設や企業で採用される背景にあります。実施場所や検査項目は依頼する側の状況によって変わるため、検討の段階で相談しながら内容を詰めていく進め方が一般的です。
このサイトでは、株式会社ONIが医療法人ではなく健康診断の代行を担う立場であり、医療法人や関連企業と連携して健診を実施していることが明記されています。少人数の体制を活かした意思決定の速さや臨機応変な対応を強みとして挙げ、巡回健診の現場と運営に三十年以上携わってきた知見を軸にしている点も、文章と線画イラストの組み合わせで丁寧に説明されています。担当者が知りたい前提条件を早い段階で開示する姿勢が、デザインの静かなトーンとよく合っています。
デザインの実物を確かめたい方や、施設や企業の健康管理の進め方を相談したい方は、公式サイトで全体の流れを確認してみてください。
