１．ビジュアルトーン設計の目的＝“印象の再現性”をつくる
パソコン苦手な院長写真や配色を都度決めています。作る人ごとに印象が変わってしまって…。
ぱそあん目的は、誰が作っても同じ印象に着地する再現性です。
ステートメント（C３）で決めた一言を「見た目のルール」に翻訳し、院内・Web・SNS・紙の全てでブレをなくしましょう。
- ① 写真（光・構図・表情）
- ② 色（役割とコントラスト）
- ③ 余白（間・行間・枠）
- ④ 文字（階層・サイズ・長さ）
- ⑤ 図形/アイコン/動き（強調の作法）
２．写真トーン：信頼は“光と距離”で決まる
パソコン苦手な院長同じカメラでも、仕上がりの印象がバラバラです。何を統一すれば？
ぱそあん光・色温度・距離・目線・背景の５点を決めます。
プロ撮影でなくても、以下のルールを徹底するだけで“誠実な清潔感”が安定します。
- 光：自然光＋面で照らす／影を強く落とさない
- 色温度：5000〜5600K（青すぎない白）
- 距離：人物は胸上～上半身／レンズは35〜50mm
- 目線：カメラ目線＋軽い微笑／院長は真正面、スタッフは斜め45°
- 背景：白〜淡色無地／医療機器は清潔に整頓
治療写真は同意・匿名化・注意書きをセットに（B５参照）。撮影前の「片付けルール」も文書化しておきます。
３．色設計：役割で決める。好みでは決めない。
パソコン苦手な院長ブルー系で清潔感は出しましたが、ボタンが目立たないと言われます。
ぱそあん色は役割ベースで決めます。
“情報の階層”と“行動の誘導”を分けると、清潔感と操作性を両立できます。
- Base：#F7FAFC（背景）／#FFFFFF（カード）
- Primary：#2A7CC1（見出し・リンク）
- CTA：#3BB273（予約ボタン） ※最低コントラスト比4.5:1
- Alert：#D64545（注意・重要案内）
- Line：#E3E8EE（境界線・罫線）
ポイント：CTAはBase/Primaryと色相をズラすと視認性UP。院内掲示や紙媒体も同じ役割で運用。
色の濃度は75/50/25%の3段階を用意。図や表の階層と強弱が揃い、読み疲れを防ぎます。
４．余白設計：清潔感は“空気の量”で生まれる
パソコン苦手な院長文字量が多くて詰まって見えます。余白の基準はありますか？
ぱそあん8ptグリッドで統一します。
セクション間は10×8=80px、段落間は3×8=24pxを目安に。行間は本文1.8、見出し下は24〜32pxを固定。
余白は「言葉の表情」。理念の“やさしさ”を、行間と余白で体験へ翻訳します。
５．タイポグラフィ：階層・長さ・読みやすさの三原則
パソコン苦手な院長フォント選びで迷います。読みやすさを優先すると味気なくなりがちで…。
ぱそあんまずは階層→長さ→読みやすさの順で決めます。
書体はNoto Sans（本文）＋Rounded系（小見出しや吹き出し）の二刀流が扱いやすいです。
- H1：28–32px／H2：22–24px／H3：18–20px
- 本文：16–17px（PC）／15–16px（SP）
- 本文行長：28–36字／太字は多用しすぎない
数字・時間・金額は等幅寄りで。FAQや注意文は箇条書きで“読み飛ばしても伝わる”形に。
６．図形・アイコン・モーション：強調は“静かに目立たせる”
パソコン苦手な院長アイコンやアニメーションを加えると“楽しい”けれど、医療に合うか不安です。
ぱそあん医療では「静かな強調」が基本。
アイコンは線の太さを統一（2px前後）。角はラウンドで硬さを和らげ、モーションは0.2〜0.3秒・イーズアウトまで。
- ・箇条書きの先頭に丸（●）ではなく小さな矢印で視線誘導
- ・CTAはホバーで影1段＋僅かな拡大（1.02）
- ・リール/動画のテロップは白地＋薄い影で可読性確保
７．アクセシビリティ：読みやすさ＝誠実さ
パソコン苦手な院長ユニバーサルデザインは気になりますが、デザイン性が下がるのでは？
ぱそあん読みやすさは最上位のデザインです。
最低限の基準だけでも“誠実さ”が伝わります。
- ・本文コントラスト比 4.5:1 以上／小見出し 3:1 以上
- ・リンクは色＋下線で区別
- ・ボタンのタップ領域は44px四方以上
- ・画像には代替テキスト、動画は字幕を
８．院内・Web・SNSの“トーン同期”手順
パソコン苦手な院長媒体が増えるほどトーンが崩れます。揃えるコツは？
ぱそあん3つの固定で回ります。①色（Base/Primary/CTA）②写真の光③余白ユニット。
この3点をテンプレ化し、更新担当に“迷わない部品”を配布します。
- ・色見本PDF（役割別チップ）
- ・写真リファレンス（OK/NG例）
- ・余白/見出しのCSSスニペット
- ・SNSテンプレ（投稿・ストーリー・リールの枠）
９．OK/NG集：迷いを消す“境界線”の可視化
NG例
- 強いビビッド色の多用（赤×黒×黄）で警告感が出る
- 写真のオーバー加工（過度な美白・肌補正）
- 本文の行長40字超＋行間1.4以下で読みにくい
OK例
- Base淡色＋Primary濃色＋CTAは補色寄りで視認性確保
- 自然光・柔らかい影・水平な水平線の構図
- 箇条書きと表の併用で“読み飛ばしても伝わる”
１０．運用：月30分の“トーン点検会”で磨き続ける
パソコン苦手な院長作って終わりにしたくありません。どう維持しますか？
ぱそあん月1回・30分で十分です。
直近の投稿・チラシ・サイト更新を並べ、色・写真・余白・文字の4観点で〇/△/×をつけるだけ。改善1点を翌月に反映します。
１１．ぱそあんのまとめ
- 目的は“誰が作っても同じ印象”＝再現性
- 写真は光・距離・背景を固定して清潔感を統一
- 色は役割で設計し、CTAは視認性を最優先
- 余白・文字は8ptグリッドと行長基準で迷いを消す
- 月30分の点検で“医院の声”をビジュアルに宿す
次回記事のお知らせ（C７️⃣ ロゴ運用と院内サインの一貫設計）
次回は、ロゴの余白・最小サイズ・禁止例と、院内サイン/フロアガイドを同じ声で揃える一貫設計を解説します。患者様が迷わない導線づくりに繋げます。