ヘルスケア・医療サイトを表現する

清潔感、生命の脈動、精密さ、寄り添い。信頼と安心を伝える、抑制された上品な表現テクニック。

このページについて

「医療・ヘルスケアの表現」とは：信頼・清潔・安心・生命を伝える表現群。派手さは不安や不信を招くため、抑制された上品さが品質基準。清潔感の白〜淡青、生命の脈動、専門性の精密さをバランスよく配置する。
こんな時に使う：病院/クリニック・健康管理アプリ・製薬・医療機器・歯科/美容医療・介護/福祉・フィットネス/ウェルネス・保険。
関連タグ：🌿 癒し 🌊 海 🌺 温かみ
構成の流れ：①ヒーロー（信頼）→ ②生命・健康 → ③専門性 → ④安心・ケア
AIへの伝え方のコツ：「医療っぽく」ではなく「清潔な光の粒子」「心拍の脈動」「精密なデータの可視化」など、抑制を効かせた具体表現で指示する。派手な動き・濃い色は避ける旨も添える。

表現の引き出し（LP構成順）

🎨 清潔感のヒーロー

🏥 LPファーストビュー（清潔・信頼の第一印象）

📝 表現の語彙

日本語: 清潔感、クリーン、白の光、信頼

英語: cleanliness, clean light, pristine, trust

抽象キーワード: purity, calm, reliability

💬 AIへの指示テンプレ

「医療サイトのヒーロー背景を、清潔感と信頼感のある演出で作ってください。重要: 真っ白ではなく、白〜ごく淡い青緑の階調にしてください（純白は無機質になる）。大きな光だまりを13秒周期で静かに呼吸させ、淡青の階調と斜めの光沢帯を別周期で重ねます。清潔感を表す光の粒子を8〜10個ごくゆっくり漂わせ、中央に淡いプラス記号（赤十字は商標なので使わない）を控えめに配置。動きは最小限、抑制を効かせて。」

🎯 似合うシーン

病院/クリニックのトップ・健康管理アプリ・製薬企業・医療機器メーカー全般

🔧 実装手法

白〜淡青の抑制階調 + 3層の光の呼吸（13s/19s/23s）+ 清潔の粒子 + 控えめな医療シンボル（中立的なプラス記号）

📄 コード例を見る

html

<div class="clean-stage">
  <!-- 純白ではなく白〜ごく淡い青緑の階調（純白は無機質になる） -->
  <div class="clean-glow1"></div>   <!-- 大きな光だまり: 13s 呼吸 -->
  <div class="clean-glow2"></div>   <!-- 淡青の階調: 19s 呼吸 -->
  <div class="clean-sheen"></div>   <!-- 斜めの光沢帯: 23s 横切る(screen) -->
  <!-- 背景の紋章: 淡いプラス記号(赤十字は商標なので使わない) -->
  <svg class="clean-cross" viewBox="0 0 100 100" width="100" height="100">
    <path d="M42,8 H58 V42 H92 V58 H58 V92 H42 V58 H8 V42 H42 Z" fill="#c0dce8" />
  </svg>
  <!-- 清潔の粒子: 光輪付き・17〜29sでゆっくり上昇 -->
  <div class="clean-particle" style="--dur:21s"></div>
  ...
</div>

css

