案件共通コンポーネントの見本 Project-components

札幌市の介護福祉施設｜株式会社KSサービス

このページは案件共通コンポーネント（プロジェクト共通）の見本です。カタログ（catalog/project/ と catalog/blocks/ の scope: project）と1対1対応します。部品を追加・変更するときは、このページとカタログJSONの両方を更新してください。

cld 本体のベース部品はこのページには載せません。テンプレート「コンポーネントの見本」（page-components.php）を割り当てた固定ページを見てください。

掲載するもの / しないもの

対象 掲載 置き場所
案件共通コンポーネント する assets/css/components/・layout/ / block/
ページ固有のセクション しない assets/css/pages/{slug}.css / block/page/{slug}.php
プロジェクトトークン（--project-*） しない assets/css/base/site-tokens.css（コメントが一覧を兼ねる）
cld 本体のベース部品 しない page-components.php

この見本の見方

各部品の下の灰色の枠は、その部品でラフの値から寄せた箇所・ラフと実装で書き方を変えた箇所・確認を待っている箇所の注記です。何も書いていない部品はラフの値のままです。

ラフの余白(4 / 8 / 16 / 24 / 40 / 64 / 96px)は、同じ値の cld の段階トークン(--space-xs / sm / md / lg / 2.5rem / --space-4xl / --space-6xl)で書いています。値そのものは変えていません。

クリームの地の上に置く前提の部品は、見本も .bg-project-bg-subtle の上に置いています。写真の部分は灰色の仮の画像(data URI)です。実装では実際の写真を入れます。

案件全体のクラス(project.css)

部品ではなく、ほぼ全ページのセクションで使う地・余白・幅。カタログには登録しません。

クラス 値 使う場所
.bg-project-bg-subtle クリーム(--project-color-bg-subtle) クリームのセクション(ラフの .section--subtle)
.py-project-section 上下 96px / SP 56px セクションの上下余白(ラフの .section)
.container > .container-inner-xl / -lg / -md 最大 1140px / 960px / 720px・中央 1段狭いコンテナ(ラフの .container--narrow)は xl、読み幅の列・白い箱・フォームは lg、料金表・空室状況の列は md

セクション見出し

クリームの地に、読み幅 960px の白い箱を置いた例。白い箱は専用クラスを作らず Bootstrap の bg-white rounded-4(角丸 16px)と余白で組む。

<section class="py-project-section bg-project-bg-subtle">
  <div class="container">
    <h2 class="headline headline--project-section">セクション見出し</h2>
    <div class="container-inner-lg bg-white rounded-4 p-4">
      <p class="mb-0">クリームの地に、読み幅 960px の白い箱を置いた例。白い箱は専用クラスを作らず Bootstrap の bg-white rounded-4(角丸 16px)と余白で組む。</p>
    </div>
  </div>
</section>

ボタン(button)

用途: CTA・フォーム送信・一覧へ戻る。使わない場面: 本文中のリンク(.arrow-link か素の a)。

お問い合わせフォーム
<a class="btn btn-project-primary" href="/inquiry.html">お問い合わせフォーム</a>

小さいボタン(.btn-sm)

一覧へ戻る
<a class="btn btn-project-primary btn-sm" href="/topics">一覧へ戻る</a>

外部リンク(.btn-with-icon.btn-external)

ぴっころのサイトで詳しく見る
<a class="btn btn-project-primary btn-with-icon btn-external" href="https://piccolo.ks-sv.co.jp" target="_blank" rel="noopener">ぴっころのサイトで詳しく見る<span class="visually-hidden">（別ウィンドウで開きます）</span></a>
ホバー: ラフどおり「薄くする(不透明度 0.88)」。cld の .btn の既定(持ち上げ + 影)はこの部品では打ち消しています。
外部リンクのアイコン: ラフと同じ Bootstrap Icons の box-arrow-up-right(cld 既存の external-link.svg)。大きさはラフの 20px(cld 既定 16px は差 20% のため寄せない)。
緑のボタン(ラフの .btn--secondary)は、どのページの本文にも使われていないため作っていません。

見出し(heading)

用途: h2 のセクション見出し / 白い地の h3 / クリームの地の h3。見出しの大きさは h1〜h6 の既定に任せ、装飾だけを持ちます。

セクション見出し(--project-section)

アクセス・お問い合わせ

<h2 class="headline headline--project-section">アクセス・お問い合わせ</h2>

白い地の小見出し(--project-bar)

暮らしのたのしみ

<h3 class="headline headline--project-bar">暮らしのたのしみ</h3>

クリームの地の小見出し(--project-underline)

生活援助

<div class="bg-project-bg-subtle p-4">
  <h3 class="headline headline--project-underline">生活援助</h3>
