emu-branding について
デザイナーやコンテンツ制作者向けに、EMU の制作物に関するブランド規範をまとめたスキルです。ロゴ、色、書体、画像、チャート、ダークモード、SNS の仕様と、実装資料や素材を提供します。
主な機能
- 01ロゴ素材と配置ルール
- 02EMU の配色とコントラスト指針
- 03Nebula Sans の素材と使用法
- 04写真とグラフィックの指針
- 05チャート、ダークモード、SNS 仕様
活用シーン
- 01EMU のポスターや文書のデザイン
- 02ブランドチャートや可視化の作成
- 03SNS 用グラフィックの準備
- 04Web コンテンツへの EMU スタイル適用
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/emu-brandingを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
assets/fonts/NebulaSans/license.txtreferences/implementation.mdscripts/font_face_css.py詳細
EMU のブランド
EMU（Egyesület a Magyar Ultrafutásért）の公式ブランドガイドラインです。
以下のアセットパスは、このスキルのディレクトリからの相対パスです。使用する前に絶対パスに変換してください。作成する出力は、ほとんどの場合、別の場所に保存されます。具体的なコード（HTML へのフォントの埋め込み、matplotlib／Pillow の設定、Office 文書）については、使用する媒体が決まったらreferences/implementation.mdを一度お読みください。
ブランドアイデンティティ
| 項目 | 値 |
|---|---|
| 正式名称 | Egyesület a Magyar Ultrafutásért |
| 短縮名／略称 | EMU |
| ミッション | ハンガリーおよび世界各地で、ウルトラランニングを促進し、支援します！ |
| 主要イベント | EMU 6-Day Race |
ロゴには、団体の略称にかけた、様式化された走るエミューが描かれています。胴体はグレー（#4F4C4D）、首は EMU Blue、頭部は黒で、その下に EMU Blue の小文字のスラブセリフ体でemuのワードマークが配置されています。
ロゴ
| アセット | パス | 用途 |
|---|---|---|
| バッジロゴ | assets/images/emu-logo.png | 白い円形バッジに配置。暗い背景や複雑な背景、アバター、ファビコン向け |
| 透明ロゴ | assets/images/emu-logo-transparent.png | 背景が透明で高解像度。白や明るい背景、ポスター、ヘッダー、文書での標準的な選択肢 |
明るい背景に直接配置する場合は、透明バージョンを優先してください。背景が暗い、テクスチャ付き、写真、または EMU Blue の場合はバッジバージョンを使用してください。暗い背景ではグレーの胴体が見えにくくなり、青い背景では首とワードマークが見えなくなります。
使用ルール
- ロゴの周囲には十分な余白を設けてください（各辺でロゴの高さの最低10％）
- 変形、回転、色の変更はしないでください
- 最小サイズ：デジタルでは高さ40px、印刷では15mm
- 暗い背景、写真の背景、または EMU Blue の背景では、バッジバージョン（
emu-logo.png）を使用してください - ロゴ画像を必ず配置してください。「emu」のワードマークを Nebula Sans やその他のフォントで打ち直さないでください。スラブセリフ体のワードマークはロゴの一部です
カラーパレット
プライマリーカラー — EMU Blue
ブランドで最も重要な単一の色です。コードでは EMU Blue と定義されています。
| 項目 | 値 |
|---|---|
| HEX | #00ADEF |
| RGB | 0, 173, 239 |
| 用途 | 主要なアクセント、単一系列のチャート、面グラフの塗りつぶし、ヒストグラムの棒、CTA ボタン |
透明度を指定して塗りつぶしに使用する場合（例：面グラフの背景）は、アルファ値を50％にした EMU Blue を使用してください。
補助色
デザインやマーケティング資料で EMU Blue を引き立てる色です。
| 色 | HEX | 用途 |
|---|---|---|
| 白 | #FFFFFF | 背景、ネガティブスペース |
| ライトグレー | #F5F5F5 | カード、背景の変化 |
| ダーク（ほぼ黒） | #1A1A1A | 見出し、強調テキスト |
| ミディアムグレー | #5A5A5A | 本文、補助的な要素 |
| ダークブルー | #006BA6 | ホバー状態、リンク、明るい背景上の青いテキスト |
| エミューグレー | #4F4C4D | ロゴの胴体色。補助的なグラフィックアクセント、チャート系列 |
コントラスト — EMU Blue の使用に適した場所と適さない場所
EMU Blue は明るい色です。白とのコントラスト比はわずか2.5:1で、読みやすいテキストに必要な4.5:1を下回ります。そのため、繰り返し適用するいくつかの判断基準があります。
| 組み合わせ | 比率 | 用途 |
|---|---|---|
EMU Blue 上の #1A1A1A のテキスト | 6.8:1 | ボタン、バッジ、バナー。青い塗りつぶし上での標準 |
| EMU Blue 上の白いテキスト | 2.5:1 | 非常に大きなディスプレイ文字（太字で40px以上）のみ。本文やボタンラベルには使用しない |
| 白地に EMU Blue のテキスト | 2.5:1 | 大きな見出しと装飾的なアクセントのみ |
白地のダークブルー #006BA6 | 5.8:1 | リンクや、明るい背景上の小さな青いテキスト |
ダークブルー #006BA6 上の白 | 5.8:1 | 白いテキストを使いたい場合の代替ボタンスタイル |
#121212 上の EMU Blue | 7.3:1 | ダークモードでのリンクやアクセント。EMU Blue が映えます |
タイポグラフィ
公式ブランドフォント — Nebula Sans
ブランドフォントはNebula Sansです。スキルのアセット内の assets/fonts/NebulaSans/ に、OTF、TTF、WOFF2形式で同梱されています。
利用可能なウェイト：
| ウェイト | ファイル名 | 推奨用途 |
|---|---|---|
| Light | NebulaSans-Light | 装飾、大きなディスプレイテキスト |
| Book | NebulaSans-Book | 本文、段落 |
| Medium | NebulaSans-Medium | 小見出し、UIラベル |
| Semibold | NebulaSans-Semibold | セクションタイトル、強調 |
| Bold | NebulaSans-Bold | 見出し、CTA |
| Black | NebulaSans-Black | ヒーロータイトル、ポスターの見出し |
すべてのウェイトにItalicバリアントもあります（例：NebulaSans-BoldItalic）。
フォールバックスタック： Montserrat、Open Sans、Roboto、system sans-serif
Nebula Sansはハンガリー語のアルファベット全体（ő、ű、Ő、Ű）、組版用引用符（„ ”）、エンダッシュに対応しているため、ハンガリー語の文章にフォールバックフォントは必要ありません。
フォントサイズ（Web／印刷）
| レベル | サイズ | ウェイト |
|---|---|---|
| H1 | 36–48px | Bold または Black |
| H2 | 28–32px | Bold |
| H3 | 20–24px | Semibold |
| 本文 | 16px | Book |
| 小 | 14px | Book または Light |
フォントの読み込み
フォントが実際に表示されてはじめて、ブランドに沿ったデザインになります。フォントを読み込まずにページで 'Nebula Sans' を指定すると、気づかないうちにArialにフォールバックします。ウェイトの対応関係：Light=300、Book=400、Medium=500、Semibold=600、Bold=700、Black=900。
- HTML：
python3 scripts/font_face_css.py Book Bold Blackを実行すると、WOFF2ファイルをBase64で埋め込んだ@font-faceルールが出力されるため、単一ファイルのページをどこでも使用できます。代わりにファイルをコピーしてリンクする場合は、--href fontsを追加します。 - matplotlib／Pillow： TTFファイルを絶対パスで登録または開きます。
- Word／PowerPoint： フォントは埋め込まれず、名前で参照されます。ユーザーにその旨を伝えてください。
詳細と各種スニペットについては、references/implementation.md を参照してください。
ビジュアルスタイル
写真
- ウルトラランニングのアクション写真 — 道路を走るランナー
- ハンガリーの風景やレースイベント（特にEMU 6-Day Raceの会場）
- 自然光を活かした、躍動感とエネルギーのある構図
- 過度に演出された印象やストックフォトのような雰囲気は避ける
グラフィック要素
- すっきりとしたモダンな線 — 過剰な装飾は避ける
- エミューのシルエットは、装飾要素やパターンとして使用できます
- アクセントカラーはEMU Blueを主体にする
- 背景やフレームにはシンプルな幾何学図形を使用する
データの可視化とチャート
チャートやデータの可視化を作成する際は、次のスタイルを使用してください。
| 要素 | スタイル |
|---|---|
| 単一系列 | EMU Blue #00ADEF の塗りつぶし |
| 領域の塗りつぶし | 不透明度50%のEMU Blue |
| 複数系列のパレット | 次の順に使用：#00ADEF、#006BA6、#4F4C4D、#80D6F7、#1A1A1A、#A7A5A6 — 系列が6つを超える場合は、チャートを分割してください |
| 1項目を強調 | その項目をEMU Blueにし、それ以外の棒や線はすべて #C8C8C8 にする |
| グリッド線 | #E0E0E0、1px |
| 軸ラベル | Nebula Sans Book、#5A5A5A、14px |
| チャートタイトル | Nebula Sans Semibold、#1A1A1A、20px |
| 注釈 | Nebula Sans Medium、EMU Blue |
すっきりとした最小限のチャートスタイルを使用し、3D効果、過剰なグリッド線、太い枠線は避けてください。デフォルトでは背景を白にします。タイトルは左揃えにし、上と右の軸線を削除します。読み取れる項目数であれば、棒に値を直接表示してください。ソーシャルメディア向けのチャートでは隅に小さなロゴを配置してもかまいませんが、EMUの文書に埋め込むチャートでは省略してください。
ダークモード
暗い背景やダークモードのUI向けにコンテンツを作成する場合は、次の設定を使用してください。
| 要素 | ライトモード | ダークモード |
|---|---|---|
| 背景 | #FFFFFF | #121212 |
| カードの表面 | #F5F5F5 | #1E1E1E |
| 主要テキスト | #1A1A1A | #E0E0E0 |
| 補助テキスト | #5A5A5A | #9E9E9E |
| EMU Blue | #00ADEF（変更なし） | #00ADEF（変更なし） |
| グリッド線 | #E0E0E0 | #333333 |
EMU Blueは明るい背景より暗い背景のほうが見やすく（#121212 上で7.3:1）、ダークモードではリンクや小さなアクセントテキストにも使用できます。暗い背景ではバッジロゴ（emu-logo.png）を使用してください。白い円が必要なコントラストを確保します。
ソーシャルメディア
投稿の寸法
| プラットフォーム | 形式 | 寸法 |
|---|---|---|
| Instagramの投稿 | 縦長（推奨 — フィード全体に表示されます） | 1080×1350px |
| Instagramの投稿 | 正方形 | 1080×1080px |
| Instagramストーリー | 縦型 | 1080×1920px |
| Facebookの投稿 | 横長 | 1200×630px |
| Facebookのカバー画像 | ワイド | 1640×924px |
| X/Twitterの投稿 | 横長 | 1600×900px |
ハッシュタグ
#EMU6DayRace#6DayRace#6DayRun#ultrafutás（ハンガリー語）#ultrarunning
トーンと文体
- 熱意があり、意欲を高める — ランナーの成果を称えます
- コミュニティを築く — すべてのウルトラランナーを受け入れます
- プロフェッショナルでありながら、親しみやすく分かりやすい表現
- バイリンガル：国際的な読者には英語、地域のイベントにはハンガリー語を使用
- ハンガリー語のコピーでは、ハンガリー語の表記規則に従います：「idézőjel」、小数点にはコンマを使用（
812,3 km）、日付は2026. május 18.、千の位の区切りには狭いスペースまたはスペースを使用（1 000 km）