ロゴファイルを直接見直しました
規定値は#004E97ですが、提供されたPNGで最も使われたブルーは#094E96でした。私たちはファイルを再描画せず、ベクトルソースからWeb用のファイルをエクスポートするときに最終値を確認するためにチェックリストに載せました。
UVDRKブランドのウェブサイトもう一度、
最初の心で
溶けるシリフティングの技術から出発したメディカルエステブランド UVDRKの最初のホームページを設計しました。名前と物語を解釈し、色と動きの規則を確立し、3つの提案の中で方向を検証したプロセスをまとめました。
01 Overview
新しく始まる会社、
新しくない技術
UVDRKは2026年7月に設立されたメディカルエステブランドです。会社はただドアを開けたが、ブランドの根はUltra Vが開拓してきた溶けるシリフティング技術とその始まりを合わせたDr。 Kwon Han-jinの経験にあります。
それでこのホームページは二つを同時に見せなければなりませんでした。長く検証された経験から来る信頼、そして初めて戻って再開するという意志です。
-
01
信頼を誇張せずに
ウルトラコールとシリフティング、RF機器、注入ポンプはすべて医療機器です。効果を大きく言うほどむしろ信頼が削られる分野なので、品格は表現の大きさではなく切除から出なければなりませんでした。
-
02
2つの物語を1つの名前で
Ultra VのヘリテージとDr. Kwon Han-jinの再飛躍は、UVDRKという名前の1つにまとめられています。ただし、個人の経歴と新しい法人の沿革が混ざらないように、叙述の境界を守らなければなりませんでした。
-
03
他の製品を1つの声で
一本の糸からRF機器、スキンブースター、デイリーコスメまで製品ラインごとに性格が異なります。これらの製品を1つのトーンにまとめるためのビジュアルルールが必要でした。
- 23 枚 配信された企画案
- 578 個 製品・ブランド資料ファイル
- 13 個 シリフティング製品ライン
- 5 種 スキンブースターライン
- 18 個 化粧品
- 3 種 ウェブサイトの提案
02 The Name
名前を最初に読んだ
最初に捕まった質問は「この見知らぬ5文字を初めて見る人にどのように読まれるか」でした。
-
UV
Ultra Vのヘリテージ
溶けるシリフティングというカテゴリーを作ってきた技術と経験を受け継ぐという意味です。
-
DR·K
Dr. Kwon Han-jin、そしてまた
溶けるシリフティングの始まりを一緒にした人が自分の名前をかけて再(Re-)始めるという意味を込めました。
-
UVDRK
The beginning, reimagined.
二つの名前が出会い、一つの始まりになります。このサイトのすべてのデザイン決定はこの文から出発しました。
03 Motion Language
ブランドストーリー
実のストランドの一生として
企画案のブランドストーリーは5枚で、核心価値は継承・再跳躍・拡張でまとめられていました。私たちはこれらの文章を溶かす糸が経験する4つの状態に翻訳しました。
-
01 TWIST・継承
複数のストランドがねじれて1つの糸になります
ウルトラVが積み重ねてきた技術と経験を八本の光で描いた。ストランドがねじればするほど、一つの硬い糸になります。
-
02 DISSOLVE ·溶ける糸
私の役割を果たした糸は溶けて消えます
溶けるシリフティングの本質をそのまま動きに移しました。消えるシーンを終わりではなく次のシーンの始まりに演出しました。
-
03EXPAND · 拡張
散乱粒子はより広い領域に広がる
シリフティングでウルトラコール、TRIDERM、スキンブースター、コスメティックに広がる製品ラインを粒子が広がっていく様子で表現しました。
-
04 RETURN · もう一度
粒子は再び1つの円に集まります
円は出発点でありながら完成した形です。最初の提案では、この円の中にロゴが表示され、最初のシーンが終わります。
1番提案のメインに書いた168フレームモーショングラフィックです。映像をひねる代わりにスクロール位置に合わせて一枚ずつ描かれるので、訪問者が話のスピードを決めます。
04 Color
2つの文書が異なる
比率を話すとき
配信されたブランドガイドドラフトはホワイト70、ネイビー20、グレー10を提案し、ビジュアルディレクション文書はネイビー60、ホワイト27、シルバー9、ゴールド4に基づいています。どちらか一方をランダムに選択する代わりに、両方の比率を画面にして比較しました。
余白が広くて軽く、情報がよく読めます。ただし、初めて見るブランドの印象は弱くなり、他の病院や化粧品ブランドと区別しにくくなります。
深く硬い印象を与えます。代わりに、長い文章や表は暗い面で読みにくいので、明るい面を別々に用意する必要があります。
結論は、シーンと情報を分けることでした。ブランドの印象をつくるシーンはネイビーの上に置き、長く読まなければならない紹介とビジョンは明るい面に移して息を休ませました。
今見ているこのページの背景は、ネイビー 0%、明るい面 0% です。
-
ロゴのみ
Logo Blue
#004E97RGB 0, 78, 151 提供ロゴの色です。ランダムに変更しません。 -
ロゴ補助
Logo Gray
#586164RGB 88, 97, 100 ロゴのシンボルと文字に一緒に書かれたグレー。 -
メイン
Navy
#0E1B2BRGB 14, 27, 43 ブランドを示すシーンの背景色です。 -
背景
Deep Navy
#08121ERGB 8, 18, 30 モーションと写真が置かれる最も深い背景です。 -
補助
Silver
#C9CFD6RGB 201, 207, 214 金属と光に似た補助色です。 -
テキスト
Charcoal
#2B333DRGB 43, 51, 61 明るい面の上の本文の文字色です。 -
ポイント
Warm Gold
#B89A64RGB 184, 154, 100 行1行、1点のみ書き込みます。 -
情報
White
#FFFFFFRGB 255, 255, 255 長く読まなければならない情報が置かれる面です。
DO
ゴールドは、タイトルの下に1行、強調する1つのポイントにのみ書き込みます。
DON’T
ゴールドの枠線とボックスを繰り返すと、豪華さよりも装飾が最初に見えます。
05 Typography
英文はロゴの結び、
国文は読みやすさに従いました
- UVDRKSemiBold 600 · ワードマーク
- MEDICAL DEVICEMedium 500・ラベル
- ULTRACOLLight 300 · 製品名
また、初心で
IBM Plex Sans KR Light・ビジュアル・ディレクションを推奨
また、初心で
Pretendard・Web本文
ビジュアル・ディレクションは英語にMontserratを、国文にIBM Plex Sans KRを勧め、Pretendardを代わりに置いた。 Webではハングルの太さ段階が広いPretendardを本文に書いて、2番提案では画面に書く文字だけ選んだサブセットWebフォントを作って容量を減らしました。
06 Layout
強い画像、
短いコピー、1、2行、
空白の余白
- 1 強い画像
- 1–2 行の短いコピー
- 30〜40％ 空白の余白
ビジュアルディレクションのレイアウト式は、SNS投稿用に作成したものでした。私たちはこの式をウェブのセクション単位で再適用しました。 1画面には1つのシーンだけを置き、シーンを変えることはスクロールに任せました。
ビジュアルディレクションが禁止した5つのことと私たちの答え
-
金枠とボックスの繰り返しゴールドは、タイトルの下の1行と強調する1つのポイントにのみ書きました。
-
偽の医療機器のイメージウルトラコールバイアルからTRIDERM機器まで、製品はすべて実際の撮影を書いています。
-
過度の3Dレンダリング、肌のクローズアップ男足光と金属、ガラス、曲線などの素材で雰囲気を作りました。 3Dは2番提案の中で糸の形だけをテストしました。
-
INNOVATION、PRECISIONなどの英単語のリスト意味のある文章一つを大きく使う方を選びました。
-
EST。 198Xのような建てられた年確認された沿革だけ書いて、個人の経歴と法人の沿革を分けて書きました。
07 Material
光、金属、ガラス、曲線
写真やグラフィックに使う素材を先に決めました。華やかな装飾の代わりに光の当たる仕方と材質の違いで高級感を作ることにしました。
- 金属 精密さに似た曲面。ボタンと仕切りのシルバートーンがここから出ました。
- ガラス 透明な質感は、スキンブースターシーンの基礎となりました。
- ゴールドワイヤ ゴールドは、このような細い線だけで登場します。
- 半透明版 ロゴと文字は写真の上ではなく、この落ち着いた面に置きます。
- 細い糸 溶ける糸の記憶です。モーショングラフィックの最初のシーンがこのラインから始まります。
08 Exploration
シーンのために描いた画像
メインビジュアルとシーントランジションに書き込む画像を何度も再作成しました。採択したのも、蹴ったのもすべて決定の根拠となりました。
-
01初期のメイン
シルバーフィラメント
何百本もの銀色の繊維が一つの輪をなす。シリフティングのヘリテージを比喩した最初のイメージです。
-
02最初の提案を採用
光の糸
シリフティングセクションとブランドストーリーの最初の章を支える背景。
-
03最初の提案を採用
シルバーカーブ
ブランド紹介段落を支える明るい転換シーンです。
-
04最初の提案を採用
夜明けの地平線
「そして、再起動します」シーンに書いた夜明けです。
-
05最初の提案を採用
デバイスステージ
TRIDERMが上がる舞台です。装置は実際の写真をアップロードしました。
-
06最初の提案を採用
ブースターガラス
スキンブースターの透明な質感の背景。
-
07最初の提案を採用
ゴールドウェーブ
イデベノンコスメレールの床の光。ゴールドは光だけで残しました。
-
08交換
ガラスの花
ディテールが細かくシャープで製品よりも絵が先に見えました。
-
09交換
ガラスリボン
花の代わりに柔らかい曲線に変えてみました。 2番提案のグリーントーンを一緒にテストしました。
-
10除外
モクレン
暖かくて美しかったが医療ブランドの切除とは距離がありました。レビュー後、実際の商品写真に変更しました。
09 Structure
メニューとメインカードが同じように話すように
初めて受け取った企画案では、GNBの製品メニューとメインの製品カードが異なる基準に分かれていました。訪問者がメニューから見た名前をメインに戻すことができるように、見積もりを送信するときに2つの基準を満たすことを最初に提案しました。その後、装備2種が加わり、メインカード6枚と製品メニュー6枚が同じ順にまとめられました。
UVDRK
-
ブランドストーリー
- Brand Story
- Vision & Mission
- Core Value
- History
- CEO
-
製品紹介
- 1ULTRACOL
- 2Thread Lifting
- 3TRIDERM
- 4Air Shine
- 5Skin Booster
- 6Cosmetics
-
ニュース・学会
- プレスリリース
- 学会スケジュール
- プロモーション
-
Contact
- 販売店へのお問い合わせ
- スキンブースターお問い合わせ
- デモ申請
- B2Bお問い合わせ
- その他のお問い合わせ
-
Recruit
- 採用案内
- 募集ポジション
メインカード
- 1ウルトラコール
- 2シリフティング
- 3TRIDERM
- 4Air Shine
- 5スキンブースター
- 6コスメティック
13本の製品ラインを素材として探すようにしました
実カタログを照合し、製品ラインと素材をデータでまとめました。 1番と2番の両方の提案では、クリエイティブフィルタで目的の製品ラインを見つけることができます。自分でタップしてみてください。
13製品ライン
- MONOPDO · PCL · PLCL
- TORNADOPDO · PCL · PLCL
- DOUBLE TWISTPDO
- SUPER TORNADOPDO
- INCHPDO
- COGPDO · PCL · PLCL
- MOLDING COGPDO
- EMBOSS MOLDPDO
- SUPER EMBOSS MOLDPDO · PCL
- DOUBLE MOLDPDO · PCL
- HIKOPDO · PCL
- OCTO TWISTPDO · PCL
- DOUBLE COGPDO
10 Design Drafts
3つの提案、
3つの質問
資料を受け取った翌日、同じ原稿などの製品データで3つの方向を作成しました。提案ごとに1つの質問をつかみ、答えを見つけました。
初期ナビゲーション
Silver Filamentガイドをそのまま移動するとどうなりますか？
ビジュアルディレクションの色とフォントをそのまま適用した最初の中です。銀色のフィラメントイメージでメインを開き、ブランドストーリーはスクロールに沿って回転するリングモーションで、製品は水平に流れるコレクションとして見せてくれました。この中の構造は以後2回提案の基礎となりました。
- #08121E
- #F2F1EC
- #C9CFD6
- #B89A64
- Canvas リングモーション
- 水平スクロールコレクション
- TRIDERMモードタブ
- 問い合わせを保存
1番提案
Light Threadブランドのストーリーを一回のスクロールで表示できますか？
168フレームモーショングラフィックでメインを開き、名前の意味と6製品ライン、5枚のブランドストーリーを1ページ内で順番に広げました。ビジュアルディレクションのネイビー・シルバー・ゴールド比率に最も忠実な中です。オリジナルのロゴは白い背景の上にのみ置かれました。
- #08121E
- #0E1B2B
- #C9CFD6
- #B89A64
- #FFFFFF
- スクロール再生モーショングラフィック
- 名前解析シーン
- 13の製品ラインで絞り込む
- TRIDERMステージ
- 水平タイムライン
2番提案
Next Beginningルールの境界を広げるとどうなるでしょうか？
リアルタイム3Dで描かれたクロムフィラメントは、スクロールに従って回転して割れます。色は深いグリーンとクリームに変えて見て、製品フィルム6本とRFモードコントローラ、編集デザイン型沿革を加えました。ガイドが警戒した3Dに近づいているので、3Dは製品ではなく糸の形にのみ書いています。
- #10231E
- #1B3A31
- #EEF0E6
- #D7F08A
- #FFFFFF
- WebGL クロム造形
- 製品フィルム6編
- RFモードコントローラ
- 編集可能なレイアウト
同じ文章、別の第一印象
ハンドルを左右に動かして、1番提案と2番提案の最初の画面を比較してみてください。
11 Details
小さなシーンが信頼を作ります
-
THE NAME The beginning, reimagined.
名前の解釈
文字が順番に輝き、UVとDR・Kの意味を説明します。
-
13 製品ライン
クリエイティブフィルタを使用して、PDO、PCL、PLCL製品ラインを直接見つけます。
-
TRIDERMステージ
装置がステージの上に上がり、3つのモードが順番に表示されます。
-
RFモードコントローラ
クリックとスクロールが同じモードを指すようにリンクしました。
-
製品フィルム
選んだ映像だけをダウンロードし、画面外に出ると再生を停止します。
-
水平タイムライン
個人のキャリアと2026年に法人設立を区別して示しています。
12 Devices
どの画面でも同じブランドで
320pxから1440pxまでメイン画面幅ごとに直接確認しました。高さの低い画面では固定演出を解いて自然に流れ、動きの低減をオンにした訪問者には静止画として同じ内容を見せます。
13 Guardrails
ブランドを守るためにやっていないこと
メディカルエステブランドのホームページは、見事なものほど間違っていないことが重要です。提案段階から次の原則を守った。
まだ決めていないこと
- 暗い背景に書く反転ロゴファイル
- Webフォントライセンス確認
- お問い合わせ受付先と個人情報同意文
- シリフティング製品ライン別詳細規格表
2番提案の暗いヘッダーでは、ロゴを白に変えてテストしました。承認された反転ロゴを受け取ったら、そのファイルに置き換えます。
-
確定していない製品名は書きませんでした
変わる予定の製品名は確定するまで今書く名前で表記しました。名前が決まったら、データを1つだけ変更すればよいようにしました。
-
未確認の認証は表示されませんでした
認証フレーズとバッジは現在有効であることを確認されたものだけを書くことにし、確認前の項目は画面から差し引いたものです。
-
資料が来る前には公開しなかった
紹介資料が確定していない製品は「準備中」とし、性能説明を載せませんでした。
-
個人のキャリアと会社の歴史を分けました
沿革はDr。 Kwon Han-jinのキャリアと2026年7月にUVDRK設立を区別して述べました。
-
投稿を作成していません
ニュースと採用発表は実際の投稿で記入する場所だけを作成し、画面構成を示す例示カードには「例投稿」の表示をつけました。
-
商品画像は実際の撮影のみを書いています
ウルトラコールバイアルからTRIDERM機器、コスメティックまで、すべての商品はお届けされた撮影本です。
-
効能をあまり言わなかった
スキンブースターとコスメティックは主要成分のみ紹介し、効能と機能性表現は入れませんでした。
14 Process
お問い合わせから提案まで
-
最初のお問い合わせと企画レビュー
企画案とリファレンスを検討し、日程と見積もりを送りました。メニューとメインカードの基準を合わせようという提案も一緒に盛り込んだ。
-
内部確定と資料配信
企画案23章とロゴオリジナル、ブランドガイドドラフト、ビジュアルディレクション文書、製品資料578個のファイルを受け取りました。
-
データ分析と3つの提案
両ブランド文書の違いと確定が必要な項目をまとめ、初期探索案と1番・2番提案を作成しました。
-
レビューコメントを反映
2番提案のライム色の帯をネイビートランジションに変え、モクレンのイメージを実際の製品写真に置き換えました。プロダクトフィルムの6本は1つのステージに集まった。
-
提案の確定と開発
確定した提案をもとに製品詳細ページとニュース・問い合わせ・採用管理機能を開発してオープンします。
The beginning, reimagined.
ブランドの最初のホームページは、そのブランドが何を守るのかを示す最初の文書です。
BlueCanvasは、画面を描く前に最初に原稿と資料を読みます。新しいブランドの最初のホームページをご用意していれば、今持っている資料から一緒にまとめます。
- Client
- UVDRK Co., Ltd.
- Brand assets
- ロゴ、ブランドガイドドラフト、ビジュアルディレクション：UVDRK提供
- Website
- 企画・情報構造、UIデザイン、モーショングラフィック、フロントエンド実装: BlueCanvas
- Stack
- HTML · CSS · JavaScript, GSAP, Three.js, Canvas, Vite