</div>
見出しの文字サイズ: ラフの h2 32px / h3 24px は受け渡し資料上の暫定値で、実装側の刻みへ寄せてよいとされているため、cld の typography.css の h2・h3 のまま(1440px 幅で h2 約 29px・h3 約 26px。差はいずれも 15% 以内)。
topics-article だけに出る緑文字の h4(ラフの .heading-green)は1ページのみのため作っていません(ページ側で文字色を指定)。

丸い矢印(arrow-circle)

用途: お知らせ一覧の行末 / リンクの文字に添える。必ずリンクの中に aria-hidden="true" で置きます。

<span class="arrow-circle" aria-hidden="true"></span>
<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span>
SP の大きさ: 大は 34px、小は 18px のまま。ラフの CSS では記述順の都合で小も SP で 34px になりますが、大小2つのサイズを保つことにしました。

カテゴリバッジ(category-badge)

用途: サービスカテゴリを示す単独のラベル。色だけで区別させず、必ずカテゴリ名を入れます。

高齢者向け住まい

訪問介護サービス

居宅介護支援等

自費サービス

児童通所支援

<p class="category-badge">高齢者向け住まい</p>
<p class="category-badge category-badge--nursing">訪問介護サービス</p>
<p class="category-badge category-badge--support">居宅介護支援等</p>
<p class="category-badge category-badge--selfpay">自費サービス</p>
<p class="category-badge category-badge--child">児童通所支援</p>

箇条書きのマーカー(list-marker)

用途: cld の丸マーカーの箇条書き(ul.list--dot)を案件の色・間隔にする。

  • バリアフリー住宅で開放感ある間取りです。
  • 居室は日当たりが良くプライバシーが保護されています。
<ul class="list--dot marker--project-secondary">
  <li>バリアフリー住宅で開放感ある間取りです。</li>
  <li>居室は日当たりが良くプライバシーが保護されています。</li>
</ul>

ピンクの丸(marker--project-primary)

  • 敷金72,000円（家賃の2ヶ月分）
  • 居室火災保険（2年間掛捨）
<ul class="list--dot marker--project-primary">
  <li>敷金72,000円（家賃の2ヶ月分）</li>
  <li>居室火災保険（2年間掛捨）</li>
</ul>
マーカーの大きさ: ラフ 10px → cld の .list--dot の 0.625em(本文 18px で 11.25px。差 12.5%)に寄せました。
項目の間隔(ラフ 4px。cld 既定 3px は差 25%)とマーカーの縦位置(ラフ 0.6em)はラフの値にしています。

連番リスト(numbered-list)

用途: 並列の特色・理念・方針を数えやすく並べる。使わない場面: 手順・流れ。

  • 引きこもりにならないように、入居者の方々に1日2回集まっていただき、交流しています。
  • 春から秋にかけて敷地内の畑ではガーデニングや家庭菜園も行っています。
  • お食事は、道内産の美味しい食材を使用しています。
<ul class="numbered-list">
  <li>引きこもりにならないように、入居者の方々に1日2回集まっていただき、交流しています。</li>
  <li>春から秋にかけて敷地内の畑ではガーデニングや家庭菜園も行っています。</li>
  <li>お食事は、道内産の美味しい食材を使用しています。</li>
</ul>

3列(--columns。lg 未満は上と同じ縦並び)

  • 訪問介護ステーションと連携しているので介護が必要な方も心配いりません。
  • 昼夜ヘルパーが常駐しているので24時間365日安心して暮らせます。
  • 医療機関と密接な連携がとれているので、急病時などの対応も万全です。
<ul class="numbered-list numbered-list--columns">
  <li>訪問介護ステーションと連携しているので介護が必要な方も心配いりません。</li>
  <li>昼夜ヘルパーが常駐しているので24時間365日安心して暮らせます。</li>
  <li>医療機関と密接な連携がとれているので、急病時などの対応も万全です。</li>
</ul>
罫線の色: ラフの rgba(51, 51, 51, 0.14) を、本文色トークンの 14%(color-mix)で書いています(同じ色)。ラフでは【要確認】(目分量)の値です。
数字: ラフは「"0" + 番号」で、10項目目が「010」になります。実装は decimal-leading-zero(9項目までは同じ表示)にしています。

表(data-table)

用途: クリームの地に置く「項目 → 内容」の表。.table .table--project を併記します。SPの縦積みはこの部品の機能です。

会社名株式会社KSサービス
所在地〒000-0000
札幌市北区…
設立…
 
<div class="bg-project-bg-subtle p-4">
  <table class="table table--project">
    <caption class="visually-hidden">会社の基本情報</caption>
    <tbody>
      <tr><th scope="row">会社名</th><td>株式会社KSサービス</td></tr>
      <tr><th scope="row">所在地</th><td>〒000-0000<br>札幌市北区…</td></tr>
      <tr><th scope="row">設立</th><td>…</td></tr>
    </tbody>
  </table>
