介護・福祉のホームページデザイン事例｜用途別の選び方と制作のポイント

公式案内から比較できる点

奈良県で高齢者・障がい者・障がい児向けのサービスを展開する法人です。

施設別とサービス別の入口、FAQ、資料請求・問い合わせ、採用を案内しています。

自社で取り入れる場合：所在地とサービス種別の両方から探せる構成を比較します。

施設数だけで利用可能性を判断させず、個別施設の対象と連絡先を示します。

公式案内から比較できる点

沖縄を中心に児童・障がい福祉、高齢者向け生活支援などを展開しています。

事業、拠点、会社情報、採用と相談先を分けています。

SOU GROUPの運営会社でもあります。

自社で取り入れる場合：企業全体の説明と各サービスの利用案内を分けます。

同一運営の別サイトも、対象読者や役割が異なる事例として比較します。

公式案内から比較できる点

児童発達支援、放課後等デイサービス、共同生活援助、就労支援、訪問看護などを紹介しています。

各サービス、協業の取り組み、採用の入口があります。

自社で取り入れる場合：サービス名称に対象と相談内容を添えます。

紹介されている事業を、すべての拠点で利用できると誤認しない構成にします。

公式案内から比較できる点

生活困窮者向けに、寮付き求人の紹介と居住支援を案内しています。

利用者のインタビュー、活動紹介、支援者向けの入口があります。

自社で取り入れる場合：支援を必要とする人の相談と、活動を応援する人の入口を区別します。

相談・就職・入居の条件はサービスごとに確認できるようにします。

公式案内から比較できる点

株式会社ライフデザインが運営する児童発達支援・放課後等デイサービスの案内です。

ご利用方法、1日の流れ、事業所、見学・体験申込みを掲載しています。

自社で取り入れる場合：企業サイトとは別に、利用を検討する家庭向けの情報を整理します。

対象、送迎、費用、受け入れ状況は事業所へ確認する流れを用意します。

公式案内から比較できる点

医療的ケア児と家族のキャンプを支えるプロジェクトです。

準備・道具・食事・遊びの案内、体験談、チェックリスト、FAQ、相談・協賛の入口があります。

自社で取り入れる場合：活動報告と参加案内を区別します。

掲載された体験をすべての参加者に当てはめず、個別のケアや参加条件は関係者と確認する案内にします。

公式案内から比較できる点

熊本県天草市で養護老人ホーム、特別養護老人ホーム、通所・短期入所などを案内しています。

入所申込書、ショートステイの空き状況、採用情報を分けています。

自社で取り入れる場合：利用の相談、申請書、採用を区別します。

空き状況は掲載日と問い合わせ先を併記し、現在の受け入れ可否を確かめられるようにします。

公式案内から比較できる点

東京都町田市で障がいのある人の暮らしと仕事を支える法人です。

施設・活動、トイレットペーパーなどの商品と注文、賛助会、採用を案内しています。

自社で取り入れる場合：生活・活動の紹介と、商品注文・支援・採用の手続きを分けます。

写真から人物の立場や同意の状況を推測して説明しないようにします。

公式案内から比較できる点

泉佐野・貝塚・和歌山の事業所や、就労支援、創作アート・商品制作、企業向けの相談を案内しています。

就労継続支援に加え、就労選択支援・就労定着支援も掲げています。

自社で取り入れる場合：利用相談と企業からの仕事の依頼を区別します。

作品を使う場合は作者と利用範囲を確認し、見た目だけで作者や制作方法を推測しません。

公式案内から比較できる点

湖山医療福祉グループの仙台エリアについて、住まい、暮らし、仕事、施設を案内しています。

就職相談に加え、入所相談の入口もあります。

自社で取り入れる場合：採用専用と決めつけず、入所を検討する人と応募者がそれぞれの相談先へ進める構成を比較します。

グループ全体のサイトとは役割を分けます。

公式案内から比較できる点

医療・介護・児童福祉・障がい福祉の事業、全国の施設、職員教育、採用を紹介するグループサイトです。

仙台エリアのサイトと同じグループの別の入口です。

自社で取り入れる場合：グループ概要と施設ごとの条件を区別します。

法人の合併や名称変更があるため、法人・施設情報は各案内で更新日を確認します。

公式案内から比較できる点

広島市を中心に高齢者ケアと保育を展開しています。

在宅生活、施設入居、相談、採用の目的別入口に加え、サービス種別・事業所・利用の流れを案内しています。

自社で取り入れる場合：利用者の希望を表す言葉と、正式なサービス区分を組み合わせます。

どちらか一方に絞る必要はありません。

公式案内から比較できる点

放課後等デイサービスを主軸に、児童発達支援、相談支援、アーティスト事務所、ボランティア活動などを紹介しています。

見学の問い合わせと採用も案内しています。

自社で取り入れる場合：支援サービスと表現活動を区別し、各事業の相談先を整理します。

活動紹介の写真や実例を、利用の効果の保証として扱わないようにします。

公式案内から比較できる点

児童発達支援、放課後等デイサービス、生活介護、短期入所、就労支援などを案内しています。

地域・サービス別の事業所検索、利用の流れ、家族向け専用ページがあります。

自社で取り入れる場合：利用前の相談と利用中の家族への案内を分けます。

