Saemyung ADS · SAEMYUNG ADSRENEWAL PROPOSAL

部品と空のあいだ

航空宇宙・防衛産業部品サプライヤー Saemyung ADSのWebサイトリニューアル提案
TARGET LOCK・PRECISION FILM、2つの提案

ケースを読む

01 · PART部品1つの断面から始まります。

02 · PRESSURE見えない圧力を数字で読みます
風洞と飛行試験で圧力センサーがすることです

03 · WING円を広げると翼になります
翼の上下の圧力差が航空機を持ち上げます

04 · SKY小さな部品は空を支えます
Saemyung ADSが働く場所は部品と空の間です

01 / OVERVIEWプロジェクト概要

部品を供給し、
飛行を準備します

Saemyung ADSは、海外メーカーの4ヶ所の部品と装備を国内航空宇宙・防衛産業現場に供給する会社です。 Kuliteの圧力センサーは30年以上にわたり国内試験現場で使われ、KT-1とT-50、FA-50、KC-100、KUH、K2、K21、誘導武器に主要部品に入りました。ここにRBC Bearingsの航空ベアリングとWRAPの配管補修材、TTCのテレメトリ機器が加わります。

2013年に公開された今のサイトを一から描き直したらどうなるか、2026年10月にスクロールで動く二つの案をつくって提案しました。このページは、その過程で考えたことの記録です。

CLIENT: Saemyung ADS
Saemyung ADS Co., Ltd.
WEBSITE: smadsco.com
国文
OUR ROLE: リニューアルリサーチ、ブランド解析、
情報構造、UI、モーション、3Dフィルム
DELIVERABLE: メイン提案2種、3Dレンダリングフィルム2編、モバイル画面、カラー・書体・動き基準

30 年+ Kulite圧力センサーの供給 今のサイトの圧力センサーページに書かれた期間
4 か所 海外メーカー Kulite · RBC Bearings · WRAP · TTC
8個センサーが入ったシステムKT-1・T-50・FA-50・KC-100・KUH・K2・K21・誘導武器
424枚レンダリングされた3Dフレームベアリング256枚と圧力センサ168枚（横画面基準）

今サイトのロゴです。太い黒SMの横に斜線で切られた紫板があり、Mから伸びた棒3本が板の斜線で止まります。プレートの下部には白い文字でADSを書きました。

02 / CHALLENGE出発点

DWG NO. SM-2013-01smadsco.com/kr · HOMESCALE 1:2

KL@··· | 02-···

圧力センサー超精密ベアリングパイプライン補修/補強Telemetry System②

お知らせ資料室③

見積もり来る道④

①バナー一枚940×395px ・製品と航空機の写真をつなぎ合わせた図
② 製品ボックス4個 圧力センサー・超精密ベアリング・パイプライン補修/補強・テレメトリシステム
③ ニュース2つの記事 お知らせ・資料室の最近の記事
④ 連絡先2つの区画 見積もりのお問い合わせ・アクセス方法

今初画面の構成です（2026年10月基準）。 940px幅に合わせたバナー一枚下に商品ボックス4つとお知らせ2つの欄、見積もりお問い合わせとお越しの道順に置いてあります。

01
奥にあった最強の文章
KT-1とT-50、FA-50、K2に主要部品に入ったという文章は圧力センサーページの最初の段落にのみあります。最初の画面には、写真を貼り付けたバナーと製品ラインのリストが最初に表示され、この会社がどのような現場で働いてきたかをもう一度入れなければわかりませんでした。
02
モデル名でのみ探す資料115件
圧力センサページにPDF 60件、ベアリングページに39件、配管補修ページに16件が「Download PDF」と同じ名前のリンクにつながります。モデル名を既に知っているエンジニアには十分ですが、適用分野から出発する訪問者には入る道はありませんでした。
03
2013年の画面、詰まっている拡大
サイトは2013年のWordPress 3.6の上から940px幅の最初の画面に編まれています。携帯電話の画面設定には拡大を防ぐ値（user-scalable = no）が含まれており、一部の携帯電話ブラウザでは小さな仕様文字を指で育てて読み取ることができません。
04
2 つの場所に別々に書かれた住所
最初の画面の下と来る道のページに書かれた住所が互いに異なりました。事務所を移した後、一箇所だけ修正されたようです。同じ情報を一箇所で修正すると、すべての画面に反映される構造が必要でした。

