大学・研究所研究者
今申請できる公告があるか、受付はいつ締切られるか確認します。
BLUECANVAS SELECTED WORK / 03PUBLIC · BIO R&D
KOREA DRUG DEVELOPMENT FUND · 2021 → 2026
新薬開発の長い旅程、
その最初の画面を
設計しました。
Korea Drug Development Fund ホームページを初めて作成した2021年から
再描いた2026年までの記録です。
2026確定案 現在運営されている最初の画面
01 / THE BRIEF 名前が変わった年の課題
機関の名前が変わった年、
ホームページがすることも
変わりました。
2021年1月、（財）犯罪処神薬開発事業団は韓国 Drug Development Fundに新たに出発しました。 10年間続いてきた汎部処転周期新薬開発事業を終え、国家新薬開発事業とコロナ19治療剤・ワクチン新薬開発事業を共に導くことになりました。
終わった事業の記録と新しい事業の公告が一つのサイト内に一緒になければなりませんでした。研究者や企業がこのサイトを探す理由も明らかでした。今申し込むことができる公告を確認し、提出する書式をダウンロードし、どの課題が支援されているかを調べる事です。
そこで機関を素敵に紹介する画面より、この仕事を早く終わらせる画面を先に設計しました。
運用中のホームページにアクセスする3
つの事業を1つのサイトに収めました
9
つの主な提案を描いた
2021年の5つの内、2026年の4つの中
5+
年以上一緒に運営しています
2021 · A NEW NAME
（財）部署処方薬開発事業団
韓国 Drug Development Fund
2011年から続いてきた事業団が2021年1月財団に新たに出発しました。 2021年の最初の提案の最初の文章もこのニュースでした。
- 2011.09 （財）犯罪処分薬開発事業団設立
- 2020.09 コロナ19治療薬・ワクチン新薬開発事業団発足
- 2021.01 Japan Drug Development Fundを設立
02 / WHO COMES HERE 誰が何を見つけよう
四種類の訪問者、
異なる緊急の仕事。
デザインを始める前に、訪問者を4つのクラスに分け、それぞれが最初にやろうとしていることを書きました。重なり合うことが最も多い情報は、最初の画面の先頭を占めています。
製薬・バイオ企業
サポート範囲とプログラム、事業化支援内容を比較します。
課題遂行機関
規定と書式をダウンロードし、よくある質問と教育・行事日程を探します。
メディア・関連機関・国民
事業の成果と報道資料、毎月発行するお知らせを読みます。
FIRST SCREEN PRIORITY
最初の画面に置く順序を先に決めました。
- 01 事業発表 受付期間と進捗状況をまとめて表示
- 02 お知らせ タイトルを1行にまとめて表示
- 03 事業別ショートカット 参加しているビジネスからすぐに出発
- 04 パフォーマンスとパイプライン 数値とグラフにまとめる
- 05 ニュース プレスリリース、ニュース、ギャラリーを集める
03 / BRAND THINKINGロゴの青から
ロゴの青から
出発しました。
正確で落ち着いた実験室の質感の上に、公共機関の信頼をのせる色を見つけました。
CIは財団が保有する原本をそのまま使い、ウェブでは旗のマスを解釈したモチーフを別々に作りました。
新しく描かずに、
ルールで読みました。
Korea Drug Development FundのCIは、水色から濃い青に下がる四角形の上に、カールを積み重ねて右上に上がる旗をのせた形です。私たちは、このCIをWeb上で守る2つの規則として解釈しました。
カーンを積み上げる旗
段階を一つずつ通過する新薬開発のように、情報も順番に積み重ねて配置しました。進行方向は常に左から右です。
明るい青から濃い青へ
明るい青はボタンや発表のように行動を呼ぶところに、濃い藍色はタイトルや背景のように信頼を積むところに書かれています。
- TRUST 国家研究開発事業を担当する機関の信頼
- FULL CYCLE 有効物質から臨床までの全サイクル
- OPEN 産・学・年・病をつなぐ開放型イノベーション
- PUBLIC 誰でも探して読める公共性
04 / COLOR SYSTEM CIから取り出した5色
色ごとに引き受けた仕事を
まず決めました。
青はたくさん使うほど曇ります。だから、5色にそれぞれの役割を分けてくれ、役割の外では使いませんでした。コーラルは画面全体で2％を超えません。
信頼の基盤
ヒーローとパフォーマンス領域の背景。 2026年確定案では、画面の3分の1を占めます。
行動の色
ボタンとリンク、タブのように押すことができる要素に書き込みます。 CIの濃い青からもたらされました。
続く色
グラデーションとグラフで青を明るくします。 CIの上の水色です。
長く読む面
お知らせリストやカードのように長く読んでいる領域の背景。
単一の強調
研究・産業動向のように性格の異なる情報を区分するときだけ惜しみます。
MEASURED COLOR RATIO
2021年と2026年に、最初の画面の色はこんなに変わりました。
2021年の最初の画面は明るい灰色の上に置かれた掲示板に近かった。 2026年には濃い藍色が画面の3分の1を占め、青の比重は7倍以上に増えました。
2021
2026
両方の確定案のメイン画面全体をカラートークン基準に分類して測定しました。
TYPOGRAPHY
最も頻繁に受け取った要求は、「文字をもう少し大きく」でした。
2021年のフィードバックでは、文字サイズに関する要求が何度も繰り返されました。 2026年リニューアルでは、本文を16px以上にして、タイトルと数字の大きさの違いを大きく広げて見やすくしました。
成功した新薬開発、
大韓民国の未来です。
- Display60 / Black
- Section36 / Bold
- Card title24 / Bold
- Lead18 / Medium
- Body16 / Regular
05 / 2021 · FIVE MAIN DRAFTS ヒーローを蹴るまで
5回描いた最初の画面、
主人公が変わりました。
最初の2つの提案は、新しい名前を知らせる大きなイメージで始まりました。 3番目の提案の中でイメージを蹴り、ビジネス発表を最初の画面の主人公にアップロードしました。下画面は当時製作したデザインオリジナルです。
新しい名前を大いに知らせる第一印象
透明な細胞画像を第一画面いっぱいに広げ、名称変更のお知らせをタイトルに上げました。財団の紹介は、水色から青に流れるグラデーションカードに収められました。
最初の印象は明るくなりましたが、発表と通知は画面の下に押されました。
濃い藍色とDNAで描かれたハイテクバイオ
暗い藍色の背景とDNA画像でハイテクバイオの印象を強くしました。お知らせはヒーローのすぐ下に帯状に貼りました。
印象は強くなりましたが、探す情報までの距離はそのままでした。
ヒーローを蹴ったダッシュボード
大きなイメージを取り除き、ビジネス発表を最初の画面で最大のカードに載せました。受付期間と進行状況をカード内ですぐに確認できます。
最初の画面の主人公が画像から発表に変わりました。
メニューの名前から改めました
メニューをお知らせ庭・事業案内・財団ニュース・財団紹介でまとめ、事業団パイプラインと研究動向を第一画面に上げました。
機関内部の言葉の代わりに利用者が書く言葉でメニューを呼び始めました。
事業ごとにドアを別にしました
3つのビジネスをメニューの最初のステップに並べて、展開メニューですべてのサブページを一度に表示しました。 Facebook、YouTube、ニュースレターの購読は一行で集まりました。
利用者は自分が参加する事業からすぐに出発できるようになりました。
06 / FEEDBACK INTO RULES
1つのリクエストが
設計基準になりました。
2021年5月から8月まで、財団との間で送受信された修正依頼文書を再度読みました。リクエストを画面にまとめるのではなく、すべてのページに適用するルールに置き換えました。
7 リクエストが
サイト全体のルールになりました
サイト全体のルールになりました
-
お知らせのタイトルは一行にすべて表示させ、最新動向とサポート課題はリストで見せるように求められました。
メインは、リストをすばやく表示する画面です。
-
事業公告掲示板を新たに作成し、受付開始日と締切日、事業別末頭検索を入れることにしました。
発表は、期間と状態のデータです。締め切りが過ぎると、状態が自動的に「終了」に変わります。
-
ビジョン、目標、支援範囲、推進戦略、推進体系を一ページに順番に盛り込んでほしいという要請でした。
事業紹介は、1ページ内で1つのフローで読み取られます。
-
メニューと本文の文字を少し大きくして、すべてのサブメニューをタブで区切ってほしいという要求でした。
飾るより読みやすさを最初に手に入れます。
-
3つの推進戦略を同じ青い系列の中で異なる色に分けてほしいという要求でした。
同じ系列内で明度で区切ってください。
-
長い沿革の縦長を減らし、時期別に結び、年をつなぐ線が切れないようにしてほしいという要請でした。
長い記録も短い呼吸で読むことができます。
-
すでに終わった犯罪処刑サイクル新薬開発事業は灰色で処理して他の二つの事業と区分してほしいという要請でした。
終了した事業は薄暗くなり、記録は残ります。
07 / THE FULL CYCLE
10年かかる道を
10年かかる道を
一行で読むように
事業紹介ページで最も功を奏した部分は、新薬開発の全サイクルを描いたこの一行でした。どのプログラムがどのステップを助けるか、表より進行方向が先に読まれるようにしました。
-
01 ターゲットの発掘と検証 TARGETTPP
-
有効物質 02 スクリーニング SCREENING
-
先導物質 03 最適化 OPTIMIZATION
-
候補物質 04 非臨床 NON-CLINICALPRE-IND
-
05 臨床試験デザイン CLINICAL DESIGNIRB · IND
-
06 臨床1・2・3相 CLINICAL TRIAL
-
07 商品許可申請 NDA承認
-
08 リリース LAUNCH
有効物質の発掘から臨床2相まで、国家新薬開発事業が支援する区間
08 / PIPELINE 表からグラフへ、グラフから検索へ
同じデータ、
3つの異なる画面。
パイプラインは、財団が最も頻繁に更新するデータです。 2021年には開発段階別表で、2023年には治療分野別の棒グラフで、2026年には数字のまとめと統合検索に画面を変えてきました。
開発段階ごとに熱を分け、課題をカードに積み重ねた。
治療分野ごとに、開発段階とモダリティの分布を1行で比較します。
全体課題数と段階別数を先に見せて、課題名・適応証・ターゲット・遂行機関で一度に探します。
国家新薬開発事業協定の課題 609 個
- Discovery409
- Preclinical127
- Phase 150
- Phase 223
運営中のパイプラインページの公開数値です（2026年10月基準）。
09 / 2026 · RENEWAL 5年後、再描画した最初の画面
ダッシュボードは守り、
順序と印象をもう一度。
5年間、財団の事業は増えました。 SEED創出プラットフォームとCMCインフラ、新薬R&D事業化支援、教育・行事申請まで、初画面が案内すべきところが多くなりました。
2021年に定めた「公告が先に」という原則は守り、成果とパイプラインを数字とグラフで示す方法を4つの方向に探索しました。
-
A2026.05
最初に紹介を読む順序
-
B2026.05
パフォーマンスを最初に示す順序
-
C2026.05
レポートのように読むエディトリアル
左揃えの大きなタイトルと、ホワイトリスト型の発表、ドーナツグラフ、YouTubeまで、4つに分かれたニュースを落ち着いて配置しました。
整頓された印象、代わりに公告の存在感は弱くなりました
提案を直接表示 -
D 2026 確認
最も濃い公告、数字で話す成果
10 / DETAILS 確定案に近い
近づくほど
理由が見えるように。
確定案の各領域は、2021年に定めた規則と2026年に新たに定めた優先順位に沿っています。実際の操作画面をエリア別に分けて紹介します。
進行中の事業公告を濃い藍色カードに載せ、受付期間と進行バッジをつけました。隣には研究者や企業がよく探すショートカットを集めました。
条約課題、技術移転、IND承認などの成果を円形指標で示し、パイプラインは治療群・モダリティ・開発段階の3つの円形グラフに分けました。
プレスリリース、ニュースレター、ギャラリー、YouTubeを同じ高さの列に分けて、希望のニュースをすぐに選ぶことができました。
展開メニューで、すべてのサブページを一度に表示します。終了した事業には「終了」表示をつけて進行中の事業と区別しました。 2021年に定めた規則をそのまま続けていきました。
11 / EVERY PAGEサブページまで、
サブページまで、
同じルールで。
発表リスト、パイプライン、事業紹介、沿革、イベントの申し込みまで
のような見出しとタブ、表のルールに戻りました。
12 / IN YOUR HANDS 移動中に確認する通知
締め切りは
手で確認します。
通知の締め切りを確認することは、移動中にも頻繁に起こります。モバイルでは、サブメニューを水平方向にスライドさせるタブに切り替え、パイプラインは全体の課題数と検索ボックスを1つのカードに集めました。
最初の画面ですぐに見えるビジネス紹介ボタン 水平方向に移動するサブメニュータブ 番号と検索を1つのカードに集めたパイプライン テーブルは水平スクロールで列を保持します
13 / AFTER LAUNCH オープンした翌日から
作成して終了しませんでした。
5年目一緒に直します。
公共機関のホームページは、事業が変わるたびに一緒に変わらなければなりません。オープン後も新しい事業のページを加え、ニュース紙を作り、イベントの申請を受けることまで財団とともに運営しています。
- 2021.08国文ホームページ構築
メインとサブページをデザインし、事業公告掲示板と自動終了機能を作成しました。
- 2021.12アクセス方法を追加
財団と評価場、二つの場所を地図とともに案内しました。
- 2022ニュース紙のデザイン
毎月発行するニュースレターとカードニュースのデザインを引き受けました。
- 2023.02パイプライン画面改編
課題分布を、治療分野と開発段階別の棒グラフで再描画しました。
- 2023.05CMC・イベント申込ページ
CMCインフラ案内と教育・イベント申請ページを追加しました。
- 2023.07Global C&Dサイトリニューアル
海外機関の技術と国内企業をつなぐテクフェアサイトを作り直しました。
- 2023.11SEED創出プラットフォーム
新薬開発SEED創出プラットフォームの国文ホームページを作成しました。
- 2024.08事業紹介改編
変わった事業内容に合わせて国家新薬開発事業紹介ページを修正しました。
- 2026.05メインリニューアル提案
最初の画面の順番と印象を4つの方向に戻りました。
- 2026.10運転中
確定案を運営しながら、教育・行事申請完了案内メールとお知らせ発送まで一緒に管理します。
14 / MEET THE WEBSITE 今すぐ自分で確認してください。
説明した選択肢は
今でも毎日使われています。
公告を確認する研究者からニュースを読む国民まで、
Korea Drug Development Fundのホームページで直接探索してください。
FOR PUBLIC INSTITUTIONS, FOUNDATIONS AND R&D PROGRAMS
情報が複雑になるほど、
情報が複雑になるほど、
最初の画面は単純でなければなりません。
公共機関や財団、研究支援事業のホームページを悩んでいるならば、今持っている資料と利用者の要請から一緒に見てみましょう。
その他のプロジェクト
Korea Drug Development Fund / WEBSITE 2021 · RENEWAL 2026IA · UI/UX Design · Publishing · Development · OperationBLUECANVAS