PC
SP
PC
SP
PC
SP
ワイヤーDL社会福祉法人 共働学舎
手書き風の大きなコピーと暮らしの写真で、施設の考え方と日々の様子をそのまま見せる。
webcan analyze jiraku.or.jp
CARE & WELFARE · 広島県 · PICKED 2026.10.23
社会福祉法人 慈楽福祉会介護・福祉のホームページデザイン参考 — 丸ゴシック・アイコン・藍色
出典：jiraku.or.jp ↗確認日 2026.10.22
EDITOR'S NOTE編集部の視点
ファーストビューの右半分で「どうしたいか」を4つのアイコンから選ばせる。
広島市安芸区から西区を中心に、高齢者ケアサービスと保育事業を行う社会福祉法人のサイト。ファーストビューは左に車いすの利用者と職員の写真と縦書きのコピー、右に施設の入所者募集のお知らせと、居宅サービス・施設居住系サービス・相談窓口・採用情報の4つのアイコンを並べている。続いて法人の紹介、事業所一覧、お知らせ、トピックスと進み、最後に電話番号とWebでのお問い合せ、採用情報の入口を並べている。
- 01ファーストビューの右に、「わが家で暮らし続けたい」「施設に入居したい」などの目的を、色分けしたラベルとアイコンで4つ並べている
- 02事業所一覧の各施設に、居宅サービス・施設居住系サービス・相談窓口のどれがあるかをアイコンで示している
- 03ファーストビューの右端に「ご利用の流れ・お申し込み」の縦長のタブを置いている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ・ご相談 / 相談窓口介護や高齢者の相談をしたい
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
サービスの名前ではなく「したいこと」で選ばせる
4つの入口に「わが家で暮らし続けたい」「施設に入居したい」「介護や高齢者の相談をしたい」「採用について知りたい」という言葉を添えている。介護サービスの種類を知らない家族でも、自分の状況から選べる。
施設ごとの対応を一覧で比べられる
事業所一覧では施設の写真と名前の横に、提供しているサービスを3色のアイコンで並べ、見出しの横にアイコンの凡例を置いている。どの施設で何が受けられるかを、一覧のまま見比べられる。
相談の入口を最後にもう一度
ページの最後の藍色のブロックで「介護のこと。施設のこと。お気軽にご相談ください。」と書き、大きな電話番号とWebでのお問い合せのボタンを並べている。右には採用情報のカードを置き、利用者と求職者の入口を分けている。
チェック項目は 2026.10.22 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F9F8F4背景 · オフホワイト
#4E58A4見出し・ボタン・お問い合わせ背景 · 藍色
#3A3937本文テキスト
#DEEBF5タグ背景 · 水色
#FDC073差し色 · オレンジ
#666666補助テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Zen Maru Gothic（約物は YakuHanJP）
- 無料で近いもの
- Zen Maru Gothic
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 28px / 700 | 1.50 | 24px / 700 |
| 本文（p） | 14px / 500 | 1.50 | 14px / 500 |
| ボタン | 10px / 500 | 1.00 | 10px / 500 |
実測値（PC 1440px・SP 375px、2026.10.22 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
お知らせ
お知らせ／お知らせ一覧型 - 06
- 07
- 08
PARTSパーツ別に見る
番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.22 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01サービスの名前の代わりに「〜したい」という言葉で入口を作る
- 02施設の一覧に、提供しているサービスをアイコンで添える
- 03「ご利用の流れ・お申し込み」の入口を、ファーストビューの中に置く
- 04お問い合わせのブロックで、利用の相談と採用の入口を並べて分ける
FAQよくある質問
慈楽福祉会のサイトで使われているフォントは？
見出しも本文も Zen Maru Gothic で、句読点やかっこなどの約物だけ YakuHanJP で詰めています。Zen Maru Gothic は Google Fonts で無料で使えます。
介護施設のサイトで、入口のアイコンはいくつがよいですか？
このサイトでは、居宅サービス・施設居住系サービス・相談窓口・採用情報の4つにしぼっています。利用者・家族・求職者という相手ごとに入口を分けると、数が少なくても迷いにくくなります。
どんな業種の参考になりますか？
介護施設・保育園・障がい福祉の事業所など、複数の施設やサービスを持つ法人のサイトに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は社会福祉法人 慈楽福祉会および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの介護・福祉の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の介護事業所サイトを。
「社会福祉法人 慈楽福祉会のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。