03 / TWO WAYS両方向

空から降りる道、
部品から上がる道

Saemyung ADSの物語は2つの終わりに来る。一方の端にはKT-1やT-50のような航空機があり、もう一方の端にはその中に入る圧力センサーとベアリングがあります。両方の提案は、同じ物語を互いに反対方向に解決しました。

ATARGET LOCK 空→部品

雲の上の航空機
インストルメントパネルが点灯
ターゲットロック
会社紹介
分解されたベアリング
組み立てられたベアリング

B PRECISION FILM 部品→空

散在部品
分解図
組み立て
穴を越える空
空
天上の会社紹介

SKY ↔ PART
航空機と部品間の距離
航空機は長さが10mを超え、その中に入る圧力センサーは指先に上がる大きさです。 Saemyung ADSのサイトは訪問者をこの2つのサイズの間に連れて行かなければなりませんでした。
A · TARGET LOCK
空から部品へ
最初の提案は雲の上の航空機から始まります。スクロールすると、インストルメントパネルがオンになり、目標を固定した後、ベアリングが組み立てられるシーンに降ります。この部品が何のためにあるかから言う道です。
B · PRECISION FILM
部品から空へ
2番目の提案は、散乱軸受部品から始まります。部品が組み立てられ、回転し始めると、カメラは中央の穴を通り空に出ます。部品がどれだけ精密であるかを示す道です。
OUR READING
二つの長さに会う場所
どちらの提案も最後に同じ場所に到着します。メーカーと飛行システムの間で合う部品を選んで供給することが、Saemyung ADSがすることだからです。そこでこのケースのタイトルを「部品と空の間」に定めました。

04 / IDENTITYロゴと名前

3本のバーと
斜めに切られたプレート

リニューアルは、ロゴを再び読み始めた。サイトに載っているロゴは、横189px、縦50pxの小さなGIF一枚です。この絵を16倍に育て、画素の境界に沿って再描画すると、小さなサイズでは見えにくいテクスチャが現れました。

LOGO · 189 × 50 PXASSEMBLED

01SM・太字ヘッダー
Saemyungの頭文字SとMを非常に太いゴシック様式で書いた。文字は純黒ではなく、少し明るい＃191919です。
02バー3行・Mから伸びた線
Mの右の柱から、高さ5pxの3つの棒が右に伸びています。バーの間の2pxギャップはプレートのような紫です。私たちはこのバーを前進するスピードラインで読みました。
03斜線・66.7°に切った板
紫板の左上隅は水平から66.7°の傾斜斜線で切り取られ、バーの3本の線はこの斜線で止まります。このケースページのセクションマークもこの斜線に沿って描かれています。
04ADS・版の上の白い文字
プレートの下部に白い文字でADSを書きました。版の紫と白い文字は明度コントラストが8.1:1なので小さいサイズでも鮮明です。

オリジナルGIF・8倍 189×50px。文字の端の混合画素までそのまま見えます。

提案から移動して描いたロゴ提案を素早く描きながら、プレートを平行四辺形ひとつに減らしました。バー3列が抜けて見ても明るくなりました。

原本に沿って再描画されたベクトル正式制作では、元の棒や斜線、版の色をそのまま守ったこのベクトルのロゴを使います。

名前は4つで書かれていました

今サイトには同じ会社が4つの名前で書かれています。一つに減らすのではなく、画面ごとにどの名前を使うかを決めました。

Saemyung ADS Co.、Ltd. 法人名 契約書と見積もり
Saemyung ADS 韓国語画面 メニュー、本文、見積もり
SAEMYUNG ADS 英語の表記 フッターの英語の住所・著作権行
SM ADS ロゴ図面でのみ書き、文字で解凍しない

05 / COLOR色

夜空の黒、
ロゴの紫と飛行機雲のオレンジ

どちらの提案も、太陽の後の空を舞台にした。背景は黒に近い藍色で、その上にロゴの紫と地平線のオレンジ、金属部品の銀色をのせた。

