プロジェクトの相談を申し込む プロジェクト紹介にスキップ

Dr. Choi’s Breast & Thyroid ClinicDr. Choi’s Breast & Thyroid Clinic

リボンから 蝶まで

乳房と甲状腺を診る病院のホームページを、
夜のフィルムと昼のレンズ、2つの方向で描き直しました。

Client
Dr. Choi’s Breast & Thyroid Clinic
Scope
Webサイトリニューアル提案
Year
2026
  1. 01 · RIBBONリボン・乳房

    ロゴにすでにある形です。A案のフィルムは、流れていくサテンのリボンがピンクリボンに結ばれるシーンから始まります。

  2. 02 · FAN扇形・超音波

    超音波プローブが体の中を見る画面の形です。検診も組織検査(生検)もこの扇形の上で行われるため、どちらのデザイン案も組織検査の過程をこの形の中で説明します。

  3. 03 · BUTTERFLY蝶・甲状腺

    首の前側にある甲状腺は、2つの葉が中央でつながった蝶の形をしています。ロゴになかった残りの半分を、この形で埋めました。

01 / OVERVIEWはじめに

乳房と甲状腺を
診る病院

Dr. Choi’s Breast & Thyroid Clinicは、盆唐(ブンダン)の亭子(チョンジャ)駅前で、乳房検診と吸引式乳房生検(マンモトーム)、乳房形成、甲状腺検診とラジオ波焼灼術を行う外科医院です。現在のホームページは2014年に作られたWordPressサイトで、5グループ28ページのメニューに病院の説明をぎっしりと詰め込んでいます。

この病院のホームページを開く人の多くは、不安な気持ちを抱えています。しこりに触れたり、検診結果に追加検査と書かれていたり、首にしこりがあると言われたりした人たちです。そこで同じ内容を2つの温度でつくりました。不安を抱えて入ってくる夜の画面と、結果を聞いて帰っていく昼の画面です。

  • 2014

    現在のホームページの著作権表示の年WordPressで作った5グループのメニュー
  • 28

    現在のメニューのページ数病院紹介 9 · 乳房・検診 5 · 乳房形成 8 · 甲状腺・ラジオ波 3 · コミュニティ 3
  • 2

    2つの温度のデザイン案夜のRibbon Motion Film・昼のLens & Bloom
  • 722

    スクロールフィルムのフレームA案 リボン240・B案 ファーストビュー241・モクレン241
  1. 2014
    現在のホームページNOW

    5グループ28ページのWordPressサイトです。ファーストビューの3枚のスライドは、すべて同じ文章を使っています。

  2. 2026.11
    A案・Ribbon Motion FilmROUND A

    ダークプラムの背景で、リボンがピンクリボンと超音波の扇形を経て蝶の形をした甲状腺になるフィルムで、12のシーンをつなぎました。

  3. 2026.11
    B案・Lens & BloomROUND B

    明るい真珠色の背景で、窓辺のひとりに近づいていくフィルムとモクレンが咲くフィルムで、11のシーンをつなぎました。

  4. 2026.11
    ファーストビューの作り直し

    B案のファーストビューを、文字を拡大するレンズのグラフィックから、人に近づいていくフィルムに変えました。

  5. 2026.11
    この記録

    ロゴをもう一度読んで、患者が待つ時間を描き、2014年の文章を書き直した過程をまとめました。

02 / THE MARKロゴを読む

Uに結ばれた
リボン

