Pretendard
希望を現実に、待つことを喜びに。
見出しと本文。太さ650の見出しは、字間を-0.035emに詰めて、やわらかく丸い文字を端正にまとめます。
Yonsei Fertility ClinicYonsei Fertility Clinic
培養室で胚が育つ六日間をスクロールでめくるメインページを作りました。そして、その最後の場面が病院のロゴと似ていることに気づきました。
卵子と精子が出会う瞬間です。受精が難しい場合は、精子を一つ選んで卵子に直接入れます。
受精の翌日に二つの前核が見えれば、正常に受精したとみなします。
細胞は二つに、さらに四つに分かれます。分裂の速さと形を丁寧に記録します。
八つに分かれた細胞が均等に育つかを確認します。
細胞どうしがしっかりと接着し、一つの塊になります。
内側に空いた空間ができ、赤ちゃんになる細胞と胎盤になる細胞が分かれます。
胚が透明帯の片側を開き、抜け出し、着床を準備します。
DAY 0受精前受精前核期2細胞期4細胞期8細胞期桑実胚胚盤胞孵化
Yonsei Fertility Clinicは、京畿道安山で体外受精と人工授精、妊孕性温存を診療する不妊治療専門クリニックです。保健福祉部が指定した胚生成医療機関であり、不妊治療医療機関でもあり、院内の不妊医学研究所で採卵から培養、移植、凍結までを一貫して行っています。併設のKorea Sperm Bankも運営しています。
この病院のホームページを開く人は、ほとんどが長く待ってきた夫婦です。検査結果を待ち、胚が育つのを待ち、移植のあと2週間を待ちます。だからメインページを、待つ時間のために設計しました。ファーストビューでは培養室の六日間をスクロールでめくり、下へ進むほど夜明けから朝へと明るくなるようにしました。
6日
培養室で胚を見守る時間受精した日(Day 0)から孵化する日(Day 6)まで240
直接レンダリングした胚フィルムのフレームWebGL2 ボリュームレンダリング · デスクトップ 1400px · モバイル 820px3
最初に検討した方向六日間のフィルム・朝8時・一粒の種20
整理し直した公開メニューメイン1・病院と診療7・運営案内5・掲示板5・外国語2公開メニュー20個と掲示板の5種、よくある質問を読んでメインページに何を先に置くか決めました。
培養室の六日間、朝8時、一粒の種という三つの方向で、ムードボードとファーストビューを描きました。
受精から孵化まで育つ一つの胚を、240フレームのフィルムとして直接レンダリングしました。
フィルムで開くファーストビューから、赤ちゃんの手を握る締めくくりまで、11の場面をつなぎました。
ロゴを読み直し、待つ時間を描き、三つの方向が一つに束ねられるまでの過程をまとめました。
十文字の病院名の真ん中に、「아이」(子ども)と「소망」(願い)が入っています。
子どもを待つ夫婦の「子どもへの願い」がかなうように、Yonsei Fertility Clinicがともに歩みます。
現在のホームページ、メインの病院紹介文
希望→現実
待つこと→喜び
病院の文章「希望を現実に、待つことを喜びに」は、どちらも待っていたことがかなう瞬間を語っています。だからメインページの主役を、病院ではなく待つ人に決めました。
この記録のタイトルに使った「원」は、ロゴの円であり、願い(願)でもあります。円がひらく日は、願いがかなう日です。
ロゴは新しく作っていません。今のロゴを大きく引き伸ばして一画ずつ描き直し、その中に物語を見つけました。
ライム色の果実は、閉じた円ではありません。上の中央から出発した線が一周し、始まった場所の内側へ食い込みながら終わります。
そのため、果実の上に細い隙間が一つ生まれます。マーク全体で開いているのはこの一か所だけです。
葉はその隙間のすぐ上から、右上へ芽吹きます。開いた場所から何かが育ってくる形です。
果実の中の黄色い形は、体を丸めた胎児であり、果実の中の種でもあります。ロゴでいちばん温かい色は、ここにだけあります。
#C2D236
黄色い胎児#FCD70C顕微鏡で見た六日目の胚も同じ構造です。丸い透明帯の中に胚があり、透明帯の片側が開いて、胚盤胞が右上へ抜け出ます。ロゴで果実の隙間と葉が置かれている場所と同じ方向です。
ロゴが最初から胚を描いたものかはわかりません。ただ、この似ているおかげで、ファーストビューの胚フィルムが終わる瞬間をロゴへとつなげられました。
体外受精の1サイクルは、通常4~6週間かかります。そのうち病院で何かをする日は数日だけで、残りは注射をしながら待つ時間、結果を待つ時間です。
メインページは診療の前にだけ読まれるものではありません。待つ間、何度も開き直される画面です。だから場面ごとに、今この人がどの時間にいるのかを先に考えました。
ご夫婦で一緒にお越しいただくとよいでしょう。生理開始から2~3日目に来ていただくと、基本のホルモン検査をすぐに受けられます。
ホームページがすること電話予約・カカオトーク・オンライン相談の三つの窓口をファーストビューと最後の場面に置き、初診のときに持っていくものをリストにしました。
注射と超音波で卵胞を育てる時間です。病院に頻繁に通う必要があります。
ホームページがすること診療時間と、ただいま診療中かどうかをメインページですぐに確認できるようにしました。平日も土曜日も、午前8時に開院します。
卵子を採卵し、同じ日に受精させます。受精が難しい場合は顕微授精を行います。
ホームページがすることファーストビューのフィルムのDay 0の字幕にも同じ説明を入れました。
培養室で胚が育ちます。夫婦はこの時間を直接見ることはできません。
ホームページがすること見ることのできない六日間をスクロールでめくる、ファーストビューのフィルムを作りました。胚を取り出さずに見守るタイムラプスインキュベーターのやり方と同じです。
よく育った胚を選んで子宮に移植します。
ホームページがすること「移植するか、凍結するかを決める時点」というDay 5の字幕で、決定の瞬間を説明します。
いちばん長く感じられる時間です。結果はまだわかりません。
ホームページがすることこの時間のための場面は、情報より文章が先です。夜明けの映像の上に院長の挨拶を置き、施術費支援とよくある質問を続けました。
血液検査で妊娠の有無を確認します。1サイクルは通常4~6週間かかります。
ホームページがすること最後の場面では、赤ちゃんの手が大人の指を握り、「待つことが喜びになる日まで」という一文で終わります。
期間はメイン案のよくある質問と現在のサイトの案内(卵巣刺激 約10~14日、胚培養 3~5日、移植の約2週間後の血液検査)に従ったもので、人によって異なります。
不妊クリニックのホームページには数字が多いものです。評価等級、経験年数、支援率、施術回数。同じ数字でも、どう使うかによって事実になったり、約束のように読まれたりします。
医療広告では、治療の効果を保証したり、他の病院と比較したりする表現は使えません。そこで、よく見られる表現を横に置き、同じ内容を基準の見える文章に書き直しました。
よく見られる表現妊娠成功率1等級の病院
メイン案の文章保健福祉部の不妊治療医療機関評価(2019、2022、2025)で、人工授精と体外受精の評価指標のいずれも1等級を受けました。この評価は妊娠成功率の順位ではありません。
評価が何を測っているのかを、あわせて書きました。評価は施設と機器、専門人材、質管理の状況を見ます。
よく見られる表現最新の機器で確かな結果
メイン案の文章6つの独立したチャンバーが胚ごとに別々の培養環境をつくり、内蔵カメラが発生の過程を連続して記録します。
機器が結果を保証するとは書かず、機器がしていることを書きました。
よく見られる表現公的支援で気軽に
メイン案の文章健康保険の自己負担率は30%で、保健所の支援対象であれば全額自己負担分の90%が支給されます。支援の基準は毎年の告示で変わりうるものです。
数字には条件と、変わりうるという事実を添えました。
よく見られる表現誰でもまた始められます
メイン案の文章原因を先に探し、それに合った治療を選びます。検査結果をもとに、治療の方法を一緒に決めます。
約束の代わりに、診療の順序を文章にしました。
評価等級は、評価が何を見ているかの項目とあわせて書きます。
「3回連続」の横には2019 · 2022 · 2025を、「30%」の横には何の30%なのかを書きます。
「最新」という表現より、チャンバー六つ、連続記録のように目に見える事実を書きます。
治療の体験談をメインに載せず、初診から妊娠確認までの過程を図で見せます。
支援制度と回数は告示によって変わりうる、という一文を同じ画面に置きます。
「よく見られる表現」はこの病院の文章ではなく、業界でよく使われる表現を例に挙げたものです。
ロゴのライムと黄は明るく鮮やかですが、白い背景の上では文字色として使うのは難しい色です。そこでロゴの二色はそのままにし、残りの色を顕微鏡の下で探しました。
胚フィルムの1400pxフレームで毎日、細胞質の色を測ってみると、六日間で琥珀色が少しずつ薄くなり、孵化する日にもう一度濃くなりました。ファーストビューの背景は培養室のように暗く、フィルムが終わった後の場面は朝の紙のように明るく定めました。
#8C7450
#8A734F
#887250
#927B56
#9C865F
#B8A985
#685D45#0B0E0B培養室のように暗いファーストビューの背景色
#BCC0BCフィルムの中の透明帯の光、細い線と輪
#8C7450Day 0 の細胞質の琥珀色、写真の温かな色調
#C2D236ロゴの果実と葉、押す場所にだけ使う信号
#FCD70Cロゴの黄色い胎児、絵の中の一点
#F3F5EEフィルムが終わったあとに明るくなる場面の背景色
#13201A明るい背景の上の文字色、緑が混じった墨色
#55700C明るい背景でライムの代わりに使う文字色
メイン案のPC画面30枚で、画素ごとにいちばん近い色を数えました。ロゴのライムは、電話予約ボタンや進行バーのように、押す場所、見守る場所にだけ使いました。
| ペア | コントラスト | 判定 |
|---|---|---|
| クリーム / 夜ファーストビューの見出しと本文 | 17.29:1 | 小さな文字まで |
| ライム / 夜夜の場面のボタンと進行バー | 11.61:1 | 小さな文字まで |
| 墨色 / ライムライムのボタンの上の文字 | 10.05:1 | 小さな文字まで |
| ライム / 紙明るい背景では文字色として使わない | 1.52:1 | 文字不可 |
| Lime Deep / 紙明るい場面の小さな強調文字 | 5.15:1 | 本文可 |
| 黄 / 紙絵の中の一点としてだけ | 1.28:1 | 文字不可 |
| 墨色 / 紙明るい場面の本文 | 15.29:1 | 小さな文字まで |
Pretendard
希望を現実に、待つことを喜びに。
見出しと本文。太さ650の見出しは、字間を-0.035emに詰めて、やわらかく丸い文字を端正にまとめます。
Geist Mono
DAY 3 · 064h
フィルムの時間表示と章番号。数字の幅が同じなので、0hから150hまで数える間、文字が揺れません。
最初は三つの方向を同じ重さで描きました。培養室の六日間を見せる暗いフィルム、午前8時に開院する病院の朝、ロゴの果実と種でつくった明るいグラフィックです。
三つを並べて選んだ基準は一つでした。この病院にしか見せられない場面かどうか。朝の光と種は他の病院でも使えますが、院内の研究所で胚を見守る六日間は、この病院の物語でした。
A · EMBRYO FILM
培養室の暗がりで胚が育つ六日間を、スクロールでめくります。
病院がいちばん得意なことをそのまま見せる方向です。院内の不妊医学研究所で胚を見守る時間を、ファーストビューに移しました。
こうしてつながりましたメイン案の骨格になりました。ファーストビューのフィルム、時間表示、顕微鏡シーンはこの方向から生まれています。





B · AM 8:00
平日も土曜日も午前8時に開院する病院の朝を描きます。
ホルモン検査のように朝に受けなければならない診療が多く、出勤前に立ち寄る夫婦も少なくありません。温かな朝の光と日時計で、診療時間を先に見せる方向です。
メイン案に残ったもの夜明けの映像の上の挨拶、夫婦の写真、「ただいま診療中」の案内がメイン案の後半に入りました。





C · SEED
ロゴの果実・葉・種をそのままグラフィックの体系として使います。
明るく、かたい方向です。ただ、不妊という重いテーマに比べて画面が軽く読めてしまい、どの病院でも使える絵になりやすいものでした。
メイン案に残ったものライムのボタンと丸い進行表示、診療ごとに円の中に収めた顕微鏡シーンに残りました。





B・C案のファーストビューとムードボードの写真は、方向性を比べるために演出した場面です。画面の電話番号は別の番号に変えています。
実際の胚の映像は患者の医療情報で、入手できる映像は場面ごとに別の胚なので、一つにつながりません。そこで、一つの胚が受精から孵化まで育つ場面を最初から作りました。
ブラウザのWebGL2で、細胞を半透明のボリュームとして描くボリュームレンダリングの場面を組み、ブラウザのGPUで1400pxのフレームを240枚書き出しました。メイン案のファーストビューは、このフレームをスクロールに合わせてめくります。
001
011
021
031
041
051
061
071
081
091
101
111
121
131
141
151
161
171
181
191
201
211
221
231
正面を向いた細胞膜はほとんど見えず、縁だけが光るように、視線の角度に応じて光を分けました。暗視野顕微鏡で見た胚のように見えます。
細胞膜の内側に広がる散乱光を加え、細胞が内側からほのかに光って見えるようにしました。
細胞質の質感をつくるノイズを、回転させた座標から読み、画面の軸と重なる縞が出ないようにしました。
Day 6 には透明帯の片側に隙間を開け、胚盤胞がそこから抜け出すようにしました。
診療カードには、人の写真の代わりに同じ倍率の顕微鏡シーンを入れました。ファーストビューのフィルムと同じ場面のファイルから、明るい背景の明視野で静止した場面を八枚、別にレンダリングしました。
八つの治療が同じ円の中に収まると、一つの家族のように見え、カードをめくる間、ファーストビューの六日間を思い出します。
Infertility Work-up
不妊検査
不妊の原因の約40%は男性側にあります。夫婦が一緒に検査を受けると、原因をより早く見つけられます。
IUI
人工授精
排卵日に合わせて、運動性のよい精子を選んで子宮の中に入れます。
IVF
体外受精
採卵した卵子を培養室で受精させ、よく育った胚を子宮に移植します。
ICSI
顕微授精
精子を一つ選んで卵子の細胞質に直接入れ、受精を助けます。
IVM
未成熟卵体外成熟培養(IVM)
未成熟の卵子を採卵し、体外で成熟させてから受精させます。
Fertility Preservation
妊孕性温存
卵子と精子、胚を零下196℃で凍結しておき、必要になったときに使います。
Korea Sperm Bank
Korea Sperm Bank
ご自身の精子の保存と、提供精子の相談をあわせて行っています。
RIF / RPL
反復着床不全
繰り返す原因を免疫学的・遺伝学的に調べ、アシステッドハッチングもあわせて検討します。
現在のホームページの公開メニューは、メインを含めて20ページです。病院と診療が七ページ、運営案内が五ページ、掲示板が五種、英語と日本語の案内が一ページずつあります。メニューの数はそのままに、メインページで何を先に見せるかを決め直しました。
よくある質問をテーマ別に数えてみると、体外受精と病院案内に関する質問が半分を超えていました。そこでメインページの前半に診療の流れを、後半に診療時間とアクセスを置きました。
現在のサイトのよくある質問、2026年11月時点
「夜明け · 挨拶 · 指定状況」は、夜明けの場面と数字カードを一本の帯にまとめました。
体外受精・人工授精・妊孕性温存のように、診療ページごとに固有のタイトルと説明、本文の見出しを置き、検索結果で区別できるようにしました。
よくある質問は質問と回答を分け、テーマごとの見出しと関連する診療へのリンクを付け、検索や回答サービスが読みやすい本文として整理しました。
病院・診療時間・所在地・研究所の情報を構造化データ(MedicalClinic)として整理し、画面に見えている本文と同じ内容にしました。
培養室のように暗いファーストビューで胚が六日間育ち、画面が白く明るくなりながら、夜明けの挨拶と診療案内へとつながります。
スクロールした分だけ胚が育ち、下のバーがDay 0からDay 6まで満ちていきます。時間表示は0hから150hまで数えます。
フィルムが白く明るくなると、窓辺の夜明けの映像の上に院長の挨拶が続きます。
30年・3回連続1等級・国内1号・協力病院6か所をカードに置き、評価は成功率の順位ではないという一文を並べます。
八つの診療を横にめくるカードごとに、同じ倍率の顕微鏡シーンを入れました。
タイムラプスインキュベーターから冷凍保管室まで、五つの機器をスクロールに合わせて切り替えて見せます。
初診から妊娠確認までの五つの段階を曲線の道でつなぎ、初診のときに持っていくものを横に置きます。
30%・25回・90%の三つの数字で支援制度を要約し、基準が変わりうるという一文を添えます。
ただいま診療中か、次にいつ開くのかを、ソウル時刻に合わせてお知らせします。
赤ちゃんの手が大人の指を握る場面をスクロールでめくりながら、締めくくります。








録画画面の院長の写真と胚培養士の写真は、同じ大きさの別の写真に差し替え、院長の名前・電話番号・住所・事業者情報は別の文字に変えるか隠しました。
メイン案には、目立たない仕掛けがいくつかあります。今電話しても大丈夫かを知らせる診療時間の一文、初診のときに持っていくもののリスト、支援制度を三つの数字に縮めたカードです。下で実際に動かして見られます。
01 · NOW OPEN
ただいま診療中です。昼12時から午後1時30分までは昼休みです。 ただいま診療中です。午後4時30分まで診療します。 ただいま診療中です。土曜日は昼休みなしで午後1時まで診療します。 昼休みです。午後1時30分から診療を再開します。この時間は電話がつながりにくくなります。 診療前です。午前8時から診療を始めます。 本日の診療を終えました。明日の午前8時から診療します。 本日の診療を終えました。月曜日の午前8時から診療します。 日曜日は休診です。明日の午前8時から診療します。
平日 午前8:00 ~ 午後4:30(昼休み 12:00 ~ 午後1:30)、土曜日 午前8:00 ~ 午後1:00(昼休みなし)、日曜日・祝日は休診。メイン案はソウル時刻で計算します。
02 · FIRST VISIT
0 / 3 準備が整いました。ご夫婦で一緒にお越しいただくとよいでしょう。
生理開始から2~3日目に来ていただくと基本のホルモン検査をすぐに受けられる、という案内をリストのすぐ上に置きます。
03 · SUPPORT
30%
健康保険の自己負担率年齢に関係なく、同じ割合が適用されます。25 回
出産一回ごとに受けられる施術回数体外受精20回と人工授精5回を合わせた数です。90%
全額自己負担分の支援保健所の支援対象のときに受けられる割合です。支援の基準は毎年の告示で変わりうる、という一文を同じ画面に置きます(メイン案基準、2026年10月)。
三つの方向から出発して一つのメイン案をつくり、サブページと検索設定まで、リニューアルの範囲をあわせて整理しました。これらの案は最終的な選択には至りませんでした。
それでも、培養室の六日間をファーストビューに置くという判断は、今やり直しても同じでしょう。病院がいちばん得意なことと、患者がいちばん長く待つ時間が、同じ場面の中にあったからです。
培養室の六日間、朝8時、一粒の種を同じ重さで描き、並べました。
胚フィルムを直接レンダリングし、朝と種から選んだものをフィルムの後の場面へとつなぎました。
11の場面のメイン案を共有し、サブページと検索設定まで、リニューアル全体の範囲をあわせて整理しました。
患者は培養室の中を見ることができません。見えない時間を代わりに見せる場面が、病院の専門性をいちばんわかりやすく説明してくれました。
ロゴを作り直さなくても、ロゴの中にもともとあった開いた円と葉で、フィルムとブランドをつなげられました。
評価等級や支援率のような数字は、何を測っている数字なのかをあわせて書いたときに、信頼できるものとして読まれます。
YONSEI FERTILITY CLINIC · MAIN PAGE RENEWAL
培養室の六日間をスクロールでめくるメインページリニューアル提案
| Client | Yonsei Fertility Clinic · 安山の不妊治療専門クリニック |
|---|---|
| Scope | メインページリニューアル提案 · ロゴを読む · 文章の基準 |
| Period | 2026年10月~11月 |
| Directions | 六日間のフィルム・朝8時・一粒の種 |
| Film | 胚フィルム240フレーム(WebGL2ボリュームレンダリング)・顕微鏡シーン8種 |
| Identity | 現在のロゴ · Night #0B0E0B · Lime #C2D236 · Seed #FCD70C · Paper #F3F5EE |
| Tools | GSAP · ScrollTrigger · Lenis · WebGL2 · Canvas |
| Typeface | Pretendard · Geist Mono |
| Studio | BlueCanvas |
ロゴの中の小さな形と、培養室の六日間から出発して,
信頼して電話できる病院のホームページをつくります。
病院・乳腺甲状腺
Dr. Choi’s Breast & Thyroid Clinic
ロゴのUに結ばれたピンクリボンから出発し、超音波の扇形と蝶の形の甲状腺まで、三つの形で病院を説明するブランド解釈、検査から結果の電話まで患者が待つ七つの瞬間に合わせた画面設計、効果を約束していた2014年の文章を書き直した医療広告の文章基準、夜のRibbon Motion Filmと昼のLens & Bloom、二つのデザイン案を収めた乳腺・甲状腺外科クリニックのホームページリニューアル提案の過程
病院・スキンブースター
CellREDM
スキンブースター広告のランディングページ制作過程です。メーカーの広告映像の最初のシーンである鍵穴と、IRERAUMのインテリアのアーチが同じ構造だという点から出発した形の解釈、製品の夜と病院の昼に分けたプラム・シャンパン・アイボリーの色の基準、効果を約束せずに選び方を伝える医療広告の文章、そしてファーストビュー3案と広告3案、7回まで修正を重ねた広告映像を経て、15シーンのランディングページと相談管理画面になるまでを収めています。
バイオ・眼科
ReGenTree ReGenTree
両社の名前が重なった名前と同じ曲率で重なったロゴの号 2つから出発したブランド解析、眼科検査の白色・コバルトブルー・蛍光緑・琥珀色から選んだ色基準、目から分子まで倍率で織った物語順と傷が覆う原理を直接描いてみる実験室、1月のCLI W、 10月のSURFACE OF SIGHTまで3回の提案を盛り込んだ眼科新薬会社Webサイトリニューアル提案過程
Contact
現在の状況と目標をお聞かせください。 実現可能な範囲、進め方、概算費用をご案内します。
DIRECT
お問い合わせを受け付けました。営業日1日以内に作業範囲とお見積りをまとめてご返信します。