ワイヤーDL訪問看護ステーション千
手描きのイラストと1本の道で、あいさつから問い合わせまでを1ページでたどらせる。
webcan analyze each-tokyo.co.jp
CARE & WELFARE · 東京都 · PICKED 2026.11.02
Each（障がい者雇用トータル支援サービス）介護・福祉のホームページデザイン参考 — 淡いグリーン・イラスト・曲線の区切り
出典：each-tokyo.co.jp ↗確認日 2026.11.02
EDITOR'S NOTE編集部の視点
企業の悩みを4つ並べてから、サービス・専門家・事例の順に答えを出していく。
障がい者雇用の支援を企業向けに行う会社のサイト。ファーストビューは人物が大きな図形を組み立てるイラストで、「障がい者雇用を専門家が実践的にサポートします。」のコピーと最新のニュースを添えている。4つの悩み、解決の内容、サービスの特徴、専門家、ニュースとコラム、FAQ、問い合わせの順に並べている。
- 01ロゴの形を人物が組み立てるイラストをファーストビューに置き、サイト全体のイラストの調子をそろえている
- 02淡いグリーンや黄緑の面を、曲線や角丸で区切ってセクションを切り替えている
- 03精神保健福祉士・社会福祉士・公認心理士・ジョブコーチを丸い緑の図形で並べ、支援する専門家の職種を示している
3 VIEWPOINTS3つの視点で見る
デザインの視点
写真を使わず、淡いグリーンの背景とイラストでファーストビューを作り、ミントや黄緑の面を曲線で区切っている。写真を用意しにくい業種でも、イラストと淡い色で整える方法として真似できる。
集客の視点
「障がい者雇用のお悩み ございませんか？」と問いかけて4つの悩みを並べ、解決の内容、サービス、専門家、FAQ、問い合わせへ進める流れは、相談を受ける専門サービスに応用できる。
Webディレクターの視点
悩みの提示からサービス、専門家、News & Column、FAQ、Contact Us へと並べ、最後に問い合わせへ進める構成を真似したい。ニュースとコラムの枠があるので、事例を追加していける。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
読み手の悩みから始める
「時間も人手も足りない」「知識・経験がない」「人材が定着しない」「社会的信用が失われる」の4つを最初に並べ、「そんなお悩みの解決に」でサービスの紹介につないでいる。企業の担当者が自分の課題を確かめてから読み進められる。
問い合わせをヘッダーに固定する
緑の「お問い合わせ」ボタンを固定のヘッダーに置き、ページ下部の Contact Us にも同じボタンを置いている。読んでいる途中でも問い合わせに進める。
事例とFAQで比較の疑問に答える
News & Column に企業の事例を載せ、FAQでは「人材紹介エージェントとの違いは何ですか」などの質問を置いている。導入を検討する人が比べたい点を、問い合わせの前に確かめられる。
チェック項目は 2026.11.02 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#43A55Bボタン・差し色 · グリーン
#DFF2EDセクション背景 · ミント
#E8F4B7専門家の面 · 黄緑
#FEC844差し色 · イエロー
#FFFFFF背景
#576271本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- 游ゴシック
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字見出し（Service・Specialist など）
- 使用フォント
- Outfit
- 無料で近いもの
- Outfit
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 32px / 700 | 1.80 | 19.9px / 700 |
| h3 | 20px / 700 | 1.80 | 16px / 700 |
| 本文（p） | 16px / 400 | 2.00 | 14px / 400 |
| ボタン | 14.4px / 700 | 1.40 | 12.6px / 700 |
実測値（PC 1440px・SP 375px、2026.11.02 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
サービスの紹介文
コンセプト／写真＋メッセージ型 - 04
障がい者雇用のお悩み
強み・選ばれる理由／番号つき3〜4項目型 - 05
障がい者雇用トータル支援サービス
メニュー・サービス／アイコン／写真グリッド型 - 06
Service（サービスの特徴）
強み・選ばれる理由／写真とテキストの交互型 - 07
- 08
News & Column
記事・メディア／記事カードグリッド型 - 09
- 10
Contact Us
行動喚起／電話＋Web予約の2ボタン帯型 - 11
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.02 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ページの冒頭で、読み手の悩みを3〜4つに絞って見出しで示す
- 02悩みの次に「解決の内容」、その次に「サービスの特徴」と順に答える
- 03支援する人の職種や資格を一か所にまとめて見せる
- 04問い合わせボタンを固定のヘッダーとページ下部の両方に置く
FAQよくある質問
Eachのサイトで使われているフォントは？
和文は游ゴシック、英字見出しは Outfit です。Outfit は Google Fonts で無料で使えます。
写真ではなくイラスト中心でも大丈夫ですか？
このサイトはファーストビューとサービスの説明にイラストを使い、News & Column の事例では写真を使っています。事業内容によって写真が用意しにくい場合に、参考になる組み合わせです。
どんな業種の参考になりますか？
福祉の関連サービスのほか、社労士や研修会社、コンサルティングなど、企業の担当者の悩みに答える BtoB のサービスに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はEach（障がい者雇用トータル支援サービス）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの介護・福祉の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の介護事業所サイトを。
「Each（障がい者雇用トータル支援サービス）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。