現在のロゴは「최성림 +U 외과」(チェ・ソンリム +U 外科)と読めます。名前の真ん中にある「유」(ユ)を太いマゼンタのUで書き、その左の柱にピンクリボンを結んでいます。

  1. 01 · U文字U

    「乳房」の「乳」にあたる「유(乳)」(ユ)を、ラテン文字のUで書きました。Uの内側の空いたところにはハングルの「유」を小さく書き添え、音と意味を一緒に見せています。

  2. 02 · RIBBONピンクリボン

    リボンはUの左の柱に巻きついて通り過ぎます。一筋は柱の前を斜めに横切り、もう一筋は柱の後ろを回って下へ垂れています。

  3. 03 · PLUS「+」

    横に伸びた尾と下に垂れた一筋が十字のように重なり、マーク全体が「+U」と読めます。

  4. 04 · THYROID空いている場所

    英語名はBreast & Thyroid Clinicですが、マークには甲状腺を表す形がありません。2つのデザイン案は、この空白を蝶で埋めました。

  • U#E8517C
  • リボン#F59DAB
  • ロゴの文字#AD6491

マークは現在のロゴ画像(424 × 111)を参考に解説用に描き直し、色はロゴ画像から測った値です。

03 / SHAPESリボン・扇形・蝶

3つの形で
語る

この病院の診療は、ほとんどが「見る」ことから始まります。マンモグラフィと超音波で見て、必要なら超音波を見ながら組織を採取します。そこで2つのデザイン案は、病院を説明する図を、ロゴのリボン、超音波画面の扇形、甲状腺の蝶という3つの形に決めました。

  1. 01 · RIBBONリボン・乳房

    ロゴにすでにある形です。A案のフィルムは、流れていくサテンのリボンがピンクリボンに結ばれるシーンから始まります。

  2. 02 · FAN扇形・超音波

    超音波プローブが体の中を見る画面の形です。検診も組織検査(生検)もこの扇形の上で行われるため、どちらのデザイン案も組織検査の過程をこの形の中で説明します。

  3. 03 · BUTTERFLY蝶・甲状腺

    首の前側にある甲状腺は、2つの葉が中央でつながった蝶の形をしています。ロゴになかった残りの半分を、この形で埋めました。

  • A案・夜ファーストビューのフィルム:流れるサテンのリボン
  • B案・昼診療科目:ピンクのシルクの上の真珠
  • A案・夜組織検査:扇形の中の超音波イラスト
  • B案・昼組織検査:4段階のダイヤル
  • A案・夜ラジオ波焼灼術:蝶の形をした甲状腺
  • B案・昼診療科目:光が屈折するガラスの蝶
04 / THE WAIT待つ時間

結果を待つ
数日

患者さんがこの病院を初めて知った日から、結果の電話を受ける日までを7つの瞬間に分け、瞬間ごとにホームページがすべきことを決めました。

気持ちが最も高ぶるのは、検査を終えて結果を待つ4~5日です。2つのデザイン案は、この数日を独立した一つのシーンにしました。

  1. 01 気づいた日

    しこりに触れたり、検診結果に追加検査が必要と書かれていたりします。

    ホームページの役割ファーストビューで電話予約をすぐ見つけられるようにし、「このような変化があれば」のチェック項目で、受診が必要かどうか見当をつけられるようにします。

  2. 02 予約電話

    どこへ行けばいいのか、今日行けるのかがまず気になります。

    ホームページの役割電話予約ボタンを画面の上下に固定し、診療時間と今診療中かどうかを一緒に表示します。

  3. 03 検査当日

    マンモグラフィと乳房超音波を同じ日に受けます。

    ホームページの役割2つの検査を一緒に受ける理由である高濃度乳房の話を、診療科目の最初の一文に書きました。

  4. 04 組織検査

    必要に応じて、超音波で見ながらその場で組織を採取します。

    ホームページの役割吸引式乳房生検(マンモトーム)の4つのステップをイラストで事前に見せ、「小さな切開一箇所・当日帰宅」を最初に書きました。

  5. 05 待つ4〜5日

    組織検査の結果が出るまで通常4〜5日かかります。一番長く感じる時間です。

    ホームページの役割「結果を待つ数日も、ひとりにはしません」という一文で一つのシーンをつくり、結果が出しだい電話で知らせるという案内を添えました。

  6. 06 結果の電話

    結果を聞き、同じ院長と今後のことを決めます。

    ホームページの役割「診療は一人の医師が最後まで」を約束の一文に掲げ、高次医療機関での治療が必要な場合の連携もあわせて記しました。

  7. 07 その後

    治療と手術後の管理、そして定期検診が続きます。

    ホームページの役割手術室の安全装置と機器を見せ、「不安な気持ちでいらしても、安心してお帰りいただけるように」という一文で、夜の画面を朝に変えます。

