HIGHTECH POLYMER
Hitech Polymerの英語名はHIGHTECH POLYMERです。今ホームページ会社紹介には「High Quality in HIGHTECH POLYMER」という文が書かれています。新しいホームページを描く前に、この名前が何を言っているのかをもう一度読んでいました。
HIGHTECH POLYMER · Hitech PolymerWEBSITE RENEWAL PROPOSAL
見えないもの 見えない
Hitech PolymerWebサイトリニューアル提案
Matter in Motion · Polymer Scroll Film、2方向
HIGHTECH POLYMER · CASE STUDYHitech PolymerWebサイトリニューアル提案
スクロールすると、散乱点が続きます
POLY · MERポリマーは、多くの部分が続いたことという意味です
小さい分子が続いて一つの鎖になります
A・MATTER IN MOTION鎖は光が通過する結び目となり
可能性は、素材から。
B · POLYMER SCROLL FILM結び目が解放され、ネット構造になり、
見えない構造が製品のパフォーマンスを決定します
01 / OVERVIEWプロジェクト概要
ドイツとアメリカの素材を
国内現場につなぐ会社
Hitech Polymerは韓国BASF(株)の代理店であり、米国Shakespeareの韓国Representativeです。メラミンフォームBasotect W、微細孔ポリウレタンエラストマーCellasto、熱可塑性ポリウレタンElastollan、挑戦士を国内メーカーに供給し、ドイツFAIST ChemTecの騒音防止パッドとSynwerのパッシブハウス用建築材料も取り扱っています。
今のホームページはフッターにcopyright 2015が書かれており、2016年に投稿した写真がそのまま残っています。 BlueCanvasは、新しいホームページを提案しながら、実際にスクロールして表示できる2つの提案Matter in MotionとPolymer Scroll Filmを作成しました。このページはその提案を準備し、悩んだプロセスをまとめた記録です。
- 4 か所 グローバルサプライヤー ドイツのBASF · FAIST ChemTec · Synwerと米国のShakespeare
- 6 種核材料 Basotect W · Cellasto · Elastollan · 挑戦者 · 騒音防止パッド · 建築材料
- 28 種 Elastollanグレード 今ホームページに書かれた7系列の熱可塑性ポリウレタングレード
- 200 枚 Bフィルムフレーム 高分子鎖から挑戦者までスクロールする3Dシーン
02 / CHALLENGE出発点
- 1ロゴの場所には、イメージなしでテーマの基本フォントで書いた「Hitech Polymer」の文字だけがあります。会社を調べるカバーは別にありません。
- 2最初の画面の文章「持続成長に向かって走るHitech Polymer」だけでは、同社が何を供給しているのかわかりません。
- 3素材 4つは「ケミカル分野」の下に「Basotect W/BASF（ドイツ）」のように製品名とサプライヤーに分けられており、どの産業に使われるかはページを一つずつ開かなければなりません。
- 4フーターにはcopyright 2015が書かれており、写真は2016年7月に投稿したままです。
FOUR QUESTIONS
リニューアルは
4つの質問で始まりました
今ホームページには素材ごとに詳細な説明と物性表が既にあります。ただ、その情報が製品ページの奥深くに入っていて、最初の画面では会社がすることがよく見えませんでした。
- Q1何を供給している会社なのか、最初の画面に見えますか？
今の最初の画面には「持続成長に向かって走るHitech Polymer」という文だけがあります。どちらの提案も最初の文章を素材の物語に変えました。 A案は「可能性は、素材から。」、B案は「見えない構造が製品の性能を決めます」です。
- Q2製品の中に隠れた素材をどのように見せますか？
A内は光が通過する素材の断片を大きく示し、B内は顕微鏡に入るように分子構造を示します。同じ問題を一つは印象に、一つは構造に解決しました。
- Q3サプライヤーネット、材料6、複数の産業をどのように編むのですか？
今メニューはサプライヤーと製品名に分かれています。両提案は、素材と産業を結びつけ、産業から関連素材に直接渡すことを可能にしました。
- Q4数字の物性をどのように読みますか？
今、ホームページのCellasto物性表は密度7段階と項目7個が表としてのみ置かれています。 B案は密度を選ぶと引張強度・伸び・引裂強度が一緒に変わるグラフに変わりました。
03 / NAME名前をもう一度読む
ポリマーという名前に
会社の仕事がありました
新しい文章を作る前に会社名から読み直しました。ポリマーという単語は高分子の構造を説明する言葉であり、サプライヤーと顧客会社をつなぐHitech Polymerの仕事を説明する言葉でもありました。
多くの部分が続いたもの
ポリマー（polymer）はギリシャ語poly（多く）とmeros（部分）を合わせた言葉です。モノマーという小さな分子が数千個続き、長鎖を成すと初めて高分子になります。
続く方法が性質を定める
鎖がどのようにつながって絡み合うかに応じて、同じ高分子も硬くなったり柔らかくなったりする。メラミンフォームのネット構造とエラストマーの復元力はすべてこの構造から来ます。
会社も一本鎖です
Hitech Polymerは、挨拶で自分自身を「サプライヤーと顧客のスポークスマン」と紹介します。ドイツとアメリカのサプライヤーの4つを国内の顧客会社とつなぐことであり、会社がすることが名前に似ています。
ところで素材は見えません
このように供給された素材は完成品に入ります。サスペンションの緩衝部品、車体の騒音防止パッド、壁の中の防湿地、防塵服に組み込まれた糸がそうです。作った製品では素材も、Hitech Polymerという名前も見えません。
2つの提案が選んだ同じ単語
A案は「見えない差がより良い明日を作ります」で、B案は「見えない構造が製品の性能を決めます」と会社を紹介します。別々に描いた二つの提案がすべて「見えない」という単語から出発し、この事例のタイトルもここからもたらされました。
04 / CHAINサプライヤー・素材・産業
4つのサプライヤー、6つの素材、
4つの産業
Hitech Polymerが扱う素材はサプライヤーに分ければ4つに分かれ、使われるところに分ければ4つの産業になります。今ホームページにはサプライヤーと製品名で分けたメニューだけがあり、自動車会社の担当者はどの素材が自分の仕事に合うかページを一つずつ開いて確認しなければなりません。
2つの提案は、材料と産業を相互に結びつける構造に変わりました。下の地図でサプライヤーや素材、産業を押すと、つながった線が明るくなります。
SUPPLIERサプライヤー
MATERIAL素材
INDUSTRY産業
地図の読み方 サプライヤー、素材、産業のいずれかを押すと、それに続く項目と説明がここに表示されます。
サプライヤーと素材は今ホームページの挨拶と製品ページを、産業分類はB案の情報構造に従いました。
05 / LAB素材ラボ
目に見えない性質を
直接動かしてみましょう
素材の利点は、ほとんどの製品の中で、それも非常に小さいサイズで明らかです。両方の提案が写真とフィルムでそのシーンを示している場合、このケースではさらに一歩進んで、4つの性質を直接動かして見ることができました。数値はすべて今ホームページの商品ページに書かれた値です。
伸びたままにすると戻ってくる鎖
熱可塑性ポリウレタン（TPU）は、もつれた鎖が引っ張られると伸びて置くと、再び巻きつける性質のおかげで靴のアウトソールとケーブルの布、ホースに使われます。ロッドをドラッグしてチェーンを伸ばしてから離してみてください。
- 500
- 600
- 1100
- B
- C
- R
- S
- 7系列・28等級
- 引張強度
- 3.6 N/mm²
- 破断伸び
- 350 %
- 引裂強さ
- 10.0 N/mm
- 圧縮永久減衰率
- 2.6 %
押しても横に広がらないように
タイトなゴム塊を押すと横に膨らみます。セラストは微細な細孔が先に減少するので、横にほとんど広がらず、離すと元の高さに戻ります。今ホームページはこの特徴を「最小限の横膨張で高い圧縮量」と書いています。密度（g / cm³）を変更すると、Cellasto MHの物性値が一緒に変わります。
光が通るネット
Basotect Wはメラミン樹脂を発泡したオープンセルフォームです。気孔が詰まらずに行く骨格だけが3次元につながっており、国内では「マジックブロック」という洗浄用品としてよく知られています。図の上でポインタを動かすと、ネットの間に光が通過します。
1kg F902 R022を解くと409,091m
マラソンコース（42.195km）約9.7本をつなぐ長さです
静電気を流す糸
Shakespeareの挑戦士は電気が通じるナイロン（PA6）とポリエステル室です。生地に数本だけ組み込んでも積み重ねた静電気をこの糸が流し出すため、半導体工場の防塵服と除電服に使われます。 PA6導電体F902 R022の平均抵抗は4×10⁵Ω/cm、融点は220℃です。
挑戦士の長さは今ホームページ F902 R022 物性表の409,091 meters per kilogramを移した値であり、マラソンコースハンカンは42.195kmです。
06 / STRUCTURE訪問者とシーンの順序
Hitech Polymerを探している
五つのクラスの人々
Hitech Polymerのホームページには、自動車部品会社の購買担当者から海外サプライヤーまで、さまざまな目的を持つ人々が訪れます。探す情報がそれぞれ違うので、それぞれが到着する場面を先に決めました。
- 01自動車部品会社の購入・開発担当者
騒音・振動・衝撃を軽減する素材とグレードを探し、物性を比較します。
素材・物性データ - 02建築・パッシブハウス施工士
機密テープと透湿・防湿紙の仕様と施工位置を確認します。
建築資材・適用分野 - 03繊維・衣類メーカー
防塵服やアウトドア衣類に入れる挑戦士の種類と太さを探します。
挑戦士・物性表 - 04生活用品・産業用製品会社
洗浄用フォーム、靴ソール、椅子部品のように完成品に合った素材を選びます。
適用分野・素材アーカイブ - 05海外サプライヤー・協力会社
韓国代理店が扱う品目と会社情報を英文で確認します。
会社紹介・英語サイト
同じ素材を
新しい順序に
今メイン画面は会社の文章一つとショートカットで構成されており、素材が何でどこに使われるか説明する場面がありません。 2つの提案は最初のシーンで素材を見せた後、会社とサプライヤー、素材、産業、問い合わせの順番で話をし、B案はその間に物性データを入れました。色点は各シーンが演じる物語です。
- 最初の文
- 会社・サプライヤー
- 素材
- 産業
- 物性データ
- お問い合わせ
今メイン画面5シーン
- 01持続成長に向かって走るHitech Polymerスライド写真3枚と文章一つ
- 02事業分野画像3枚
- 03製品・分野へのショートカット写真6つのリンク
- 04会社紹介・お越しの方・お客様お問い合わせアイコン4個
- 05フッターcopyright 2015
A · Matter in Motion6シーン
- 01可能性は、素材から。光が通過する結び目と9.87秒フィルム
- 02目に見えない違いが 会社の視点とサプライヤーの4つ
- 03素材を知ると、次のようになります素材4つのアーカイブと詳細ウィンドウ
- 04素材、産業になる自動車・建築・産業と生活水平シーン
- 05良い素材から良い答えで 相談の3つのステップ
- 06あなたの次を、一緒にお問い合わせ
B · Polymer Scroll Film8シーン
- 01目に見えない構造が スクロールフィルム200枚と5つのシーン
- 02会社紹介文サプライヤー・素材・事業分野の数
- 03検証されたグローバルクリエイティブサプライヤー4つ
- 046つのコア素材 横に並ぶ6つの素材
- 05密度を選択するとCellasto MH物性グラフ
- 06自動車からクリーンルームまで 産業4つの関連素材
- 07お客様の従業員という心でご挨拶した文章
- 08必要な素材を教えてください興味のある素材を選ぶお問い合わせ
07 / COLORカラーチャート
光が通過する琥珀色と
顕微鏡の中のターコイ
A案は透明な素材に光が通るときに生じる琥珀色を選びました。木炭の背景にオレンジひとつだけ置き、残りの色は素材写真が引き受けさせました。
B案は分子構造を覗く顕微鏡画面を思い出しました。深い藍色の背景にターコイズ一つで構造線やボタン、グラフを描きました。どちらの提案も強調色を一つだけ残し、その色が届くところに目が行くようにし、シーンキャプチャで数えてみるとオレンジはA眼画面の1.6%、ターコイズはB眼画面の0.2%だけ占めます。
A・光が通過するとき
#11110F#FF6B3AB · 構造を照らすとき
#050A12#5CC8E4同じ素材、
2つの光
2つの提案の色が何を変えるかを確認しようとして、Hitech Polymerが扱う6つの材料を同じ場所に置き、光だけを変更した材料ボードを作成しました。左はAの中の琥珀色の光、右はBの中のターコイズの光です。
Aの中の光の下ではTPU粒が琥珀色に光り、Bの中の光の下では同じ素材が標本のように整えられて見えます。真ん中の線を左右にドラッグすると、2つのシーンに耐えることができます。
A · Matter in Motion
炭と琥珀色-
デスクトップ · 45.4％最初の画面と素材、産業シーン、フッターの背景。純粋な黒より少し暖かい炭です。
-
お問い合わせ・写真の影・33％お問い合わせシーンの元であり、写真の中の影と同じ高さの炭光で、画面の割合が高くなります。
-
明るいシーン・文字・18％会社紹介と相談シーンの元であり、暗いシーンでは文字色で書きます。
-
補助文字・2％説明文と小さなラベルに使うグレーです。
-
強調・1.6％タイトルの末尾のピリオドと記号、進行棒にのみ書くオレンジです。
B · Polymer Scroll Film
藍色とターコイズ-
忙しい・75.7％スクロールフィルムとほとんどのシーンが置かれる深い藍色です。
-
カード・表・18.5％サプライヤーカードと物性表、お問い合わせフォームの元です。
-
ラベル・2.2％単位と小さなラベルに使う色です。
-
補助文字・1.9％説明文に使う灰青色です。
-
文字・1.6％タイトルと本文の文字色です。白に藍色を少し混ぜました。
-
強調・構造線・0.2%ボタンとグラフ、フィルムの中の構造線に使う青緑です。
色見本を押すと、HEX値がコピーされます。見本の中の数字はその上に上がる文字色との明度対比であり、比率は両提案の場面キャプチャで各色に近い画素を数えた値です。
08 / TYPOGRAPHY名前と書体
ロゴのない名前を
文字で設定
今ホームページのヘッダーにはロゴイメージなしで「Hitech Polymer」という文字だけがあります。それで、両方の提案はそれぞれの名前を画面に再構築しました。 A案は軌道3つが重なった原子形状記号とHT POLYMERを、B案は字間を広く広げたHIGHTECH POLYMERを作りました。
Hitech Polymer
HT POLYMERHitech Polymer
HIGHTECH POLYMERHitech Polymer
Pretendard 600 · Aの最初の画面
600 / -0.065em可能性は、
素材から。
Matter
in motion.
A案は大きなハングルタイトルの横に傾いたセリフ英文「Matter in motion.」を重ねておきます。機械的な素材の物語に手書きのような結びを加えたいという選択です。
Barlow 600 · Bの名前と数字
tracking 0.30emHIGHTECH
POLYMER
4×10⁵ Ω/cm0.35 g/cm³
見えない構造は製品の性能を決定します
ハングルのタイトルはPretendard 700、字間-0.04emです。物性数字は、固定幅フォントGeist Monoで書かれており、桁が縦に収まります。バーを動かすと英文名の字間が変わります。
09 / MOTIONモーション原則
フィルムはスクロール、
シーンは横
どちらの提案も、最初の画面のフィルムをスクロールします。下がると前方、上げると後ろに再生されるので、見る人がシーンの速度を決めます。産業と素材のように並べられた内容は、縦スクロールを水平移動に変えて順番に示しています。オペレーティングシステムでモーションの削減をオンにすると、両方の提案は静止画のみを表示します。下の4枚のカードは実際にスクロールに沿って移動します。
スクロールで巻く9.87秒
A案第一画面のフィルムは9.87秒の長さです。スクロール位置に合わせて再生位置を移動するため、下げると結び目が緩み、上げると再び巻きます。このカードを通る間、同じフィルムの48シーンが通過します。
200枚を超えるフィルム
Bの最初のシーンは、前もって描いた200枚の3Dフレームをスクロール位置に合わせてキャンバスに描きます。フレーム番号が5シーンの境界に当たると、文が変わります。このカードではそのうち48枚を超えていきます。
横向きの産業
A案は縦スクロールを水平移動に変え、自動車、建築、産業、生活の3つのシーンを順番に示しています。このカードの3つのシーンもスクロールに沿って横に進みます。
一言ずつ明るくなる文章
Bの中の会社紹介文は最初にぼやけているが、スクロールに沿って単語が一つずつ明るくなります。長い文章も読む速度に合わせて最後までついていくことになります。
A案案・結び目
Matter in Motion可能性は、素材から。
透明な素材彫刻から始まり、産業の場面に広がる方向です。最初の画面では、光が通過するポリマーノットが9.87秒のフィルムに回り、スクロールを下げるとフィルムが前方、上げると後方に再生されます。その後、会社の視点とサプライヤー4カ所、素材4つを選ぶアーカイブ、自動車・建築・産業と生活を横にめくるシーン、相談の3段階を順番に置きました。
- 光が通過する高分子ノットとスクロールで前後に再生する9.87秒フィルム
- 素材を選ぶと写真の光と名前が変わる素材アーカイブと詳細ウィンドウ
- 自動車・建築・産業と生活を横切る応用分野シーン
- Understand・Connect・Move forward 相談3段階
Pretendard · Georgia Italic
DIRECTION NOTES
提案Ａのシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。
- 可能性は、素材から。
光が通る高分子結び目が右に置かれた最初の画面です。タイトルの終わりのピリオドの1つだけをオレンジで塗りました。
- つながるほど、可能性は大きくなります
スクロールすると、結び目が粒子に散らばって1つのフレーズを作り、画面に2番目の文が浮かび上がります。
- 3つの軌道
フィルムの終わりに、球は3つの軌道に広がります。ヘッダーの記号も同じ軌道3本で描きました。
- 見えない違い
明るい紙の上に会社の視点を書き、下にサプライヤーの4つの名前を並べて置きました。
- 素材アーカイブ
素材を選ぶと左の写真の色と名前、一行の説明が一緒に変わります。下にはオレンジ色の紋章が通ります。
- より静かに。より快適に。
車のシーンです。垂直スクロールが水平移動に変わり、業界の3つのシーンを順番に進みます。
- 空間の性能を、さらに重ねる。
建築シーンでは機密と防水、透湿と防湿を「見えないところで出来上がる快適さ」と説明します。
- 良い素材から良い答えへ
Understand・Connect・Move forward 3段階で相談がどのようにつながるかを示します。
MATTER IN MOTION光が通過する結び目を解きます
POLYMER SCROLL FILM目に見えない構造
B案案・構造
Polymer Scroll Film見えない構造は製品のパフォーマンスを決定します
分子一つから始まり、完成品に近づく方向です。最初の画面は、高分子鎖、オープンセルネット、弾性復元、挑戦士の4つのシーンを200枚の3Dフレームに渡すスクロールフィルムです。その後、会社紹介とサプライヤー4箇所、横に渡るコア素材6種類、密度を選ぶと物性が変わるCellasto MHグラフ、産業4つを順番に置きました。
- 高分子鎖・オープンセル・弾性復元・挑戦士につながる200枚スクロールフィルム
- サプライヤーと製品情報をまとめたコア素材の6つの水平シーン
- 密度7段階で変化するCellasto MH物性グラフと全物性表
- 4つの産業から関連素材への直接リンクと関心のある素材を選ぶ問い合わせ
Pretendard · Barlow · Geist Mono
DIRECTION NOTES
B案のシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。
- 見えない構造
散在したモノマーが浮いている最初の画面です。右のシーンリストで、フィルムの5つのシーンをすぐに選択できます。
- 鎖が絡み合って網になる時
スクロールに沿ってモノマーが鎖につながり、鎖が絡み合ってメラミンフォームの三次元網構造になります。
- 電気が流れる糸
フィルムの最後のシーンは挑戦者です。平均抵抗4×10⁵Ω/cmを文章の隣に一緒に書きました。
- 会社紹介した段落
スクロールに沿って単語が一つずつ明るくなる会社紹介文です。以下にサプライヤー・素材・事業分野を数字でまとめました。
- 6つのコア素材
素材ごとにサプライヤーと原産地、構造と特徴、適用分野を同じ枠に書いて横に渡します。
- 密度を選ぶと
Cellasto MHの密度を選ぶと引張強度・破断伸び・引裂強度グラフが一緒に動きます。
- 車からクリーンルームまで
産業４つを写真とともに紹介し、産業ごとに関連素材に直接行くリンクをつけました。
- 必要な素材を教えてください
関心のある素材を選んで適用製品と要求物性を記すお問い合わせフォームです。
10 / PROCESS写真とフィルム
製品を新しく撮るのではなく、
素材が働くシーンを描いた
今ホームページの写真は2016年に投稿した製品写真だけで、大きな画面に使うシーンを新たに作らなければなりませんでした。両提案は、実際の製品を真似するよりも素材が使われるシーンと素材の中の構造を描く方を選びました。
A案は写真4枚と直接編んだ3Dコードで9.87秒フィルムを作り、B案は写真開いた果実200枚の3Dフレーム、10秒フィルムを作りました。特定の配達ケースのように見えないように、写真には商標や文字を入れませんでした。
結び目から軌道まで、
Aの9.87秒
Aの中のフィルムは、1つの3Dシーンの中で透明な結び目が粒子に散在し、再び球になってから軌道を描く順序につながります。フィルムはすべてのフレームをすぐに見つけられるように保存し、スクロールを素早く動いてもシーンが途切れることはありません。
01 透明な結び目 光が通る高分子リボンが結び目を作り、ゆっくりと助けます。 
02 散乱粒子 結び目の表面が粒子に散乱し、鎖の痕跡を残します。 
03 一つのフレーズ 粒子が再び集まって1つのフレーズを作ります。 
04 軌道構造 球の周りに軌道ができ、「接続」のシーンを開きます。
分子から糸まで、B内の200枚
B案は、モノマー、鎖、ネット、圧縮と復元、挑戦士の5シーンを1つの3Dシーンにつながり、200枚のフレームにエクスポートしました。広い画面用1600×900フレームと縦画面用720×1280フレームを別にして、携帯でも構造が画面を埋めます。 6つの材料と4つの産業が写真で示されています。
01 モノマー 散乱小分子が浮かぶ最初のシーン。 
02 鎖 分子が続いて螺旋とジグザグの鎖になります。 03 ネット 鎖が絡み合って、オープンセルフォームの3次元ネット構造になります。 
04 圧縮と復元 押された層が横に広がらずに戻ります。 
05 挑戦士 ネットが細くなって電気が流れる糸一本鎖になります。
Basotect W断面にオープンセルが現れたメラミンフォーム
Cellastoサスペンションスプリングの横にあるバンパー
Elastollan空中に散在するTPU粒子とホース
挑戦士灰色の生地に織り込まれた黒い糸
ノイズアンチパッド車の内側に取り付けられた騒音防止パッド
シンナーチャンホコーナーのブチルテープと防湿地
モノマーが鎖と網になり、押し込んで戻ってから実一本鎖になるまでを継いだフィルムです。提案では「モーションフィルムを見る」ボタンで開きます。
透明な結び目が粒子や球、軌道に変わるフィルムです。提案では、スクロールに沿って前後に再生されます。
11 / MOBILEモバイル
手の中でも
同じ結び目と構造
現場で素材を探す担当者は携帯電話で物性を確認することが多いです。 A案はモバイルで横向きになっていた産業シーンを縦カードに積み重ね、写真がゆっくり拡大するように変えました。 B案は縦画面専用フレームでフィルムを別々に作り、横に渡った素材の6つを縦につなげて見せてくれます。
COMPARE2つの方向はどう違いますか？
同じ素材を開く
結び目と構造
どちらの提案も同じ会社と同じ素材を扱いますが、最初の画面で最初に言うことは異なります。 A案は素材が与える印象から始まり産業の場面に広がり、B案は素材の中構造から始まり技術情報に入ります。 Hitech Polymerが最初の画面で一番最初に伝えたい話に合わせて選べるように違いをまとめました。
区分A · Matter in MotionB · Polymer Scroll Film
最初の画面 光が通過する高分子ノットが回る9.87秒フィルム 分子から糸まで5シーンを超える200枚フィルム
最初の文章の可能性は、素材から。目に見えない構造が製品のパフォーマンスを決定します
色の木炭の背景とオレンジの一つ深い藍色の背景とターコイズの一つ
書体Pretendard · Georgia ItalicPretendard · Barlow · Geist Mono
名軌道 3つのシンボルとHT POLYMER字間を広く広げたHIGHTECH POLYMER
素材4つを選ぶアーカイブと詳細ウィンドウ6つを横にめくるシーン
産業自動車・建築・産業と生活の3つのシーン産業4つの関連素材リンク
データ素材の説明と元の製品ページへのリンクCellasto MH密度別物性グラフ
重量のある場所素材の印象と可能性素材の構造と技術情報
MATERIAL HTP-WEB · REV. 10
見えないもの
見えない
Hitech Polymer Webサイトリニューアル提案 · Matter in Motion · Polymer Scroll Film
| Property | Value |
|---|---|
| Client | (株)Hitech Polymer・韓国BASF代理店・Shakespeare韓国代表 |
| Project | Webサイトリニューアル提案・2026年10月 |
| Research | 今ホームページの国文ページ７個、物性表３種類 |
| Brand Reading | ポリマー（多くの部分が続いたもの）と「見えない」素材 |
| Structure | サプライヤー・素材・産業指導、訪問者5種類、シーン順 |
| Direction A | Matter in Motion・UIデザイン、9.87秒3Dフィルム、素材アーカイブ |
| Direction B | Polymer Scroll Film・UIデザイン、200枚3Dフレーム、物性グラフ |
| Lab | チェーン・圧縮・オープンセル・挑戦者インタラクションの4つ |
| Mobile | 縦画面シーン再構成、縦専用フィルムフレーム |
| Typefaces | Pretendard · Barlow · Geist Mono · Georgia |
| Studio | BlueCanvas |
MATTER, MADE VISIBLE
製品の中に隠れた強みを
製品の中に隠れた強みを
画面に見せるしたい場合
数字と仕様だけで残っていた技術をどのような場面で見せてくれるかからまとめていきます。
その他のプロジェクト
-
グローバル企業
Youngone Corporation
ラベルに名前が載らないグローバルOEM企業のWebサイトリニューアル提案です。「服の内側から、世界の外側まで」というブランド解釈、カラーシステム、雪山から始まるメインページ案、製造工程のスクロールインタラクション、グローバルネットワーク・素材・ESGの画面まで収めています。
-
バイオ・製薬
HLB Therapeutics
上場バイオ企業のWebサイトリニューアル提案です。希少疾患の新薬と医薬品コールドチェーンを一つの文で結び、インクと氷の色に赤を一滴落としたカラー、4つの案、パイプラインとコールドチェーンの画面まで収めています。
-
公共機関
Korea Drug Development Fund
利用者分析とCIの解釈、9つのメイン案、パイプラインの可視化までを収めた、公共機関Webサイトの構築・リニューアルのプロセスです。