.clean-stage {
  position: relative;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  /* 白 → ごく淡い青緑（温度を感じる白） */
  background: linear-gradient(160deg, #ffffff 0%, #f0f7fb 40%, #e8f2f4 70%, #e0eef0 100%);
}
/* 大きな光だまり：ごくゆっくり呼吸（opacity ±15%） */
.clean-glow1 {
  position: absolute; left: 28%; top: -30%;
  width: 60%; height: 90%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
  animation: clean-breathe1 13s ease-in-out infinite;
}
@keyframes clean-breathe1 { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
/* 淡青の階調：別位置・別周期 */
.clean-glow2 {
  position: absolute; left: -10%; bottom: -20%;
  width: 55%; height: 70%;
  background: radial-gradient(ellipse, rgba(212,232,240,0.45) 0%, rgba(212,232,240,0) 70%);
  animation: clean-breathe2 19s ease-in-out infinite;
}
@keyframes clean-breathe2 { 0%,100% { opacity: 0.6; } 50% { opacity: 0.95; } }
/* 斜めの光沢帯：screen合成でゆっくり横切る */
.clean-sheen {
  position: absolute; top: -20%; left: -40%;
  width: 50px; height: 140%;
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  filter: blur(8px);
  mix-blend-mode: screen;
  transform: rotate(16deg);
  animation: clean-sheen 23s ease-in-out infinite;
}
@keyframes clean-sheen { 0% { left: -40%; } 55% { left: 120%; } 100% { left: 120%; } }
/* 中央の医療シンボル：控えめに呼吸（opacity ±5%） */
.clean-cross {
  position: absolute; left: 50%; top: 50%;
  margin: -50px 0 0 -50px; opacity: 0.12;
  animation: clean-cross 17s ease-in-out infinite;
}
@keyframes clean-cross { 0%,100% { opacity: 0.1; } 50% { opacity: 0.15; } }
/* 清潔の粒子：光輪付き・ゆっくり上昇しながら控えめに明滅 */
.clean-particle {
  position: absolute; bottom: -10px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(200,224,232,0) 70%);
  opacity: 0;
  animation: clean-rise var(--dur) ease-in-out infinite;
}
@keyframes clean-rise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 0.8; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(-190px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clean-glow1, .clean-glow2, .clean-sheen, .clean-cross, .clean-particle { animation: none; }
}

📖 関連: グラデーション →

🎨 生命の脈動

💓 健康・バイタル訴求セクション

72 bpm

📝 表現の語彙

日本語: 脈動、心拍、鼓動、生命のリズム

英語: pulse, heartbeat, vital rhythm, life

抽象キーワード: vitality, life, rhythm

💬 AIへの指示テンプレ

「生命の脈動を心電図で上品に可視化してください。重要: 波形は正弦波ではなくPQRST波形（小さな盛り上がり→鋭いスパイク→なだらかな波）にし、走査線（明るい先端点）が左から右へ一定速度で描いていくようにしてください（stroke-dashoffset、機器の走査なので等速OK）。R波スパイクの瞬間に画面全体へ柔らかい光のパルスを同期させ、中央のハート/円を心拍に合わせてわずかに拍動させます。色は医療的な青緑、方眼グリッドを薄く敷きます。」

🎯 似合うシーン

健康管理アプリ・循環器/心臓関連・フィットネス/ウェルネス・バイタル測定デバイス・健診サービス

🔧 実装手法

PQRST波形のdashoffset走査描画（3s・等速）+ R波同期の光パルス×3拍 + 拍動するハートシルエット + 医療モニターの方眼

📄 コード例を見る

tsx

// PQRST波形を走査線で「描いていく」。R波スパイクの瞬間に光パルスを同期。
// 走査は機器の等速なので linear が物理的に正しい例外。
const beats = [0, 150, 300];          // 3拍。R波は x=66,216,366
const y = 110;
let d = `M0,${y}`;
for (const x of beats) {
  d += ` L${x+20},${y}`;                  // 基線
  d += ` Q${x+30},${y-12} ${x+40},${y}`; // P波（小さな盛り上がり）
  d += ` L${x+60},${y+6}`;               // Q（軽い沈み）
  d += ` L${x+66},${y-55}`;              // R（鋭いスパイク）
  d += ` L${x+72},${y+14}`;              // S（沈み）
  d += ` L${x+92},${y}`;                 // 基線
  d += ` Q${x+108},${y-18} ${x+124},${y}`; // T波（なだらか）
  d += ` L${x+150},${y}`;
}

<div className="ecg-stage">
  <div className="ecg-grid" />                {/* 医療モニターの方眼（静止） */}
  <svg viewBox="0 0 440 180" preserveAspectRatio="none">
    <path className="ecg-dim"    d={d} />      {/* 残光（常時うっすら） */}
    <path className="ecg-bright" pathLength={100} d={d} /> {/* 走査で描かれる本線 */}
  </svg>
  <div className="ecg-beam" />                 {/* 左→右の走査線（先端の明点） */}
  <div className="ecg-pulse p1" />             {/* R波同期の光パルス ×3拍 */}
  <div className="ecg-pulse p2" /><div className="ecg-pulse p3" />
  <div className="ecg-heart">{/* 心拍に合わせて拍動するハート */}</div>
</div>

css

.ecg-stage {
  position: relative;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #f4fafb 0%, #e8f4f6 100%);
}
/* 医療モニターの方眼（薄く・静止） */
.ecg-grid {
  position: absolute; inset: 0; opacity: 0.2;
  background-image:
    linear-gradient(rgba(200,224,228,0.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,224,228,0.8) 1px, transparent 1px);
  background-size: 20px 20px;
}
.ecg-dim    { fill: none; stroke: rgba(42,157,143,0.25); stroke-width: 2; }
/* 本線：pathLength=100、dashoffsetを 100→0 で左から描画 */
.ecg-bright {
  fill: none; stroke: #2a9d8f; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(42,157,143,0.5));
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: ecg-draw 3s linear infinite;
}
@keyframes ecg-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* 走査線：先端の明るい縦ライン（等速＝linear） */
.ecg-beam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(to bottom,
    rgba(120,224,212,0) 0%, rgba(120,224,212,0.9) 50%, rgba(120,224,212,0) 100%);
  filter: blur(1px);
  animation: ecg-beam 3s linear infinite;
}
@keyframes ecg-beam { from { left: 0; } to { left: 100%; } }
/* R波の瞬間に画面全体へ柔らかい光パルス（3拍・走査に同期） */
.ecg-pulse {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 60%, rgba(168,224,216,0.5) 0%, rgba(168,224,216,0) 60%);
  animation: ecg-pulse 3s linear infinite;
}
.ecg-pulse.p1 { animation-delay: 0.45s; }   /* x=66 / 440 */
.ecg-pulse.p2 { animation-delay: 1.47s; }   /* x=216 / 440 */
.ecg-pulse.p3 { animation-delay: 2.50s; }   /* x=366 / 440 */
@keyframes ecg-pulse { 0% { opacity: 0; } 3% { opacity: 0.9; } 14% { opacity: 0; } 100% { opacity: 0; } }
/* 中央のハート：3拍で拍動（走査位置に同期） */
.ecg-heart {
  position: absolute; left: 50%; top: 50%;
  margin: -22px 0 0 -22px;
  transform-origin: 50% 50%;
  animation: ecg-heart 3s ease-in-out infinite;
}
@keyframes ecg-heart {
  0%,12% { transform: scale(1); }   15% { transform: scale(1.06); }
  18%,46% { transform: scale(1); }  49% { transform: scale(1.06); }
  52%,80% { transform: scale(1); }  83% { transform: scale(1.06); }
  86%,100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ecg-bright, .ecg-beam, .ecg-pulse, .ecg-heart { animation: none; }
  .ecg-bright { stroke-dashoffset: 0; }
}

