東京都港区を拠点に、介護保険の枠に収まりきらない生活のサポートを行うKBNケアサポートの公式サイトは、介護の相談先を探している家族が上から順に読むだけで「どこに何を頼めるのか」を判断できる、一本道の構成になっています。装飾を積み重ねるのではなく、写真と大きなボタン、短い言葉で用件を伝えるつくりです。
画面の土台は白と淡い水色で、押してほしい場所にだけ彩度の高い色が置かれています。スマートフォンからの閲覧を前提にした縦長の1カラムのため、大きな画面で開いても本文が中央にまとまり、視線が左右に散りません。
ここでは配色、ファーストビュー、ボタンの形、情報の並べ方といった観点から、このサイトのデザインを見本として読み解いていきます。
白と淡い水色でまとめた1カラムの画面設計
まず全体像です。このサイトは、縦にスクロールするだけで内容が完結する単純な構造を選び、装飾よりも読みやすさを優先しています。その方針は、土台の色づかいと余白の取り方によく表れています。
本文を中央に絞り、左右に余白を残す
パソコンの横長の画面で開いても、本文が入る白い領域は中央に絞られています。左右には淡い水色の背景がそのまま残るため、一行の文字数が長くなりすぎず、目が疲れにくい幅に収まっています。スマートフォンでの見え方をそのまま広げたような構成で、どの端末から見ても同じ順番で読み進められる点が利点です。
色数を絞り、要所だけ彩度を上げる
背景はほとんど白に近く、最上部のナビゲーションだけが淡い水色に塗られています。そこへ、問い合わせのボタンの緑、電話のボタンの濃い青、帯見出しの中間的な青、質問リンクのピンクという順で強い色が現れます。使う色を絞っているぶん、彩度の高い部分がそのまま「操作できる場所」の合図として働いています。
ファーストビューで名乗りと空気感を同時に伝える
画面を開いた瞬間に目に入る範囲では、事業者名と雰囲気という二つの情報を同時に届けています。細長いバナーと大きな写真を上下に重ね、役割を分けている点が特徴です。
夕景のバナーとロゴマークで最初に名乗る
最上部には「Top」「staff」という二つのリンクが横に並ぶ淡い水色のナビゲーションがあり、その下に夕暮れの空を写した細長いバナーが置かれています。バナーは左へ向かうほど白へ溶けるグラデーションになっていて、中央に小さく事業者名が入ります。控えめな導入で、次の大きな写真へ視線を渡す役割を担っています。
生活空間の写真で利用場面を想像させる
メインの写真は、車椅子と介護用のベッド、観葉植物、カーテン越しの光が入った室内です。人物を大写しにせず暮らしの場そのものを見せることで、施設ではなく自宅での支援という主題が伝わります。写真の中央には、ハートをかたどったKのマークに濃い青の欧文と橙色の日本語を組み合わせたロゴが重ねられており、対照的な二色の組み合わせが淡い写真の上でもはっきり読み取れます。
相談への導線をファーストビューの直下に集約
このサイトで最も分かりやすい工夫は、連絡手段を写真のすぐ下にまとめている点です。長い説明を読ませる前に、まず連絡先へ手が届く配置になっています。
緑と濃紺の横長ボタンを縦に重ねる
写真の下には、横幅いっぱいに近い長方形のボタンが二つ縦に並びます。上は封筒のアイコンを添えた緑のボタン、下は受話器のアイコンと電話番号を載せた濃い青のボタンです。角の丸みを抑えた直線的な形で面積が大きく、指でも押しやすい大きさが確保されています。色で連絡手段を区別しているため、文字を読む前に選択肢が二つあると理解できます。
ボタンの直下に受付手段と対応エリアを添える
ボタンのすぐ下には、小さな明朝体で二行の案内が添えられています。LINEと電話とメールで相談を受け付けていること、そして対応エリアとして港区・品川区・渋谷区・目黒区が挙げられ、それ以外の地域は相談に応じるという注記も置かれています。ボタンを押す前に自分の住む地域が対象かどうかを確かめられるため、問い合わせの空振りを減らす配置だといえます。
悩みから解決へつなぐ情報の並べ方
ページの中ほどは、読者の不安を先に言葉にしてから答えを示す順番で組み立てられています。連絡先の下には細い罫線で挟まれたお知らせの欄が置かれ、中央揃えの明朝体の見出しで短い案内を伝える場所が確保されています。そこから本題の説明が始まります。
青い帯の問いかけと、短い悩みの列挙
本題の入口は、中間的な青の帯に太字を中央揃えで載せた問いかけの見出しです。その下には鍵括弧でくくった短い声が一行ずつ、広い行間で並びます。取り上げられているのは、次のような内容です。
- 介護について誰に相談すればよいのか分からない
- 家族だけで介護を続けるのが負担になってきた
- 退院した後に自宅で暮らせるかどうか不安がある
- 仕事と親の介護を両立させるのが難しい
- ひとりで外出させるのが心配
最後に、こうした声へ答える立場だと短く受ける一文が置かれます。長い自己紹介から始めず、読者の状況を先に映してから名乗る流れになっており、共感から入る構成の見本になっています。
縦罫と色ラベルで見出しに階層を作る
中盤の各ブロックは、青い縦罫を頭に付けた小さなラベルと、その下に置かれた太い見出しという二段構えです。ラベルがブロックの要約、見出しが言い切りという役割分担で、ラベルの文字色は緑、赤、紺と場所ごとに変えられています。同じ形を繰り返しながら色だけを替えているため、統一感を保ったまま単調さを避けられています。
文章と視覚要素を左右で入れ替える交互配置
中盤のブロックは、文章を左に置いて視覚要素を右に添えた形と、その左右を入れ替えた形が交互に現れます。視線が上から下へ落ちる間に左右へ振られるので、同じ幅の文章が続くよりも読み進めやすくなります。ブロックの境目には細い罫線が引かれており、話題の切り替わりが目で分かる作りです。
自費（保険外）の介護サービスをどう説明しているか
後半は、サービスの範囲と前提となる知識の説明に充てられています。制度の話は言葉が硬くなりがちですが、リンクの見せ方と一覧の組み方によって、必要な人だけが深く読める設計になっています。
疑問形のリンクバーで基礎知識のページへ渡す
本文の途中には、ピンクの帯が三本続けて並びます。それぞれ下線付きの太字で問いかけの形のラベルが入り、右端には次のページへ進むことを示す矢印が置かれています。ここまでの青系の配色とあえて色を変えているため、読み物への入口だと一目で分かります。介護保険との違いを知りたい人はここで枝分かれし、急いでいる人はそのまま下へ進めるという二通りの読み方に対応しています。
できることと対応しない範囲を整理した一覧パネル
その先には、丸いアイコンと項目名を左に、内容を右に置いた行を積み重ねた一覧のパネルがあります。深い緑のアイコンとクリーム色の下地でまとめられており、上部の青系の画面とは別のまとまりとして見えます。並んでいるのは、受付の時間帯や、通院への同行、買い物や外出や散歩への付き添い、自宅での見守りと話し相手、身体の介助、家族が不在のときの支えといった項目です。
注目したいのは、頼める内容だけでなく、医療行為は行わないという注記が枠付きで添えられている点です。対応しない範囲を先に示す姿勢は、問い合わせ後の行き違いを防ぐうえで役に立ち、読者に誠実な印象を残します。パネルの下には電話とメールと公式LINEの三つの窓口がアイコンと二次元コードで横並びに置かれ、読み終えた位置からもう一度連絡手段へ戻れるようになっています。
自費の介護サービスとは何かを知りたい読者へ
介護のサービスには、介護保険を使って受けるものと、保険の対象にならない自費のものがあります。前者は要介護や要支援の認定を受けた人が対象で、使える内容や時間に一定のルールが定められています。後者は認定の有無にかかわらず、利用する人の希望に沿って内容を決めやすい点が特徴です。
通院への付き添いや外出への同行、長い時間の見守りのように、保険の枠だけでは時間や内容が足りない場面で、保険外のサポートが選ばれます。このサイトにも制度の違いを説明する専用のページが用意されており、基礎から順に読めるようになっています。サイトでは、訪問介護や障害福祉といった現場で積んだ経験をもとに、利用する人の暮らし方に合わせて支援の内容を組み立てる事業者だと説明しています。
まとめ｜港区で相談先を探す人に届くサイト設計
KBNケアサポートの公式サイトは、白と淡い水色の落ち着いた土台に緑と濃紺という強い色を要所だけ置くことで、相談までの動線を明快にしています。悩みの列挙から入り、頼める内容、対応しない範囲、制度の解説へと進む順番も、初めて外部のサポートを検討する人が知りたい順番に沿っています。
サイト内のstaffのページでは、駒崎大樹様が介護職員実務者研修を修了し、重度訪問介護や移動支援・余暇支援に関わる資格を持つことと、現場で感じてきた考えが紹介されています。担当する人の経歴と姿勢が分かることは、暮らしの中へ入る仕事を任せるうえで安心につながる要素です。
シンプルな1カラムでも、色の役割を決めて情報の順番を整えれば、伝えたいことは十分に届くという見本になっています。配色や写真の選び方、ボタンの置き方は実際の画面で確かめるのが早いので、港区で自費の通院付き添いを相談できるKBNケアサポートの公式サイトもあわせてご覧ください。
