ファミリーファーストクリニックは、埼玉県桶川市の家庭医療クリニックです。内科・外科・皮膚科をひとつ屋根の下で、家族が営み、家族のために診療しています。このブランドの役割は、あらゆる接点でひとつの考えを本当のことだと感じてもらうことです。健康な時から何でも相談できる、まちのかかりつけ医。

ウェブサイト、印刷物、サイン、SNS投稿、待合室の掲示、英語の案内物まで、すべてこのシステムで作ります。日本語／英語を切り替えて読めるブランドガイド（English version）：https://ffc-brand-guide.pages.dev/ 。このデザインシステムのウェブ版：https://ffc-design-system.pages.dev/ （どちらも検索エンジンには表示されません）。どこでも同じ色・書体・形を使うことが、小さなクリニックの信頼感をつくります。

ブランドの核

• 約束：「家族の一員のような存在でありたく、その家族達を一番に思う」— 院長の言葉です。私たちがつくるものはすべて、「自分のことを知っている人がつくった」と感じられるものにします。
• 立ち位置：何でもまず相談できる総合診療のクリニック。専門特化のブティックでも、チェーン院でもありません。
• 人柄：あたたかく、わかりやすく、落ち着いていて、少しだけ遊び心がある（ロゴの笑顔の3人のように）。冷たく事務的にも、売り込み調にも、不安をあおる調子にもしません。
• 対象：桶川の三世代の家族（高齢の患者さんが多い）、オンライン診療を必要とする働く世代、英語の案内が必要な外国人住民の方。

名称

• 日本語（原則すべて）：ファミリーファーストクリニック
• 英語：Family First Clinic（3語とも頭文字大文字、「The」は付けない）
• 法人名：医療法人社団F.F.C. — 契約書、請求書、領収書、ウェブサイトのフッター。広告の見出しには使いません。
• FFC は内部の略称です（スタッフ間、ファイル名、このシステム）。患者さん向けに「FFC」単独では使いません。
• 旧名称：ウェブサイトのアクセス欄・フッター、Googleビジネスプロフィール、外看板では、ご家族が外すと決めるまで名称の後に （旧ゆげクリニック） を添えます。
• 院長：院長 上西 章規（Akinori Uenishi, MD）

このシステムの使い方

• 画面の地は paper。内容は surface のカードに載せ、shadow-card と radius-lg を使います。セクションは paper と paper-2 を交互にします。
• 本文は ink、補足は ink-2。どちらもライト・ダーク両方で paper・paper-2・surface 上のコントラスト比4.5:1以上です。
• primary（FFCブルー）は唯一の「行動」の色です：塗りのピル型ボタン（ネット予約）、リンク、見出しマークの1つ目の点、キャッチコピーの強調語。その上の文字は on-primary を使い、ダークモードで白を直書きしないこと。
• sun と leaf はロゴのオレンジと緑をUI用に深めた色で、装飾専用です（点、行頭記号、アイコンの差し色、大きな色面）。文字として読ませる場合は sun-ink または leaf-ink を使います。
• logo-* トークン（青・オレンジ・緑の各 -top／-bottom、十字タイルの logo-tile-*、ワードマークの logo-ink）はグラデーションロゴの原稿色です。ロゴ本体と、印刷物・サインの大きな色面にのみ使います。
• alert は「重要」だけを意味します：お知らせ枠の線、重要タグ、診療時間表の日曜列。装飾には使いません。
• キーボードフォーカスは focus の3px実線リング、オフセット2px。
• コンポーネントは components/bundle.js の window.FFC（React 18）。クラス名は components/bundle.css で ffc- から始まります。文字を含むコンポーネントは lang="en" で英語表示になり、LangSwitch で日本語／English を切り替えられます。各プレビューの右上でも切り替えられます。

ビジュアルの基礎

3つの点のマーク：primary・sun・leaf の3つの点（10・8・7px と小さくなる）は、ロゴの3人の家族から生まれたものです。すべてのセクション見出しの前に置き（Eyebrowコンポーネント）、ブランドのいちばん短い署名になります。ポスターの行頭記号、SNS投稿の区切り、お便りの締めにも使えます。並びは必ず左から青・オレンジ・緑。