📖 関連: キーフレームアニメーション →

🎨 精密なデータ

📊 技術力・エビデンス訴求セクション

76%

📝 表現の語彙

日本語: 精密、データ可視化、分析、エビデンス

英語: precision, data visualization, analytics, evidence

抽象キーワード: accuracy, expertise, science

💬 AIへの指示テンプレ

「医療の専門性を、清潔なデータダッシュボードで表現してください。リングゲージ・微細な折れ線グラフ・縦バー群を白カードに載せてグリッド整列し、各データを滑らかに（ease-in-out）別々の周期で更新してください。重要: 急変させず整然と、警告色（赤）は使わず青緑・淡青で（健康・正常の含意）。全体を上から下へ薄い光のスキャンラインが等速で走査します。精密さと信頼感を抑制的に。」

🎯 似合うシーン

医療機器・検査/診断サービス・製薬の研究開発・AI診断・健康データプラットフォーム・医療系BtoB

🔧 実装手法

整列したデータ要素（リングゲージ11s/折れ線/バー群5s・7s・11s・13s）の滑らか更新 + 等速スキャンライン + 警告色を排した青緑配色

📄 コード例を見る

tsx

// 整列したデータ要素を別々の周期で「滑らかに」更新。警告色(赤)は使わない。
<div className="dash-stage">
  <div className="dash-card g-ring">      {/* リングゲージ: 11s で値が変動 */}
    <svg viewBox="0 0 64 64">
      <circle cx="32" cy="32" r="26" className="ring-bg" />
      <circle cx="32" cy="32" r="26" className="ring-arc" pathLength={100} />
    </svg>
    <span className="ring-val">76%</span>
  </div>
  <div className="dash-card g-line">      {/* 折れ線: 左へ流れ続ける */}
    <svg viewBox="0 0 120 40"><polyline className="line-flow" points="..." /></svg>
  </div>
  <div className="dash-card g-bars">      {/* 縦バー群: 各々別周期 */}
    <i className="dbar b1" /><i className="dbar b2" /><i className="dbar b3" /><i className="dbar b4" />
  </div>
  <div className="dash-scan" />           {/* 上→下のスキャンライン(等速) */}