問題はロゴの紫色でした。白い背景では鮮やかなこの紫色が暗い背景の上では2.4:1しかないので、ロゴの板が背景に埋もれてしまいます。

エディション・暗い背景 2.4:1 画像ベース3:1未満

両方の提案の基礎
フィルムとインストルメントパネルが最も鮮明に見える、黒に近い藍色です。
ロゴ版・明るい背景の強調
ロゴGIFで紫色に塗られた画素1,680個の平均値です。
暗い背景のロゴプレート
ロゴパープルの色合いを守りながら明るさだけ上げ、暗い背景と白のADS文字に合わせました。
暗い背景に紫の文字
紫色を文字で書くときはさらに一歩明かし、暗い背景でも小さな文字が読まれるようにしました。
ボタン・重要な数字・飛行機雲
夕焼けとエンジンライトからもたらしたハイライトです。両方の提案が同じ値を書き込みます。
金属・補助文字
ベアリングとセンサー本体のシルバーです。ボタンやリンク色では書きません。

組み合わせサンプルコントラスト決定

ロゴ版・オリジナルパープルAa#4 #07080C2.4:1未達 · 図 3:1

ロゴ版・提案で明かした紫色Aa #4F54A3 / #07080C 2.9:1未達・図3:1

ロゴプレート・ダークデスク版Aa #6461A8 / #07080C 3.6:1通過・図3:1

版の上の白いADS・暗い背景用版Aa#FFFFFF / #6461A85.5:1通過・文字 4.5:1

紫色の文字・暗い背景Aa#07080C6.7:1通過・文字 4.5:1

オレンジ色の文字・暗い背景Aa #F2883A / #07080C 7.9:1通過・文字 4.5:1

オレンジ色の文字・白地Aa #F2883A / #FFFFFF 2.5:1未達・文字 4.5:1

濃いオレンジ色の文字・白い背景Aa# #FFFFFF5.3:1パスと文字 4.5:1

01オレンジは動きと行動だけです
オレンジは、ボタンと最も重要な数字、飛行雲のように動く線にのみ書き込みます。広い面をオレンジで覆わないでください。
02紫は背景ごとにペアを決める
明るい背景にはロゴの紫色を、暗い背景には明るい紫色を使います。暗い背景上のロゴは、プレートの色だけが暗い背景用のプレートに置き換えられます。
03写真上の文字は暗い面の上に
空の写真とレンダー画面の上に文字を置くときは、下に暗いグラデーションを敷いて本文基準（4.5：1）を守ります。
04銀は金属のみ
チタンシルバーは部品と補助文字にのみ書き込みます。銀色のボタンは、暗い背景で押すことができる場所のようには見えません。

06 / TYPOGRAPHY書体

モデル名は
分割しないように

このサイトの読者はテストエンジニアと購入担当者です。これらは文よりもモデル名と数字を先に読みます。両方の提案は、タイトルと本文にPretendardを、モデル名と計測値にJetBrains Monoを書きました。

Pretendard · 800 / 400

小さな部品が空を支えます。

測定が正確でなければ試験を終えることができ、試験を終えなければ飛行が始まります。

JetBrains Mono · 500

PT-01 101.3 kPa

0123456789 · Ø ± ℃ ℉ kHz

XCQ-062 超小型圧力センサー
LL-080 薄い線形圧力センサ
APTE-51-1000 航空機用圧力センサー
CDAU-2010PCMデータ収集
nGWY-2000ネットワークゲートウェイ
MSSR-2000C-SA高速カメラシステム

今サイト提案をなぜ変えるのか

~~-65ºF To 450ºF~~ −65～450 ℉負数にはハイフンの代わりにマイナス記号を書き、度記号は序数記号 º ではなく ℉ で書き込みます。

~~150KHz~~ 150kHzキロヘルツは小文字のkで書いて、数字と単位の間を1マス浮かせます。

~~Flush Diaphrame~~ Flush Diaphragm仕様名の綴りをメーカー資料に合わせます。

