Vodafone はグローバルな通信事業者で、個人、家庭、企業をつなぎます。UI は Vodafone レッド（#e60000）を唯一の支配色として使います——CTA、区切り帯、カラーバンド、音声商標、さらにはサステナビリティの地図上で回転する「IMPACT」のロゴタイプまで。144px、ウェイト 800 の大文字見出しと 16〜18px の穏やかな本文が緊張感を生み、ページには定まったリズムがあります。暗い雰囲気のヒーローエリア、巨大な大文字見出し、全幅のレッドバンド、白いエディトリアルキャンバス、チャコールの機関向けパネル。ボタンは 2px の直角（ツール用）と 60px のピル型（コンテンツ CTA 用）の 2 段階です。通信と企業ブランドのページに適しています。
Vodafoneメディアと消費
プロンプトテンプレート
基本テンプレート
Design a Vodafone-inspired interface. - Vodafone Red (#e60000) is the single dominant accent — used for CTAs, dividers, band sections, the speech-mark logo, and the rotated "IMPACT" brand-mark type on the sustainability map; - Monumental uppercase display type (up to 144px, weight 800, negative letter-spacing) paired with calm 16-18px body copy; - A universal page rhythm: dark atmospheric hero → monumental uppercase headline → full-width red band → white editorial canvas → dark charcoal institutional panel → charcoal footer; - Two-tier button system: tight 2px-radius rectangles for utility actions, fully-pill 60px buttons for primary content CTAs (both equally primary, selected by context); - Documentary photography (people, infrastructure, cities, nature) dominates over illustration; no stock-icon noise. Colors: #e60000, #ffffff, #3860be, #ac1811 with #e60000 accent. Typography: Vodafone.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Vodafone aesthetics. Use Vodafone color identity with #e60000 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Vodafone style. Use Vodafone color identity with #e60000 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Vodafone design language. Use Vodafone color identity with #e60000 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Vodafone visual identity. Use Vodafone color identity with #e60000 accents. Compelling, conversion-focused.
使用例
Vodafone アプリ
WebBuild a web app with Vodafone design language and #e60000 color system.
Vodafone ダッシュボード
ダッシュボードCreate a dashboard using Vodafone style with data visualization and Vodafone typography.
✅ 適した用途
- コンシューマー製品
- 通信ブランドの公式サイト
- 大型書体のタイポグラフィページ
❌ 適さない用途
- ミニマルな白黒のツール
- 密集したデータ管理画面
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。