色のバランス：おおよそ paper と surface が7割、ink が2割、色が1割。青が行動を担い、オレンジと緑は差し色です。オレンジや緑の塗り面が1画面に2つ以上あれば、にぎやかすぎます。

書体：見出し・キャッチコピー・電話番号・氏名は display（Zen Maru Gothic）。丸みのある端がロゴの丸いシルエットと呼応します。段落として読む文章はすべて body（Noto Sans JP）。本文は15px、行送り1.9、字間0.04em — 高齢の方にも読みやすいよう、あえてゆったりと組みます。段落を display 書体で組まないこと。患者さんが読む必要のある文字は12px未満にしないこと。

縦書きのキャッチコピー：トップのキャッチは広い画面では縦書き（catch スタイル、writing-mode: vertical-rl）、スマートフォンでは横書きに切り替えます。システムで唯一の編集的な表現なので、1ページに1回、ポスターでは見出しのみに使います。

形：ボタンとタグは必ずピル型（radius-pill）。カードと写真は radius-lg（14px）。表と罫線以外に角ばった要素はありません。セクションの境目にはやわらかな曲線を使います（トップの paper-2 の曲線帯）。

イラスト：ブランドの画像はすべて水彩イラストです（Illustrations、39点）。温かみのある生成りの紙に、水彩と色鉛筆のやわらかな線、色はブランドの青・空色に、オレンジと緑を少しだけ。院内イラスト8点（待合室・受付・外観・診察室・処置室・点滴室・レントゲン室）はクリニック紹介やアクセスに、トピック別31点は症状・診療内容・手続きの説明に使います。角は radius-lg。ストック写真は使わず、写真（Photography）は撮影と新しいイラスト制作の参照資料として残します。詳しくは「イラスト」セクション。

アイコン：48pxグリッドの線画アイコン、線幅2.2px、端と角は丸。主線は primary、差し色の1本だけ sun。カードでは96pxの paper の円の中に置きます。クリニックの制作物に絵文字は使いません。

レイアウト：コンテンツ最大幅 content-max（1120px）、左右余白はスマホ space-4 〜 PC space-10、セクションの上下余白は space-14 〜 space-24。スマホでは画面下に電話番号とネット予約の固定バーを常に表示します。

動き：ほぼ使いません。スムーススクロールと、ホバー時に6〜8%明るくする程度。prefers-reduced-motion を尊重します。

言葉づかい（概要）

静かな午後に受付に立つ院長のように話します：丁寧な です・ます、短い文、ふだんの言葉。指示の前に説明を。どれだけ良いかではなく、何をしているかを伝えます。医療広告ガイドラインを含む詳しいルールは「言葉づかい・文章」セクションにあります。

• ✓ 「どの科を受診すればよいか迷ったら、まずご相談ください。」
• ✗ 「地域No.1の総合クリニック！」

アクセシビリティ

• 上記の文字色と地色の組み合わせは、ライト・ダークともWCAG 2 AA（4.5:1）を満たします。例外：ライトテーマの alert on alert-soft は4.4:1のため、19px太字以上でのみ使います。
• 主要ボタンの高さは touch-min（50px）以上。
• 状態を色だけで示さないこと。診療時間表は ●（診療）と –（休診）、重要タグは文字を併記します。

ロゴはクリニック固有のアートワークです。笑顔の3人 — 背の高い青、中くらいのオレンジ、小さな緑 — が家族のように並び、その上に淡い青の角丸タイルに白い十字、横（または下）にワードマーク Family First Clinic とカタカナ ファミリーファーストクリニック。3人には上から下へのやさしいグラデーションがかかっています。支給されたとおりに使い、描き直し・文字の打ち直し・色の変更はしません。

バリエーション（グラデーション版・現行）

印刷にはSVG（ベクター）を使います。PNGは透過背景です。

3人を離したり、並び替えたり、1人だけ使ったりしません。アイコンを別の書体と組み合わせて新しいロゴをつくることもしません。

余白とサイズ