</div>

料金表(fee-table)

用途: 料金。金額の列を右寄せにし、SP でも「項目 → 金額」を1行で読ませます。金額の太字・折り返し・項目列の幅は表ごとにユーティリティで指定します。

お部屋 使用料36,000円
食費39,000円
合計120,000円（税抜き）
 
<div class="bg-project-bg-subtle p-4">
  <table class="table table--project fee-table">
    <caption class="visually-hidden">月額利用料の内訳</caption>
    <tbody>
      <tr><th scope="row" class="w-50">お部屋 使用料</th><td class="fw-bold text-nowrap">36,000円</td></tr>
      <tr><th scope="row" class="w-50">食費</th><td class="fw-bold text-nowrap">39,000円</td></tr>
      <tr class="fee-table__total"><th scope="row" class="w-50">合計</th><td class="fw-bold text-nowrap">120,000円<span class="fee-table__tax">（税抜き）</span></td></tr>
    </tbody>
  </table>
</div>

列見出しのある表(thead)

依頼日費用
2日以前○円/1時間 以降○円/30分
前日・当日○円/1時間 以降○円/30分
 
<div class="bg-project-bg-subtle p-4">
  <table class="table table--project fee-table">
    <caption class="visually-hidden">生活援助の料金</caption>
    <thead>
      <tr><th scope="col">依頼日</th><th scope="col">費用</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">2日以前</th><td><span class="fw-bold">○円/1時間</span> 以降○円/30分</td></tr>
      <tr><th scope="row">前日・当日</th><td><span class="fw-bold">○円/1時間</span> 以降○円/30分</td></tr>
    </tbody>
  </table>
</div>
co-housing / nursinghome の表は項目列 50%・金額の太字・折り返しなし、selfpay-service の表は項目列 34%・金額は2つに分けて間でだけ折り返す、と表ごとに違うため、部品には持たせていません。
SP のセルの左右余白: 部品は co-housing の 16px。selfpay-service(8px)はページ側で上書きします。

記事の一覧(news-list)

用途: お知らせ・求人・フォトライブラリの一覧。カテゴリのラベル(__category)は記事の頭・求人の頭でも同じものを使います。

<ul class="news-list">
  <li class="news-list__item">
    <a class="news-list__link" href="#">
      <span>
        <span class="news-list__meta"><time datetime="2025-01-01">2025.01.01</time><span class="news-list__category">お知らせ</span></span>
        <span class="news-list__title">タイトル入るタイトル入るタイトル入る。</span>
      </span>
      <span class="arrow-circle" aria-hidden="true"></span>
    </a>
  </li>
  <li class="news-list__item">
    <a class="news-list__link" href="#">
      <span>
        <span class="news-list__meta"><time datetime="2025-01-01">2025.01.01</time><span class="news-list__category news-list__category--recruit">採用情報</span></span>
        <span class="news-list__title">タイトル入るタイトル入るタイトル入る。</span>
      </span>
      <span class="arrow-circle" aria-hidden="true"></span>
    </a>
  </li>
  <li class="news-list__item">
    <a class="news-list__link" href="#">
      <span>
        <span class="news-list__meta"><time datetime="2025-01-01">2025.01.01</time><span class="news-list__category news-list__category--blog">ブログ</span></span>
        <span class="news-list__title">タイトル入るタイトル入るタイトル入る。</span>
      </span>
      <span class="arrow-circle" aria-hidden="true"></span>
    </a>
  </li>
</ul>

サムネイルつき・上の線あり(--thumb --ruled)と施設のラベル

<ul class="news-list news-list--thumb news-list--ruled">
  <li class="news-list__item">
    <a class="news-list__link" href="#">
      <span class="news-list__thumb"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></span>
      <span>
        <span class="news-list__meta"><time datetime="2025-01-10">2025.01.10</time><span class="news-list__category news-list__category--housing">ミモレ篠路</span></span>
        <span class="news-list__title">タイトル入るタイトル入るタイトル入る。</span>
      </span>
      <span class="arrow-circle" aria-hidden="true"></span>
    </a>
  </li>
  <li class="news-list__item">
    <a class="news-list__link" href="#">
      <span class="news-list__thumb"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></span>
      <span>
        <span class="news-list__meta"><time datetime="2025-01-10">2025.01.10</time><span class="news-list__category news-list__category--child">ぴっころ16</span></span>
        <span class="news-list__title">タイトル入るタイトル入るタイトル入る。</span>
      </span>
      <span class="arrow-circle" aria-hidden="true"></span>
    </a>
  </li>
</ul>
上の線(--ruled)は、ラフで topics / photo-library / recruit の3ページがそれぞれページ側で引いていたものを部品へ入れました。

