No. 33
ネオン・ブルータル Neon Brutal
太い黒罫・等幅・剥き出しの構造・蛍光ライム1色で組む高コントラストのデジタル・ブルータリズム。整えず、崩したグリッドと反転で生の勢いを設計する。音楽・イベント・カルチャー・クリエイティブに。
仕様
| 書体 | 等幅書体 |
|---|---|
| 配色 | 明暗差の大きい配色 |
| 情報量 | 情報量多め |
| レイアウト | ずらし・重なりのある格子 |
| 装飾 | 無骨で構造的 |
| 動き | 控えめな動き |
| 雰囲気 | 躍動感 / 先鋭的・緊張感 |
| 業種 | イベント / 作品紹介・クリエイティブ / ファッション・アパレル |
| 架空企業 | 架空・実験音楽×デジタルアートの祭「電磁祭 DENJI 2026」（大阪） |
| 利用条件 | 商用利用可・改変可・クレジット不要 |
このブランドのロゴ
実際のロゴ生成指示を見る
# 電磁祭 — ヘッダーロゴ ## 制作 2026-09-15 / built-in imagegen。既存サイトのロゴ画像は入力せず、架空ブランド向けに新規生成。 - 画像: `assets/logo.webp`（生成結果をWebPに圧縮、アルファ保持） - 用途: トップページのヘッダー、または固定サイドのブランド表示 - 方向: experimental electronic festival, sharp industrial Japanese stencil lettering and electrical cut shapes - 表示: 最大 74 × 25px の枠内で縦横比を保持。スマートフォンでは幅と高さを縮小。 - ブランド名はalt属性に保持。リンクとナビゲーションは既存のまま。 - 同じ画像をデモHTMLに埋め込み、単一ファイルでも表示可能。 - 背景に応じたCSSフィルター: `none`。 ## 実際の生成プロンプト ```text Use case: logo-brand. Create one finished original website header logo for the fictional brand "電磁祭". Art direction: experimental electronic festival, sharp industrial Japanese stencil lettering and electrical cut shapes. Palette: black with a tiny acid yellow accent. Exact text only: "電磁祭". Compose an integrated distinctive emblem and custom drawn lettering as ONE compact horizontal lockup, about 3:1 ratio, occupying almost the entire canvas with only 4 percent padding. Must remain legible at 160px wide. Truly transparent alpha background; no background rectangle, mockup, paper, scene, shadow, 3D, watermark, extra labels or logo variations. Clean high resolution flat artwork. Do not imitate any existing brand logo. For Japanese text preserve every character exactly. ``` ## 運用 参考サイトのロゴ・商標を流用していない。生成物の商標調査・法的な類似性審査は未実施。 ### サイズ調整 ヘッダーの占有面積を抑えるため、ロゴを 74 × 25px、モバイルを 68 × 23px に縮小。本文の見出しより控えめな大きさにする。
DESIGN.md
# DESIGN.md — ネオン・ブルータル / neon-brutal
> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）
## 1. コンセプト
「整える」ことを疑う。太い罫、等幅、剥き出しの構造、蛍光1色。装飾で滑らかにせず、
情報そのものを塊として積む。ただし乱雑ではなく、**意図して崩したグリッド**と
高コントラストで、生（raw）の緊張と勢いを設計する。AIが必ず避ける荒さを、正面から使う。
**キーワード**: 生 / 等幅 / 高コントラスト / 蛍光 / 剥き出し
**この見た目が向く場面**: 音楽・イベント・フェス・カルチャー・クリエイティブスタジオ・実験的プロダクト
## 2. タイポグラフィ
- 欧文・数字・ラベル: Space Mono（等幅。ラベルは大文字＋角括弧 例 [LINE-UP]。
数字・日付・時刻を主役級に大きく組む。**Inter に置換しない**）
- 和文（見出し・本文とも）: BIZ UDGothic（全角の等幅感がグリッドに乗る。硬く無骨）
- 本文: 14px / 行間 1.7 / 字間 0（詰める。ゆったりさせない）
- 見出しスケール: 特大 96〜160px（画面をはみ出す勢いで）/ h2 28px / ラベル 12px
（モバイルは特大 56px / h2 22px）
- 特記: 見出しは太さ 700 で詰めて組む（字間 -0.02em）。強弱は「大きさ」と「反転」で作る。
英字ラベルは 12px・大文字・字間 +0.1em・角括弧つき。キャッチは命令形・体言止めで短く
## 3. カラー
黒 × コンクリート白の高コントラスト＋**蛍光ライム1色**（high-contrast）。
中間色に逃げない。グラデーションを使わない（フラットの塗り分けのみ）。
| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（コンクリート白） | #e7e4d8 | 55% |
| 地/反転ブロック（温かい黒） | #14130d | 30% |
| テキスト・太罫（黒） | #14130d | — |
| テキスト（弱・グレー） | #6a685c | — |
| アクセント（蛍光ライム） | #ccff00 | 10%前後 |
- 配色ルール: 蛍光ライムは「面のブロック塗り」「ハイライト（黒地に蛍光文字）」
「太い下線/マーカー」に使う。**グラデにしない・複数の蛍光色を足さない**
（多色ネオンはAIの手癖。蛍光は1色だけ）。信号色（赤緑黄の併用）を作らない
- 反転は積極的に使う（黒地＋コンクリート白 or 蛍光文字）。純白 #ffffff・純黒 #000000 は
使わない（黒は #14130d、白は #e7e4d8）。青・紫を一切足さない
## 4. レイアウト・余白
- コンテンツ最大幅: 1280px / **broken-grid**（整然としたグリッドを意図的に崩す。
要素を数 px 重ねる・ずらす・少しだけ回転させる〈±1.5deg 程度〉）
- 情報密度: dense（余白で逃げない。罫線で仕切って詰める。1画面に要素を多く積む）
- グリッドの性格: **太い罫線（2px 黒）で領域を仕切り、罫を見せる。** セルの境界は
border で明示。表・タイムテーブルはブルータリズムの得意技として罫で組む
- 各節の頭に「角括弧ラベル＋節番号（Space Mono、例 [01 / ABOUT]）」を太罫の上に置く
- ヒーローの構成: 中央寄せの整った定型にしない。**特大の見出しを画面端まで（時にはみ出して）
置き**、日付・会場・インデックスを別ブロックで非対称に積む。要素を少し重ねる。
「中央寄せ見出し＋サブコピー＋ボタン2つ＋背景グラデ」を作らない
## 5. コンポーネントの質感
- ヘッダー・ナビゲーション: 太罫で囲った地色バー。ナビは大文字ラベル。
ホバーで**色が反転**（黒地に蛍光 or 黒地にコンクリート白）。下線は使わずブロック反転で示す
- 角丸: 0px（全要素直角）/ 影: 使わない（box-shadow なし。立体を作らない。平面と罫で構成）/
境界線: **2px solid #14130d（太い黒罫を主役の一つとして使う）**
- ボタン: 直角・太罫・大文字ラベル。主ボタンは**蛍光ライム地＋黒文字**、
ホバーで黒地＋蛍光文字に反転（0.1s、動きは瞬時）。副ボタンは太罫・地色
- カード的要素: 影や角丸で作らない。**太罫で囲ったブロック**を敷き詰める。
「アイコン＋見出し＋説明の3カラム角丸カード」を作らない（罫で囲ったセルにする）
- 表・タイムテーブル: 2px 罫の格子。等幅数字で時刻を揃える。ヘッダ行は黒地反転
- リンク: 黒文字＋ホバーで蛍光マーカー（背景が蛍光に）。角括弧や → を添えてよい
- フォーム要素: 太罫・角丸0・地色背景。フォーカスで罫が蛍光に。ラベルは大文字ラベル
- 画像の扱い: 使う場合は角丸なし・太罫で囲う・グレースケール or 高コントラスト2値化。
装飾フィルタでなく「粗さ」を活かす
- アクセント（蛍光）の適用範囲: ブロック塗り・反転ハイライト・マーカー・主ボタンに限定
## 6. モーション
- 量: subtle（動きで飾らない。ブルータリズムは静的な強さ。ホバーの反転が主役）
- 使う動き: ホバー時の色反転（0.1s、瞬時に近い）/ 主ボタンの反転。以上
- 使わない動き: **マーキー（電光掲示板風の横流れ）を使わない**（ブルータリズムの誘惑だが、
AI量産の手癖でもあるので避ける）。スクロール連動フェード・パララックス・数字カウントアップ・
自動カルーセル・バウンスも使わない。動きは「反転」だけに絞る
- prefers-reduced-motion 時もホバー反転は色変化のみで可（動きを伴わない）
## 7. 写真・イラスト・図版
- 写真がなくても成立させる（等幅・太罫・蛍光ブロック・大きな数字が主役）。
図が要るなら罫線と等幅文字による ASCII/罫線図（会場マップ等）で描く
- 絵文字・既製アイコンセット・グラデ抽象ブロブを使わない。記号は約物（→ / ■ / ※ / ×）や
角括弧ラベルで代替する
## 8. 禁止事項（must not）
- Inter / Roboto / Arial / Noto Sans を使わない（Space Mono / BIZ UDGothic で組む）
- グラデーションを一切使わない（背景・文字・ブロックすべてフラット塗り）。box-shadow を使わない
- border-radius を使わない（常に 0）。「3カラムの角丸カード＋影」を作らない
- **蛍光色を複数使わない**（ネオン多色はAIの手癖。蛍光は #ccff00 の1色だけ）。青・紫を足さない。
信号色（赤緑黄の併用）を作らない
- 純白 #ffffff・純黒 #000000 を使わない（黒は #14130d、白は #e7e4d8）
- マーキー（横スクロールの電光掲示板）・スクロール連動アニメ・数字カウントアップを使わない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ＋背景グラデ）を作らない
- 絵文字・既製アイコンセットをアイコンに使わない
- 「整えて滑らかにする」方向の装飾（余白での上品化・柔らかい影・淡いパステル）を足さない
## 9. 実装ノート
```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
--color-bg: #e7e4d8; /* コンクリート白（純白は使わない） */
--color-bg-dark: #14130d; /* 反転ブロック用の温かい黒（純黒は使わない） */
--color-ink: #14130d; /* 文字・太罫 */
--color-text: #14130d;
--color-muted: #6a685c; /* 副次テキスト */
--color-acid: #ccff00; /* 蛍光ライム。フラット・1色のみ */
--color-line: #14130d; /* 罫線は黒。太く使う */
/* 変数には総称ファミリ(monospace/sans-serif)を含めないこと */
--font-latin: "Space Mono";
--font-heading: "BIZ UDGothic";
--font-body: "BIZ UDGothic";
--border: 2px; /* 太罫の基本太さ */
--radius: 0;
--max-width: 1280px;
}
```
- フォント読み込み:
`https://fonts.googleapis.com/css2?family=BIZ+UDGothic:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), monospace` の順に指定する
（英数字が自動で Space Mono になる）
- 太罫は `border: var(--border) solid var(--color-line);`。ブロックを罫で敷き詰める
- broken-grid は `transform: rotate(-1.5deg)` や負の margin での数 px の重なりで作る。
やり過ぎず「わざと少し崩れている」程度に留める
## ヘッダーロゴ（2026-09-15追加）
ブランド表示には新規生成した `assets/logo.webp` を使う。画像生成指示と表示条件は `LOGO.md` に記録。デモは画像を埋め込み、altにブランド名を残している。従来の本文用フォントによるロゴ表記は、この画像仕様に置き換える。別ブランドへ応用する場合はブランド専用に生成し直す。