• 四方に、十字タイルの高さと同じだけの余白を確保します。文字・端・他のロゴを入れないこと。
• 画面での最小サイズ：横組みで高さ28px（ヘッダーは34px、スマホは28px）。
• 印刷での最小サイズ：横組みで幅30mm（カタカナが読める大きさ）。これを下回る場合はアイコンを使います。
• グラデーションは小さくすると見えにくくなります。16px以下のファビコンではアイコンのみを使います。

してはいけないこと

• カラーのロゴを primary・sun・leaf の上や、ごちゃついた写真やイラストの上に置かない — 白抜き版を使う。
• ダークモードでCSSフィルターで明るくしない — reverse 版に差し替える。
• グラデーションの向きや色を変えない、影・フチ・アニメーションを付けない。
• 伸縮、回転、外看板の既存のオレンジの楕円以外の図形の中に入れること。
• 「Family First Clinic」を別の書体で組んでロゴとして扱わない。

旧ロゴ（フラット版）

ffc-logo-color.png・ffc-logo-reverse.png・ffc-symbol.png は、ウェブサイトから取り出した以前のフラットな500pxのPNGです。新しい制作物には使いません。既存の看板や印刷物を差し替えるまでの参照用として残しています。

既存の看板

外看板は、オレンジの楕円に白の英字ワードマーク、横にシンボルという構成です。このシステム以前のものなので、次の改修まではそのまま残します。新しいサインは「印刷物・サイン」セクションに従い、グラデーション版を使います。

ウェブサイト・印刷物・SNSで使う画像は、すべて水彩イラストに統一します。写真よりもやわらかく、患者さんを不安にさせずに内容を伝えられ、どの媒体でも同じ手ざわりになるからです。

• 院内（i01〜i08）：待合室、受付（縦・横）、外観、診察室、処置室、点滴室、レントゲン室。実際の当院を描いたもので、クリニック紹介、院内のご案内、アクセス、トップのメインビジュアルに使います。
• トピック（01〜31）：症状・診療内容・手続きの説明に使います。

スタイル

• 温かみのある生成り（paper に近い）の紙に、水彩と色鉛筆。細くやさしい鉛筆の輪郭、透明感のあるにじみ、わずかな紙の質感。
• 色は primary と空色が主役、sun と leaf は小さな差し色。肌は自然な紙色、髪は暗い色。
• 人物はごく普通の日本人。顔は穏やかで、苦痛の表情も控えめに。
• 画面内に文字・数字・ロゴを入れません。書類やカードの文字は、読めない淡い線で表します。
• 新しいイラストを追加するときは、この39点のいずれかをスタイル参照にし、同じ指示（水彩＋色鉛筆、限定パレット、文字なし）で制作します。

使い方

• 各ページの冒頭か、説明文の横に1点。1つのセクションに2点以上並べるのは、手続きの流れ（予約 → 受付 → 診察 → お会計）を示すときだけです。
• 角は radius-lg。枠線や影は付けません。paper の地にそのまま置くと、紙の色がなじみます。
• 写真と混ぜないこと。写真（Photography）は、新しい院内イラストを制作するときの参照資料です。
• 画像の上に文字を重ねません。見出しや説明はイラストの外に置きます。
• 代替テキスト（alt）は内容を日本語で簡潔に：「腕に予防接種を受ける様子」。

医療広告ガイドラインとの関係

• 治療前後の比較に見える使い方をしません（例：症状のイラストと 20 のすこやかな肌を並べて「治療後」とする）。
• 20 すこやかな肌の女性、03 母と赤ちゃんは、ビタミン注射・プラセンタ注射のページで「効果」を示すものとして使わず、雰囲気づくりにとどめます。自費診療のページには、料金・リスク・副作用の記載が必要です。
• 08 帯状疱疹の発疹は、帯状疱疹の説明ページにのみ使います。トップやSNSのサムネイルには使いません。

ページとの対応

各ファイルが想定しているページは、アセットの Illustrations グループの一覧を参照してください（初診の方へ、健康診断、内科、皮膚科、オンライン診療、予防接種、痛みの治療、自費注射、トップなど）。29〜31（クレジットカード、保険証、パソコンとスマホ）はオンライン診療用として作ったものですが、お支払い方法や持ち物の案内にも使えます。i04 外観には現在の看板が描かれているため、看板を改修したら描き直します。

