白い紙面の上で、Al Jazeera は Roboto の 300 から 900 までのウェイト差で硬派なニュース体系を組み立てます。オレンジ #fa9000 はロゴブロックと 8px のセクション眉バーだけに限定し、ライブレッド #c31833 は速報帯・バッジ・タイムラインの点のみを担います。操作はすべて 18px 角丸の黒いピルで、企業ネットワークのページでは #181818 の暗いキャンバス、#272967 のインディゴのヒーローパネル、金色の罫線へと反転します。
Al Jazeeraメディアと消費
プロンプトテンプレート
基本テンプレート
Design an Al Jazeera-inspired interface. - Flat white news surface with hairline rules and zero shadows — hierarchy from type weight and density; - Orange #fa9000 only as the masthead logo block and the 8px bar before 300-weight uppercase section eyebrows; - Live red #c31833 reserved for breaking bands, LIVE badges and timeline dots on a silver rail; - Compact black pill controls at 18px radius, email capsule input at 22px; - Roboto across a 300–900 weight spread, with square-cropped 16:9 news photography. Colors: #ffffff, #fa9000, #c31833, #000000, #272967 with #fa9000 accent. Typography: Roboto.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Al Jazeera aesthetics. Use Al Jazeera color identity with #fa9000 accents. Single-column news feed, persistent LIVE pill, and a dot-rail live timeline.
💻 Web
Design a web application with Al Jazeera style. Use Al Jazeera color identity with #fa9000 accents. Packed multi-column news grid with hairline rules and a right rail.
📊 ダッシュボード
Design a dashboard with Al Jazeera design language. Use Al Jazeera color identity with #fa9000 accents. Timestamped live updates, Most Popular rankings, and red breaking alerts.
📄 ランディングページ
Design a landing page with Al Jazeera visual identity. Use Al Jazeera color identity with #fa9000 accents. Masthead logo block, orange eyebrow bars, and photo-dense story cards.
使用例
Al Jazeera ニュースフロント
WebBuild a news front page with Al Jazeera design language: white paper surface, orange logo block, 8px eyebrow bars, square 16:9 photography, and compact black pill buttons.
Al Jazeera ライブタイムライン
ダッシュボードCreate a live-blog dashboard using Al Jazeera style: red LIVE badges, timestamped update blocks on a silver dot rail, and a Most Popular list with oversized slate numerals.
✅ 適した用途
- ニュースメディアのトップページと速報特集
- ライブブログと分刻みのタイムライン
- 放送ネットワークのブランド・幹部紹介ページ
❌ 適さない用途
- 丸いカードと挿絵が中心のポップなアプリ
- 割引訴求が主役の EC キャンペーンページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。