気持ちの高ぶりは説明のための図で、測定した値ではありません。組織検査の結果が出るまでの期間は、病院の案内から引用しました。

不安な気持ちでいらしても、
安心してお帰りいただけるように

A案の「夜明けのカーテン」のシーンで使った一文です。この記録も、ここから昼の背景に移ります。

05 / WORDS文章を書き直す

約束せずに
安心させる文章

病院の文章は、聞く人が不安なときほど大きく響きます。「完璧に」は期待をふくらませ、「焼いて死滅させた」は恐怖をふくらませます。医療広告でも、治療効果を保証したり、他の治療と比べたりする表現は使ってはいけません。

そこで2014年の文章を一つずつ読み直し、結果を約束する表現は過程を説明する文章に、怖く聞こえる表現は目に見える事実に書き換えました。

  1. 2014年のホームページファーストビューのスライド

    乳房と甲状腺のがんの診断および治療、そして乳房形成に関するすべて
    1. 1できることをすべて約束する表現です。「検査から治療まで」のように、実際に行う範囲を記しました。

    デザイン案の文章

    A案乳房と甲状腺、検査から治療まで1か所で

    B案乳房と甲状腺を、近くで、詳しく、最後まで。

  2. 2014年のホームページ吸引式乳房生検(マンモトーム)のページ

    …メスを入れる外科手術や痛みなく局所麻酔で完璧に得ることができるだけでなく…簡単に完全除去できる施術方法です。
    1. 1感じ方は人によって異なります。「局所麻酔後の小さな切開」のように、行うことを記しました。
    2. 2結果を保証する表現は使いません。
    3. 3施術の重さを軽く見せてしまいます。「小さな切開一箇所」のように、目に見える事実に書き換えました。

    デザイン案の文章

    A案・B案小さな切開一箇所で、当日帰宅します

  3. 2014年のホームページラジオ波焼灼術のページ

    しかし、ラジオ波の熱で焼いて死滅させた甲状腺組織はそのまま残すため…
    1. 1事実であっても、怖く聞こえる表現です。結果を待つ人には、過程の説明が先です。

    デザイン案の文章

    B案皮膚切開なしで、超音波を見ながら治療します

  4. 2014年のホームページラジオ波焼灼術の利点

    傷あとが残りません。手術とは異なり、副作用はほとんどありません。
    1. 1断定する代わりに、経過を「例」として示します。
    2. 2他の治療と比べる表現は使いません。

    デザイン案の文章

    A案・B案経過は人によって異なる場合があります。甲状腺がんは手術で治療するのが原則です。

  5. 2014年のホームページ乳房形成の紹介

    …皆さまの美しさに関するお悩みまでも解決いたします。
    1. 1結果を約束する表現です。何を根拠に計画しているかを書きました。

    デザイン案の文章

    B案乳房手術の経験から、形のお悩みまで

2つのデザイン案が共に守った6つのこと

  • 01「最も」「最高」「完璧」のような表現は使いません

    結果を保証する表現の代わりに、過程と期間を記します。

  • 02痛み・傷あと・副作用を断定しません

    感じ方は人によって異なるため、「局所麻酔後」「縫合なし」のように、実際に行うことを記します。

  • 03体験談とビフォーアフター写真をトップページに置きません

    現在のサイトの「患者さんの声」掲示板は、デザイン案のトップページには載せていません。

  • 04経過は「例」として示します

    ラジオ波焼灼術後の変化には「施術後の経過例」という見出しをつけ、人によって異なる場合があるという一文を添えました。

  • 05原則もあわせて記します

    「甲状腺がんは手術で治療するのが原則」という一文を、ラジオ波焼灼術の説明のすぐ下に置きました。

  • 06施術の場面の代わりにイラストで示します

    実際の施術写真の代わりに、超音波画面に似たイラストとダイヤルで過程を説明します。

