DJI のページは明るい製品ショールームのようです。全幅のスタジオレンダーが等幅の白い溝で区切られた角丸なしのタイルに収まり、UI は写真の後ろへ退きます。主操作はすべて単一のエンジニアリングブルーのピルが担い、ブランドサイトでは #0070d5、ストアでは #0060ef を使い、1px のインク色アウトラインのピルが二次操作を引き受けます。製品ランクは焦げ橙（#be4e04）の小さなアイブロウでのみ示され、Open Sans は -0.02em から -0.03em の負のトラッキングと 600/400 の狭いウェイト幅で引き締まったエンジニアリング感のある読み味をつくり、ストアでは 8px のオプションカード、2px のブルーの選択リング、追従する購入バーが重なります。
DJIメディアと消費
プロンプトテンプレート
基本テンプレート
Design a DJI-inspired interface. - Photography-first showroom: full-bleed studio renders in square, gutter-separated tiles on a white canvas; - One engineering blue for every primary action -- #0070d5 on the brand site, #0060ef in the store -- always expressed as a pill, with 1px ink-outline pills for secondary actions; - Open Sans throughout with negative tracking (-0.02em body, -0.03em headings) and a narrow 600/400 weight range; - Burnt-orange (#be4e04) eyebrow labels marking product tier, never used as a button fill; - Store surfaces built from 8px option cards with a 2px #0060ef selection ring and a sticky white purchase bar. Colors: #0070d5, #0060ef, #be4e04, #262626, #ffffff, #f5f5f5 with #0070d5 accent. Typography: Open Sans.
バリエーションプロンプト
📱 モバイル
Design a mobile app with DJI aesthetics. Use DJI color identity with #0070d5 accents. Photography-led cards, pill actions, and a compact sticky purchase bar.
💻 Web
Design a web application with DJI style. Use DJI color identity with #0070d5 accents. Square studio tiles, white gutters, and restrained engineering-blue actions.
📊 ダッシュボード
Design a dashboard with DJI design language. Use DJI color identity with #0070d5 accents. Telemetry cards, clear spec hierarchy, and pill-shaped filters.
📄 ランディングページ
Design a landing page with DJI visual identity. Use DJI color identity with #0070d5 accents. Full-bleed product hero, square tiles, and a single blue conversion path.
使用例
DJI 製品ストア
WebBuild a DJI-style product store page with a full-bleed hero carousel, square studio tiles, and #0070d5 pill CTAs.
DJI 飛行データダッシュボード
ダッシュボードCreate a drone fleet dashboard using DJI's restrained system: white canvas, Open Sans, spec cards, and #0070d5 status pills.
✅ 適した用途
- ドローンとカメラ製品のページ
- スタジオ撮影風のハードウェア展示
- コンシューマー電子機器ストア
❌ 適さない用途
- 高密度な管理画面のテーブル
- 柔らかなライフスタイルブランド
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。