サービスカード(service-card)

用途: TOP とサービス内容のページのサービス一覧。xl 未満は1列、md〜lg はカードの中を横並び、md 未満は縦積み。

高齢者向け住まい

高齢者対応共同住宅
住宅型有料老人ホーム

自分の家のように暮らせる住まいで、食事・介護・健康管理を受けられます。

訪問介護サービス

訪問介護ステーションNonno

説明文が入ります。

<div class="service-card-list">
  <div class="service-card">
    <span class="service-card__badge">高齢者向け住まい</span>
    <div class="service-card__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
    <div class="service-card__body">
      <h4 class="service-card__title">高齢者対応共同住宅<br>住宅型有料老人ホーム</h4>
      <p class="service-card__text">自分の家のように暮らせる住まいで、食事・介護・健康管理を受けられます。</p>
      <ul class="service-card__links">
        <li><a class="service-card__link" href="#">高齢者対応共同住宅<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a></li>
        <li><a class="service-card__link" href="#">住宅型有料老人ホーム<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a></li>
      </ul>
    </div>
  </div>
  <div class="service-card">
    <span class="service-card__badge service-card__badge--nursing">訪問介護サービス</span>
    <div class="service-card__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
    <div class="service-card__body">
      <h4 class="service-card__title service-card__title--nursing">訪問介護ステーションNonno</h4>
      <p class="service-card__text">説明文が入ります。</p>
      <ul class="service-card__links">
        <li><a class="service-card__link" href="#">訪問介護サービス<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a></li>
      </ul>
    </div>
  </div>
</div>

1枚を中央に置く(--single)・他のカテゴリ色

児童通所支援

多機能型事業所 ぴっころ

説明文が入ります。

居宅介護支援等 自費サービス

<div class="service-card-list service-card-list--single">
  <div class="service-card">
    <span class="service-card__badge service-card__badge--child">児童通所支援</span>
    <div class="service-card__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
    <div class="service-card__body">
      <h4 class="service-card__title service-card__title--child">多機能型事業所 ぴっころ</h4>
      <p class="service-card__text">説明文が入ります。</p>
      <ul class="service-card__links">
        <li><a class="service-card__link" href="#">児童発達支援<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a></li>
      </ul>
    </div>
  </div>
</div>
<p class="mt-3"><span class="service-card__badge service-card__badge--support d-inline-block w-auto">居宅介護支援等</span> <span class="service-card__badge service-card__badge--selfpay d-inline-block w-auto">自費サービス</span></p>
カードの間隔: 部品は TOP の値(上下左右 40px / SP 24px)。service のページは上下 64px(SP 40px)で、ページ側で上書きします。
ラフ共通の「lg 未満で縦積み・写真の幅 420px まで」は、TOP・service の両方が md〜lg を横並びに戻していたため、部品では最終の見た目(md 以上は横並び)だけを持っています。

受けられるもの(support-list)

用途: 受けられるもの・主な業務を3つ前後並べる。クリームの地の上に置く前提です。

  • 食事サービス
  • 介護サービス 掃除・洗濯・入浴・排泄・食事など
  • 健康管理 
<div class="bg-project-bg-subtle p-4">
  <ul class="support-list">
    <li class="support-list__item">
      <span class="support-list__icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M5 14h22a11 11 0 0 1-22 0z"/><rect x="3" y="26" width="26" height="2.4" rx="1.2"/></svg></span>
      <span class="support-list__name">食事サービス</span>
    </li>
    <li class="support-list__item">
      <span class="support-list__icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M16 27S4 20 4 12.6A6.6 6.6 0 0 1 16 8.8 6.6 6.6 0 0 1 28 12.6C28 20 16 27 16 27z"/></svg></span>
      <span class="support-list__name">介護サービス</span>
      <span class="support-list__note">掃除・洗濯・入浴・排泄・食事など</span>
    </li>
    <li class="support-list__item">
      <span class="support-list__icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M2 17h6l3.5-8 5.5 15 3.5-7H30" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      <span class="support-list__name">健康管理</span>
    </li>
  </ul>
</div>
SP のアイコンの地(ラフ rgba(153, 190, 112, 0.16)。【要確認】)は緑トークンの 16% で書いています(同じ色)。
support のページは4項目を 2×2 にするため、md 以上の列数をページ側で2列に上書きします。

空室状況(vacancy-board)

用途: 管理画面から更新する空室状況。「階 → 状態」の対が繰り返しの単位です。クリームの地の上に置く前提です。

（令和8年9月1日現在）

１階
満室
２階
２室

予約の可否 可