2014年の文章は、現在のホームページのファーストビューと診療ページから引用し(2026年11月2日確認)、原文の分かち書きだけを直しました。

06 / COLORピンクの2つの温度・フォント

同じピンク、
2つの温度

ロゴのUはマゼンタ #E8517Cで、待合ラウンジのベルベットのソファはコーラルレッドです。このピンクをそのまま使うと、白い背景では大きな文字にしか使えず、暗い背景では光が弱く見えます。

そこでA案は夜に合わせてピンクを明るくし、B案は昼に合わせてピンクを落ち着かせました。

  • U#E8517CロゴのU
  • リボン#F59DABロゴのピンクリボン
  • ロゴの文字#AD6491Uの両側のロゴタイプ
  • 待合ラウンジ#D94440待合ラウンジのベルベットソファ

同じ文章を二つの背景に載せてみました。

A案・夜の背景 #12090F

近くで、詳しく、最後まで

組織検査の結果は、通常4~5日後に出ます。

Rose #FF6F98
7.44:1 小さい文字まで

B案・昼の背景 #F6F2EE

近くで、詳しく、最後まで

組織検査の結果は、通常4~5日後に出ます。

Rose Deep #A8235A
6.17:1本文に使用可

どちらのデザイン案も、アクセントとして使ったピンクは画面の0.5%に届きません。広い範囲は背景と写真・フィルムが担い、ピンクはボタンと強調する文字だけに使います。

A案・夜のパレット

  • 夜の背景・重なり47.1%
  • 夜明け後の明るい背景24.8%
  • 写真・フィルム21.6%
  • 文字6.2%
  • ピンクの強調0.3%
  • Night#12090F夜のシーンの背景
  • Plum#2B1322カード・シーンの重なり
  • Rose#FF6F98夜の強調・ボタン
  • Rose Light#FFA6BFフィルムの光・補助強調
  • Ink#F7EEF2夜の文字
  • Dawn#FBF3F6夜明け後の明るい背景

B案・昼のパレット

  • Pearl・Blushの背景64.5%
  • 写真・フィルム20.6%
  • 暗いシーン13.4%
  • 文字1.0%
  • ピンク・ターコイズの強調0.4%
  • Pearl#F6F2EE昼のシーンの背景
  • Blush#F6E2E8モクレン・パネルの重なり
  • Ink#1C1530昼の文字
  • Rose#CF3570ボタン・大きな文字の強調
  • Rose Deep#A8235A小さな文字の強調
  • Aqua#8FDED3甲状腺・機器のシーンの超音波の光
文字と背景のコントラスト比
組み合わせ見本コントラスト用途
A案Ink / Night近くで 4~5日17.23:1小さい文字まで
A案 Rose / Night近くで 4~5日7.44:1小さい文字まで
A案ロゴU / Night近くで 4~5日5.50:1本文に使用可
B案Ink / Pearl近くで 4~5日15.72:1小さい文字まで
B案Rose Deep / Pearl近くで 4~5日6.17:1本文に使用可
B案 Rose / Pearl近くで 4~5日4.28:1大きな文字のみ
B案ロゴU / Pearl近くで 4~5日3.19:1大きな文字のみ
B案白い文字 / Rose ボタン近くで 4~5日4.77:1本文に使用可
  • Pretendard

    近くで、詳しく、最後まで

    2つのデザイン案の韓国語の見出しと本文

  • Pretendard 800

    35歳・4~5日・200m

    大きな数字と約束の一文

  • JetBrains Mono

    FOCUS ×1.0 · SCAN 100%

    B案の焦点・スキャン表示