~~2000ºF(1093ºC)~~ 2,000℉(1,093℃) 4桁の数字にはカンマを入れ、華氏と摂氏記号を正しく書きます。

−
負数と範囲のマイナスは、ハイフン（-）ではなくマイナス記号（−）で書かれます。
kPa
単位は数字と 1 桁で浮かせますが、行が変わっても数字と落ちないように束ねます。
XCQ-062
モデル名は固定幅フォントで書き、ハイフンから行が変わらないように一塊にまとめます。
KT-1
機種と体系名は公式表記にそのまま従います。 KT-1、FA-50、KUHのように書きます。

07 / STRUCTURE情報構造

10のページを
一度のフライトに

今、サイトはメニューの4つの下のページの10個に分かれています。 2つの提案は、メインページを1回の飛行のように続く7つのシーンに再編成し、製品資料と掲示板は今席を守るようにしました。

今・メニュー4個、ページ10個

会社紹介 会社紹介 取引先 アクセス方法
製品紹介 圧力センサー ベアリング パイプラインの補修 テレメトリシステム
資料室 新製品 Manual / Report
見積もり

提案・メイン一枚、七シーン

01 ファーストスクリーン 空と部品
02 会社紹介 30年の供給
03 システム KT-1から誘導武器まで
04 パートナーの4つの場所 Kulite · RBC · WRAP · TTC
05 適用分野 5つの産業
06 取引先 33か所
07 見積もり 仕様のみお知らせください

そのままにしておくこと

資料115件への2番目の道

モデル名を知らない訪問者も、磁気産業から出発してフィットする製品に届くように、適用分野5つとメーカー4ヶ所をつなぐ道を出しました。業界名をタップしてみてください。

KuliteRBCWRAPTTC

08 / PRESSURE LAB圧力実験室

圧力はどうやって
数字になるのか

Kulite圧力センサーの中心は、薄いシリコン膜の上に刻まれた4つの抵抗です。圧力が膜を曲げると、2つの抵抗の値が大きくなり、残りの2つの抵抗の値は小さくなります。 4つの抵抗を足のように接続した回路（ホイートストンブリッジ）は、その差を非常に小さな電圧に変えます。

バーを動かすか、メンブレンを押して圧力をかけてみてください。風とエンジンを選ぶと急速に変化する圧力がそのまま波形になります。

DIE · CROSS SECTION クリック

圧力0.0 kPa

出力電圧: 0.0 mV
R1・R3抵抗変化: +0.00%
R2・R4抵抗変化: −0.00%

OUTPUT · mV100 kPa = 100 mV

数字は原理を示しようとする例です（供給電圧10V、100kPaで出力100mV）。実際の出力と範囲はモデルによって異なります。圧抵抗シリコン素子は今、サイトの圧力センサページがKuliteの核心技術として紹介する方式です。

09 / MOTIONモーション

組み立て、通り抜け、
読み取る

動きの原則は4つあります。デバイスで「動作を減らす」をオンにすると、両方の提案が大きな動きを止め、すべての投稿を固定画面で表示します。

01
組み立て

散在した部品がスクロールに合わせて所定の位置を見つけます。最初の提案はブラウザでリアルタイムで描く3Dで、2番目の提案はあらかじめレンダリングされたフィルムでベアリングを組み立てます。
02
通り抜け

部品の中央の穴やインストルメントパネルの照準線を通過し、次のシーンに進みます。シーンとシーンの間を途切れないようにする装置です。
03
計測

圧力や進行状況などの数字は装飾ではなく、実際に動く値のように変わります。試験現場の画面に似ています。
04
固定

目標をキャッチする照準線のように、重要なシーンは画面にしばらく固定され、十分に読む時間を与えます。

最初の提案

TARGET LOCK空から部品へ

雲の上の航空機から始まり、インストルメントパネルが目標を固定し、リアルタイム3Dベアリングが組み立てられるシーンに降ります。 4つの製品は水平方向に流れるパネルで、用途は重なっているカードで示されています。

雲の上の航空機とインストルメントパネル（HUD）が点灯する最初の画面
一言ずつ明るくなる会社紹介文
ブラウザで描く3Dベアリングの分解・組み立て
水平に流れる製品パネルの4枚
積み重ねられる適用分野カード5枚