静かな午後に受付に立つ院長のように話します：急がず、やさしく、具体的に。読み終えた患者さんが、次に何をすればよいかはっきりわかる文章にします。

原則

1. まず、ふだんの言葉で。 患者さんが使う言葉を先に、必要なら医学用語を添えます：「首や肩のこり（筋筋膜性疼痛）」。ウェブサイトの約束「わかりやすい言葉で丁寧にご説明すること」を、すべての文に当てはめます。
2. 押しつけず、招く。 最後は開かれた一言で：「まずご相談ください」「お気軽にお電話ください」。カウントダウンや「今だけ」は使いません。
3. ほめ言葉より事実。 何をしているか、誰がするかを伝えます（「毛髪診断士の資格を持つ院長が直接ご相談をうかがいます」）。どれだけ良いかは書きません。
4. 急ぎのことほど落ち着いて。 重要なお知らせは「何が変わるか → いつ → どうすればよいか」の順に。赤い「！」は使いません。

表記ルール

• 全文 です・ます。敬語は丁寧に、でも堅くしすぎない：「ご予約くださいますようお願い申し上げます」より「ご予約ください」。
• 本文ではクリニックを「当院」、見出しと初出では「ファミリーファーストクリニック」。
• 日付は、一覧・表では 2026/09/18、文中では 9月18日（金）。時間は 9:00–12:30（エンダッシュ）。電話は 048-777-3000。
• 日本語の句読点・かっこ「」（）は全角、数字と英字は半角。
• 【】はお知らせの分類の頭にのみ：【9月】【受付時間についてのお知らせ】。
• 表や料金の下の条件には ※ を使います。
• クリニックの制作物では絵文字と「！」は使いません。SNSのくだけたキャプションで「！」1つまでは可。

見出し

短い名詞句か、やさしい問いかけにします。

• ✓ 首・肩・腰などの慢性的な痛みに
• ✓ こんな痛みで悩んでいませんか？
• ✗ もう痛みに悩まない！最新治療で即解決

医療広告ガイドライン

ウェブサイト、Instagram、LINE、Googleビジネスプロフィール、チラシ、ポスターは、すべて医療法と厚生労働省の医療広告ガイドライン上の「広告」です。発信するものはすべてこれに従います。日々とくに大切なルール：

• 比較・順位の表現をしない：「地域No.1」「日本一」「どこよりも」
• 誇大な表現・保証をしない：「必ず治る」「絶対安全」「痛みゼロ」
• 治療効果に関する患者さんの体験談を載せない（口コミの転載も含め、すべてのチャネルで）
• 術前術後（ビフォーアフター）写真を載せない。載せる場合は、同じ投稿内に治療内容・費用・主なリスクと副作用を明記すること。
• 自由診療（ビタミン注射、にんにく注射、プラセンタ注射、AGA治療など）は、同じ場所に「治療の内容」「標準的な費用」「主なリスク・副作用」を記載します。
• 資格は事実として書きます（毛髪診断士、日本外科学会会員）。持っていない専門医資格を連想させる表現はしません。

迷ったら、主張を削って事実だけを書きます。新しいキャンペーンの文章は、公開前に最新のガイドライン本文と照らし合わせてください。この要約は実務用のチェックリストであり、法的助言ではありません。

お手本になる実例

• お知らせ：「インフルエンザ予防接種　前倒し接種のお知らせ（桶川市の公費助成対象の方）」
• ルール：「受付は各診療時間終了の30分前（12:00／17:30）までとなります。」
• 安心の一言：「どの科を受診すればよいか迷ったら、まずご相談ください。」

主言語は常に日本語です。英語は、外国人住民の方が当院を見つけ、受診し、この後の流れを理解するために必要な場所に添えます：ウェブサイトの主要ページ、入口と各部屋のサイン、診察券、問診票、休診や予防接種・お会計に関するお知らせ。

英語の書き方

あたたかさは同じまま、文法はよりシンプルに。英語が第二・第三言語の方が読むことを前提にします。

