「みなづちAI」はリンクフリーです。リンクを行う場合の許可や連絡は不要です。引用する際は、引用元の明記と該当ページへのリンクをお願いします。
バナー画像（4:5）プロンプト
# テキスト
- メイン: {{型は、思考の輪郭を描く。}}
- メイン強調語(ネオンシアンで強調する部分): {{輪郭}}
- サブ: {{TypeScriptで学ぶ、設計思考としての型システム。}}
- 連載名(画面下部・英字+漢字):
- 英字: {{ENGINEER'S NOTES}}
- 漢字: {{エンジニアの覚書}}
- その他:
- 章ナビゲーション(画面下部・連載名直下・横並び3項目):
- 章1: {{01 / WHY}}
- 章2: {{02 / HOW}}
- 章3: {{03 / DEEPER}}
- 技術スタックタグ(画面右上・極小タイプライター風・3点縦並び):
- スタック1: {{> typescript: 5.4}}
- スタック2: {{> read time: 12 min}}
- スタック3: {{> updated: 2026.04}}
# 配色
- 背景: 深いミッドナイトネイビー #0A0E1A を主軸とし、画面全体に微細なグリッドパターン(直径1pxの極小ドットが等間隔で並ぶ、透過 8%の #1A2540 ダークブルー)、画面四隅に向かって #050811(限りなく黒に近いダークネイビー)へごく緩やかにフェード、画面右上方向にうっすらと #00F2FF ネオンシアンのグロー(透過 10%、ぼかし大)、ターミナルウィンドウの夜のコーディング環境
- 文字色:
- メイン本体(強調語以外): #F5F5FA(柔らかなクールホワイト、極太の幾何学サンセリフ、わずかなグロー発光)
- メイン強調語: #00F2FF(ネオンシアン、テック系の象徴色、わずかなネオングロー)
- サブ: #8B95B8(ライトスチールブルー、透過 90%)
- サブ内の「TypeScript」部分: #00F2FF(ネオンシアン、技術名は強調色で着色)
- 連載名(英字部分): #F5F5FA(柔らかなクールホワイト、字間極広め、ロゴ風)
- 連載名(漢字部分): #8B95B8(ライトスチールブルー、透過 75%、字間広め)
- 章ナビゲーション: #F5F5FA(柔らかなクールホワイト、透過 80%)、章番号「01/02/03」部分はネオンシアン #00F2FF でハイライト
- 技術スタックタグ: #00F2FF(ネオンシアン、ターミナル風プロンプト「>」付き)、値部分は #F5F5FA(クールホワイト、透過 85%)
- アクセント:
- 中央オブジェクト(ターミナル風コードエディタ): エディタ本体の枠は #1A2540(ダークブルー)、ウィンドウ内の背景は #0F1626(さらに深いダークネイビー、シンタックスハイライト用)、コード部分の文字はシンタックスハイライト4色(キーワード #C792EA パープル / 型 #00F2FF ネオンシアン / 文字列 #C3E88D ライムグリーン / コメント #8B95B8 ライトスチールブルー / 通常テキスト #F5F5FA クールホワイト)、エディタ上部に3つのウィンドウボタン(赤 #FF5F56 / 黄 #FFBD2E / 緑 #27C93F)、行番号は #4A5478 ミディアムスチールブルーで透過 60%
- エディタの周囲に浮遊するパーティクル: ネオンシアン #00F2FF とディープパープル #7000FF の混合、直径1〜3pxの細かな光点を 30〜50個、奥行きを感じさせるサイズ変化で散布、背景のグリッドパターンを補強
- エディタの上下から放射するグロー: #00F2FF(ネオンシアン、透過 25%、ぼかし大)、4:5縦長フォーマットに合わせて画面の縦軸方向に発光が広がる構成、ターミナルから情報が縦に放出されているような未来感
- 細い水平セパレータ・縦線: #00F2FF(ネオンシアン、透過 40%、線幅0.5px)
- メインコピー直下の手描き矢印装飾: #00F2FF(ネオンシアン、線幅0.8px、ダブルラインの細い水平線+先端の小さな三角矢印、グロー発光)
- 章ナビゲーションの上の細い水平ライン: #00F2FF(ネオンシアン、透過 35%、線幅0.5px)
- 画面四隅のコーナー装飾(照準マーク): #00F2FF(ネオンシアン、透過 50%、線幅1px、各角に小さな「+」マーカー、サイバー系の照準マーク風)
- エディタ下の影: #050811(限りなく黒に近いダークネイビー、透過 50%、柔らかなぼかし)、空中に浮遊するような立体感
- 背景のグリッドパターン: #1A2540(ダークブルー、透過 8%)、極小ドットが等間隔で並ぶ、画面全体に均一に配置
# フォント
- メインタイトル: 極太の幾何学サンセリフ(Inter Black 900 / IBM Plex Sans Bold / Space Grotesk Bold)、わずかに字間を詰めて密度感、テック系の現代的な格調
- メイン強調語: メイン本体と同じ書体、色のみ差し替え、わずかなネオングロー
- サブ: 細身の幾何学サンセリフ(Inter Light / IBM Plex Sans Light / Space Grotesk Light)、字間やや広め、技術名部分はネオンシアンで強調
- 連載名(英字): 中太の幾何学サンセリフ(Inter Medium / IBM Plex Sans Medium)、字間極広め(トラッキング+500)、テックロゴ風
- 連載名(漢字): 細身の角ゴシック(Noto Sans JP Light / IBM Plex Sans JP Light)、字間広め(トラッキング+300)
- 章ナビゲーション: モノスペース等幅(IBM Plex Mono Medium / Courier Prime)、英数字+日本語、字間広め、ターミナルのプロンプト風
- 技術スタックタグ: モノスペース等幅(IBM Plex Mono / Courier Prime)、英数字、ターミナルのコマンドライン風(プロンプト記号「>」付き)
- ※フォントのジャンプ率を高くしてください(メイン 5 : 連載名英字 1.4 : サブ 1.0 : 章ナビゲーション 0.85 : 技術スタックタグ 0.7 で多階層構成、極太幾何学サンセリフ×モノスペース等幅×サンセリフの3書体ミックスで「ターミナル文化と現代テック媒体の編集デザイン」の両立)
# 人物
※人物は登場しません(ターミナル風コードエディタのフラットイラスト+タイポグラフィ主役、4:5の縦長フォーマットを上下三層の縦軸構成で完全に活かす)
# レイアウト
- テキスト配置:
- 画面左上(余白約6%): 何も配置しない、純粋な余白(夜のターミナル画面の呼吸の空間)
- 画面右上(余白約5%): 技術スタックタグ3点を縦並びで右揃え配置、各タグはターミナルプロンプト「>」付きの極小モノスペース等幅、わずかなネオングロー
- 画面上部から約12〜30%エリア: メインコピーを2行配置(両行とも中央揃え、画面横幅の約86%エリア内に収める、メイン強調語の名詞「輪郭」だけがネオンシアンで色変えされる繊細な強調+わずかなネオングロー、行間ゆったり)
- メインコピー直下 約3%エリア: サブコピーを中央揃えで細字サンセリフ配置、技術名「TypeScript」のみネオンシアンで強調
- サブコピー直下 約4%下: 短い手描き矢印装飾(ダブルラインの細い水平線+先端の小さな三角矢印、長さ画面横幅の約12%、中央配置、ネオンシアンのグロー発光)
- 画面中央 約36〜68%エリア: 中央オブジェクトのターミナル風コードエディタ(占有 縦約32%・横約78%)を画面中央に配置、エディタの中心が画面の縦横中央±10%以内に来るように、エディタは正面のフラットなアングル(4:5縦長では立体的な角度よりも正面構図の方が画面の縦軸を貫く構成に呼応)、エディタの上下にネオンシアンのグローが縦方向に放射、エディタ周囲にパーティクルが散布
- 画面下部 約72〜80%エリア: 連載名を中央揃えで配置(英字を主、漢字を副、上下2行構成)
- 連載名直下 約3%下: 章ナビゲーションを中央揃えで横並び3項目で配置(上に細い水平ラインを引いて区切る、章番号部分はネオンシアンでハイライト)
- 画面四隅(各角から内側に約3%): 小さな「+」マーカー(線幅1pxのネオンシアン透過 50%、長さ各約12px)を4箇所配置、サイバー系の照準マーク
- 視線誘導: 画面右上の技術スタックタグ(技術文脈の即時設定) → 画面上部のメインコピー(ネオンシアンの強調語のグロー発光で視線停止) → サブコピー(具体情報、技術名がネオンシアンで色彩呼応) → 画面中央のコードエディタ(コードのシンタックスハイライトで再停止、視線がエディタ内のコード行を追う) → エディタ下のグロー(視線が画面下方向へ流れる) → 画面下部の連載名と章ナビゲーション(ブランド着地と続編予告)
- サイズ比率: メイン 5 : 連載名英字 1.4 : サブ 1.0 : 章ナビゲーション 0.85 : 技術スタックタグ 0.7。中央のコードエディタが画面の縦約32%・横約78%を中央に占有(4:5縦長フォーマットで横長のエディタが画面の中央軸を水平に走る、ターミナルウィンドウの本来のプロポーションを忠実に再現)、テキストエリアは画面の上部約30%(メイン+サブ+矢印)と下部約20%(連載名+章ナビ)に縦に振り分け
- レイアウトパターン: 中央集約×上下テキストの4:5サイバー変奏(画面の縦軸を上下三層に分割し、上部にメインコピー+サブ、中央にコードエディタ、下部に連載名+章ナビゲーションを配置する古典的中央シンメトリー構成、4:5縦長では中央軸を貫く垂直構成が最も視覚的に安定する、Meta広告フィードのモバイル特化に最適化)
- 4:5縦長最適化: 1080×1350px仕様、Meta広告フィードのモバイル特化サイズ、スマホ画面占有率が高くCTR改善に直結する縦長フォーマット、最重要要素(コードエディタ+メインコピーの強調語「輪郭」)を画面の縦中央軸に揃えることで視線誘導の縦の流れを最大化、Instagram フィード・Facebook フィードの両方で適切に表示
# あしらい
- 中央オブジェクト(ターミナル風コードエディタ): 画面中央にダークブルー枠のターミナルウィンドウ(角丸8px、エディタ上部に3つのウィンドウボタン:赤・黄・緑)、ウィンドウ内にダークネイビー背景のコードエディタ画面(さらに深い#0F1626)、内部にTypeScriptの型定義コードがシンタックスハイライト付きで表示(キーワード「type」「interface」がパープル、型名がネオンシアン、文字列がライムグリーン、コメント「// type as the outline of thought」がライトスチールブルー、通常テキストがクールホワイト)、左端に行番号(1〜10程度、ミディアムスチールブルーで透過60%)、4:5縦長フォーマットに合わせて正面のフラットなアングル(立体的な傾きは付けず、画面の中央水平軸に対して水平にエディタが置かれる)、エディタ下に空中に浮遊するような影、エディタ全体にわずかなグロー発光
- エディタの周囲に浮遊するパーティクル: ネオンシアンとディープパープルの混合の細かい光点(直径1〜3px)を30〜50個、奥行きを感じさせるサイズ変化で散布、エディタの上部・下部・両側に密度高、サイバーパンクの未来感を演出、4:5縦長フォーマットで画面の上下方向にパーティクルの分布を広げて縦軸を強調
- エディタの上下から放射するグロー: 画面上方向と下方向に向かってネオンシアンのソフトなグロー(透過25%、ぼかし大、画面の縦約15%ずつ)、4:5縦長フォーマットに合わせてグローの放射方向を縦軸に振り替え、ターミナルから情報が画面の縦に放出されているような未来感
- 背景の極小グリッドパターン: 画面全体に直径1pxの極小ドットが等間隔(約20px間隔)で並ぶ、ダークブルー透過8%、サイバー空間の方眼紙の質感、デジタル世界の構造を視覚化
- メインコピー直下の手描き矢印装飾: 中央揃えの細い水平のダブルライン(線幅0.8px、長さ画面横幅の約12%、ネオンシアン)+先端に小さな三角矢印、わずかなネオングロー、サブから中央エディタへ向かう視線の流れを示唆
- 章ナビゲーション: 連載名の下に横並び3項目をモノスペース等幅で中央揃え配置、章番号「01/02/03」部分はネオンシアンでハイライト(メインコピーの強調語色と呼応してブランド一貫性)、上に細い水平ライン(線幅0.5pxのネオンシアン透過 35%、長さ画面横幅の約32%、中央揃え)
- 技術スタックタグ: 画面右上、3点縦並び、各タグはターミナルのコマンドライン風(プロンプト記号「>」+技術情報)、モノスペース等幅(IBM Plex Mono)、ネオンシアンのプロンプト+クールホワイトの値、わずかなネオングロー、ターミナル特有の「**機械が打刻した記録**」の信頼感を担保
- 連載名: 画面下部中央、英字を中太の幾何学サンセリフで大きく(字間極広め)、直下に漢字を細身の角ゴシックで副配置、テックロゴ風の格調
- 画面四隅の「+」マーカー: 各角に小さな「+」記号(線幅1pxのネオンシアン透過 50%、長さ各約12px)、サイバー系の照準マーク、グリッドベースの座標系を示唆
- ネオングロー効果: メインコピーの強調語・章番号・技術スタックタグ・矢印装飾にわずかなネオングロー(ぼかし2〜4px、透過60〜80%)、サイバーパンク特有の発光感を担保しつつ過剰にならない控えめな演出
- 画面背景の右上方向のグロー: ネオンシアンのソフトなグロー(透過10%、ぼかし大)が画面右上から斜めに広がる、夜のコーディング環境特有の「**画面の発光が部屋を照らす**」温度感を再現
- 装飾はすべて「ターミナル文化・ダークテーマIDE・サイバーセキュリティ業界・現代テック媒体の編集デザイン」の世界観で統一、現代的な3Dパーティクル・派手なネオングロー・ホログラム風グラデーションは控えめに、ミニマルな構造美を優先、画面左上の余白は意図的に何も配置せず夜のターミナル画面の呼吸を作る
- ターミナルの内部コード(参考表示): TypeScriptの型定義の典型例(例: `type Outline = { shape: T; depth: number; }`のような構造)、シンタックスハイライトで色分けされた数行のコード、技術記事のテーマ「型システム」と内容的に呼応、4:5縦長フォーマットでエディタが横長のままなので表示されるコード行数は5〜8行程度に絞る
# サイズ
- アスペクト比: 4:5(1080×1350px、Meta広告フィードのモバイル特化サイズ、Instagram・Facebookフィードで最も画面占有率が高くCTR改善に直結する現代の主役比率)
# スタイル
- フラットイラスト+サイバーテックタイポグラフィ合成、テック・サイバー、フューチャリスティック、ハイテク、ミニマル、プロフェッショナル、限定的彩度の中のネオンアクセント(深いミッドナイトネイビー+クールホワイト+ネオンシアンの主要三色構成+シンタックスハイライト4色のアクセント)、ターミナル文化、ダークテーマIDE、サイバーセキュリティ業界の編集デザイン、エンジニアブログ、技術書のカバー、4:5縦長フォーマット最適化、Meta広告フィード特化、知的・現代的・冷静なトーン