Pretendard · JetBrains Mono

DIRECTION NOTES

提案Ａのシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。

インストルメントパネルがオンになる最初の画面
スクロールすると、航空機に近づき、地平線と速度スケールが描かれ、最後に目標を固定します。
一言ずつ明るくなる文章
30年の供給履歴を盛り込んだ文章がスクロールに合わせて一言ずつ明るくなります。
リアルタイム3Dベアリング
外輪と内輪、ボールとケージが散在した状態で一つに組み立てられます。
水平に流れる製品
垂直スクロールが水平移動に変わり、パートナーの4つのパネルが通過します。

TARGET LOCK PALETTEPC画面シーン24枚で色ごとに近い画素の割合・オレンジは画面の0.7%のみです

A・TARGET LOCK空から部品に降りてきたら

B · PRECISION FILM部品の穴を通って再び空に

2番目の提案

PRECISION FILM部品から空へ

直接モデリングして1枚ずつレンダリングした3Dフィルムの2本がスクロールに合わせて助けます。散乱軸受が組み立てられた後、中央の穴を通り空に出て、パートナーの4つの場所は各チャプターごとに異なる演出として表示されます。

ベアリングフィルム第256章：組み立てから空まで
天上の計器盤と会社紹介
圧力センサーフィルム168枚と動くkPa値
描かれた軸受図面、巻きは複合素材テープ
センサから地上受信まで点灯する信号経路

Pretendard · JetBrains Mono

DIRECTION NOTES

B案のシーンの中で演出にボールを入れた瞬間を選びました。写真をタップすると、シーン別画面を大きく見ることができます。

穴を越える空
組み立てられたベアリングが回転し始めると、中央の穴に空が見え、カメラがその穴を通り過ぎます。
組み立てられる圧力センサー
分解されたセンサーがひとつに集まっている間、部品名表と圧力波、kPa数値が一緒に動きます。
スクロールで描く図面
ベアリングの外輪と内輪、ボールのピッチ源と寸法線がスクロールに合わせて順番に描かれます。
オンになる信号経路
センサから信号処理、エンコーダ、送信を経て地上受信まで、5つのマスが順番に点灯します。

FILM · FRAME BY FRAME

フィルムを手で回してみる

2番目の提案では、2枚のフィルムをフレーム単位で引き渡すことができます。画面の上から水平にドラッグするか、下のバーを動かしてください。

散在した外輪・内輪・ボール・ケージが組み立てられ、中央の穴を通り空に出ます。

001 / 079

PRECISION FILM PALETTE PC画面シーン33枚で色ごとに近い画素の割合・金属と夕焼けがもう少し広がりました

10 / PROCESSコース

最初の提案から
2番目の提案へ

最初の提案を画面に表示し、最初から最後まで戻ってみました。残念なことが3つ見え、2番目の提案はその3つを修正することから出発しました。

01映像がありませんでした
最初の提案の動きは写真とリアルタイム3Dでした。 2番目の提案は、ベアリングと圧力センサーを3Dでモデル化し、1枚ずつレンダリングした2枚のフィルムをスクロールに合わせます。
02最初の画面の後ろに空の画面がありました
最初の画面の演出が終わると、次のシーンが来るまで画面が黒くなる区間がありました。 2番目の提案は、ベアリングの真ん中の穴を通り、すぐに空のシーンにつながりました。
03製品が小さく見えた
水平に流れる製品パネルは画面の上下に余白が多かった。 2つ目の提案は、パートナーの4箇所を画面全体を書くチャプターに変え、チャプターごとに組み立て・図面・包み・信号経路で演出を異ならせました。

最初に比較した4つの方向

ストーリーのスケルトンを決めようとして、最初の画面のスケッチで4つの方向を比較しました。 2つの方向は提案となり、残りの2方向は捨てず、提案内の装置と資料整理方式に移した。

HUD
計器盤

飛行試験のインストルメントパネル画面をサイトの骨格にする方向です。地平線と目盛り、照準線がシーンを導きます。
最初の提案になりました
FILM
3Dフィルム

