ワイヤーDL社会福祉法人 功有会
「施設を探す」と「サービスを探す」の2つの入口で、18の施設とサービスへ迷わず案内する。
webcan analyze meishoen.com
CARE & WELFARE · 熊本県 · PICKED 2026.10.17
社会福祉法人 明照園介護・福祉のホームページデザイン参考 — 特別養護老人ホーム・日めくり・イラスト
出典：meishoen.com ↗確認日 2026.10.17
EDITOR'S NOTE編集部の視点
日めくりカレンダーの形のファーストビューに、利用者と職員のイラストを並べ、「まいにちに、よりそいたい。」と伝える。
熊本県天草市の社会福祉法人のサイト。ファーストビューはリングで綴じた日めくりカレンダーの形で、利用者や職員の似顔絵のイラストと吹き出しを並べ、右上に今日の日付、中央に縦書きの「まいにちに、よりそいたい。」を置いている。左側に固定したナビと3つのボタン、法人の考え方、「ひめくり明照園」、「明照園でよりそう人たち」の写真、各施設・サービスの紹介、お知らせ・ブログ、食事の写真、空き状況や申込書の案内、電話の問い合わせと続き、フッターには天草の海のイラストを描いている。
- 01リングで綴じた日めくりカレンダーの形のファーストビューに、今日の日付を出している
- 02利用者や職員の似顔絵のイラストと吹き出しを、写真と組み合わせてサイト全体に使っている
- 03薄いベージュとオレンジの配色で、施設のサイトをやわらかい雰囲気にまとめている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
入所・求人・問い合わせを左に固定する
PCでは左側のナビの下に、「入所申込み」「求人情報」「お問い合わせ」の3つのボタンを色分けして固定している。利用を考える家族、働きたい人、相談したい人が、どこからでもそれぞれの入口に進める。
空き状況と申込書をトップから案内する
ページの後半に「ショートステイ空き状況」「明照園だより」「入所申込み申請書ダウンロード」「採用情報」のカードを並べている。家族が知りたい空き状況や手続きの書類に、トップページから直接たどり着ける。
人と日々の食事を写真で見せる
「明照園でよりそう人たち」で手書きの言葉を持つ人たちの写真を、「まいにちのいただきます！」で食事の写真を並べている。どんな人がいて、どんな食事が出るかが分かると、家族が施設を選ぶときの安心材料になる。
チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F0813Bメインカラー（ボタン・問い合わせ・見出しの点） · オレンジ
#F8F2EE背景 · ベージュ
#F4E6DCセクション背景 · ピンクベージュ
#FFFFFFカード背景
#F7F7F7セクション背景（施設紹介） · ライトグレー
#3F342D本文テキスト · ダークブラウン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- Zen Kaku Gothic New
- 無料で近いもの
- Zen Kaku Gothic New
- 用途
- 和文（一部の小さな文字）
- 使用フォント
- Zen Maru Gothic
- 無料で近いもの
- Zen Maru Gothic
- 用途
- 英字（小見出し・日付・電話番号）
- 使用フォント
- Outfit
- 無料で近いもの
- Outfit
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 25px / 500 | 1.31 | 22px / 500 |
| h3 | 16px / 500 | 2.00 | 15px / 500 |
| 本文（p） | 10px / 500 | 1.00 | 10px / 500 |
| ボタン | 10px / 500 | 1.00 | 10px / 500 |
実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01施設の毎日を伝えたいときは、日めくりや日記など「毎日」を連想させる形をデザインの軸にする
- 02似顔絵のイラストと実際の写真を組み合わせ、やわらかさと実在感を両立させる
- 03利用者の家族・求職者・問い合わせの3つの入口を、常に見える場所に色分けして置く
- 04空き状況や申込書など、家族が探す情報はトップページから直接リンクする
FAQよくある質問
明照園のサイトで使われているフォントは？
和文は Zen Kaku Gothic New と Zen Maru Gothic、英字の小見出しや日付は Outfit です。どれも Google Fonts で無料で使えます。
介護施設のサイトで、利用者向けと採用向けはどう分けるとよいですか？
このサイトのように、入所申込み・求人情報・お問い合わせのボタンを色分けして常に見える場所に置くと、1つのサイトでも目的ごとに迷わず進めます。働く人の写真を載せることは、家族にも求職者にも職場の雰囲気を伝える材料になります。
どんな業種の参考になりますか？
特別養護老人ホームやデイサービスのほか、保育園、障がい福祉の事業所、訪問看護など、利用者の家族と働く人の両方に向けて発信する福祉の事業所に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は社会福祉法人 明照園および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの介護・福祉の参考サイト
ワイヤーDLFROM REFERENCE TO YOUR SITE
このテイストで、
御社の介護事業所サイトを。
「社会福祉法人 明照園のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちら