NEOFLYPINARELLO OFFICIAL IMPORTER · KOREA
Pinarello正規輸入元NEOFLYのホームページを描き直しました。最初の画面では、風が自転車の輪郭を描き、光がその輪郭を実際のDOGMA Fに変えます。
01 WIND
細い流線が数百本、画面を横切ります。線が曲がる場所に自転車があります。
02 FORM
レーザーが通った跡に、フレームと車輪の輪郭が残ります。
03 LIGHT
スタジオ照明が通り過ぎると、線画が実際の写真に変わります。
04 LINE
eとoは一筆です
neoflyのeとoは、ペンを離さずに引いた1本の線です。同じ大きさの2つの円をつなぐその線が、DOGMA Fの2つの車輪と重なります。
NEOFLYは、イタリアの自転車ブランドPINARELLOの韓国における正規輸入元です。ロード・グラベル・MTB・タイムトライアルのラインナップとMOSTのパーツを輸入し、PARTINGTON・ONE-K・CRW・V-SPRINTのホイールとコックピットもあわせて供給しています。ソウル・松坡の直営店Pinarello Houseを中心に、全国12か所の正規販売店とともに仕事をし、Yeongnam Alpsを走るTrans Alpsのようなライディングイベントも開いています。
正規輸入元のホームページは、2つの名前を同時に抱えている必要があります。訪問者が訪れる理由はPinarelloですが、相談し、直し、一緒に走るのはNEOFLYです。だから今回のリニューアルは、誰の声で語るかを決めるところから始めました。2つのロゴを並べて読み終えたところで、Pinarelloの風とNEOFLYの線を1つの文に結びました。
2
デザイン案を送った回数2026年8月の最初のデザイン案と11月のメインデザイン案3
見比べたファーストビューの方向時間の線・道の線・風の線240
自らレンダリングした風洞フィルムの1フレーム横1600×900・縦720×1280の2種23
ファイル名がカラーリング名になっている資料12年のアップロードで選んだ95枚の写真のうちメニューと製品一覧を読み、ロード・グラベル・MTB・TTを分けて見られる構造から決めました。
暗い格子の画面にラインナップフィルターとA/S案内を収めた最初のメイン画面を、提案書と一緒に送りました。
時間・道・風の3つの線で最初の画面を描き比べ、風を選びました。
風が自転車の輪郭を描く240フレームのフィルムを、Canvasで直接レンダリングしました。
フィルムで開く最初の画面から販売店探し、サポート案内まで、8つのシーンをつなぎました。
正規輸入元のホームページにはロゴが2つ置かれます。ブランドのPINARELLOと会社のneoflyです。どちらか1つを選ぶ代わりに、2つのロゴを拡大して同じ場所に重ね、それぞれが何を描いているのかを読みました。
PINARELLO
PinarelloのPは、上から大きく回り込んで下り、先端が針のように細くなる一筆です。文字の軸の左側には、短い筋が3本並んでいます。私たちはこの筋を風と読みました。速く過ぎ去ったものの後ろに残る跡だからです。
NEOFLY
neoflyのeとoは、別々に書いた2文字ではありません。eの横棒の端から始まった線がeを一周し、S字に移ってoを回って終わります。デザイン案に使ったロゴ画（横1,101px）で測ると、この線の長さは約1,224pxで、ロゴの全幅より長くなります。
ONE SENTENCE
風と線をつなぐと、メインデザイン案の最初の一文になります。「いちばん速い線は、風が描きます」。Pinarelloの筋は風になり、NEOFLYの一筆は、その風が描いた線になります。
一筆というだけでは足りませんでした。eとoの丸い部分に円を合わせて大きさと間隔を測り、メインデザイン案の風洞フィルムの最後のシーンで、DOGMA Fの2つの車輪を同じ方法で測りました。
中心間隔 2.23 ×半径
SAME SIZE
eとoの丸い部分に合わせた円は、半径が97.2pxと96.7pxです。差は0.5%です。同じ大きさの2つの円を1本の線がつなぐ形は、ロードバイクの2つの車輪と同じです。
DISTANCE
ロゴでは、2つの円の中心が半径の2.23倍だけ離れています。デザイン案のフィルムのDOGMA Fは2.90倍です。oをそのぶん右に移すと、eは後輪、oは前輪に重なります。
THE BIKE
引き離した一筆の下にスタジオ写真を敷くと、eの円は後輪、oの円は前輪、S字の一筆は2つの車輪の間を通ります。最初の画面の最後のシーンは、この重なりで終わります。
デザイン案に使う資料を探すために、2014年から2026年までホームページに上がったアップロードフォルダを開きました。選んだ資料は写真95枚と映像5本、合わせて100点で、そのうち79点が2025年と2026年に上がったものでした。
写真95枚のうち23枚は、ファイル名からしてカラーリング名でした。Luxter Venice、Obsidian Emerald、Jade Spectraのように、同じフレームに新しい色が出るたびに写真が1枚ずつ増えていきました。
そこでメインデザイン案には、色のためのシーンを2つ入れました。最初の画面の終わりに、同じDOGMA Fのカラーリング4つをめくって見るシーンと、アートペイント4つをポスターのようにめくるシーンです。
2026年8月、提案書と一緒に最初のメイン画面を送りました。暗い背景に製品写真を格子状に並べ、ラインナップフィルターとA/S案内、販売店とサポートを1ページに収めています。
3か月後にあらためて広げ、赤いペンを手に取りました。残すものと変えるものが、はっきりと分かれました。
1
2
3
4
5
変えたもの
「PINARELLO OFFICIAL KOREA.」は事実ですが、ほかの正規輸入元も使える文です。メインデザイン案では、Pinarelloがフレームをつくる理由に最初の文を変えました。
変えたもの
DOGMA X・F・グラベルの写真が同じ大きさで並び、何を先に見るべきかが定まっていません。メインデザイン案はDOGMA Fひとつから始まります。
残したもの
正規輸入元の仕事を3行にまとめたカードはよかったと思います。メインデザイン案の紹介シーンに、輸入・供給、正規販売店、ライディングイベントとして残しました。
残したもの
ALL・ROAD・GRAVEL・MTB・TTに分けるフィルターは、今のホームページにはなかったものです。メインデザイン案では、横に送るラインナップの上のタブになりました。
変えたもの
地図1枚では本社1か所しかわかりません。メインデザイン案は12か所を地域タブで分け、いちばん近い場所をすぐに見つけられるようにしました。
最初のデザイン案の画面にあった連絡先・住所・代表者・事業者登録番号は、別の文字に変えるか隠しました。
2つ目のデザイン案を描く前に、「線」という1つのテーマで最初の画面を3回描きました。1952年から始まる時間の線、ソウルからYeongnam Alpsまで続く道の線、自転車の輪郭を描く風の線です。3つの画面はどれも同じ会社を説明していますが、最初の文の主語が違います。
ALINE OF WIND
風洞の流線が自転車の輪郭を描き、光がその輪郭を実際のDOGMA Fに変えます。Pinarelloがフレームを削る理由である空気力学を、ファーストビューの演出に移しました。
#050809#1FC2B0#FF5A1F#F3F1ECArchivo 125% · 900 · Italic
BLINE OF TIME
1952年にトレビソで始まったPinarelloの時間を、1本の時間のものさしで描きます。クリーム色の紙の上に縦長の数字と赤い線を1本置き、イタリアのサイクリング雑誌の表紙のように開きます。
#F2ECE0#15130F#C42B1C#B9AE9CArchivo 62% · 900
CLINE OF ROAD
ソウルの直営店からYeongnam Alpsの稜線まで続く1本の道を、等高線の地図の上に描きます。12の販売店は路線図の停留所になります。
#101418#26313A#EEF0EA#FFB21AArchivo 125% · 800 · Italic
| 基準 | A風 | B時間 | C 道 |
|---|---|---|---|
| Pinarelloにしかない物語から始まるか | よく合う | ふつう | 弱い |
| ファーストビューで製品が見えるか | よく合う | よく合う | 弱い |
| NEOFLYがやっていることが見えるか | ふつう | ふつう | よく合う |
| 新しいカラーリングが出たとき、変えやすいか | よく合う | ふつう | ふつう |
| モバイルのファーストビューが単独で成立するか | よく合う | ふつう | ふつう |
よく合うふつう弱い
ファーストビューは風に任せました。Pinarelloにしかない物語から始めながら、製品をいちばん大きく見せられるからです。捨てるには惜しかった道の線は、メインデザイン案のライドシーンに移しました。Trans Alpsの標高線と地域別の販売店タブがその跡です。
メインデザイン案の背景色は、黒に近いInkの3段階とPaperです。画面の大部分をこの4色で塗り、その上にアクセントカラー2色をごくわずかに使います。
オレンジ #FF5A1Fは、最初の画面の終わりにある4番目のカラーボタン、INEOS Replicaと同じ色です。ティール #1FC2B0は風洞フィルムの流線の色で、Aqua Alloyのカラーリングの明るい面（#20BBC2）に近くなっています。デザイン案のPC画面キャプチャ15枚を測ると、2つのアクセントカラーは合わせても画面の1%に届きません。
Ink
#050809RGB 5 8 9
ファーストビューと暗いシーンの背景色です。
Ink 2
#0B1214RGB 11 18 20
暗いシーンの中のカードとメニュー板に使います。
Ink 3
#131C1FRGB 19 28 31
カードの枠線と、1段階明るい面です。
Paper
#F3F1ECRGB 243 241 236
紹介・パーツ・販売店のように読むシーンの背景色です。
White
#FFFFFFRGB 255 255 255
暗い背景の文字と、スタジオ写真の白い背景です。
Teal
#1FC2B0RGB 31 194 176
風洞フィルムの流線、進行バー、現在位置の表示にだけ使います。
Teal Deep
#0C7F75RGB 12 127 117
明るい背景で、ティールを文字として使う必要があるときに使います。
Orange
#FF5A1FRGB 255 90 31
模造品注意のように、必ず見てもらう場所に一点ずつだけ使います。
JADE SPECTRA
デザイン案のカラーボタン #0F8F84
#19423B46.2%#226B6329.5%#9B462E12.7%#5FB5B211.6%AQUA ALLOY
デザイン案のカラーボタン #18A9C9
#158C9C52.6%#20BBC228.4%#39454610.7%#B2806F8.3%TEAM PQ3
デザイン案のカラーボタン #1C2550
#2A314B37.5%#C8B07628.5%#907D4F21.7%#483F3212.3%INEOS REPLICA
デザイン案のカラーボタン #FF5A1F
#FB370255.6%#EE701E18.9%#53403816.5%#ECB3909.0%白い背景とタイヤ・パーツの無彩色を除いて残ったカラーリングの画素を、4つのまとまりに分けた比率です。
OBSIDIAN EMERALDObsidian Emerald
#054248#449484#1F2223
MOLTEN SANDMolten Sand
#F0D9BC#A38866#C9B08F
COBALT PHANTOMCobalt Phantom
#6A5E90#9EC32D#262627
PHANTOM ICEPhantom Ice
#D6D7D6#9D8D9C#222222
| 文字/背景 | 見る | コントラスト | 判定 | 用途 |
|---|---|---|---|---|
| White / Ink | 20.09:1 | 小さい文字まで | 暗いシーンのタイトルと本文 | |
| ティール / Ink | 8.99:1 | 小さい文字まで | 進行バー、現在位置、短いラベル | |
| オレンジ / Ink | 6.44:1 | 本文に使える | 模造品注意のような、一点だけの警告 | |
| Ink / Paper | 17.80:1 | 小さい文字まで | 明るい場面の本文 | |
| ティール / Paper | 1.97:1 | 文字には使えない | 明るい背景では文字に使わない | |
| Teal Deep / Paper | 4.31:1 | 大きな文字のみ | 明るい場面の小さな強調文字 | |
| オレンジ / Paper | 2.76:1 | 文字には使えない | 大きな数字と点だけに | |
| Ink / ティール | 8.99:1 | 小さい文字まで | ティールのボタンの上の文字 |
コントラスト比はWCAG 2.1に基づいて計算しました。4.5:1以上は本文に、3:1以上は大きな文字に使います。
英字のタイトルは、幅と太さ、傾きを1つのフォントの中で変えられる可変フォントArchivoで組みました。幅を最大（125%）、太さを最大（900）、イタリックにすると、Pinarelloのロゴのように前に傾いた文字になります。
ハングルはPretendardを立てたまま書きます。ハングルを傾けたり、字間を広げると、むしろ読みにくくなるからです。英文ラベルのみに字間を広げます。
RIDE WITH NEOFLY
DISPLAY · LATIN
DOGMA F
RIDE THE SENSES
Archivo · 125% · 900 · Italic
モデル名やシーン番号、大きな締めの一文など、短い英文にだけ使います。
HEADLINE · KOREAN
Pretendard · 800 · 字間 −3.5%
ハングルのタイトルは太字にし、字間のみ少し狭めます。傾けません。
LABEL
PINARELLO OFFICIAL IMPORTER · KOREA
Archivo · 112% · 600 · tracking 16%
シーン名やメニューのような英字のラベルは、幅を少し広げ、字間を16%空けます。
ファーストビューのフィルムは、映像素材を買わずに、ブラウザのCanvasで直接描きました。画面を4pxの格子に分け、格子点ごとに自転車の輪郭までの距離を計算して、210本の流線がその距離に沿って自転車を避けていくようにしました。同じ乱数シードで描いているので、何度描き直しても同じ場面になります。
WIND FORM LIGHT風形光
FRAME 061 / 240
001 – 060 · WIND
手前の流線210本、背景の遠い線170本、画面の前をぼんやりとかすめる線9本を重ねました。流線の約12%はオレンジ、残りはティールと淡いミントです。
061 – 150 · FORM
線は、輪郭にぴったり沿って巻きつく狭い半径と、遠くから大きく曲がってくる広い半径の両方に従います。その上をレーザーの膜が通り過ぎ、フレームと車輪の線を残します。
151 – 240 · LIGHT
スタジオ照明が斜めに通り過ぎたあと、流線がゆっくり消え、最後のシーンは白い背景のDOGMA Fの写真だけが残ります。縦画面用の720 × 1280版も別にレンダリングしました。
正規輸入元のホームページを訪れる人は、大きく3つに分かれます。どのモデルを買うか選ぶ人、すでに買った自転車に長く乗りたい人、一緒に走る場を探している人です。5つのメニューと1つのショッピングボタンを、この3者の道に合わせて置きました。
BUY
どのモデルを買うか選ぶ人
OWN
すでに買った自転車に長く乗りたい人
RIDE
一緒に走る場を探している人
風が自転車を描くフィルムで始まり、カラーリング4種、7つの分類のラインナップ、アートペイント、パーツとホイール、ライディングイベント、販売店、サポートの順に下へ進みます。
フィルムが終わると、同じDOGMA Fのカラーリング4つをスクロールでめくります。背景色もカラーリングに合わせて変わります。
縦スクロールを横移動に変えて、7つの分類のモデルを1列にたどります。上のタブが今どの分類にいるかを示します。
RIDE THE SENSESの4つのカラーリングを、ポスターのように1枚ずつ拭き取るようにめくります。
MOST・PARTINGTON・ONE-K・CRWカードが一枚ずつ上に積み重ねられます。
Yeongnam Alpsの稜線の起伏を1本の線で描き、3コースの距離を数字で数えます。
全体・ソウル・京畿仁川・嶺南のタブで、12か所を絞り込んでみます。
録画画面のライド映像は、人の顔が出ないカットだけをつないだ同じ長さの映像に変え、NEOFLYの住所・電話と販売店の住所・電話・メールアドレスは別の文字に置き換えるかぼかしました。
メインデザイン案で訪問者が手で触れる場所は3か所です。ラインナップを分類するタブ、販売店を地域で絞るタブ、模造品を見分ける案内です。下から直接押してみることができます。
01 · LINEUP
ROAD · RACE
DOGMA Fグランドツアーのスピードを込めたレースバイク
ROAD · ENDURANCE
DOGMA Xより遠く、より快適に。長い一日のためのDOGMA
ROAD · RACE
F SERIESレースジオメトリを完成車に
GRAVEL · RACE
DOGMA GRグラベルレースのためのDOGMA
GRAVEL · ADVENTURE
GREVIL MX舗装が終わる場所から始まるグラベルバイク
MTB · CROSS COUNTRY
DOGMA XCクロスカントリーレースのためのフルサスペンション
TIME TRIAL · TRIATHLON
BOLIDE F時計と戦うライダーのためのエアロマシン
メインデザイン案では、このリストが縦スクロールに沿って横に流れ、上のタブが今見ている分類を示します。
02 · OFFICIAL SHOPS
12 か所
メインデザイン案には店舗名・住所・電話番号も入っています。この記録では地域名だけを残しました。
03 · NOTICE
正規輸入品ではない模造品が流通しているため、サポートシーンの最初のカードにオレンジの点とともに案内を置いています。「正規品の見分け方を見る」を押すと、正規品と模造品のヘッドチューブ・ロゴ・仕上げを並べて比較した案内文が開きます。
8月の最初のデザイン案と11月のメインデザイン案、そのあいだに描いた3つの線まで、いくつかの方向を提案しましたが、最終的な選択には至りませんでした。
それでも最初の画面を風に任せるという判断は、今もう一度しても変わらないと思います。Pinarelloがフレームをあのように削る理由と、NEOFLYがその自転車を韓国に伝える理由が、同じ場面にあるからです。
暗い格子の画面にラインナップフィルターとA/S案内を収めた最初のメイン画面
時間・道・風で描いた3つのファーストビューと評価表
Canvasで直接レンダリングした240フレーム、横・縦の2種
フィルム・4色・ラインナップ・アートペイント・パーツ・ライド・販売店・サポートの8シーン
最初のデザイン案はタイトルをPINARELLOと大きく組み、メインデザイン案の初期版もヘッダーロゴがPINARELLOでした。最後の修正版でヘッダーロゴをneoflyに変え、PINARELLOのロゴはフッターに並べて置きました。物語はPinarelloが語り、案内はNEOFLYがします。
新しいカラーリングは季節ごとに出ます。写真を1枚変えるだけでよい場所をあらかじめ用意しておけば、新しい色が出てもホームページ全体を直さずにすみます。
正規輸入元が直接運営するのは1か所ですが、相談と整備は12か所で行っています。地域タブでリストを絞り、いちばん近い場所をすぐに見つけられるようにしました。
NEOFLY · WEBSITE RENEWAL
Pinarello正規輸入元NEOFLYのホームページリニューアル提案
| Client | NEOFLY・Pinarello正規輸入元 |
|---|---|
| Scope | ホームページリニューアル提案・ロゴを読む・メインデザイン案 |
| Period | 2026年8月～11月 |
| Rounds | 8月の最初のデザイン案・3つの線・11月のメインデザイン案 |
| Film | 風洞フィルム240フレーム（Canvas 2Dレンダリング、横・縦の2種） |
| Identity | 今のロゴ · Ink #050809 · Teal #1FC2B0 · Orange #FF5A1F · Paper #F3F1EC |
| Tools | GSAP · ScrollTrigger · Lenis · Canvas |
| Typeface | Archivo · Pretendard |
| Studio | BlueCanvas |
ロゴの中の小さなストロークと12年の資料から出発し、長く乗る人がまた訪れるホームページを作ります。
病院・不妊治療
Yonsei Fertility Clinic
ロゴの若い実が上に切れ目のある円で、その切れ目から葉が芽吹くことから、6日目の胚が透明帯を開いて出てくる場面を読み取ったブランド解釈、病院名の真ん中にある「アイ・ソマン」と、1周期の大部分が待つことだという患者の時間割、成功率ではなく基準を添えた数字の文章、顕微鏡の下で見つけた6日目の色と、画面の1.3%だけに使う若草色、6日間のフィルム・朝8時・一粒の種という3つの方向と、直接レンダリングした240フレームの胚のフィルムで開いたメインデザイン案までを収めた、不妊治療専門クリニックのホームページリニューアルの提案過程
病院・乳腺甲状腺
Dr. Choi’s Breast & Thyroid Clinic
ロゴのUに結ばれたピンクリボンから出発し、超音波の扇形と蝶の形の甲状腺まで、三つの形で病院を説明するブランド解釈、検査から結果の電話まで患者が待つ七つの瞬間に合わせた画面設計、効果を約束していた2014年の文章を書き直した医療広告の文章基準、夜のRibbon Motion Filmと昼のLens & Bloom、二つのデザイン案を収めた乳腺・甲状腺外科クリニックのホームページリニューアル提案の過程
ブランド・ウエディング
Heritique New York
ニューヨークで選んだデザイナーのウエディングドレスをソウルで紹介するフラッグシップストアのリニューアル提案。Heritage Boutiqueを折りたたんだ名前、写真から測った14の白、白いドレスが最も映える背景、ベールが舞うスクロールフィルムまでをまとめました。
Contact
現在の状況と目標をお聞かせください。 実現可能な範囲、進め方、概算費用をご案内します。
DIRECT
お問い合わせを受け付けました。営業日1日以内に作業範囲とお見積りをまとめてご返信します。