Mozilla Protocol

Mozilla Protocol / 2017– / スタイル / プラットフォームの画面言語

MozillaとFirefoxのウェブサイトを、meaningful、flexible、accessible、global、usefulという原則と、コード化された部品で結ぶデザインシステム。内容を装飾より前へ置き、翻訳や端末差を受け止める。

Mozilla Protocol — AI生成の解釈イメージ 1 — AI生成の解釈イメージ（参考作品ではありません）

Mozilla Protocol — AI生成の解釈イメージ 2 — AI生成の解釈イメージ（参考作品ではありません）

Mozilla Protocol — AI生成の解釈イメージ 3 — AI生成の解釈イメージ（参考作品ではありません）

ひと目で判断

見た目の特徴

黒い見出しと広い白場
鮮色の大きな面とFirefoxのグラデーション
柔軟に伸びるbillboardとcard
太い見出し、短い本文、明確なCTA

向いている用途

オープンウェブ製品の説明を世界の言語と端末へ展開するとき
ブランドの鮮やかさを保ちながら内容とアクセシビリティを優先するとき

このスタイルを使う

短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。

design.md 画像プロンプト JSON API MCP・機械向け入口掛け合わせ

ChatGPTで開く Claudeで開く Google AIで開く

詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式

辞書情報

文字: 短い太字見出しと読みやすい本文を使い、翻訳で長くなる余地を残す。
構成: 大きな一メッセージの面と、再利用できるカード群を明確に分ける。
素材: 白黒を基礎に、紫・橙・青のグラデーションを焦点へ限定する。
注意: Firefoxのグラデーションを全面へ広げると内容が負ける。色は意味と焦点を補強する場所だけに置く。
関連研究: Protocolの五原則 / global localization / HTML/CSS中心のpattern library

関連項目

ウェブ1.0（Web 1.0）対比する意味がある項目として編集上つながっている。Mozilla Protocolとウェブ1.0の違いを見る
GitHub Primer（GitHub Primer）同じ「プラットフォームの画面言語」の系統。Mozilla ProtocolとGitHub Primerの違いを見る

プラットフォームの画面言語をさらに見る

同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。

BBC GEL（BBC Global Experience Language）共通する印象：信頼 / 技術 / 高揚。
Elastic UI（Elastic UI）共通する印象：技術 / 信頼 / 高揚。
モチーフ（Motif）共通する印象：技術 / 信頼。

プラットフォームの画面言語の全項目を見る

この項目を引用する

辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。

Link: https://indexstyle.org/ja/styles/mozilla-protocol
Markdown: [Mozilla Protocol（Mozilla Protocol） — デザインスタイル辞典](https://indexstyle.org/ja/styles/mozilla-protocol)
HTML: <a href="https://indexstyle.org/ja/styles/mozilla-protocol">Mozilla Protocol（Mozilla Protocol） — デザインスタイル辞典</a>

一覧内の位置へ戻る