トータル高齢者住宅 紹介センターは、福岡市中央区荒戸に拠点を置き、福岡市内を中心に、福岡県内の全域を対象として高齢者向けの住宅や介護施設探しを手伝っている相談窓口です。運営するのは株式会社TOTAL Incで、医療や福祉の資格を持つスタッフが、相談の段階から入居後のフォローまで寄り添う体制を打ち出しています。
公式サイトは、オフホワイトの地に落ち着いた青緑を差し色として重ね、写真や細い枠線を少しずつずらして配置した上品なデザインです。福岡市で有料老人ホームを探しているご家族にとっても、問い合わせの前に相談の進め方やスタッフの考えを確かめられる、読みやすいつくりになっています。
この記事では、トータル高齢者住宅 紹介センターのサイトをWebデザインの見本として取り上げます。配色、ファーストビュー、書体、レイアウト、導線、下層ページ、情報設計の順に、画面で確認できる工夫を具体的に紹介します。
結論：青緑と余白で安心感をつくる相談窓口らしいデザイン
先に結論を述べると、このサイトは、淡い色と広い余白で見る人の気持ちを落ち着かせながら、相談へ進むための入口を要所に配置した設計になっています。高齢のご家族の住まいという重みのあるテーマを扱いながらも、画面全体が明るくやわらかいため、身構えずに読み進められます。
一方で、青緑で統一した見出しやラベル、線をそろえた配置からは、情報がきちんと整理されている印象も伝わります。穏やかさと信頼感を、色と線の使い方によって両立させている点が、このサイトを見本として紹介する理由です。
配色：オフホワイトの地に青緑を差した穏やかなトーン
配色は、このサイトの落ち着いた印象を支える大きな要素です。使われている色の数は多くありませんが、背景、区切り、強調の役割がはっきり分かれているため、縦に長いトップページでも散らかった印象を与えません。
見出しやラベルをまとめる青緑
アクセントカラーには、緑に青みを含ませた落ち着いた青緑が選ばれています。サブの見出し、「当社について」「ご利用の流れ」といったセクションのラベル、ボタンの枠線と文字、よくあるご質問の「Q」の記号まで、目を留めてほしい部分がこの一色でそろえられています。
セクションのラベルは、青緑で塗りつぶした四角の中に白い文字を置いた形です。清潔感と安らぎを感じさせる色味なので、医療や介護に関わる内容を扱うサイトでも、冷たすぎず派手すぎない印象にまとまっています。
淡い水色の帯でセクションを切り替える
ブログとよくあるご質問のエリア、そしてフッターには、青緑をごく淡くした水色が背景として敷かれています。オフホワイトの地と水色の地が入れ替わることで、区切り線に頼らなくても話題の切り替わりが自然に伝わります。
ブログのエリアでは、オフホワイトと水色の境目にまたがるように記事のカードが置かれています。背景の切り替えとカードの位置をずらす工夫によって、平面的になりがちな一覧にも奥行きが生まれています。
ロゴの紺色が画面を引き締める
ヘッダーとフッターのロゴには、深みのある紺色が使われています。紺色の図形の横に「TOTAL Inc」の文字を置き、その下に小さく「トータル高齢者住宅紹介センター」と添えた構成で、淡い色が中心の画面の中で、ロゴだけがしっかりとした重みを持っています。
紺色は青緑と同じ寒色の仲間なので、強い色でありながら画面から浮くことがありません。全体の調和を保ったまま、サイトの顔となる部分をはっきりと示しています。
ファーストビュー：笑顔の写真と半透明のパネルで安心感を伝える
ファーストビューは、写真、文字、枠線を重ね合わせて構成されています。サイトを開いた瞬間に、このセンターがどのような相談を受けているのかが、写真と言葉の両面から伝わるつくりです。
相談の場面を写したメインビジュアル
メインビジュアルには、自然光の入る明るい部屋でテーブルを囲み、笑顔を見せる年配の男性と女性の写真が使われています。手前には背を向けて座る人物が写り込んでおり、見る人自身がその場で話を聞いているような構図になっています。
写真は画面の幅いっぱいには広げず、周囲に余白を残して配置されています。やわらかな色調とゆとりのある配置があいまって、窮屈さのない穏やかな第一印象につながっています。
写真に重なる半透明のパネルと細い枠線
写真の右側には白い半透明のパネルが重ねられ、その上にキャッチコピーと説明文が置かれています。背景の写真がうっすらと透けて見えるため、文字の読みやすさを確保しながらも、写真の雰囲気が途切れません。
さらに、パネルから少しずらした位置には灰色の細い枠線が引かれ、写真の外側、画面の右端まで伸びています。面と線をずらして重ねる手法によって、ファーストビューに軽やかな奥行きとリズムが加わっています。
悩みに呼びかける見出しと二つのボタン
キャッチコピーは二段構成で、最良の住まいを届けたいという思いを濃い灰色の文字で示したあと、青緑の文字で福岡市内を中心とする対応エリアとサービスの内容を伝えています。その下には、退院後の住まいに悩む方や、施設の種類の多さに迷う方へ向けた短い説明文が続きます。
説明文の下には、「お問い合わせはこちら」と「会社情報はこちら」の二つのボタンが横に並んでいます。どちらも細い青緑の線で囲んだ控えめなデザインで、すぐに相談したい人にも、先に会社のことを知りたい人にも、次の一歩が用意されています。
書体：ゴシック、明朝、英字のセリフ体を使い分ける
文字の扱いにも、このサイトならではの工夫が見られます。役割の異なる書体を組み合わせながら字間を広めにとることで、全体に静かで上品な空気をまとわせています。
字間をゆったりとった細身の見出し
メインのキャッチコピーやセクションの見出しには細身のゴシック体が使われ、文字と文字の間隔がゆったりと空けられています。文字が詰まっていないため、長めの見出しでも圧迫感がなく、穏やかな声で語りかけられているような印象を受けます。
ファーストビューの青緑の見出しや、よくあるご質問の質問文には明朝体が使われています。ゴシック体の中に明朝体を織り交ぜることで、やわらかさの中に丁寧さや品のよさが加わっています。
セクション名を飾る英字のセリフ体
「About」「Flow」「Blog」「FAQ」といったセクション名は、細い線のセリフ体で大きく描かれ、淡い青緑で表示されています。写真に重ねて横向きに置いたり、縦向きにして細い縦線に沿わせたりと、配置に変化をつけている点が特徴です。
大きな英字は、読ませる文字というより画面を彩る装飾として働いています。日本語のラベルで内容を正確に伝えつつ、英字の装飾で雑誌の誌面のような洗練された雰囲気をつくり出しています。
丸みのある書体でそろえたメニューとボタン
グローバルナビゲーションや「Read more」のボタンなど、操作に関わる英字には角の取れた丸みのある書体が使われています。見出しのセリフ体とは表情の異なる書体を割り当てることで、飾りの文字とクリックできる文字の違いが見た目でも分かりやすくなっています。
レイアウト：写真と文章を左右に入れ替えて重ねる構成
トップページのレイアウトは、写真と文章のブロックを交互に並べながら、線や面を少しずつ重ねていく構成です。整ったグリッドの中に意図的なずれを加えることで、スクロールするたびに異なる表情が現れます。
左右が入れ替わる会社紹介と利用の流れ
当社についてのセクションでは左に文章、右に写真を置き、続くご利用の流れのセクションでは写真を左、文章を右へと入れ替えています。視線がジグザグに動くため、縦に長いページでも単調にならず、自然と次の内容へ目が進みます。
当社についての写真には、手のひらの上で色とりどりの紙の人形が手をつないでいる様子が使われています。支え合いや寄り添いを連想させるモチーフで、文章を読む前からセンターの姿勢が伝わる選び方です。
写真の重なりと細い線がつくる奥行き
ご利用の流れのエリアでは、相談の場面を写した写真と、車いすの小さな模型を写した写真が重なり合うように配置されています。一枚の写真を大きく見せるのではなく複数の写真を重ねることで、人と人との関わりや介護のある暮らしを多面的に感じさせています。
文章のブロックは灰色の細い線で囲まれ、その線は画面の端まで伸びています。セクションのラベルの脇には縦線が引かれて英字が添えられており、線と文字の組み合わせがページ全体に統一感を与えています。
気持ちを落ち着かせる余白
セクションとセクションの間には、たっぷりとした余白が確保されています。情報を詰め込まずに間をとることで一つひとつのメッセージが際立ち、悩みを抱えて訪れた人でも落ち着いて読み進められる画面になっています。
導線とUI：迷わず相談にたどり着ける工夫
このサイトには、読んだ人が相談したいと思ったときにすぐ連絡できる入口が、ページの要所に用意されています。ここでは、画面上で確認できるボタンやメニューの工夫を順に見ていきます。
電話番号とContactを置いたヘッダー
ヘッダーの右上には、受話器のアイコンを添えた電話番号と、カレンダーのアイコンを添えた「Contact」が、細い縦線で区切られて並んでいます。電話番号にはリンクが設定されているため、スマートフォンからはタップするだけで発信できます。
ページをスクロールすると、ロゴとメニューが画面の上部に固定されます。長いページのどの位置にいても、ほかのページへすぐに移動できる安心感があります。
現在地が分かるグローバルナビゲーション
メニューは「Home」「About」「Flow」「FAQ」「Access」「Blog」「Contact」の七つの項目で構成されています。表示中のページの項目には淡い青緑の帯が下線のように引かれ、いまどのページを見ているのかがひと目で分かります。
このうち「Access」は、トップページの中にあるアクセスの欄へ移動する仕組みです。所在地を確認するためだけに別のページを開く必要がなく、閲覧の手間を減らしています。
Read moreで詳しい内容へつなぐ
当社について、ご利用の流れ、ブログ、よくあるご質問の各セクションには、「Read more」のボタンが置かれています。トップページでは要点だけを見せ、詳しい説明はそれぞれの下層ページに任せる構成なので、知りたい情報を自分のペースで深く読めます。
開閉式のよくあるご質問
よくあるご質問は、質問文だけを並べたアコーディオン形式です。質問をクリックすると回答が開き、右端の「＋」の記号が「−」に切り替わるため、どの項目を開いているのかがすぐに分かります。
各質問は淡い色のパネルに収められ、下辺には青緑の線が引かれています。質問の一覧を見渡したうえで気になる項目だけを選んで読めるので、限られた時間で情報を探す人にも使いやすいつくりです。
地図と写真を添えたアクセス情報
よくあるご質問の下には、画面の幅いっぱいにGoogleマップが埋め込まれています。続くアクセスのエリアでは、住所、営業時間、電話番号、定休日、交通アクセスが表の形で整理され、項目名は青緑、内容は灰色で書き分けられています。
表の右側には、青空の下に市街地が広がる写真が添えられています。文字の情報だけで終わらせず、地図と写真を組み合わせることで、事務的になりがちな所在地の案内にも明るさが加わっています。
フッターで目立つContactのボタン
フッターは淡い水色の地に、ロゴ、住所、二つの大きなボタン、メニューを中央にそろえて並べています。電話番号のボタンは枠線だけのデザインですが、「Contact」のボタンだけは青緑で塗りつぶされており、最後に問い合わせへ誘う意図がはっきりと表れています。
ページの終わりまで読んだ人が、そのまま連絡へ進めるように入口を用意している点は、相談を受け付けるサイトを制作する際に参考になる工夫です。
下層ページ：流れ、人、問い合わせを丁寧に見せる
下層ページも、トップページと同じ色と線の使い方で統一されています。各ページの冒頭には、淡い色調の写真に大きな英字のタイトルと日本語の小見出しを重ねた帯が置かれ、ページの下部には現在地を示すパンくずリストが表示されます。
七つのステップを縦の線でつなぐご利用の流れ
ご利用の流れのページでは、相談から入居後のサポートまでが、ステップ01からステップ07までの7段階に分けて紹介されています。各ステップは青緑の番号と太字の見出しで始まり、番号の下を縦の線がつないでいるため、手続きが一本の道のように進んでいく様子が伝わります。
最初のステップには、電話番号のボタンと、青緑で塗りつぶした問い合わせのボタンが添えられています。流れを読みながら、その場で相談へ移れる配置です。
英字の肩書を添えたスタッフ紹介
当社についてのページでは、コンセプトの文章を細い線の枠で囲み、手のひらに小さな家の模型をのせた写真と重ねて配置しています。住まい選びというテーマがひと目で伝わるモチーフです。
スタッフの紹介では、「Representative」「Counselor」といった英字の肩書を大きく添えたうえで、代表の入江 広実様と、シニアライフコーディネーターの岩田 道卓様の名前とメッセージが枠の中にまとめられています。誰が相談に乗ってくれるのかが見えることで、初めて問い合わせる人の不安をやわらげています。
必須と任意を色で分けたお問い合わせフォーム
お問い合わせのページでは、淡い水色のパネルの上に入力欄が並んでいます。項目名の前には、必須の項目に青緑、任意の項目に灰色のラベルが付いており、どこまで入力すればよいかがすぐに分かります。
必須の項目はお名前とメールアドレスに絞られ、入居を検討している方との関係や要介護認定の状況は選択式で答えられます。関係の選択肢にはご本人やご家族のほか、ケアマネやソーシャルワーカーも含まれており、支援に関わる立場の人からの相談も想定した設計です。
情報設計：悩みを抱えるご家族の目線に沿った構成
コンテンツの並びにも、相談する側の気持ちに寄り添う工夫が見られます。トップページは、会社の紹介、利用の流れ、ブログ、よくあるご質問、アクセスの順に続き、誰が、どのように手伝ってくれるのかを段階的に理解できる流れです。
ファーストビューの説明文は、退院後の住まいに困っている方や施設選びに迷っている方など、具体的な場面に向けて呼びかけています。よくあるご質問でも、医療的なケアが必要な場合、リハビリ、最期まで暮らせるかどうか、夫婦での入居といった、ご家族が気にかけやすい話題が取り上げられています。
アクセスの欄には、営業時間が9時から18時で年中無休であることや、福岡市地下鉄空港線の大濠公園駅から歩いて6分ほどの場所にあることが示されています。ご利用の流れのページにも土日祝日に相談できると記されており、急な事情を抱えやすい介護の相談で、いつ、どこへ連絡すればよいかがすぐに分かる構成です。
福岡市で有料老人ホームの紹介会社を探す方へ
福岡市で有料老人ホームを探すとき、施設の数や種類の多さから、どこから手をつければよいか迷う方は少なくありません。そうした場面で頼りになるのが、希望を聞き取ったうえで候補を絞り込んでくれる紹介会社です。
紹介会社を選ぶときに確かめたい点
紹介会社を比べる際は、相談から入居までの進め方が明確か、見学に同行してもらえるか、入居後も相談できるかといった点を確かめておくと安心です。トータル高齢者住宅 紹介センターのご利用の流れのページには、条件に合う施設を複数紹介すること、見学に相談員が同行すること、納得できなければ別の施設を改めて提案することが示されています。
入居後に施設との間で困りごとが起きた場合には、相談員が施設との間に入る方針も説明されています。施設探しにともなう自宅の処分や引っ越し、身元保証といった手続きまで相談できると案内されている点も、紹介会社を選ぶうえでの判断材料になります。
認知症の介護限界を感じたときの相談先として
認知症のご家族を自宅で介護していると、見守りや声かけが昼夜を問わず続き、心身ともに限界を感じることがあります。限界を迎えてから慌てて住まいを探すのではなく、早めに相談先を知っておくことが、ご本人とご家族の双方にとって大切です。
トータル高齢者住宅 紹介センターのサイトでは、介護を家族だけで抱え込まないよう呼びかけ、医療や福祉の資格を持つスタッフが住まい選びの相談に応じることを伝えています。周辺エリアへの出張相談にも応じると案内されており、事務所へ足を運ぶのが難しい場合にも相談の糸口をつかみやすい体制です。
まとめ：トータル高齢者住宅 紹介センターは寄り添う姿勢を形にしたデザインの見本
トータル高齢者住宅 紹介センターのサイトは、オフホワイトと青緑、淡い水色を軸に、写真や枠線をずらして重ねることで、やわらかく上品な印象をつくっています。字間を広くとった書体や大きな英字の装飾、たっぷりとした余白が、重みのあるテーマを扱いながらも落ち着いて読める画面を支えています。
ヘッダーとフッター、各セクションに置かれた相談の入口や、開閉式のよくあるご質問、ステップで示した利用の流れなど、使う人の不安を先回りしてほどく工夫も随所に見られます。医療や介護に関わる相談窓口のサイトを制作する際の見本として、ぜひ実際の画面で確かめてみてください。