コントラストはWCAG 2.1の基準で計算しました(4.5:1以上は本文、3:1以上は大きな文字)。画面に占める比率は、2つのデザイン案のシーン画面で、背景・写真・強調・文字に近い色のピクセルを数えた値です。

07 / PHOTO体ではなく質感

体を見せずに
質感で語る

乳房と首を扱う病院の写真には、慎重さが求められます。2つのデザイン案は素肌を見せる代わりに、A案は手の仕草で、B案は素材で語らせました。

A案の人物は胸と首に手を添え、B案のモチーフは真珠とサテンとガラスの蝶です。同じ3つの診療を、人の手の仕草とモノの質感に分けて見ると、2つのデザイン案の温度の違いがはっきりします。

乳房・検診A案は自ら確かめる手を、B案は丸く貴重な真珠を選びました。
A案・アイボリーのブラウスに手を添えた人A案・アイボリーのブラウスに手を添えた人
B案・ピンクのシルクの上の真珠B案・ピンクのシルクの上の真珠
乳房形成A案はシルエットの線を、B案はサテンの曲線を見せています。
A案・シルクドレスを着た後姿A案・シルクドレスを着た後姿
B案・滑らかな曲線をなすサテンB案・滑らかな曲線をなすサテン
甲状腺A案は首に触れる指先を、B案は甲状腺の形に似た蝶を使いました。
A案・首に指先を添えた横顔A案・首に指先を添えた横顔
B案・光が屈折するガラスの蝶B案・光が屈折するガラスの蝶

院内の空間と機器は現在のホームページの実際の写真を、診療科目とシーンの写真はデザイン案のために演出した写真を使いました。実際の患者さんや医療スタッフの写真は使っていません。

08 / STRUCTURE28ページから一本の流れへ

28ページを
一本の流れに

現在のサイトは、病院紹介 · 乳房・検診 · 乳房形成 · 甲状腺・ラジオ波 · コミュニティの5グループ、28ページに分かれています。初めて訪れる人が知るべきことは、そのうちの一部です。

2つのデザイン案は、トップページを一続きの長いスクロールにまとめ、詳しい説明は現在の下層ページへつながるようにしました。診療科目ごとにつけた小さなチップがその入口です。

現在のメニュー 5グループ・28ページ

病院紹介 9
  • 挨拶
  • 医療スタッフ
  • パートナー
  • 診療案内
  • 医療機器
  • アクセス
  • 提携機関
  • 院内紹介
  • 書類発行案内
乳房・検診クリニック 5
  • 乳房検診
  • 一般的な疾患
  • 吸引式乳房生検(マンモトーム)
  • 微細石灰化の組織検査
  • 授乳
乳房形成クリニック 8
  • 安心の形成手術システム
  • 豊胸術
  • 豊胸の再手術
  • 乳房縮小
  • 乳房下垂
  • 女性化乳房
  • 副乳
  • 陥没乳頭
甲状腺・ラジオ波クリニック 3
  • 一般的な甲状腺疾患
  • 甲状腺検診
  • ラジオ波焼灼術
診療相談・コミュニティ 3
  • お知らせ
  • 患者さんの声
  • 医学ニュース/コラム

「患者さんの声」掲示板は、デザイン案のトップページには載せていません。

A案・12シーン 31,166px

  1. リボンフィルム 5,580
  2. 病院の紹介 904
  3. 診療科目 3,761
  4. 吸引式乳房生検3,780
  5. 甲状腺ラジオ波焼灼術3,960
  6. 手術室の安全装置 990
  7. 診断と治療装置 568
  8. 夜明けのカーテン2,520
  9. 医療スタッフ 1,843
  10. 院内紹介4,862
  11. セルフチェック・休診案内1,027
  12. アクセス1,096
  13. フッター274