</div>

css

.dash-stage {
  position: relative; height: 180px; border-radius: 8px; overflow: hidden;
  padding: 14px; display: grid; gap: 10px;
  grid-template-columns: 84px 1fr; grid-template-rows: 1fr 1fr;
  background: linear-gradient(160deg, #f8fcfd 0%, #eef6f8 100%);
}
.dash-card {
  background: #ffffff; border-radius: 10px;
  box-shadow: 0 1px 4px rgba(42,157,143,0.08);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.g-ring { grid-row: span 2; flex-direction: column; }
.ring-bg  { fill: none; stroke: #e2eef0; stroke-width: 7; }
/* 円弧：72→78→74% を ease-in-out で滑らかに往復（dashoffset） */
.ring-arc {
  fill: none; stroke: #2a9d8f; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 100; transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: ring-arc 11s ease-in-out infinite;
}
@keyframes ring-arc { 0%,100% { stroke-dashoffset: 28; } 50% { stroke-dashoffset: 22; } }
.ring-val { font-size: 14px; font-weight: 700; color: #2a9d8f; margin-top: 4px; }
/* 折れ線：2枚並べて左へ流す（データの流れ＝等速） */
.line-flow {
  fill: none; stroke: #5a9bc4; stroke-width: 2; stroke-linecap: round;
  animation: line-flow 6s linear infinite;
}
@keyframes line-flow { from { transform: translateX(0); } to { transform: translateX(-120px); } }
/* 縦バー：各バー別周期で高さを ease-in-out 変動 */
.dbar { width: 14px; background: linear-gradient(180deg, #2a9d8f, #4cb5a6);
  border-radius: 4px 4px 0 0; transform-origin: 50% 100%; }
.b1 { animation: dbar 5s  ease-in-out infinite; }
.b2 { animation: dbar 7s  ease-in-out infinite; }
.b3 { animation: dbar 11s ease-in-out infinite; }
.b4 { animation: dbar 13s ease-in-out infinite; }
@keyframes dbar { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
/* スキャンライン：上→下を等速で走査 */
.dash-scan {
  position: absolute; left: 0; right: 0; height: 28px; top: -28px;
  background: linear-gradient(to bottom, rgba(120,200,210,0) 0%, rgba(120,200,210,0.18) 50%, rgba(120,200,210,0) 100%);
  animation: dash-scan 7s linear infinite;
}
@keyframes dash-scan { from { top: -28px; } to { top: 180px; } }
@media (prefers-reduced-motion: reduce) {
  .ring-arc, .line-flow, .dbar, .dash-scan { animation: none; }
}

📖 関連: データの可視化・グラフ →

🎨 寄り添うケア

🤝 安心・ケア訴求セクション（温かみへ）

📝 表現の語彙

日本語: 寄り添い、ケア、ぬくもり、安心

英語: care, warmth, support, reassurance

抽象キーワード: compassion, comfort, gentleness

💬 AIへの指示テンプレ

「医療における『寄り添うケア』を抽象表現してください。重要: 清潔な冷色（淡青緑）がベースの中に、暖色の光を一点だけ差します（全面暖色は清潔感を損なう）。大小2つの球（大=守る側の淡青緑、小=守られる側の淡暖色）を寄り添わせ、触れる部分に柔らかい光を置いてください。小球側から暖色の光だまりをscreen合成でゆっくり呼吸させ、2球がわずかに近接する動き（±2px、周期7s）と、冷暖半々の光の粒の周回を添えます。温かみタグの灯火の技法も応用可。」

🎯 似合うシーン

介護/福祉・小児科/産科・終末期ケア・カウンセリング/メンタルヘルス・在宅医療・患者サポート

🔧 実装手法

冷色ベース＋一点の暖色（screen・9s呼吸）+ 寄り添う2球の【A】立体造形 + 近接の呼吸（±2px・7s）+ 冷暖の光の粒の周回（17〜23s）

📄 コード例を見る

tsx

// 清潔な冷色ベースに、暖色の光を一点だけ差す（全面暖色は清潔感を損なう）。
// 大=守る側の淡青緑、小=守られる側の淡暖色。触れる部分に柔らかい光。
<div className="care-stage">
  <div className="care-warmglow" />          {/* 小球側からの暖色の光だまり(screen・9s呼吸) */}
  <svg viewBox="0 0 320 180">
    {/* 大球：淡青緑の多段グラデ球（A. 立体） */}
    <ellipse className="care-shadow" cx="150" cy="138" rx="58" ry="12" />
    <circle cx="150" cy="86" r="46" fill="url(#bigSphere)" />
    {/* 小球：寄り添う淡暖色。<g>で±2px の近接アニメ */}
    <g className="care-small">
      <circle cx="210" cy="104" r="30" fill="url(#smallSphere)" />
      <circle className="care-contact" cx="184" cy="96" r="10" /> {/* 出会いの光 */}
    </g>
  </svg>
  {careMotes.map(...)}                        {/* 冷暖半々の光の粒が周回(17〜23s) */}
</div>

css

.care-stage {
  position: relative; height: 180px; border-radius: 8px; overflow: hidden;
  /* 上は清潔な淡青緑、下にいくほどごく淡い暖色（ぬくもりが差す） */
  background: linear-gradient(165deg, #eef6f8 0%, #e8f2f4 50%, #f4ede2 100%);
}
/* 暖色の光だまり：screen合成でゆっくり呼吸（一点だけ） */
.care-warmglow {
  position: absolute; right: 14%; top: 28%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,232,200,0.4) 0%, rgba(255,232,200,0) 65%);
  mix-blend-mode: screen;
  animation: care-glow 9s ease-in-out infinite;
}
@keyframes care-glow { 0%,100% { opacity: 0.7; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.care-shadow { fill: rgba(120,150,150,0.18); }
.care-contact { fill: rgba(255,250,235,0.7); }
/* 2球がわずかに近接（呼吸のような±2px） */
.care-small {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: care-near 7s ease-in-out infinite;
}
@keyframes care-near { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
/* 光の粒：ペアの中心を周回（軌道＝等角速度なので linear） */
.care-orbit { position: absolute; left: 47%; top: 50%; width: 0; height: 0;
  animation: care-spin var(--dur) linear infinite; }
.care-orbit > i { position: absolute; display: block; border-radius: 9999px;
  transform: translate(var(--r), 0); }
@keyframes care-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .care-warmglow, .care-small, .care-orbit { animation: none; }
}

📖 関連: 温かみ（表現バリエーション） →

冷たい医療に「人の温度」を加える演出（揺れる灯火・木のぬくもり・陽だまり）は「温かみ」タグでまとめて確認できます。

よくある質問

医療サイトの演出で最も気をつけることは？

「やりすぎない」ことです。派手な動き・濃い色・過剰なエフェクトは、医療においては不安・不信・軽薄さにつながります。抑制された上品な動き（ゆっくり・小さく・淡く）が信頼感を生みます。本ページの表現はすべて意図的に動きを抑えてあります。

医療系で避けるべき色や表現は？

警告色（特に赤）は、健康・正常を訴求する文脈では不安を招くため慎重に扱います。出血・痛みを連想させる表現も避けます。基本は清潔感の白〜淡青〜淡緑。生命感を出すなら穏やかな脈動、ぬくもりなら冷色の中に少量の暖色が安全です。赤十字マークは商標保護されているため使用しません。

清潔感と冷たさは紙一重では？

その通りで、純白・純青だけだと「冷たい・無機質・距離がある」印象になります。ごく淡い青緑の階調（温度を感じる白）にする、または冷色ベースに一点だけ暖色を差す（カード4の手法）ことで、「清潔だが人間味のある」バランスが作れます。

AIに医療サイトの演出を頼むコツは？

「抑制」を明示的に指示します。「ゆっくり・小さく・淡く」「警告色は使わない」「派手にしない」と制約を伝えた上で、「清潔な光の呼吸」「心拍の脈動」「精密なデータ」など具体表現を指定します。医療はやりすぎが最大のリスクなので、AIが盛りがちな点を抑える指示が効きます。

このサイトについて使用ライブラリ一覧

Zenn ☕ Buy Me a Coffee