ワイヤーDL社会福祉法人 共働学舎
手書き風の大きなコピーと暮らしの写真で、施設の考え方と日々の様子をそのまま見せる。
webcan analyze 1000.care
CARE & WELFARE · 和歌山県 · PICKED 2026.10.29
訪問看護ステーション千介護・福祉のホームページデザイン参考 — 1ページ完結・手描きイラスト・訪問エリア地図
出典：1000.care ↗確認日 2026.10.29
EDITOR'S NOTE編集部の視点
手描きのイラストと1本の道で、あいさつから問い合わせまでを1ページでたどらせる。
和歌山県岩出市の訪問看護ステーションのサイト。ファーストビューは紙のような生成りの背景に、手描き風のロゴ・太陽・雲・鳥のイラストを置き、右上に看板風の電話番号とCONTACTボタンを掛けている。ページはピンクと青の1本の線でつながり、ごあいさつ、サービス内容、訪問エリアと費用、ご利用方法、事業所情報と地図、管理者のあいさつ、お知らせと日記、問い合わせフォームの順に並ぶ。
- 01手描き風のイラストと生成りの背景で、医療の堅さをやわらげたファーストビュー
- 02ピンクと青の線を1本の道としてページ全体に通し、読む順番を目で追えるようにしている
- 03訪問エリアを市名と地図のイラストで示し、費用の考え方を隣に並べている
3 VIEWPOINTS3つの視点で見る
デザインの視点
ファーストビューのロゴ・太陽・雲・ねこを手描き風のイラストにそろえ、青とピンクの道を1本引いて、あいさつ・サービス・訪問エリア・利用方法・連絡先の順に目で追わせている。右上の電話番号は看板風の茶色の帯にしている。
集客の視点
電話番号と受付時間、お問い合わせへのボタンを地図と並べた「私たちについて」の枠にまとめ、その手前に訪問エリアの地図と市名を置いている。管理者の顔写真つきのあいさつも載せており、「地域・連絡先・顔」の並びは真似しやすい。
Webディレクターの視点
1ページ完結で、あいさつ、サービス、利用方法、事業所情報と電話・地図、お知らせと日記、問い合わせフォームの順に並べている。ページ数を増やさずに知る・信じる・問い合わせるを一本の流れにでき、お知らせ欄を社内で更新する形も真似しやすい。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
訪問できる市を地図で示す
「訪問エリア」として岩出市・紀の川市・和歌山市を、地図のイラストと一緒に載せている。ページタイトルにも対応する地域名を入れている。訪問系のサービスは「うちまで来てもらえるか」が最初の確認点なので、エリアははっきり示しておきたい。
連絡先と地図をひとまとめにする
「私たちについて」の枠に、電話番号・緊急時連絡先・FAX・メール・受付時間・住所とGoogleマップを並べている。電話番号はヘッダーにも常に出ている。問い合わせたいときに必要な情報が1か所でそろう。
利用の始め方を書いておく
「ご利用方法」として、主治医や病院の相談員、ケアマネージャー、地域包括支援センターに相談するか、ステーションに直接相談できることを書いている。初めて訪問看護を使う家族が、最初に誰へ声をかければよいかが分かる。
チェック項目は 2026.10.29 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FAFAF0背景（紙のような質感） · 生成り
#1877B9メイン色（雲・ごあいさつの帯・線） · ブルー
#DA4B8D差し色（道の線・太陽・電話番号） · ピンク
#AA7C40ヘッダーの看板（電話・CONTACT） · ブラウン
#E5E3DF「私たちについて」の背景 · ベージュ
#013C60本文テキスト · ネイビー
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- 游ゴシック
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字の小見出し・日付・電話番号
- 使用フォント
- Asap
- 無料で近いもの
- Asap
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 28px / 700 | 1.07 | 28px / 700 |
| h3 | 22px / 700 | 1.36 | 21.1px / 700 |
| 本文（p） | 13px / 400 | 1.75 | 13px / 400 |
| ボタン | 18px / 500 | — | 18px / 500 |
実測値（PC 1440px・SP 375px、2026.10.29 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.29 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01イラストのタッチを1つにそろえると、手描きでも散らからない
- 02ページ全体に1本の線を通すと、1ページ完結でも読む順番が伝わる
- 03訪問・出張型のサービスは、対応する市町村を地図と文字の両方で示す
- 04電話・受付時間・住所・地図は1つの枠にまとめ、ヘッダーにも電話番号を出しておく
FAQよくある質問
訪問看護ステーション千のサイトで使われているフォントは？
見出しと本文は游ゴシック、英字の小見出し・日付・電話番号は Asap です。ロゴの手描き文字は画像です。無料で近づけるなら、和文は Noto Sans JP、英字は Asap が使えます。
訪問看護のサイトは1ページだけでも大丈夫ですか？
サービス・エリア・利用方法・連絡先・お知らせがそろっていれば、1ページでも必要な情報は伝えられます。このサイトのように線や見出しで順番を示すと、長いページでも迷いにくくなります。
どんな業種の参考になりますか？
訪問介護・訪問リハビリ・居宅介護支援などの在宅系の事業所や、出張型のサービスに応用できます。対応エリアと連絡先を早めに見せたい業種に向いています。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は訪問看護ステーション千および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの介護・福祉の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の介護事業所サイトを。
「訪問看護ステーション千のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。