B案・11シーン 30,456px

  1. 近くで・詳しく・最後まで4,500
  2. 病院の約束 1,061
  3. 診療科目 3,150
  4. 吸引式乳房生検3,060
  5. 甲状腺ラジオ波焼灼術3,510
  6. モクレンフィルム 3,240
  7. 機器リング 3,407
  8. 医療スタッフ 1,074
  9. 院内紹介4,680
  10. セルフチェック964
  11. アクセス1,284
  12. フッター527

バーの長さは、1440 × 900の画面で測った各シーンの高さに比例します。画面を固定したままフィルムを送ったりパネルを広げたりする区間も含めた長さです。

09 / ROUND AA案・夜のフィルム
A案・Ribbon Motion Film

Ribbon Motion Film乳房と甲状腺、検査から治療まで1か所で

ダークプラムの背景で、リボンフィルム240フレームから始まり、12のシーンをつなぐデザイン案です。夜のシーンが続いた後、「夜明けのカーテン」で明るい背景に移り、医療スタッフからアクセスまでは昼の画面として読めます。

  • リボンがピンクリボンと扇形を経て蝶となるフィルムがスクロールに合わせて流れます
  • 診療科目のカード3枚が同じ場所に順に積み重なります
  • 超音波のイラストの中で針が病変に近づきながら、4つのステップを見せます
  • 心電図線がスクロールに沿って描かれ、手術室の安全装置を紹介します
Night · Plum · Rose · Rose Light · Dawn
  1. リボンフィルムに重なる最初の一文

    フィルムが流れる間、「35歳からは定期検診が必要です」のような文章が3つ、順に浮かび上がります。

  2. 積み重なる診療科目

    乳房・検診、乳房形成、甲状腺・ラジオ波のカードが同じ場所に積み重なり、下層ページへ直接移動できるチップをつけました。

  3. 扇形内の組織検査

    超音波のイラストの中で針が病変に近づき、左側の4つのステップがイラストとともに進みます。

  4. 小さくなっていく結節

    蝶の形をした甲状腺の結節がラジオ波治療のあと小さくなっていく様子を、「施術後の経過例」という表示とともに描きます。

  5. 描かれていく心電図

    スクロールに沿って心電図の線が描かれ、生体情報モニターから電気手術器まで、4つの装置が続きます。

  6. 夜明けのカーテン

    「不安な気持ちでいらしても、安心してお帰りいただけるように」という一文とともに画面が明るくなり、医療スタッフのセクションへ移ります。

録画画面の院長の写真は診察室の静物に差し替え、電話番号・住所・事業者情報は別の文字に置き換えるか、隠しました。

10 / ROUND BB案・昼のレンズ
B案・Lens & Bloom

Lens & Bloom乳房と甲状腺を、近くで、詳しく、最後まで。

明るい真珠色の背景で、窓辺のひとりに近づいていくフィルムから始まり、11のシーンをつなぐデザイン案です。甲状腺と医療機器のセクションでだけ暗い背景に切り替え、超音波画面のターコイズを使います。

  • ファーストビューのフィルム241フレームが、「近くで・詳しく・最後まで」の3つの区間に分かれます
  • 真珠・サテン・ガラスの蝶のパネルが、スクロールに合わせて順に広がります
  • 組織検査の4つのステップがダイヤルのように回ります
  • モクレンフィルムの上を、結果を待つ数日の文章が流れていきます