サービスの対象や対応範囲は、各事業所の条件と照合できるようにします。

公式案内から比較できる点

マガジンハウスによる福祉とクリエイティブを扱うウェブマガジンです。

取材記事、連載、書籍・商品の紹介、イベント情報を分類して掲載しています。

自社で取り入れる場合：施設の利用案内とは役割を分けます。

取材時点や書き手、協賛・広告の表示を管理し、読者が記事の背景を確認できるようにします。

公式案内から比較できる点

熊本県の社会福祉法人で、児童・障がい・高齢福祉と地域の活動を紹介しています。

農福連携、施設、採用、ジュースなどのオンライン販売を案内しています。

自社で取り入れる場合：法人・施設の紹介と商品の購入を分け、活動の背景から商品情報へつなげます。

販売条件とサービス利用条件は別に管理します。

公式サイトの画面で確かめられる点

施設の看板と山並み、夕方の空を写した写真をファーストビュー全面に使っている。

施設名のロゴが入った壁が写真の中央にあり、その上に白い薄い文字で一文が重なっている。

ヘッダーは白い帯で、メニューは5項目に絞り、右端に「お問い合わせ」がある。

自社で取り入れる場合：建物の外観や看板を撮った写真を最初の画面に使い、どこの施設かを場所で伝える。重ねる文字は読める濃さにしておく。

公式サイトの画面で確かめられる点

手を重ねた2人の手元を大きく写した写真を全面に使い、上辺を丸く切り取っている。

緑色のロゴと、緑の「お問い合わせ」ボタンで配色を揃えている。

見出しの英語「Heart to Smile」を細い白文字で大きく置き、日本語の一文を下に添えている。

右下に緑の丸い「Scroll」表示がある。

自社で取り入れる場合：入居者と職員の表情が写らない手元の写真でも、施設の姿勢は伝わる。ロゴの色を1色決め、ボタンと丸い装飾に同じ色を使う。

公式サイトの画面で確かめられる点

クリーム色の背景に、手描きのキリンやみかんの枝のイラストを散らしている。

職員と赤ちゃん、子どもの顔の写真を2枚、位置とサイズをずらして並べている。

ヘッダーに「月1,000円から寄付」のオレンジのボタンがあり、下部にも寄付の案内帯が出ている。

自社で取り入れる場合：支援団体は、寄付や採用など目的別のボタンを色で分けてヘッダーに置く。イラストはロゴのキャラクターと同じ画風で揃える。

公式サイトの画面で確かめられる点

ハート形に切り抜いた写真に、職員と高齢の利用者が向き合う様子を使っている。

右に大きな緑のハート形を重ね、紙のような質感を付けている。

キャラクターが右下におり、吹き出しに「サービスのお問い合わせ／採用エントリー」とある。

メニューは8項目が上部に1行で並ぶ。

自社で取り入れる場合：法人のロゴの形をモチーフに写真を切り抜く。キャラクターを作るなら、問い合わせと採用の窓口を吹き出しにまとめて右下に固定する。

公式サイトの画面で確かめられる点

利用者がボールを抱えて笑う写真を、角を丸くした大きな枠でファーストビューの大半に使っている。

縦書きの一文を右に置き、その下に車いすの人と職員のイラストと木を添えている。

ヘッダー右に黒い丸の「採用情報」と赤い丸の「お問合せ」があり、色で役割を分けている。

自社で取り入れる場合：利用者の写真を大きく1枚使い、その隣に縦書きの一文を置く。採用と問い合わせは、ヘッダー右に色を変えた丸ボタンで並べる。

公式サイトの画面で確かめられる点

児童が笑顔で四つ這いになる写真を、不定形に切り抜いて置いている。

ロゴは6色の小さなキャラクターで、右の「お問い合わせ」「採用情報」の縦のタブも同じ色と形にしている。

縦書きの文字が左右にあり、方眼紙のような背景と手描き風のイラストが入る。

自社で取り入れる場合：ロゴの色と形を問い合わせタブにも使い、サイト全体で1つのキャラクターの世界にまとめる。写真は表情の分かるものを選んで切り抜く。

公式サイトの画面で確かめられる点

高齢の方の横顔を、画面左の縦長の枠いっぱいに使っている。

右の白い余白に、縦書きの「生活をつむぐ」と、細い緑の線を曲線で描いている。

事務所名と住所を左下に小さな文字で置き、メニューは右下に1行で並ぶ。

動きの出る要素は線だけで、色は緑と灰色に絞っている。

自社で取り入れる場合：小さな事務所なら、写真1枚と一文、線1本で構成できる。色は緑と灰色に決め、メニューは5項目ほどに絞る。

公式サイトの画面で確かめられる点

薄い黄色の背景に、利用者と看護師の写真を丸みのある大きな枠で置いている。

右側の白いカードに電話番号と受付時間があり、その下に「訪問看護」のピンクと「介護タクシー」の緑のカードが並ぶ。

ロゴとイラストの家・車は、丸みのある同じ画風に揃えている。

自社で取り入れる場合：複数の事業があるときは、事業ごとにカードの色を変えて最初の画面に並べる。電話番号と受付時間は、同じ画面の目立つ位置に置く。