部品を直接モデリングしてレンダリングし、スクロールで回すフィルムで見せる方向です。
2番目の提案になりました
DRAWING
設計図面

部品の断面と寸法線を描く技術図面の方向です。
RBCチャプターの図面演出に移しました
CATALOG
仕様カタログ

モデル名と仕様表を前にするカタログの方向です。
製品ページと資料115件の整理方式に移しました

フィルム2本を作った順序

2番目の提案のベアリングと圧力センサーは、写真ではなく3Dでモデル化して1枚ずつレンダリングしたフレームです。スクロール位置に合ったフレームを選んで描くので、訪問者が降りる速度で部品が組み立てられます。

01モデリング
外輪・内輪・ボール・ケージ、センサーの本体・ねじ・膜・ケーブルを一般的な形でモデル化しました。メーカーの実際の図面を移動したわけではありません。
02照明と材質
金属の反射が生き残るように暗い背景の上にエッジライトを置き、ケージには真鍮色を塗りました。
03レンダリング
横画面用にベアリング256枚と圧力センサ168枚を、縦画面用にその半分を別々にレンダリングしました。
04ウェブに移動
フレームを軽い画像ファイルに変え、穴を越えて空が見えるシーンは、穴の位置をフレームごとに記録し、空の写真と重なります。

2つの提案が一緒に保つ4つのこと

2つの提案は最初の画面とは動きが異なりますが、下の4つはまったく同じです。どの提案を選んでもサイトの運営方法は同じでなければならなかったからです。

01見積もりはどこでも一度に
トップメニューの見積もりのボタンと最後のシーンが同じ場所につながります。製品名や適用環境だけを知らせればいいという案内をつけました。
02パートナーの4つの場所は同じです
番号とメーカー名、製品ライン、アプリケーション分野、メーカーサイトリンクを同じ順序で表示します。
03素材は消去しません
製品ページとPDF 115件、お知らせ・新製品・Manual/Report掲示板は、今のアドレスと管理者をそのまま書きます。
04動きを消すことができるように
モーションの縮小を有効にしたデバイスでは、フィルムと3Dを停止し、すべての投稿を固定画面で表示します。

写真のないシーンは新しく作成しました

航空機や製品、応用分野のシーンは今回の提案のために新たに作りました。 Saemyung ADSの実際の写真とメーカーの製品写真が決まったら同じ場所から変えることができるように、シーンごとに比率と焦点を合わせておきました。

11 / MOBILEモバイル

手のひらの上の
飛行試験

見積もりのお問い合わせは、試験現場や出張地で携帯電話で始まることが多いです。どちらの提案も、390ピクセルの画面でシーンを再編成しました。 2番目の提案は、縦画面用に別々にレンダリングしたフィルムを呼び出し、部品に画面の中央を埋めるようにしました。

COMPARE2つの提案はどう違いますか？

同じ会社を開く
二つのファーストビュー

両方の提案は同じ内容と同じ色を使用しますが、最初に訪問者に渡すシーンは異なります。最初の提案は航空機とインストルメントパネルで会社が働く現場を最初に示し、2番目の提案は3Dフィルムで部品の正確さを最初に示しています。 Saemyung ADSがこのサイトで最初に会いたい訪問者に応じて選択できるように違いをまとめました。

区分A · TARGET LOCKB · PRECISION FILM

ファーストスクリーン雲の上の航空機とインストルメントパネル散乱軸受と組み立てフィルム

方向空から部品へ部品から空へ

3Dブラウザでリアルタイムで描画するベアリングプレレンダリングされたフィルムの2つ（424枚）

製品水平方向に流れるパネルの4枚画面全体を書き込む4つの章

適用分野積み重ねられる5枚のカード画面を固定したまま変わる写真

読み込む両写真と3Dコードのみ受け取り、軽量です。フィルムフレームをパソコンから約12MB、携帯電話で約3.5MB受け取ります

似合う訪問者会社を迅速に把握しようとする購入・協力担当者部品の精度を確認しようとする試験・設計エンジニア

12 / CREDITSFLIGHT TEST CARD · BLUECANVAS WORKS 2026

SAEMYUNG ADS RENEWAL PROPOSAL