<div class="bg-project-bg-subtle p-4">
  <div class="vacancy-board">
    <p class="vacancy-board__date">（令和8年9月1日現在）</p>
    <dl class="vacancy-board__floors">
      <div class="vacancy-floor">
        <dt class="vacancy-floor__name">１階</dt>
        <dd class="vacancy-floor__state"><span class="vacancy-state vacancy-state--full">満室</span></dd>
      </div>
      <div class="vacancy-floor">
        <dt class="vacancy-floor__name">２階</dt>
        <dd class="vacancy-floor__state"><span class="vacancy-state vacancy-state--open">２室</span></dd>
      </div>
    </dl>
    <p class="vacancy-board__booking">予約の可否 <span class="vacancy-state vacancy-state--open">可</span></p>
  </div>
</div>
満室の文字色(ラフ #6B6B6B。【要確認】目分量)は、本文色と白の混色で同じ色になるように書いています。緑の薄い地(28%)・満室の地(7%)も同じ扱いです。

アクセス・お問い合わせ(access)

用途: 施設・事業所のページと会社概要の末尾。地図の iframe は .ratio.ratio-16x9 の中に置きます。

所在地
〒002-8024
札幌市北区篠路4条8丁目8-6
交通
JR篠路駅より徒歩10分
中央バス「篠路小学校」下車3分

お電話でのご相談

011-788-9433

お問い合わせフォーム 
<div class="access__inner">
  <div class="access__body">
    <dl class="access__list">
      <dt>所在地</dt>
      <dd>〒002-8024<br>札幌市北区篠路4条8丁目8-6</dd>
      <dt>交通</dt>
      <dd>JR篠路駅より徒歩10分<br>中央バス「篠路小学校」下車3分</dd>
    </dl>
    <p class="access__tel-label">お電話でのご相談</p>
    <p class="access__tel"><a href="tel:0117889433">011-788-9433</a></p>
    <div class="access__cta">
      <a class="btn btn-project-primary" href="/inquiry.html">お問い合わせフォーム</a>
    </div>
  </div>
  <div class="access__map ratio ratio-16x9 bg-gray"></div>
</div>
電話番号の大きさ(36px / SP 28px)はラフの暫定値(【要確認】)のまま。見本の地図は灰色の仮の枠です。

導入(service-intro)

用途: サービス・施設ページのページヒーロー直後。施設名の文字とキャッチの上の線がカテゴリ色になります。

高齢者向け住まい

ミモレ篠路

自分の家のように
イキイキとした生活を

<section class="service-intro">
  <img class="service-intro__cloud" src="<?= esc_url(img('project/section01_background02.svg')); ?>" alt="" aria-hidden="true">
  <div class="container service-intro__inner">
    <div class="service-intro__body">
      <p class="category-badge">高齢者向け住まい</p>
      <h2 class="service-intro__name">ミモレ篠路</h2>
      <p class="service-intro__catch">自分の家のように<br>イキイキとした生活を</p>
    </div>
    <div class="service-intro__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
  </div>
</section>

カテゴリ色(--nursing --support --selfpay --child)・読み仮名

居宅介護支援等

ケアプランNonno（ノンノ）

キャッチが入ります

<section class="service-intro service-intro--support">
  <div class="container service-intro__inner">
    <div class="service-intro__body">
      <p class="category-badge category-badge--support">居宅介護支援等</p>
      <h2 class="service-intro__name">ケアプランNonno<span class="service-intro__kana">（ノンノ）</span></h2>
      <p class="service-intro__catch">キャッチが入ります</p>
    </div>
    <div class="service-intro__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
  </div>
</section>
キャッチ(34px / SP 24px)はラフの暫定値(【要確認】)のまま。nursing のページだけキャッチが 28px / SP 20px・上の余白 24px / SP 16px で、ページ側で上書きします。
写真の比率はページで違う(ラフの写真のまま)ため、部品では持っていません。

お問い合わせ帯(contact-band)

用途: ページ末尾の行動喚起。中央揃え(SP は左揃え)。電話・受付時間は省けます。見出しは headline--project-section を上に置きます。

入居・空室、サービス、
施設見学のご相談はお気軽にどうぞ。

TEL 011-750-1007

受付時間 平日 9:00〜18:00

お問い合わせフォーム

<div class="contact-band__inner">
  <p class="contact-band__text">入居・空室、サービス、<br>施設見学のご相談はお気軽にどうぞ。</p>
  <p class="contact-band__tel"><a href="tel:0117501007">TEL 011-750-1007</a></p>
  <p class="contact-band__hours">受付時間 平日 9:00〜18:00</p>
  <p class="contact-band__cta"><a class="btn btn-project-primary" href="/inquiry.html">お問い合わせフォーム</a></p>
</div>

電話の前に太字の見出しを置く(__label)

求人についてのお問合せ

TEL 011-750-1007

受付時間 9:00～18:00(月～金)

エントリーフォームへ

<div class="contact-band__inner">
  <p class="contact-band__label">求人についてのお問合せ</p>
  <p class="contact-band__tel"><a href="tel:0117501007">TEL 011-750-1007</a></p>
  <p class="contact-band__hours">受付時間 9:00～18:00(月～金)</p>
  <p class="contact-band__cta"><a class="btn btn-project-primary" href="/recruit/entry.html">エントリーフォームへ</a></p>
</div>

文 + ボタンだけ

KSサービスでは、一部コンテンツについて、利用者様に限定し公開しています。

コンテンツの閲覧についてのお問い合わせについては、当サイトお問い合わせフォームよりご連絡ください。

お問い合わせフォーム

<div class="contact-band__inner">
  <p>KSサービスでは、一部コンテンツについて、利用者様に限定し公開しています。</p>
  <p>コンテンツの閲覧についてのお問い合わせについては、当サイトお問い合わせフォームよりご連絡ください。</p>
  <p class="contact-band__cta"><a class="btn btn-project-primary" href="/inquiry.html">お問い合わせフォーム</a></p>
</div>
ラフでは facility・service(.contact-band)、recruit(.apply)、multi(.piccolo-site)、login(.member-about)が同じ組み方で別々に定義されていたものを1つにしました。
電話の上の余白: 文の後は 16px、見出し(__label)の後は 8px(recruit のラフ)。

写真つきの箱(info-box)

用途: 同格の3項目(提供サービス・事業所)の紹介。白い地の上に置きます。xl 未満は1列で、md 以上は箱の中を横並び。

<ul class="info-box-list">
  <li class="info-box">
    <div class="info-box__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
    <div class="info-box__body">
      <h3 class="headline headline--project-bar">ぴっころ16・16プラス</h3>
      <p>説明文が入ります。</p>
      <p class="info-box__foot"><a class="arrow-link" href="#">場所・電話番号を見る<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a></p>
    </div>
  </li>
  <li class="info-box">
    <div class="info-box__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
    <div class="info-box__body">
      <h3 class="headline headline--project-bar">ぴっころ円山</h3>
      <p>説明文が入ります。説明文が入ります。</p>
      <p class="info-box__foot"><a class="arrow-link" href="#">場所・電話番号を見る<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a></p>
    </div>
  </li>
  <li class="info-box">
    <div class="info-box__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
    <div class="info-box__body">
      <h3 class="headline headline--project-bar">ぴっころ山鼻</h3>
      <p>説明文が入ります。</p>
      <p class="info-box__foot"><a class="arrow-link" href="#">場所・電話番号を見る<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a></p>
    </div>
  </li>
</ul>
nursing(.offer)と multi(.office-box)が同じ地・角丸・余白・並べ方だったものを1つにしました。multi のラフには本文の包み(__body)がありませんが、部品では写真と本文の2つに分けています。
1列にしたときの最大幅(nursing 960px / multi 860px)と、SP の箱の余白(nursing 16px / multi 16・24・24px)はページで違うため、部品は nursing の値にし、違うページが上書きします。

施設の特色(features)

用途: co-housing / nursinghome の「特色」。イラストは背景が白いため白い地に置きます。

リード文が入ります。リード文が入ります。リード文が入ります。

暮らしのたのしみ

  • 項目が入ります。
  • 項目が入ります。

24時間の安心

  • 項目が入ります。
  • 項目が入ります。
  • 項目が入ります。
<div class="features__intro">
  <div class="features__lead">
    <p>リード文が入ります。リード文が入ります。リード文が入ります。</p>
  </div>
  <div class="features__illust"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
</div>
<div class="features__group">
  <div class="features__visual"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt=""></div>
  <div class="features__body">
    <h3 class="headline headline--project-bar">暮らしのたのしみ</h3>
    <ul class="numbered-list">
      <li>項目が入ります。</li>
      <li>項目が入ります。</li>
    </ul>
  </div>
</div>
<div class="features__group features__group--wide">
  <div class="features__body">
    <h3 class="headline headline--project-bar">24時間の安心</h3>
    <ul class="numbered-list numbered-list--columns">
      <li>項目が入ります。</li>
      <li>項目が入ります。</li>
      <li>項目が入ります。</li>
    </ul>
  </div>
</div>

一覧 + サイドバー(topics-layout)

用途: お知らせの一覧と記事のページ。クリームの地の上に置きます。lg 未満はサイドバーを下へ回します。

<div class="bg-project-bg-subtle p-4">
  <div class="topics-layout">
    <section class="topics-layout__main" aria-labelledby="demo-topics-heading">
      <h2 class="visually-hidden" id="demo-topics-heading">記事の一覧</h2>
      <ul class="news-list news-list--ruled">
        <li class="news-list__item">
          <a class="news-list__link" href="#">
            <span>
              <span class="news-list__meta"><time datetime="2025-01-10">2025.01.10</time><span class="news-list__category">お知らせ</span></span>
              <span class="news-list__title">タイトル入るタイトル入る。</span>
            </span>
            <span class="arrow-circle" aria-hidden="true"></span>
          </a>
        </li>
      </ul>
    </section>
    <aside class="topics-layout__side" aria-label="記事の分類">
      <div class="side-block">
        <h2 class="side-block__title">カテゴリー</h2>
        <ul class="side-block__list">
          <li><a href="#">全件</a></li>
          <li><a href="#">お知らせ</a></li>
        </ul>
      </div>
      <div class="side-block">
        <h2 class="side-block__title">アーカイブ</h2>
        <ul class="side-block__list">
          <li><a href="#">2026年</a></li>
          <li><a href="#">2025年</a></li>
        </ul>
      </div>
    </aside>
  </div>
</div>

記事のページ(--article。白い箱の左右の余白 64px)

記事の本文が入ります。
<div class="bg-project-bg-subtle p-4">
  <div class="topics-layout topics-layout--article">
    <article class="topics-layout__main">記事の本文が入ります。</article>
    <aside class="topics-layout__side" aria-label="記事の分類">
      <div class="side-block">
        <h2 class="side-block__title">カテゴリー</h2>
        <ul class="side-block__list"><li><a href="#">お知らせ</a></li></ul>
      </div>
    </aside>
  </div>
</div>

サイドバーのブロック(side-block)

用途: カテゴリー・アーカイブ。一覧は ul > li > a で、wp_list_categories() / wp_get_archives() の出力をそのまま入れられます。

カテゴリー

<div class="row"><div class="col-md-4 bg-project-bg-subtle p-4">
  <div class="side-block">
    <h2 class="side-block__title">カテゴリー</h2>
    <ul class="side-block__list">
      <li><a href="#">全件</a></li>
      <li><a href="#">お知らせ</a></li>
      <li><a href="#">採用情報</a></li>
      <li><a href="#">ブログ</a></li>
    </ul>
  </div>
</div></div>
Bootstrap の .list-group は li・a ごとにクラスが要り、WordPress の出力をそのまま入れられないため使っていません。

記事の頭(post-header)

用途: お知らせの記事・フォトライブラリの投稿。カテゴリのラベルは一覧と同じ .news-list__category。

お知らせ

記事のタイトルが入ります。タイトル入るタイトル入る。

<header class="post-header">
  <p class="post-header__meta"><time datetime="2025-01-01">2025.01.01</time><span class="news-list__category">お知らせ</span></p>
  <h1 class="post-header__title">記事のタイトルが入ります。タイトル入るタイトル入る。</h1>
</header>

前後の記事(post-nav)

用途: 記事の下の「前 | 一覧へ戻る | 次」。md 未満は一覧へ戻るを2行目に置きます。

<nav class="post-nav" aria-label="前後の記事">
  <a class="arrow-link arrow-link--back post-nav__link post-nav__link--prev" href="#"><span class="arrow-circle arrow-circle--small" aria-hidden="true"></span>前の記事</a>
  <a class="btn btn-project-primary btn-sm post-nav__list" href="/topics">一覧へ戻る</a>
  <a class="arrow-link post-nav__link post-nav__link--next" href="#">次の記事<span class="arrow-circle arrow-circle--small" aria-hidden="true"></span></a>
</nav>
cld の .single-pager は3つを中央に寄せる形で、ラフの「前後を両端に離す」と配置が違うため使っていません。

ページ送り(pager)

用途: お知らせ・フォトライブラリの一覧。cld の .pagination-wrapper に --project を足し、中に paginate_links() の出力を置きます。

<nav class="pagination-wrapper pagination-wrapper--project" aria-label="ページ送り">
  <ul class="page-numbers">
    <li><span class="page-numbers is-disabled">前へ</span></li>
    <li><span aria-current="page" class="page-numbers current">1</span></li>
    <li><a class="page-numbers" href="#">2</a></li>
    <li><a class="page-numbers" href="#">3</a></li>
    <li><a class="next page-numbers" href="#">次へ</a></li>
  </ul>
</nav>
端の「前へ」の無効表示はラフにありますが、paginate_links() は出力しません。出す場合はテンプレート側で span.page-numbers.is-disabled を置きます(クラス名は実装側で決めたもの)。

ページヒーロー(page-hero)

用途: 全下層ページの先頭。page.php・archive.php・single.php・search.php が引数なしで呼びます(このページの先頭も同じ)。固定ページでは、ページ名 = ページタイトル、英字 = スラッグ(先頭だけ大文字)、写真 = assets/img/page-hero/{スラッグ}.jpg を自動で出します。記事・一覧ではスラッグ(と必要なら英字)を引数で渡します。

会員限定
フォトライブラリ Photo Library

札幌市の介護福祉施設｜株式会社KSサービス 
<?php get_template_part('block/title', null, array('slug' => 'photo-library', 'title' => '会員限定<br>フォトライブラリ', 'en' => 'Photo Library')); ?>
白 → クリームの波形: ラフは色を埋め込んだ SVG の背景でしたが、実装は同じ波形の SVG で切り抜き(mask)、色はトークンで塗っています(形は同じ)。
ラフの .page-hero__slug は .page-hero__en に改名しました。

行動ボタン(action-btn)

用途: フッターと TOP の主要導線バナー。フッターでは高さ 144px(中間幅 112px)。

会員限定ページ
採用情報
お問い合わせ・ご相談
<a class="action-btn action-btn--member" href="<?= esc_url(home_url('member.html')); ?>"><img class="action-btn__icon" src="<?= esc_url(img('project/icon_member.svg')); ?>" alt="">会員限定ページ</a>
<a class="action-btn action-btn--recruit" href="<?= esc_url(home_url('recruit.html')); ?>"><img class="action-btn__icon" src="<?= esc_url(img('project/icon_recruit.svg')); ?>" alt="">採用情報</a>
<a class="action-btn action-btn--contact" href="<?= esc_url(home_url('inquiry.html')); ?>"><img class="action-btn__icon" src="<?= esc_url(img('project/icon_contact.svg')); ?>" alt="">お問い合わせ・ご相談</a>

写真の拡大表示リンク(photo-zoom)

用途: 施設案内の写真。写真を a.photo-zoom[data-lightbox] で包むと、テーマが読み込み済みの lightbox2 で拡大表示します。写真の比率・並べ方・キャプションはページ側で決めます。

窓際にテーブルと椅子が並ぶ食堂
くつろげる食堂
<figure class="mb-0 w-50">
  <a class="photo-zoom" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" data-lightbox="showcase-photo" data-title="くつろげる食堂" data-alt="窓際にテーブルと椅子が並ぶ食堂"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23e4e4e4'/%3E%3C/svg%3E" alt="窓際にテーブルと椅子が並ぶ食堂"></a>
  <figcaption class="mt-2 small">くつろげる食堂</figcaption>
</figure>
ホバーで写真を不透明度 0.85 に、フォーカスの枠はピンク(ラフどおり)。lightbox2 は閉じたあとフォーカスを写真のリンクへ戻しません(ラフの dialog は戻す)。

見学動画(tour-video)

用途: 施設案内の下の見学動画。最大 800px の中央の列で、上に 64px(SP 40px)空けます。枠は .ratio.ratio-16x9 に併記し、中に YouTube の iframe を置きます。

見学動画

<div class="tour-video mt-0">
  <h3 class="headline headline--project-bar">見学動画</h3>
  <div class="tour-video__frame ratio ratio-16x9 bg-project-bg-subtle"></div>
</div>
見本は上の余白を .mt-0 で消し、iframe の代わりに灰色の地を置いています。代表メッセージ・児童通所支援の動画は角丸・幅・比率が違うためページ側で組んでいます。

開閉パネル(accordion-band)

用途: よくある質問の Q&A。cld の .accordion に --project を足します。見本は上が閉じた状態、下が開いた状態です。

テキスト入る。テキスト入る。テキスト入る。

テキスト入る。テキスト入る。テキスト入る。

<div class="accordion accordion--project">
  <div class="accordion-item">
    <div class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo-acc-1" aria-expanded="false" aria-controls="demo-acc-1">タイトル入る(閉じた状態)</button></div>
    <div id="demo-acc-1" class="accordion-collapse collapse"><div class="accordion-body"><p>テキスト入る。テキスト入る。テキスト入る。</p></div></div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo-acc-2" aria-expanded="true" aria-controls="demo-acc-2">タイトル入る(開いた状態)</button></div>
    <div id="demo-acc-2" class="accordion-collapse collapse show"><div class="accordion-body"><p>テキスト入る。テキスト入る。テキスト入る。</p></div></div>
  </div>
</div>
ラフは details / summary ですが、開閉は Bootstrap の accordion で組んでいます(見た目はラフどおり)。1つ開いても他を閉じないよう、data-bs-parent は付けていません。
帯の上下 10px・高さ 52px 以上・矢印 9px はラフの値の直書きです。項目の間 8px・帯の左右と本文の余白 24px・文字と矢印の間 16px は、同じ px の cld トークンで書いています。
Bootstrap の既定がボタンのフォーカス表示を消すため、サイト共通のフォーカス枠(オレンジ 3px)を戻しています。