Pearl · Blush · Ink · Rose · Aqua
  1. 近くで・詳しく・最後まで

    カメラが窓辺の人に近づいていく間に、3つの言葉が順に近づき、ピントが合い、画面の端まで線が引かれます。

  2. 約束と数字

    「検査はその日のうちに、診療は一人の医師が最後まで」という約束の下に、35歳・4~5日・200m・2時間を数字で記しました。

  3. 広がる3つのパネル

    真珠・サテン・ガラスの蝶のパネルがスクロールに合わせて1枚ずつ広がり、診療科目を紹介します。

  4. 回るダイヤル

    組織検査の4つのステップをダイヤルの周りに配置し、スクロールに合わせて1つずつ回します。

  5. スキャンが通り過ぎた首筋

    光の筋が首筋を通り過ぎると画面が超音波画像のように変わり、結節が小さくなっていく経過例が続きます。

  6. モクレンフィルム

    つぼみが開いていく間に「結果を待つ数日も、ひとりにはしません」という一文が流れ、花が満開になると「再び花ひらく日常のために」で終わります。

ファーストビューを
作り直した理由

B案のファーストビューは、当初はガラスのレンズが「近くで・詳しく・最後まで」を拡大するグラフィックでした。画面はきれいでしたが、人の姿が見えず、気持ちがついてきませんでした。

そこで、窓辺のひとりに近づいていく241フレームのフィルムに作り直しました。広い部屋から横顔へ、首に添えた指先へ、カーテン越しの光へと近づいていきます。

近くで、詳しく、最後まで。

当初・レンズのグラフィック当初のレンズのグラフィックを描き直したサンプルです。マウスを重ねるとレンズがついてきます。
B案のファーストビューのフィルムの一場面:窓辺に立つ人の横顔

広い部屋から横顔へ、首に添えた指先へ、カーテン越しの光へと近づいていきます。B案のファーストビューのフィルム241フレームから81フレームを選びました。

作り直し・人に近づくフィルム

録画画面の院長の写真は診察室の静物に差し替え、電話番号・住所・事業者情報は別の文字に置き換えるか、隠しました。

11 / COMPARE同じ内容、2つの温度

同じ原稿を
夜と昼に

2つのデザイン案は同じ原稿でつくりました。同じシーンを重ね、中央のハンドルをドラッグすると、夜の画面と昼の画面の違いを見比べられます。

B案・ファーストビュー
A案・ファーストビュー

手の中の画面

2つのデザイン案は、縦画面用のフィルムを別に作りました。リボンと人物は画面の上部に、文章は下部に置き、親指が届く位置で読めるようにしました。

  • A案・ファーストビュー
  • A案・診療科目
  • A案・組織検査
  • A案・ラジオ波焼灼術
  • A案・夜明けのカーテン
  • A案・医療スタッフ
  • B案・ファーストビュー
  • B案・病院の約束
  • B案・診療科目
  • B案・組織検査のダイヤル
  • B案・甲状腺スキャン
  • B案・モクレンフィルム
12 / DETAIL手で触れられるディテール

小さな画面で
まず答える

病院のホームページで最もよく探されるのは、診療時間と場所、そして今行ってもいいのかどうかです。デザイン案に入れた3つの小さな仕掛けを、ここで実際に動かしてみることができます。

01

今、診療中?

曜日と時刻を選ぶと、「アクセス」に入る案内文が変わります。

月曜日
火曜日
水曜日
木曜日
金曜日
土曜日
日曜日

ただいま診療中です・午後1時から昼休み (祝日は休診)

平日09:00~18:00(昼休み13:00~14:00)、土曜日09:00~13:00を基準にしています。金曜日の夜には、次の診療として土曜日の診療を案内します。

02

このような変化があれば

当てはまる項目を押してみてください。2つのデザイン案のセルフチェックと同じ文章です。

当てはまる項目を押して確認してください。

早期の乳がんの多くは自覚症状がありません。このチェックリストは診断の代わりにはなりません。

03

組織検査(生検)の4つのステップ

B案のダイヤルを、ステップボタンで回せるようにしてここに移しました。

  1. 超音波映像をリアルタイムで見ながら病変の位置と大きさを確認します。

  2. 皮膚や乳房組織に局所麻酔を十分にした後、小さな切開で針を入れます。

  3. 吸引で組織を針の中に引き込んで採取し、良性のしこりはこのとき一緒に取り除くこともあります。

  4. 切開部位は縫合せずに特殊絆創膏を貼り、圧迫止血後当日帰宅します。