• クリニック名以外はセンテンスケース（文頭のみ大文字）："Book online"、"Clinic hours"。
• 短い文にし、慣用句や、患者さんが知らない略語は使いません（"HC" ではなく "health checkup"）。
• クリニックは "we"、患者さんは "you"。"Please" は指示1つにつき1回まで。
• 日本語の敬語のクッション言葉を直訳しません。「お気軽にご相談ください」→ "Ask us about anything."

固定の訳語

住所・連絡先（英語表記）

• 1-27-7 Asahi, Okegawa, Saitama 363-0023
• Tel. 048-777-3000（海外から +81-48-777-3000）
• Hours: Mon, Tue, Thu, Fri 9:00–12:30 / 15:00–18:00 · Wed, Sat 9:00–12:30 · Closed Sundays and national holidays. Reception closes 30 minutes before the end of each session.

レイアウトのルール

• 日本語が先、英語が後。 英語は日本語の真下（縦積み）か右側（横並び）に置き、同じ行に混ぜません。
• 英語は日本語の60〜70%の大きさ、色は ink-2、直前の日本語と同じ書体ファミリーで組みます。
• 英語の本文では日本語用の字間0.04emを外します（letter-spacing: 0）。字間0.2emは大文字の label スタイルだけに使います。
• サインでは、短い部屋名に限り英語を大文字・label の字間にしてもかまいません（CONSULTATION ROOM 1）。
• 日本人の患者さんにも必要な情報を、英語だけで書かないこと。
• 部屋のサインには Signage コンポーネント、二か国語のお知らせには NoticePoster コンポーネントの en 項目を使います。

印刷物はライトテーマのみ：paper 色か白の用紙、文字は ink、色は少量。印刷には必ずグラデーション版ロゴのSVGを使います（「ロゴ」参照）。旧フラット版のPNGは印刷に使いません。

印刷での色

印刷する色はすべて、画面ではなく実物の校正刷りで16進カラーと照合します。primary・sun・leaf と、ロゴのグラデーションの各色（logo-* トークン、ワードマークの logo-ink）について、印刷会社にCMYKの配合（サインは特色）を作ってもらい、校正を承認し、承認した値をこのセクションに記録してください。どの業者でも同じ値を使えるようにするためです。非塗工紙では青が明るく出るので、そちらでも確認します。

名刺

• サイズ：91×55mm（日本の標準）、横型。塗り足し3mm、安全マージン4mm。
• 表面：左上にカラーロゴ、氏名は display 700で11〜12pt、役職・資格は body 7ptで ink-2、区切りに3つの点のマーク、住所・電話・URLは body 7pt。
• 裏面：英語版（Family First Clinic、氏名、役職、英語の住所）、または primary のベタ面に白抜きロゴを中央配置。
• 用紙：白か生成りの非塗工紙、220kg以上。光沢・箔押しはしません。
• コンポーネント：BusinessCard

診察券

• サイズ：カードホルダーに合わせて91×55mm、またはプラスチックならクレジットカードサイズ85.6×54mm。角丸は radius-md 相当（約3mm）。
• 表面：シンボル＋クリニック名、患者番号、お名前欄、診療時間表、電話番号。お名前欄は手書きできる大きさ（30mm以上）に。
• 裏面：予約・受診日の表（日付／時間）、日本語の下に英語で "Bring this card and your insurance card"。
• コンポーネント：ClinicCard

レターヘッド・封筒

• A4レターヘッド：左上にカラーロゴ（幅40mm）、ヘッダー下に3つの点のマークと line の細罫1本、フッターに法人名 医療法人社団F.F.C.・住所・電話・URLを body 7.5pt ink-2 で。
• 紹介状・診断書のテンプレートも同じヘッダーを使い、ロゴ以外に色は使いません。
• 長形3号封筒：左上にロゴ、左下に差出人住所、下端に primary の細罫。

サイン

