ワイヤーDL社会福祉法人 明照園
日めくりカレンダーの形のファーストビューに、利用者と職員のイラストを並べ、「まいにちに、よりそいたい。」と伝える。
webcan analyze www.yamatoen.or.jp
CARE & WELFARE · 奈良県 · PICKED 2026.10.17
社会福祉法人 功有会介護・福祉のホームページデザイン参考 — 福祉・イラスト・グリーン
出典：www.yamatoen.or.jp ↗確認日 2026.10.17
EDITOR'S NOTE編集部の視点
「施設を探す」と「サービスを探す」の2つの入口で、18の施設とサービスへ迷わず案内する。
奈良県で18の施設・18のサービスを運営する社会福祉法人のサイト。ファーストビューは、丸みのある形に切り抜いた介護や子どもの写真に、線画のイラストと縦書きのコピー「あなたのよりどころ。」を添えている。法人の考え方をイラストつきのカードで伝えたあと、施設とサービスの2つの探し方を示し、代表電話・お問い合わせフォーム・よくあるご質問をまとめて案内している。
- 01写真を丸みのある形で切り抜き、線画のイラストと組み合わせてやわらかい印象にしている
- 02縦書きのコピーの横に「奈良県下 18施設」「18サービス」と規模を示し、それぞれ一覧へのリンクにしている
- 03グリーンを法人の色として、ボタン・波形の背景・イラストの差し色にそろえている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 2か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線資料請求・お問い合わせ / Formお問い合わせフォーム
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
施設からもサービスからも探せる
「施設を探す」と「サービスを探す」の2つのカードを並べ、フッターにも18の施設とサービスをすべて一覧にしている。近くの施設を探す家族と、必要なサービス（デイサービス・訪問介護など）から探す人の両方に対応できる。
電話・フォーム・よくある質問をまとめる
代表電話の番号と受付時間（9:00〜17:30）の横に、お問い合わせフォームとよくあるご質問のボタンを並べている。電話が得意な人もそうでない人も、自分に合う方法で相談できる。
資料請求・お問い合わせをヘッダーに
ヘッダーの右に、緑の「資料請求・お問い合わせ」ボタンを置いている。施設選びは比較検討に時間がかかるので、資料請求のような軽い一歩を用意しておくと相談につながりやすい。
チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#F3F1EFセクション背景 · ウォームグレー
#62B850ブランドカラー・ボタン・波形 · グリーン
#1DA700差し色（電話番号など）
#000000本文テキスト
#777777サブテキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字（小見出し・ボタン）
- 使用フォント
- Helvetica（Adobe Fonts）
- 無料で近いもの
- Inter
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 400 | 1.50 | 15.4px / 400 |
| h2 | 32px / 600 | 1.60 | 23.1px / 600 |
| h3 | 16px / 400 | 1.50 | 15.4px / 400 |
| 本文（p） | 13px / 600 | 1.60 | 9.6px / 700 |
| ボタン | 16px / 400 | 1.50 | 15.4px / 400 |
実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
お知らせ
お知らせ／お知らせ一覧型 - 09
- 10
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01施設やサービスが多いときは、「場所から探す」と「種類から探す」の2つの入口を用意する
- 02写真の切り抜きを丸みのある形にし、線画のイラストを添えてやわらかい印象にする
- 03電話・フォーム・よくある質問を一か所に並べ、相談の方法を選べるようにする
- 04規模（施設数・サービス数）を数字で示し、一覧へのリンクにする
FAQよくある質問
功有会のサイトで使われているフォントは？
和文は Noto Sans JP、英字の小見出しやボタンには Adobe Fonts の Helvetica を使っています。無料で近づけるなら、英字は Inter が使えます。
施設が1つだけの介護事業所でも参考になりますか？
なります。「サービスを探す」の考え方は、デイサービス・訪問介護・ショートステイなど、提供しているサービスごとに入口を分けるときにそのまま使えます。
どんな業種の参考になりますか？
介護・障がい福祉・保育などの社会福祉法人のほか、複数の店舗や拠点を持つクリニック・学習塾など、「場所」と「種類」の両方から探される業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は社会福祉法人 功有会および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの介護・福祉の参考サイト
ワイヤーDLFROM REFERENCE TO YOUR SITE
このテイストで、
御社の介護事業所サイトを。
「社会福祉法人 功有会のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちら