１．ビジュアルトーン設計の目的＝“印象の再現性”をつくる
院長写真や配色を都度決めています。作る人ごとに印象が変わってしまって…。
ぱそあん目的は、誰が作っても同じ印象に着地する再現性です。
ステートメント（C３）で決めた一言を「見た目のルール」に翻訳し、院内・Web・SNS・紙の全てでブレをなくしましょう。
２．写真トーン：信頼は“光と距離”で決まる
院長同じカメラでも、仕上がりの印象がバラバラです。何を統一すれば？
ぱそあん光・色温度・距離・目線・背景の５点を決めます。
プロ撮影でなくても、以下のルールを徹底するだけで“誠実な清潔感”が安定します。
治療写真は同意・匿名化・注意書きをセットに（B５参照）。撮影前の「片付けルール」も文書化しておきます。
３．色設計：役割で決める。好みでは決めない。
院長ブルー系で清潔感は出しましたが、ボタンが目立たないと言われます。
ぱそあん色は役割ベースで決めます。
“情報の階層”と“行動の誘導”を分けると、清潔感と操作性を両立できます。
色の濃度は75/50/25%の3段階を用意。図や表の階層と強弱が揃い、読み疲れを防ぎます。
４．余白設計：清潔感は“空気の量”で生まれる
院長文字量が多くて詰まって見えます。余白の基準はありますか？
ぱそあん8ptグリッドで統一します。
セクション間は10×8=80px、段落間は3×8=24pxを目安に。行間は本文1.8、見出し下は24〜32pxを固定。
余白は「言葉の表情」。理念の“やさしさ”を、行間と余白で体験へ翻訳します。
５．タイポグラフィ：階層・長さ・読みやすさの三原則
院長フォント選びで迷います。読みやすさを優先すると味気なくなりがちで…。
ぱそあんまずは階層→長さ→読みやすさの順で決めます。
書体はNoto Sans（本文）＋Rounded系（小見出しや吹き出し）の二刀流が扱いやすいです。
数字・時間・金額は等幅寄りで。FAQや注意文は箇条書きで“読み飛ばしても伝わる”形に。
６．図形・アイコン・モーション：強調は“静かに目立たせる”
院長アイコンやアニメーションを加えると“楽しい”けれど、医療に合うか不安です。
ぱそあん医療では「静かな強調」が基本。
アイコンは線の太さを統一（2px前後）。角はラウンドで硬さを和らげ、モーションは0.2〜0.3秒・イーズアウトまで。
７．アクセシビリティ：読みやすさ＝誠実さ
院長ユニバーサルデザインは気になりますが、デザイン性が下がるのでは？
ぱそあん読みやすさは最上位のデザインです。
最低限の基準だけでも“誠実さ”が伝わります。
８．院内・Web・SNSの“トーン同期”手順
院長媒体が増えるほどトーンが崩れます。揃えるコツは？
ぱそあん3つの固定で回ります。①色（Base/Primary/CTA）②写真の光③余白ユニット。
この3点をテンプレ化し、更新担当に“迷わない部品”を配布します。
９．OK/NG集：迷いを消す“境界線”の可視化
NG例
- 強いビビッド色の多用（赤×黒×黄）で警告感が出る
- 写真のオーバー加工（過度な美白・肌補正）
- 本文の行長40字超＋行間1.4以下で読みにくい
OK例
- Base淡色＋Primary濃色＋CTAは補色寄りで視認性確保
- 自然光・柔らかい影・水平な水平線の構図
- 箇条書きと表の併用で“読み飛ばしても伝わる”
１０．運用：月30分の“トーン点検会”で磨き続ける
院長作って終わりにしたくありません。どう維持しますか？
ぱそあん月1回・30分で十分です。
直近の投稿・チラシ・サイト更新を並べ、色・写真・余白・文字の4観点で〇/△/×をつけるだけ。改善1点を翌月に反映します。
医療サイト制作の記事
医療サイトのリニューアル、スマートフォン対応、院長紹介、写真選び、ページ構成、患者様が迷わない導線づくりなど。
「何から直したらいい？」を、「これならできそう！」へ。
医療サイトづくりに役立つ記事をまとめています。
カテゴリー① 医療サイト制作：記事一覧
お問い合わせ
CONTACT
＼Webのお困りごと、ちょっと聞いてみませんか？／
先生の「これ、どうしたら？」から、お気軽に。