CIは赤に変わりましたが、画面にはオレンジが残っていました。
ホームページを初めて作成したとき、HLBの色はオレンジでした。グループCIがレッドに変わった後、ロゴは交換しましたが、サブページのタブとハイライトには以前オレンジがそのまま残っていました。ある画面の中で二つの色が違う時期の会社を話していました。
グループの赤に基づいて色の位置を変更するBLUECANVAS SELECTED WORKHLB THERAPEUTICS · BIO & PHARMA
HLB THERAPEUTICS · WEBSITE RENEWAL PROPOSAL
患者に 到達するまで
HLB TherapeuticsWebサイトリニューアル提案
ブランド解析・情報構造・UIデザイン・インタラクション
01 / OVERVIEW プロジェクトの概要
希少疾患新薬と医薬品コールドチェーン、
2つの事業をした文章で。
HLB Therapeuticsは、処方薬のない希少疾患のために新薬を開発し、温度に敏感なバイオ医薬品を全国に流通する会社です。眼科疾患治療剤RGN-259と交毛細胞腫治療剤OKN-007を開発しており、全国7カ所のセンターで医薬品コールドチェーンを運営しています。
BlueCanvasが今のHLB Therapeuticsホームページを作成した後、会社の名前とCIが変わり、コールドチェーン事業は全国単位で大きくなりました。会社が育っただけにホームページも再設計する時となって報告リニューアル方向を提案しました。このページはその提案とプロセスをまとめた記録です。
運用中のHLB Therapeuticsホームページ- #バイオ上場
- #レア疾患新薬
- ＃医薬品コールドチェーン
- #IR情報構造
- #パイプラインビジュアライゼーション
- #ブランド体験
- #デザインシステム
- #インタラクション
- #リアクション
会社が歩いた数字から出発しました。
2000
会社を設立し
2021年にHLB Therapeuticsにミッションを変更
2010
コスダックに上場した年
HLBグループ系バイオ上場会社
2件
米国FDAレア医薬品指定
RGN-259・OKN-007
7か所
全国コールドチェーンセンター
銅本社から済州まで
数字ソース：HLB Therapeuticsホームページ公開資料（2026年10月確認）
02 / THE QUESTION
新薬 開発する 会社と ワクチン 運ぶ 会社。 初めて オン 人へ HLB Therapeuticsは 二つ 中 どの 向かい 見えますか？ 二つ ビジネス ハン 会社の 話で 聞こえる ハン 文章 必要でした。
ANALYSIS
今のホームページで
今のホームページで
発見した3つの
私たちが作ったホームページを再び初めて来た人の目で読みました。会社は数年の間大きく変わりましたが、画面はその変化に追いついていませんでした。
2つのビジネスが他の会社のように見えました。
パイプラインは暗いDNAイメージの上で、コールドチェーンは物流センター表と地図の中で別々に紹介されていました。新薬開発を見守る投資家とワクチン流通を任せようとする製薬会社が同じ会社の同じ原則を読みにくかった。
二つの事業を「届くまで」という一文で結ぶ重要なニュースが同じ重さでたまっていました。
臨床進行のお知らせと株主懇談会案内、認証ニュースが同じ形のリストにつながりました。株主とパートナー、コールドチェーンの顧客会社がそれぞれに必要なニュースを選んで読みにくかった。
ニュースごとにプログラムとビジネスのタグを付けて選んで読んでもらうホームページを開く
あなたの人を最初に描きました。
バイオ上場社のホームページには思ったより多様な人がやってきます。訪問者を年齢や職業ではなく、ホームページを開いた理由で分けました。理由が違うと一番最初に見なければならない画面も変わるからです。
今回の開示は何を意味するか？
- 最近の開示とIR資料
- パイプライン進行状況
- 株主案内
提案では、最初の画面の最近の投稿バンド
この物質の根拠を確認できますか？
- 重要な物質の説明
- 臨床情報と論文
- 協力お問い合わせ窓口
提案では、プログラム別の研究資料のリスト
私たちのワクチンを預けてもいいですか？
- 温度基準および管理システム
- センターの場所と施設
- 見積もり
提案では、温度スケールとセンターマップ
この病気のための薬は開発されていますか？
- 病気を簡単な言葉で
- 開発中のプログラム
- 臨床情報リンク
提案では、疾患別の簡単な説明カード
03 / BRAND THINKING
両事業は
両事業は
同じことをしていました。
- 01・新薬開発時間を守ります
ライセンスの導入から臨床と許可まで、ある物質が患者に届くまでには長い時間がかかります。新薬の開発は、その時間を最後まで耐えることです。
- 02・医薬品コールドチェーン温度を保ちます
センターから病院まで、バイオ医薬品は所定の温度を超えてはいけません。コールドチェーンはその温度を最後まで守る事です。
- 03・HLB Therapeuticsそして人に触れる
守った時間と気温は結局一人に届きます。経営ビジョンHuman Life Betterが語るより良い生活は、その瞬間に始まります。
BRAND STATEMENT
Human Life Betterを
私たちの言葉に移すと、
「患者に届くまで」です。
経営ビジョン「Human Life Better」から 提案文「患者に届くまで」へ
正確に言います。
誇張された修飾子の代わりにステップと日付で話します。バイオ上場会社のホームページでは、ある文章が投資判断に使われることがあるからです。
もう一度解放します。
病気や物質の名前の横には、患者と家族が読める説明をもう一度付けます。専門用語をクリアせずにそばに簡単な言葉を残します。
同じ形式で通知します。
臨床ニュースと開示は常に同じ順序と形で表示されます。形式が同じでなければ、過去の投稿と新しい投稿を並べて比較できます。
VISUAL PRINCIPLE · CLARITY
ぼやけたものを
ぼやけたものを
鮮やかに。
- 01難しい科学用語は簡単な言葉でもう一度解きます。
- 02開発段階は、常に同じ形状の線で示されています。
- 03投資家の言語と患者の言語を一緒に準備します。
RGN-259は角膜疾患のために開発中の点眼薬です。目のための薬を開発する会社のホームページなら何よりも鮮明に読まなければならないと思いました。
PHOTOGRAPHY DIRECTION
人の表情の代わりに、
人の表情の代わりに、
光と物質と言います。
今の最初の画面は、点眼薬を置くポートレート写真の一枚でした。希少疾患を扱う会社が見知らぬモデルの表情を前にするより、研究室の光と物質、温度を守る現場で話を伝えるように写真の基準を立てました。
- DO手と道具、光と物質
- DO現場の冷たい光と整頓された構図
- DON'T誇張された表情のストックモデル
- DON'T疾患部位をそのまま明らかにする写真
04 / COLOR SYSTEMグループのレッドはそのまま、
グループのレッドはそのまま、
書く席は一滴で。
HLB Therapeuticsの赤はグループが一緒に書くCIの色です。赤を変えずに画面を塗る色ではなく、一滴の場所にだけ置くことにしました。残りは深いインクと冷たい氷の色を受け取ります。
HLB Red#EF3E36RGB 239 62 54
到着の兆候
グループCI赤。現在のステップと到着地点のように、最初に見なければならない場所にのみ書き込みます。
- 白い文字
- 3.9:1 大きな文字
- インクの文字
- 4.8:1 AA
Text Red#C42B22RGB 196 43 34
読まれる赤
白い背景の上から赤で文字やリンクを書く必要があるときに書く、一段階深い赤です。
- 白い文字
- 5.7:1 AA
- インクの文字
- 3.3:1 大きな文字
Ink#0B1220RGB 11 18 32
科学の基礎
本文の文字と暗いシーンの背景。黒より青いオーラがあり、氷色と自然につながります。
- 白い文字
- 18.7:1 AAA
- インクの文字
- 1.0:1 使用しない
Frost#9CC3D5RGB 156 195 213
冷たい補助
暗い背景上の補助文字と線、温度グラフに書き込みます。
- 白い文字
- 1.9:1 使用しない
- インクの文字
- 10.0:1 AAA
Ice#EAF2F5RGB 234 242 245
日当たりの良い綿
広い明るい面とカードに書いて、画面に冷たい余白を作ります。
- 白い文字
- 1.1:1 使用しない
- インクの文字
- 16.5:1 AAA
Paper#F7F9FARGB 247 249 250
基本
純白より目が楽な基本の基礎です。写真とカードがその上に置かれます。
- 白い文字
- 1.1:1 使用しない
- インクの文字
- 17.7:1 AAA
赤は2パーセント、
最も重要な1つのみ。
ある画面で、背景と文字が大部分を占め、氷色は広い面を、霜色は線と補助情報を引き受けます。赤は、現在の段階、本社の場所、基準外の温度など、その画面で最初に見なければならない場所にのみ配置されます。
白い背景の上のCIレッドは明度コントラストが3.9：1なので、小さな文字には書きません。文字が赤でなければならない場合は、コントラスト5.6：1のText Redに置き換えてください。
TRY IT・温度の色
温度にも色を決めました。
コールドチェーン画面では、温度ごとに使う色をあらかじめ決めています。冷たいほど深い霜色になり、冷蔵バイオ医薬品の目安である2～8℃は氷色帯で表示します。基準外の瞬間にのみ赤が点灯します。
5℃冷蔵基準2～8℃・正常
TYPOGRAPHY 3つの声
患者に触れるまで
韓国語の声
タイトルから本文まで、韓国語はPretendardの家族にまとめました。太字は字間を狭くしっかりし、本文は行間1.75で快適に書きます。
RGN-259
プログラム名の声
広く広がる英文はHLBワードマークの幾何学的な文字と合い、大画面でプログラム名をはっきりと立てます。
2026.10.12
2–8℃ · Phase 3
データの声
日付とステップ、温度のように比較する必要がある数字は、固定幅のフォントに合わせます。数字の桁が同じでなければ、テーブルをすばやく読むことができます。
- Display96 / 800 / -0.06em
- Heading56 / 800 / -0.05em
- Title28 / 700
- Body 18 / 400 · 行間1.75
- Data15 / 500 · Mono · tabular
05 / GRAPHIC SYSTEMLINE & DROP
1つのラインと1つのドロップで
すべてのフローを描画します。
行は時間とルートを、ドロップは到着と今を意味します。二つの図形だけでパイプラインとコールドチェーンパス、沿革と公示リストを描き、どの画面でも同じ会社に読まれるようにしました。
06 / DESIGN DIRECTIONS のようなスケルトン、4つの表情
1つの正解を描く前に、
4つの可能性を展開しました。
同じ事実と同じ情報構造から出発しても、何を先に見せてくれるかによって、ホームページの性格は大きく異なります。 2つの事業を結ぶ文章、患者のための科学、投資家のための数字、コールドチェーンの温度という4方向にメインページを最後まで描いてみました。
下の画面は実際に製作した提案です。スクロールすると、各提案のメインページが上から下に移動します。
STRUCTURE FIRST
色を塗る前に、灰色の箱でスケルトンを最初に合わせました。ハンドルを動かすと、同じ画面のスケルトンと完成した本を比較できます。
最終提案
Until It Reaches届くまで
二つの事業を「時間を守る事」と「温度を守る事」で結び、二つの線が出会う末に赤い滴一つを置きました。暗い最初の画面から明るい本文に進み、会社の物語をじっくり広げます。
- 睡眠の上に赤い滴と一行の線で開く最初の画面
- 現在のステップをドロップで表示するパイプラインボード
- 銅本社から全国につながるコールドチェーン地図
Pretendard ExtraBold · Archivo · Plex Mono
ナビゲーション提案
Clear Science鮮明な科学
患者や家族、医療スタッフが病気や物質を理解するように科学を簡単な言葉で解き明かした方向です。大きな明るいタイトルと明るいレンズの写真が説明するように話します。
- レンズのように光を集める水滴で開く最初の画面
- 病気を簡単な言葉で説明する3枚のカード
- 43点で示すThymosin beta 4
Noto Serif KR · Pretendard
ナビゲーション提案
Investor Desk数字で話す
株主とパートナーが最初に探す開示とパイプラインを最初の画面に集めました。暗いダッシュボードの上では、日付とステップが固定幅の数字でソートされています。
- パイプライン・開示・核心数字を一画面に集めたダッシュボード
- 2000年から続いた沿革軸
- License-inからLicense-outまでのビジネスモデル
Archivo Expanded · IBM Plex Mono
ナビゲーション提案
Cold Chain温度を守る
会社を温度で紹介する方向です。巨大な「2～8℃」と霜の結晶写真がコールドチェーンの正確さをまず示しています。
- 2～8℃を大きく立てた最初の画面
- -70℃から常温まで続く温度目盛
- 全国七ヶ所のセンターと十二段階の流通過程
Archivo Black · Pretendard · Plex Mono
DECISION 何を基準に選びましたか？
最も豪華な提案より
2つのビジネスを一緒に話す提案を。
6つの基準で4つの提案を一緒に評価しました。最も重い基準は、新薬の開発とコールドチェーンをある会社の物語で読むことにするかでした。一方の事業だけを前面に出した提案は、他方の訪問者を見逃すからです。
評価基準A・触れるまでB・鮮明な科学C・数字で話すD・温度を守る
グループCIとの調和
2つの事業を1社に
投資家の情報アクセス
患者・医療陣の理解
コンテンツの運営と拡張
他のバイオ企業との差別性
B・鮮明な科学
病気を簡単な言葉で説明するカード
C・数字で話す
開示ショートカットと固定幅数
D・温度を守る
温度スケールとセンターマップ
A・届くまで最終提案
採用していない提案のメリットは捨てず、A案の詳細ページに移しました。
- 01 もう一度読む 運営しているホームページと公開資料を見る
- 02 分割 訪問の理由で4人を定義する
- 03 構築 2つのビジネスを結ぶ文章を探す
- 04 描画 メインページの提案4つの
- 05 均等 6つの基準で一緒に評価
- 06 トリム パイプライン・コールドチェーン画面とモバイル
07 / PIPELINE 同じデータ、2つの言語
投資家には段階を、
患者には疾患をまず。
パイプラインは同じデータで2つの説明を用意しました。投資家とパートナーは開発段階と指定状況を最初に見て、患者と家族はどの病気のための薬であるかを読んでいます。下の画面のボタンで両方の説明を置き換えることができます。
開発中のプログラム
提案画面
RGN-259Thymosin beta 4 点眼薬
神経栄養性角膜炎NK眼科・SEER・米国FDAレア医薬品の指定
角膜傷がよくない希少疾患 角膜の感覚が減り、小さな傷も簡単に治らずに繰り返される退行性疾患です。 RGN-259はこの疾患のために開発中の点眼薬です。
臨床三相・認可を受ける前、多くの患者から効果と安全性を確認する段階です。
RGN-259Thymosin beta 4 点眼薬
眼球乾燥症DED眼科・ARISE
涙液が少なくなったり、乾いたりする病気 涙液の量や質が少なくなったり、目の表面が傷つき、乾燥感やほつれが発生する病気です。
臨床三相・認可を受ける前、多くの患者から効果と安全性を確認する段階です。
OKN-007Disufenton sodium
膠芽腫・新規診断GBM脳腫瘍・研究者臨床・米国FDAレア医薬品の指定
新しく診断された膠芽腫 脳腫瘍の中で最も悪性度が高い腫瘍です。放射線療法、テモゾロミドとの併用方法をアメリカの研究者の臨床で確認しています。
臨床二相・患者から効果を見て適切な用量を探すステップです。
OKN-007Disufenton sodium
膠芽腫・再発GBM脳腫瘍・経口臨床
再発した膠芽腫再発患者を対象に食べる薬の形で臨床を進めています。
臨床1相・安全性を中心に確認する最初の臨床段階です。
開発段階は、2026年10月にHLB Therapeuticsのホームページに公開された進行状況を移したものです。
CORE SUBSTANCE43個のアミノ酸からなる
43個のアミノ酸からなる
小さなタンパク質
RGN-259の中心物質であるThymosin beta 4は私達の体のほとんどすべてのティッシュの小さい蛋白質です。詳細ページでは、この説明を数字と点で最初に示し、研究資料はその下に置きます。
08 / COLD CHAIN
センターから病院まで、
センターから病院まで、
温度はそのまま。
コールドチェーンは見えないことを見せなければならない事業です。全国7か所のセンターを地図上に線でつなぎ、輸送中の温度を基準範囲とともに示す画面を提案しました。
- 首都圏 銅本社と利川大型冷蔵センターから出発します。
- 永南圏 大邱と釜山のDepot、金海の永南センターにつながります。
- 湖南・済州 光州デポと済州直営センターまで同じ基準で管理します。
12段階の仕事を
一行の線に。
入庫検収から配送完了確認まで、医薬品1箱が通る12段階を1本のラインの上に上げました。お客様は、今どの段階を通過しているかを一目で確認し、段階ごとに守らなければならない管理基準を一緒に読むことができます。
- 01 入庫商品の確認
- 02 SKU分類
- 03 在庫登録
- 04 専用スペース適正
- 05 出荷発注書の受付
- 06 システムアップロード
- 07 配車システムのアップロード
- 08 出荷書類の出力
- 09 ピッキング・パッキング
- 10 分類の積み込み
- 11 出荷
- 12 配送完了確認
- 医薬品専用の保管 クライアント固有のスペースと超低温ワクチンの保管
- KGSP設備 セキュリティ、消防、防虫、緊急発電設備
- Validation 保管室、輸送容器、車両、KOLAS剣校正
- TMS · WMS 配送と倉庫を結ぶデジタル管理
- 偶発状況の対応 対策委員会と状況別対応マニュアル
- 職務教育・文書管理 KGSP職務教育、SOPとデータの整合性
09 / INVESTOR RELATIONS 開示を待っている人のために
ニュースの種類が違っても、
形式はいつも同じです。
バイオ上場会社のホームページで最も頻繁に開かれるのは投資情報です。開示とIR資料、株主案内を第一画面の一行ですぐに開くことができるようにしました。
臨床に関するニュースは、プログラム、適応症、段階、一文の要約、原文開示の順序を守るカード形式で定められた。投稿ごとに同じ形式であれば、過去の投稿と新しい投稿を並べて比較できます。
最近の開示 提案画面
- 企業説明会（IR）開催 開示
- 証券発行結果（自律開示） 開示
- コールドチェーンの品質と環境管理システムの国際標準認証 プレスリリース
- HLBグループ統合株主懇談会開催ガイド お知らせ
開示 IR資料室 株主ガイド 支配構造
10 / MOBILE 手の中でも切れない線
小さな画面でも
線は続きます。
開示を確認する株主も、センターの場所を探すお客様も携帯でホームページを初めて開くことが多いです。小さな画面では最近のニュースを最初の画面の下に直接置き、パイプラインは水平に渡してみました。
- 最初の画面のすぐ下の最近の開示
- 水平に渡すパイプラインステップ
- 地図の代わりにリストに変わるセンター案内
- 親指が届く場所のお問い合わせボタン
DESIGN SYSTEM同じ線からの
同じ線からの
部品
ボタンとタグ、ステップバーと温度チップまで。担当者が変わっても同じ画面を作れるように部品単位でまとめました。
YOUR SCIENCE, SEEN CLEARLY.
あなたのスキルは
あなたのスキルは
誰に届くべきですかですか？
バイオ・製薬企業のホームページは投資家とパートナー、患者と採用志願者が一緒に読んでいるところです。
- Client
- HLB Therapeutics
- Scope
- リサーチ、ブランド体験戦略、情報構造、UIデザイン、インタラクションプロトタイプ
- Brand
- CI：HLBグループ・解析とWeb適用：BlueCanvas
- Status
- リニューアル提案（最終未採用）・運営中のホームページ制作
その他のプロジェクト
-
公共機関
Korea Drug Development Fund
利用者分析とCIの解釈、9つのメイン案、パイプラインの可視化までを収めた、公共機関Webサイトの構築・リニューアルのプロセスです。
-
バイオ・公共
KDDF Partnering
バイオパートナリングプラットフォームの制作プロセスです。パートナーと参加企業の役割設計、企業ディレクトリと拡張チャット、30分単位のミーティング申請と自動スケジュール、管理者による一括マッチングまで収めています。
-
財団・非営利
Purme Foundation
非営利財団のWebサイトリニューアル提案です。シンボルの3本の木から出発し、ブルーと新芽のライムのカラー、アクセシビリティの基準と4つの案まで収めています。