• 外看板：既存のオレンジ楕円の看板はそのまま残します。新しいポール看板や窓サインは、paper 色か白の地、カラーロゴ、診療科名は display 700の ink。旧名称が道案内に役立つあいだは、小さな行で（旧ゆげクリニック）を添えます。
• 室名札：surface の板、角は radius-sm、日本語の部屋名は display 700、その下に英語を label スタイルで。日本語名の左に3つの点のマーク。コンポーネント：Signage
• 誘導サイン：矢印は primary。トイレやバリアフリーのピクトグラムはJIS Z8210の標準案内用図記号を使い、独自に描きません。
• 入口の診療時間ボード：HoursTable をそのまま再現します — ●診療は primary、–休診、土曜の見出しは primary、日曜は alert。
• 読みやすさ：患者さん向けのサイン文字は、5mの距離で読めるよう大文字高さ20mm以上。重要情報（休診・受付終了）は10mm未満にしません。

発注前のチェックリスト

1. グラデーション版ロゴのSVGを使っている（旧フラット版PNGではない）。
2. 校正の色が承認済みの配合と一致している。
3. 電話番号・診療時間・住所を、発注当日にウェブサイトと照合した。
4. 印刷する自費メニューに、税込価格・リスク・副作用が記載されている（「言葉づかい・文章」参照）。

SNS投稿と待合室の掲示は、ブランドの日常の声です。ウェブサイトと同じ手でつくったように見せます：paper の地、色面か水彩イラストを1つ、丸みのある書体、3つの点のマーク。

フォーマット

投稿の構成

1. 分類チップ（左上）：お知らせ、予防接種、健康コラム、休診のお知らせ。primary-soft の地に primary の文字。休診・重要は alert の枠線。
2. 見出し：display 700、3行まで、ink。1語だけ primary にしてもよい。
3. 色面を1つ（primary・sun・leaf）か、水彩イラストを1枚 — 両方は使いません。
4. 要点：sun の点を行頭にした短いリスト。日付・時間・対象者・料金。
5. フッター帯：カラーロゴ、048-777-3000、ネット予約への案内。すべての投稿に入れます。

テーマごとに色面の色を回すと、グリッド全体がひとつのシステムに見えます：primary は診療案内・スケジュール、sun は季節のキャンペーン（予防接種・健康診断）、leaf は健康コラム・生活のヒント。

キャプション

• 1行目で見出しをわかりやすい日本語で言い直します。日付と時間は最初の3行以内に。
• 締めは「ご予約はプロフィールのリンクから」か電話番号。
• ハッシュタグは3〜6個まで、地域を先に：#桶川市 #桶川 #北本 #上尾 #ファミリーファーストクリニック #かかりつけ医
• キャプションも画像も医療広告ガイドラインに従います（「言葉づかい・文章」参照）：体験談なし、ビフォーアフター写真なし、自費診療の投稿には料金とリスクを記載。

待合室の掲示

• A4縦、paper の地、余白20mm。タイトルは display 700で40〜48pt。本文は16pt以上 — 患者さんは座ったまま読みます。
• 構成：分類チップ → タイトル → 何が変わるか → いつ → どうすればよいか → 連絡先。休診・予防接種・お会計に関するものは、細罫の下に英語の要約を。
• ラミネートして額に入れます。期限の翌日には外します。古い掲示は信頼を損ないます。
• 手書きの掲示は1週間以内にテンプレートで作り直します。

月間スケジュールの投稿

毎月25日までに：【N月】担当医師・休診スケジュールのお知らせ。surface のカレンダー表に、休診日は alert-soft の地に太字 ink で「休診」、alert の枠線。各診療枠に担当医のイニシャル。ウェブサイト・Instagram・LINEに同じ日に公開し、受付用にA4で1部印刷します。

このサイトのファイルは、そのまま制作に使えます。

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap">
<link rel="stylesheet" href="https://ffc-design-system.pages.dev/tokens.css">
<link rel="stylesheet" href="https://ffc-design-system.pages.dev/components/bundle.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://ffc-design-system.pages.dev/components/bundle.js"></script>
<script>
  ReactDOM.createRoot(document.getElementById('app')).render(
    React.createElement(FFC.HoursTable, { lang: 'ja' })
  );
</script>

本番のウェブサイトでは、このサイトを直接読み込まず、ファイルをコピーして使ってください（このサイトは更新されることがあります）。