ワイヤーDL社会福祉法人 慈楽福祉会
ファーストビューの右半分で「どうしたいか」を4つのアイコンから選ばせる。
webcan analyze kyoudougakusya.org
CARE & WELFARE · 東京都 · PICKED 2026.10.27
社会福祉法人 共働学舎介護・福祉のホームページデザイン参考 — 手書き風フォント・角丸写真・縦書き
出典：kyoudougakusya.org ↗確認日 2026.10.27
EDITOR'S NOTE編集部の視点
手書き風の大きなコピーと暮らしの写真で、施設の考え方と日々の様子をそのまま見せる。
東京都町田市の障がいのある人のための授産施設を運営する社会福祉法人のサイト。ファーストビューは手書き風の太い文字のコピー「障がい者が 障がい者としてしか生きられないことを克服する。」と、角を丸くした暮らしの写真のスライド。トイレットペーパーのバナー、「共働学舎での生活」「活動・仕事」の紹介、ブログ「共働学舎より」のカード、写真を全面に敷いた採用情報と続く。
- 01見出しやボタンに手書き風の太いフォントを使い、施設のやわらかい雰囲気を出している
- 02「共働学舎での生活」「活動・仕事」などの見出しを、縦書きと縦線で区切っている
- 03右端に、メニュー・アクセス・トイレットペーパー注文のアイコンを縦に並べて固定している
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
商品の注文をいつでも押せる位置に置く
施設で作っているトイレットペーパーの注文ボタンを、PCでは右端、スマホでは画面下に固定し、ページの中にも「地球に優しい」のバッジつきのバナーを置いている。応援したい人がすぐ注文できる。
暮らしの規模を数字で伝える
「福祉ホーム」1棟に21名、グループホーム6棟に4名ずつ、と暮らしの単位を具体的な数で書いている。利用を考える本人や家族が、生活の様子を想像しやすい。
採用情報を写真の全面バナーで見せる
ページの終盤に、人が集まって過ごす室内の写真を全面に敷き、「ともに生活して、障がい者の“やりたい”を実現する仕事」の見出しと「採用情報へ」のボタンを重ねている。
チェック項目は 2026.10.27 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F5F6F1背景 · オフホワイト
#FCFDFAカード背景
#43453D本文テキスト・ボタン · チャコール
#1E8A2Dバッジ · グリーン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し
- 使用フォント
- つなぎゴシック
- 無料で近いもの
- Zen Maru Gothic
- 用途
- 和文（ボタン・ナビ）
- 使用フォント
- Darumadrop One
- 無料で近いもの
- Darumadrop One
- 用途
- 和文本文
- 使用フォント
- Zen Kaku Gothic New
- 無料で近いもの
- Zen Kaku Gothic New
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 32.4px / 400 | 1.00 | 18px / 400 |
| h3 | 16px / 700 | 1.50 | 13px / 700 |
| 本文（p） | 17.1px / 400 | 1.75 | 15px / 400 |
| ボタン | 18px / 400 | 1.30 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.10.27 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
PARTSパーツ別に見る
PC
SP
PC
SP
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.27 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01法人の考え方を表すコピーを、ファーストビューで大きく言い切る
- 02施設で作っている商品があれば、注文の入口を固定表示にする
- 03暮らしや活動の規模を、人数や棟数などの具体的な数字で書く
- 04採用情報は、施設での日常の写真と一緒に見せる
FAQよくある質問
共働学舎のサイトで使われているフォントは？
見出しはつなぎゴシック、ボタンやナビは Darumadrop One、本文は Zen Kaku Gothic New です。Darumadrop One と Zen Kaku Gothic New は Google Fonts で無料で使えます。つなぎゴシックの代わりには Zen Maru Gothic が近い雰囲気です。
手書き風のフォントは、読みにくくなりませんか？
このサイトでは、手書き風のフォントを見出しやボタンなど短い言葉に限り、本文は読みやすいゴシック体にしています。使う場所を絞れば、雰囲気を出しつつ読みやすさも保てます。
どんな業種の参考になりますか？
障がい福祉の事業所や就労支援施設、グループホームなど、施設の考え方と利用者の日常を伝えたい福祉事業所に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は社会福祉法人 共働学舎および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの介護・福祉の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の介護事業所サイトを。
「社会福祉法人 共働学舎のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。