組織検査の結果は通常4~5日後に出て、確認でき次第お電話でお知らせします。

13 / RETROSPECT振り返り

ロゴになかった
半分を探して

2つの方向を提案しましたが、最終的な採用には至りませんでした。それでもこの仕事で、ロゴに結ばれたリボンを読み直し、空いていた甲状腺の場所を蝶で埋め、結果を待つ数日を画面の一つのシーンにしました。

  1. A案・夜Ribbon Motion Film

    ダークプラムの背景・12シーン・フィルム240フレーム

  2. B案・昼Lens & Bloom

    真珠色の背景・11シーン・フィルム241・241フレーム

  3. この記録リボンから蝶まで

    ロゴを読む・待つ時間・文章を書き直す

  • 01ロゴにない半分を探す

    名前にはThyroidがあるのに、マークにはリボンしかありませんでした。蝶を加えて、2つの診療が同じ重さに見えるようにしました。

  • 02待つ時間を設計する

    ホームページは、診療の前にだけ読まれるものではありません。結果を待つ数日の間に、もう一度開いてみる画面でもあることを、まず考えました。

  • 03グラフィックより人

    レンズのグラフィックはきれいでしたが、気持ちがついてきませんでした。人に近づいていくフィルムに変え、演出したシーンの間に、標準の横スクロールのような素の画面が見えないよう整えました。

14 / CREDITSDR. CHOI’S CLINIC · BLUECANVAS WORKS

BREAST & THYROID CLINIC HOMEPAGE RENEWAL

リボンから
蝶まで

Dr. Choi’s Breast & Thyroid Clinic・デザイン案2種・ロゴを読む・文章基準

ItemDetail
ClientDr. Choi’s Breast & Thyroid Clinic・盆唐の乳房・甲状腺外科医院
ScopeWebサイトリニューアル提案・ロゴを読む・文章基準
Period2026年11月
Round ARibbon Motion Film(ダークプラム、12シーン、スクロールフィルム240フレーム)
Round BLens & Bloom(明るい真珠色、11シーン、ファーストビューのフィルム241・モクレン241フレーム)
Addedロゴを読む・3つの形・待つ時間のマップ・文章を書き直す
Identity現在のロゴ · Night #12090F · Rose #FF6F98 · Pearl #F6F2EE · Rose Deep #A8235A
ToolsGSAP · ScrollTrigger · Lenis · Canvas · Three.js
TypefacePretendard · JetBrains Mono
StudioBlueCanvas

Goal不安な気持ちで開くファーストビューが、安心で終わるように

FROM RIBBON TO BUTTERFLY

不安な気持ちで開くファーストビューを
一緒に設計します

ロゴのリボンの一筋と、患者さんの数日から出発して、
信頼して電話できる病院のホームページをつくります。

その他のプロジェクト

    Contact

    まだ漠然としたアイデアでも構いません。
    プロジェクトを一緒に 整理しましょう

    現在の状況と目標をお聞かせください。 実現可能な範囲、進め方、概算費用をご案内します。

    質問4つ・約2分

    ご依頼内容

    どのような作業をご一緒しましょうか。

    複数選べます。まだ決まっていない場合は「その他」を選んでください。

    ご予算

    お考えのご予算はどのくらいですか。

    おおよその範囲でも、ご提案づくりに大いに役立ちます。

    プロジェクト説明

    今の状況をお聞かせください。

    整っていなくても大丈夫です。下の項目を押すと入力の枠が入ります。

    0

    RFPや参考資料を2点までアップロードできます。対応形式:PDF、PPT、Word、Excel、JPG、PNG、ZIP

    ご連絡先

    どちらへご返信しましょうか。

    作業範囲・予算・プロジェクト内容・連絡先をご入力ください。