「みなづちAI」はリンクフリーです。リンクを行う場合の許可や連絡は不要です。引用する際は、引用元の明記と該当ページへのリンクをお願いします。
【完全無料】バナー画像(4:5)プロンプト集【ChatGPT Images 2.0・Gemini Nano Banana 2等で利用可能】


# テキスト
- メイン: {{夜が、深くなる場所。}}
- メイン強調語(ディープティールで強調する部分): {{深く}}
- サブ: {{屋上のインフィニティプールから、{{都市の夜景}}を独り占めに。}}
- ホテル名(画面下部・英字+漢字):
- 英字: {{KAIRA TOKYO}}
- 漢字: {{ホテル カイラ 東京}}
- その他:
- カテゴリタグ(画面左上・極細枠の小さなラベル): {{LUXURY HIDEAWAY}}
- 限定バッジ(画面右上・円形・控えめ): {{1日6室限定}}
- プラン詳細ブロック(画面下部・横並び3項目):
- プラン名: {{ナイト リトリート}}
- 滞在期間: {{1泊2日 / 朝食付}}
- 一泊料金: {{¥58,000〜(税込・2名様)}}
- 予約締切タグ(プラン詳細ブロック直下・極小): {{2026年内予約特典あり}}
- CTA(画面下部・極細枠のフラット長方形): {{客室を選ぶ ─}}
# 配色
- 背景: 風景写真(東京の高層リゾートホテルの屋上、深夜のインフィニティプール、画面奥に都市の夜景が水平線まで広がる、画面手前にプールの水面が画面の縦約25%を占有しビル群の灯りを完璧に映し出す、画面中央にプールサイドからホテル建築の垂直なシルエット、空はディープティール #1F4F4F とミッドナイトブルー #0A2540 のグラデーション、画面右上から差し込む月光、わずかにオレンジの暖色光が客室の窓から漏れる、シネマティックな浅い被写界深度)、全体にティール&オレンジのカラーグレーディング
- 文字色:
- メイン本体(強調語以外): #F5F0E1(柔らかな生成り、極太の明朝、わずかなドロップシャドウで暗部と区別)
- メイン強調語: #1F4F4F(ディープティール、夜の深さを象徴する寒色)、※強調を文字色を「明るい→暗い」に振る逆転設計
- サブ: #F5F0E1(柔らかな生成り、透過 75%)
- サブ内の「都市の夜景」部分: #E8743C(暖色オレンジ、透過 85%、夜景の灯りを言語化)
- ホテル名(英字部分): #F5F0E1(柔らかな生成り、字間極広め、ロゴ風)
- ホテル名(漢字部分): #F5F0E1(柔らかな生成り、透過 70%、字間広め)
- カテゴリタグ: #F5F0E1(柔らかな生成り、透過 70%)
- 限定バッジの文字: #F5F0E1(柔らかな生成り、バッジ背景は #1F4F4F ディープティール、わずかな金線フレーム)
- プラン詳細ブロックの文字: #F5F0E1(柔らかな生成り)、ラベル部分は #F5F0E1(柔らかな生成り、透過 60%)
- プラン詳細ブロックの価格部分: #F5F0E1(柔らかな生成り、透過 100%、数値を一段濃く)
- 予約締切タグ: #E8743C(暖色オレンジ、透過 75%、控えめな緊迫感)
- CTAの文字: #F5F0E1(柔らかな生成り、ボタン枠も同色)
- アクセント:
- 画面全体にかかるシネマティックなオーバーレイ: 画面下部から上部へ向けて #07111C(深いミッドナイトブルー)の透過オーバーレイを 60%→20%、文字の可読性を確保しつつ夜の深さを演出
- レターボックス効果(画面上下の細い黒帯): #000000(漆黒)の細い帯(各画面縦幅の約2%)を画面上下に配置、シネマスコープ画面比の映画的引き締め
- 画面四隅のビネット: #000000(漆黒、透過 40%)、コーナーから中心へフェード、シネマティックな引き締め
- 都市の夜景の灯り: #E8743C(暖色オレンジ)を主軸に、ビル群の窓に細かな光点が散布、画面の水平線の上に集中
- 客室の窓から漏れる暖色光: #E8743C(暖色オレンジ、わずかなグロー)、ホテル建築の垂直シルエットの中に数点
- インフィニティプールの水面: #1F4F4F(ディープティール)を主軸に、ビル群の灯りが反射する細かなオレンジの輝点(透過 40%)、月光のハイライト
- 月光: #C8D4DC(冷たい白青、画面右上から斜めに差し込む)、わずかなブルームとレンズフレア
- メインコピー直下の手描き矢印装飾: #F5F0E1(柔らかな生成り、線幅0.8px、ダブルラインの細い水平線+先端の小さな三角矢印)
- 限定バッジの円フレーム: #C8A057(サンドアンバー、線幅0.5pxの金線、二重円フレーム)
- プラン詳細ブロックの縦線区切り: #F5F0E1(柔らかな生成り、透過 30%、線幅0.5px)
- CTAの枠: #F5F0E1(柔らかな生成り、線幅0.8px、内部背景透明)
- 画面四隅のコーナー装飾(L字): #F5F0E1(柔らかな生成り、透過 35%、線幅0.5px、各辺約20px)
- フィルムグレイン: 画面全体に微細な粒状ノイズ、35mmフィルム撮影の質感
# フォント
- メインタイトル: 重厚感のあるモダン明朝体(しっぽり明朝 ExtraBold / Noto Serif JP Black 900)、わずかに字間を詰めて密度感、映画タイトル風の格調
- メイン強調語: メイン本体と同じ書体、色のみ差し替え(暗色化による「深さ」の強調)
- サブ: 細身の明朝体(Noto Serif JP Light / しっぽり明朝)、字間やや広め、「都市の夜景」部分のみ暖色オレンジで強調
- ホテル名(英字): 古典的セリフ体(Bodoni Moda Light / Cormorant Garamond Light)、字間極広め(トラッキング+500)、ラグジュアリーホテルの表紙風
- ホテル名(漢字): 細身の明朝体(Noto Serif JP Light / しっぽり明朝)、字間広め(トラッキング+300)
- カテゴリタグ: 細身のサンセリフ(Inter Light)、字間極広め(トラッキング+300)、英字
- 限定バッジの文字: 細身の明朝体(Noto Serif JP Light)、字間広め
- プラン詳細ブロックのラベル: 細身のセリフ体(Cormorant Garamond Light / EB Garamond Light)、字間広め(トラッキング+200)、英字併記時はトラッキング+200
- プラン詳細ブロックの値・数字: セリフ体(Bodoni Moda / Playfair Display Light)、数字に陰影感
- 予約締切タグ: タイプライター風(Courier Prime / Special Elite)、英数字、字間広め
- CTA: 細身の明朝体(Noto Serif JP Regular)、字間広め
- ※フォントのジャンプ率を高くしてください(メイン 5 : ホテル名英字 1.4 : サブ 1.0 : プラン詳細の値 0.95 : カテゴリタグ・限定バッジ 0.7 : CTA 0.85 : 予約締切タグ 0.55 で多階層構成、明朝×タイプライター×セリフの3書体ミックスで「映画クレジットのような格調とラグジュアリーホテルのライナーノーツ的編集姿勢」の両立)
# 人物
※人物は登場しません(ホテル建築と都市の夜景・水盤の風景主役、4:5の縦長フォーマットを建築の垂直性と空の高さで完全に活かす)
# レイアウト
- テキスト配置:
- 画面最上部 約2%エリア: レターボックス上帯(漆黒の細い帯)
- 画面左上(余白約6%): カテゴリタグを横組みで配置(極細枠の小さなラベル、わずかな存在感)
- 画面右上(余白約6%): 限定バッジを円形で配置(直径画面横幅の約12%、二重円の金線フレーム、わずかに右に2度傾けて控えめなアクセント)
- 画面上部から約12〜26%エリア: メインコピーを2行配置(両行とも左揃え、画面横幅の約88%エリア内に収める、メイン強調語の形容詞「深く」だけがディープティールで色変えされる繊細な強調(明るい本体色から暗色への逆転)、行間ゆったり)
- メインコピー直下 約3%エリア: サブコピーを左揃えで細字明朝配置、「都市の夜景」部分のみ暖色オレンジで強調
- サブコピー直下 約4%下: 短い手描き矢印装飾(ダブルラインの細い水平線+先端の小さな三角矢印、長さ画面横幅の約12%、左揃え、生成り)
- 画面中央 約32〜68%エリア: 中央オブジェクトのホテル建築と都市の夜景・水盤(占有 縦約36%・横約88%)を画面中央に配置、4:5の縦長フォーマットを活かしてホテル建築の垂直シルエットが画面の中央軸を貫き、画面手前にインフィニティプールの水面、画面奥に都市の夜景が水平線まで広がる三層構造
- 画面下部 約70〜76%エリア: ホテル名を中央揃えで配置(英字を主、漢字を副、上下2行構成)
- ホテル名直下 約3%下: プラン詳細ブロックを画面横幅約78%で配置(背景なし、上下に細い0.5pxの水平ライン)、内部に3項目を縦線区切りで横並び
- プラン詳細ブロック直下 約2.5%下: 予約締切タグを中央揃えでタイプライター風で配置
- 画面下部 約88〜94%エリア: CTAを極細枠のフラット長方形(画面横幅の約42%・高さ画面の3.5%)で中央配置、生成りの細枠+透明背景
- 画面四隅(各角から内側に約3%・レターボックス帯の内側): 古い装丁本の見出し装飾風のL字コーナー(線幅0.5pxの生成り、各辺約20px、透過 35%)を4箇所配置
- 画面最下部 約2%エリア: レターボックス下帯(漆黒の細い帯)
- 視線誘導: 画面左上のカテゴリタグ(高級ホテル文脈の設定) → 画面右上の限定バッジ(希少性の即時担保) → 画面左のメインコピー(ディープティールの強調語で視線停止) → サブコピー(具体情報、暖色オレンジの「都市の夜景」が画面下部の灯りと色彩呼応) → 画面中央のホテル建築と水盤(縦の建築美と水面の反射で再停止、視線が画面の縦軸を上下に巡る) → 画面下部の都市の夜景の灯り(オレンジの輝点が水面に反射) → ホテル名(ブランド着地) → プラン詳細ブロック(具体スペック) → 予約締切タグ(緊迫感) → CTA(行動喚起)
- サイズ比率: メイン 5 : ホテル名英字 1.4 : サブ 1.0 : プラン詳細の値 0.95 : カテゴリタグ・限定バッジ 0.7 : CTA 0.85 : 予約締切タグ 0.55。風景写真が画面全体を占有(背景レイヤー)、ホテル建築の垂直シルエットが画面の縦軸を貫き、インフィニティプールの水面が画面の縦約25%を占有
- レイアウトパターン: 額縁型のシネマティック&4:5縦長変奏(画面中央に縦のホテル建築を配置し、上にメインコピー・下にホテル名と詳細情報、四方をレターボックスとL字コーナーで囲む映画ポスター風の額装、4:5の縦長フォーマットでは建築の垂直美と空の高さが完全に呼応する)
- 4:5縦長最適化: 1080×1350px仕様、Meta広告フィードのモバイル特化サイズ、スマホ画面占有率が高くCTR改善に直結する縦長フォーマット、最重要要素(ホテル建築のシルエット+水盤の反射+メインコピーの強調語+CTA)を画面の縦中央軸に揃えることで視線誘導の縦の流れを最大化、Instagram フィード・Facebook フィードの両方で適切に表示
# あしらい
- 風景写真: 東京の高層リゾートホテルの屋上、深夜のインフィニティプールから望む都市の夜景、画面の縦下半分1/4にプールの水面が広がりビル群の灯りを完璧に映し出す(無風で水面は完全に静止)、画面中央にプールサイドからホテル建築の垂直シルエット(画面の縦約30%の高さ)、客室の窓から数点のオレンジの暖色光が漏れる、画面奥に都市の夜景が水平線まで広がりビル群の窓に細かな光点が散布、空はディープティール #1F4F4F からミッドナイトブルー #0A2540 へのグラデーション、画面右上から斜めに差し込む月光、シネマティックな浅い被写界深度
- ティール&オレンジのカラーグレーディング: 全体の彩度を抑えつつ、ティール系(空・水面・ホテル建築のシルエット)とオレンジ系(都市の夜景の灯り・客室の窓)の補色対比を強調、ハリウッド映画的な記憶残存性の高い色彩設計、シャドウは深く・ハイライトはオレンジの灯りと月光に集約
- インフィニティプールの水面: 画面下部の縦約25%、ディープティールの水面にビル群のオレンジの灯りが完璧に反射(無風で完全静止)、月光の冷たい白青のハイライトが水面の一部を照らす、画面の上下を「**現実の夜景**」と「**水面に映る夜景**」で二重化する4:5縦長ならではの構図
- レターボックス効果: 画面上下に各画面縦幅の約2%の漆黒帯を配置、シネマスコープ画面比を強制的に演出する映画的引き締め、視覚的な「これは映画的体験である」というメタフレーム
- カテゴリタグ: 画面左上、極細枠の小さな角丸長方形(角丸半径2px、線幅0.5pxの生成り透過 60%)、内部背景透明、極細サンセリフ英字、字間極広め
- 限定バッジ: 画面右上、ディープティール地の和紙風円形(直径画面横幅の約12%)、外周にサンドアンバーの二重金線フレーム(線幅0.5px)、内部に細字明朝で「1日6室限定」、わずかに右に約2度傾けて押印感、控えめながら明確な希少性
- メインコピー直下の手描き矢印装飾: 細い水平のダブルライン(線幅0.8px、長さ画面横幅の約12%、生成り)+先端に小さな三角矢印、サブから中央風景へ向かう視線の流れを示唆
- プラン詳細ブロック: ホテル名直下に画面横幅約78%で配置、背景なし(写真の上に直接配置)、上下に細い0.5pxの水平ライン(生成り透過 30%)、内部に生成り透過 30%の縦線区切り(2本)で3項目を等分、各項目は生成りの細字英字ラベル+生成りのセリフ値の縦並び構成
- 予約締切タグ: プラン詳細ブロック直下に中央揃えでタイプライター風(Courier Prime)で「2026年内予約特典あり」を極小英数字で配置、わずかにかすれと印字ムラ、暖色オレンジで控えめに緊迫感
- CTA: 画面下部中央、極細枠の角丸長方形(角丸半径2px、線幅0.8pxの生成り)、内部背景透明、生成りの細字明朝+「─」アイコン、ボタンとしての主張を最小限にし「**お選びいただく**」誘導、ラグジュアリーホテル特有の煽りビジュアル(「**今すぐ予約!**」「**最後のチャンス!**」)を意図的に排除
- ホテル名: 画面下部、英字を上品なセリフ体で大きく(字間極広め)、直下に漢字を細字明朝で副配置、ラグジュアリーホテルの格調
- 画面四隅のコーナー装飾: 各角に極細L字ライン(線幅0.5pxの生成り透過 35%、各辺約20px)を4箇所、レターボックス帯の内側に配置、映画スタジオのフレームを想起させる微細な額装
- フィルムグレイン: 画面全体にわずかな粒状ノイズ、35mmフィルム撮影の質感、デジタル撮影の冷たさを排除しシネマティックな格調を強化
- 写真の処理: シャドウは深く・ハイライトは月光と都市の夜景のオレンジの灯り・水面の反射に集約、彩度はやや抑えるがオレンジの灯りだけは鮮やかに残す、シネマティックな浅い被写界深度、4:5の縦長フォーマットを建築の垂直性と空の高さで最大限活かす
- 装飾はすべて「映画ポスター・ラグジュアリーホテルのライナーノーツ・夜のドキュメンタリー」の世界観で統一、現代的な3Dパーティクル・ネオングロー・装飾的フレームは一切使わない、ラグジュアリーホテル業界特有の煽りビジュアル(「**特別価格!**」「**SNSで話題!**」)を意図的に排除し、希少性と格調で予約動機を担保
# サイズ
- アスペクト比: 4:5(1080×1350px、Meta広告フィードのモバイル特化サイズ、Instagram・Facebookフィードで最も画面占有率が高くCTR改善に直結する現代の主役比率)
# スタイル
- 実写風景写真+シネマティックタイポグラフィ合成、シネマティック、映画的、ドラマティック、ティール&オレンジのカラーグレーディング、レターボックス、フィルムグレイン、深みのある光と影、限定的彩度、夜・都市・インフィニティプール、被写界深度、4:5縦長フォーマットの建築の垂直性と空の高さの最大活用、ラグジュアリーホテルSNS広告、Meta広告フィード特化、煽りを排除した編集姿勢、希少性と格調による予約誘導

# テキスト
- メイン: {{今日のからだに、必要な分だけ。}}
- メイン強調語(セージグリーンで強調する部分): {{必要な分だけ}}
- サブ: {{過剰を、削ぎ落とした処方。}}
- 商品名(画面下部・英字+カタカナ):
- 英字: {{ESSENTIA}}
- カタカナ: {{エッセンシア}}
- その他:
- カテゴリタグ(画面左上・極細枠の小さなラベル): {{DAILY ESSENTIALS}}
- 認証バッジ(画面右上・円形エンブレム風・3点縦並び・極小):
- バッジ1: {{無添加}}
- バッジ2: {{第三者検査済}}
- バッジ3: {{国内製造}}
- 機能訴求ブロック(商品下・横並び3項目):
- 訴求1: {{ビタミンB群+鉄}}
- 訴求2: {{1日2粒・60日分}}
- 訴求3: {{¥4,800(税込)}}
- CTA(画面下部・極細枠のフラット長方形): {{はじめての方へ ─}}
# 配色
- 背景: 限りなく白に近いウォームオフホワイト #FAFAF7 を主軸とし、画面上部1/4にうっすらとオフホワイトより一段明るい #FDFCF8 のスポット光、画面下部1/4にうっすらと #F0EBDE(クリームベージュ)へ柔らかくフェード、全体に微細な紙の繊維感とごく薄いフィルムグレイン、医療隣接の清潔感と暮らしの温度感を両立
- 文字色:
- メイン本体(強調語以外): #1A2A1F(ディープボトルグリーン、墨黒に近い深い緑、極太ではなく中太の明朝体で穏やかな格調)
- メイン強調語: #87A878(セージグリーン、植物由来の暖かみのある緑、医療色ではなく暮らしの色)
- サブ: #4A5D4F(ダークセージ、透過 85%)
- 商品名(英字部分): #1A2A1F(ディープボトルグリーン、字間極広め、ロゴ風)
- 商品名(カタカナ部分): #4A5D4F(ダークセージ、透過 75%、字間広め)
- カテゴリタグ: #4A5D4F(ダークセージ、透過 70%)
- 認証バッジの文字: #4A5D4F(ダークセージ、各バッジは円形エンブレムの中に配置)
- 機能訴求ブロックの文字: #1A2A1F(ディープボトルグリーン)、ラベル部分は #4A5D4F(ダークセージ、透過 70%)
- 機能訴求ブロックの価格部分: #1A2A1F(ディープボトルグリーン、透過 100%、数値を一段濃く)
- CTAの文字: #1A2A1F(ディープボトルグリーン、ボタン枠も同色)
- アクセント:
- 中央オブジェクト(サプリメントボトルのスティルライフ): ボトル本体は #E8DDD0(オフホワイトの陶器のようなマット質感、わずかに暖色寄り)、ボトルのキャップは #4A5D4F(ダークセージ、マットな金属仕上げ)、ボトルのラベルは透明感のある白 #FAFAF7 を背景に商品名英字「ESSENTIA」を #1A2A1F のセリフ体で控えめに配置、ラベルの下部に小さなセージグリーンの植物のシンボルマーク
- 周辺のミニマル要素: 小さな乾燥した植物の葉(セージ・ローズマリー・ユーカリのいずれか、控えめに2〜3枚)、リネンのトレイ(オートミール色、ボトルの下にうっすら)
- 自然光の質感: 画面右上から斜めに差し込む柔らかな自然光、被写体の右側にハイライト・左側に長い柔らかな影、清潔感を担保しつつ温度感も残す、医療施設特有の硬い蛍光灯ライティングを排除
- 細い水平セパレータ・縦線: #1A2A1F(ディープボトルグリーン、透過 25%、線幅0.5px)
- メインコピー直下の手描き矢印装飾: #1A2A1F(ディープボトルグリーン、線幅0.8px、ダブルラインの細い水平線+先端の小さな三角矢印)
- 認証バッジの円フレーム: #4A5D4F(ダークセージ、線幅0.5px、極細の二重円フレーム、内部背景透過)
- 機能訴求ブロックの縦線区切り: #1A2A1F(ディープボトルグリーン、透過 25%、線幅0.5px)
- CTAの枠: #1A2A1F(ディープボトルグリーン、線幅0.8px、内部背景透過)
- 画面四隅のコーナー装飾(L字): #1A2A1F(ディープボトルグリーン、透過 30%、線幅0.5px、各辺約20px)
- ボトルの下の影: #1A2A1F(ディープボトルグリーン、透過 20%、柔らかな楕円ぼかし)、地面の存在感を補強
# フォント
- メインタイトル: 細身〜中太のモダン明朝体(Noto Serif JP Medium / しっぽり明朝)、わずかに字間を詰めて密度感、薬機法を意識した穏やかな格調(過剰な強調を避ける)
- メイン強調語: メイン本体と同じ書体、色のみ差し替え
- サブ: 細身のサンセリフ(Noto Sans JP Light)、字間やや広め
- 商品名(英字): 古典的セリフ体(Cormorant Garamond Light / EB Garamond Light)、字間極広め(トラッキング+500)、エッセンシャルオイルブランドのような格調
- 商品名(カタカナ): 細身の明朝体(Noto Serif JP Light)、字間広め(トラッキング+300)
- カテゴリタグ・認証バッジの文字: 細身のサンセリフ(Inter Light)、字間極広め(トラッキング+300)、英字・短い日本語
- 機能訴求ブロックのラベル: 細身のサンセリフ(Inter Light)、字間広め
- 機能訴求ブロックの値・数字: 中太のサンセリフ(Inter Medium)、数字部分は格調を担保
- CTA: 細身の明朝体(Noto Serif JP Regular)、字間広め
- ※フォントのジャンプ率を抑えてください(メイン 5 : 商品名英字 1.4 : サブ 1.0 : 機能訴求の値 0.95 : カテゴリタグ・認証バッジ 0.7 : CTA 0.85 で穏やかな多階層構成、明朝×サンセリフ×セリフの3書体ミックスで「医療隣接の信頼と暮らしの上品さ」の両立)
# 人物
※人物は登場しません(縦長サプリメントボトルのスティルライフ+タイポグラフィ主役、4:5の縦長フォーマットを商品の縦長性で完全に活かす)
# レイアウト
- テキスト配置:
- 画面左上(余白約6%): カテゴリタグを横組みで配置(極細枠の小さなラベル、わずかな存在感)
- 画面右上(余白約6%): 認証バッジ3点を縦並びで右揃え配置(各バッジは直径画面横幅の約8%の円形エンブレム、二重円フレームで囲まれた極細の文字)
- 画面上部から約10〜26%エリア: メインコピーを2行配置(両行とも中央揃え、画面横幅の約88%エリア内に収める、メイン強調語の修飾語句「必要な分だけ」だけがセージグリーンで色変えされる繊細な強調、行間ゆったり)
- メインコピー直下 約3%エリア: サブコピーを中央揃えで細字サンセリフ配置
- サブコピー直下 約4%下: 短い手描き矢印装飾(ダブルラインの細い水平線+先端の小さな三角矢印、長さ画面横幅の約12%、中央配置、ディープボトルグリーン)
- 画面中央 約32〜70%エリア: 中央オブジェクトのサプリメントボトルのスティルライフ(占有 縦約38%・横約32%)を画面中央に配置、4:5の縦長フォーマットを活かして縦長のボトルが画面の中央軸を貫く構成、ボトルの周辺にうっすらと乾燥した植物の葉(2〜3枚)とリネンのトレイ
- 画面下部 約72〜80%エリア: 商品名を中央揃えで配置(英字を主、カタカナを副、上下2行構成)
- 商品名直下 約3%下: 機能訴求ブロックを画面横幅約75%で配置(背景なし、上下に細い0.5pxの水平ライン)、内部に3項目を縦線区切りで横並び
- 画面下部 約88〜94%エリア: CTAを極細枠のフラット長方形(画面横幅の約45%・高さ画面の4%)で中央配置、ディープボトルグリーンの細枠+透明背景
- 画面四隅(各角から内側に約3%): 古い装丁本の見出し装飾風のL字コーナー(線幅0.5pxのディープボトルグリーン、各辺約20px、透過 30%)を4箇所配置
- 視線誘導: 画面左上のカテゴリタグ(商品文脈の設定) → 画面右上の認証バッジ3点(信頼性の即時担保) → 中央のメインコピー(セージグリーンの強調語で視線停止) → サブコピー(具体情報) → 画面中央のサプリメントボトル(製品の物理的存在感で再停止、4:5の縦長フォーマットで縦長ボトルが画面を貫く) → 商品名(ブランド着地) → 機能訴求ブロック(具体スペック) → CTA(行動喚起)
- サイズ比率: メイン 5 : 商品名英字 1.4 : サブ 1.0 : 機能訴求の値 0.95 : カテゴリタグ・認証バッジ 0.7 : CTA 0.85。サプリメントボトルが画面の縦約38%・横約32%を中央に占有(4:5の縦長フォーマットを商品の縦長性で完全に活かす)、テキストエリアが画面横幅の約88%(中央揃え)を上下に配置
- レイアウトパターン: 中央集約×上下テキストの4:5ミニマル変奏(画面中央軸に縦長ボトルを配置し、上にメインコピー・下に商品名と機能訴求を配置する古典的構成、4:5の縦長フォーマットでは中央軸を貫く垂直構成が最も視覚的に安定する)
- 4:5縦長最適化: 1080×1350px仕様(Meta広告フィードのモバイル特化サイズ)、スマホ画面占有率が高くCTR改善に直結する縦長フォーマット、最重要要素(ボトル+メインコピー+CTA)を画面の縦中央軸に揃えることで視線誘導の縦の流れを最大化、Instagram フィード・Facebook フィードの両方で適切に表示
# あしらい
- 中央オブジェクト(サプリメントボトルのスティルライフ): 画面中央にオフホワイトの陶器のようなマット質感の縦長ボトル(高さ:幅 = 約3:2の比率、ダークセージのキャップ、ラベルは透明感のある白に商品名英字を控えめに配置、ラベル下部に小さな植物のシンボルマーク)、ボトルの周囲にうっすらと乾燥したセージまたはユーカリの葉(2〜3枚、控えめなアクセント)、ボトルの下にオートミール色のリネンのトレイ(画面横幅の約45%、わずかに見える程度)、画面右上から斜めに差し込む柔らかな自然光、被写体の右側にハイライト・左側に長い柔らかな影、シャドウは深くせず暖色寄りの自然光、医療系特有の硬いスタジオライティングを意図的に排除
- 認証バッジ群: 画面右上、3点縦並び、各バッジは直径画面横幅の約8%の円形エンブレム、外周に極細の二重円フレーム(線幅0.5pxのダークセージ、透過 70%)、内部背景は透明、中央に極細サンセリフで「無添加」「第三者検査済」「国内製造」の文字、サプリメント業界の標準的な信頼性訴求要素を控えめに配置(医療色ではなく暮らしの色で表現)
- カテゴリタグ: 画面左上、極細枠の小さな角丸長方形(角丸半径2px、線幅0.5pxのダークセージ、透過 60%)、内部背景透明、極細サンセリフ英字「DAILY ESSENTIALS」、字間極広め
- メインコピー直下の手描き矢印装飾: 中央揃えの細い水平のダブルライン(線幅0.8px、長さ画面横幅の約12%、ディープボトルグリーン)+両端に小さな三角矢印、サブから商品ボトルへ向かう視線の流れを示唆
- 機能訴求ブロック: 商品名直下に画面横幅約75%で配置、背景なし(写真の上に直接配置)、上下に細い0.5pxの水平ライン(ディープボトルグリーン透過 25%)、内部にディープボトルグリーン透過 25%の縦線区切り(2本)で3項目を等分、各項目はダークセージの細字英字ラベル+ディープボトルグリーンの中太値の縦並び構成
- CTA: 画面下部中央、極細枠の角丸長方形(角丸半径2px、線幅0.8pxのディープボトルグリーン)、内部背景透明、ディープボトルグリーンの細字明朝+「─」アイコン、ボタンとしての主張を最小限にし「**お選びいただく**」誘導、サプリメント業界特有の煽りビジュアル(「**今だけ50%OFF**」のような派手なバッジ)を意図的に排除
- 商品名: 画面下部、英字を上品なセリフ体で大きく(字間極広め)、直下にカタカナを細字明朝で副配置、エッセンシャルオイルブランドのような格調
- 画面四隅のコーナー装飾: 各角に極細L字ライン(線幅0.5pxのディープボトルグリーン透過 30%、各辺約20px)を4箇所、エディトリアル誌の見開き扉ページの装飾を再現
- 自然光の質感: 画面右上から斜めに差し込む柔らかな朝の光、被写体の右側にハイライト・左側に長い柔らかな影、シャドウは深くせず暖色寄りの自然光、医療系特有の冷色蛍光灯トーンを排除した「**書斎の机の上に置かれた朝のサプリメント**」の温度感
- 紙の質感: 画面全体に微細な紙の繊維感+ごく薄いフィルムグレイン、サプリメント業界の標準的なデジタル無機質感を排除し、暮らしの手仕事感を担保
- 画面右上の認証バッジ群周辺の余白: 認証バッジ3点の左側に十分な余白を取り、画面の上半分が「**清潔な空気感**」として機能する設計
- 装飾はすべて「医療隣接の信頼+暮らしの上品さ」の世界観で統一、サプリメント業界の標準的な煽りビジュアル(「**驚きの効果**」「**今すぐ実感**」「**衝撃の成分**」)を意図的に排除し、薬機法に配慮した穏やかな効能表現と視覚的格調で信頼を立ち上げる
# サイズ
- アスペクト比: 4:5(1080×1350px、Meta広告フィードのモバイル特化サイズ、Instagram・Facebookフィードで最も画面占有率が高くCTR改善に直結する現代の主役比率)
# スタイル
- 実写商品スティルライフ撮影+ミニマルタイポグラフィ合成、ミニマル、モダン、洗練、エッセンシャルオイルブランド風、紙質感、自然光、限定的彩度(オフホワイト+ディープボトルグリーン+セージグリーン+ダークセージの主要四色構成)、サプリメントSNS広告、Meta広告フィード特化、薬機法配慮、医療隣接の信頼と暮らしの上品さの両立、煽りを排除した編集姿勢

# テキスト
- メイン: {{秋の朝、はじまる一杯。}}
- メイン強調語(深い焙煎ブラウンで強調する部分): {{一杯}}
- サブ: {{季節の和菓子と、深煎りハンドドリップ。{{10/01}}より。}}
- 店名(画面下部・英字+漢字):
- 英字: {{HIBINO COFFEE}}
- 漢字: {{日々のコーヒー}}
- その他:
- カテゴリタグ(画面左上・極細枠の小さなラベル): {{AUTUMN MORNING SET}}
- 期間バッジ(画面右上・円形・小さく控えめ): {{秋限定}}
- メニュー詳細ブロック(画面下部・横並び3項目):
- メニュー名: {{季節のモーニングセット}}
- 価格: {{¥980(税込・モーニングタイム限定)}}
- 提供時間: {{8:00-11:00}}
- 営業情報(メニュー詳細ブロック直下・1行): {{定休日: 火曜日 / 駐車場あり}}
- CTA(画面下部・極細枠のフラット長方形): {{お席のご予約 ─}}
# 配色
- 背景: 限りなく温かみのあるオフホワイト #F5EFE6 を主軸とし、画面上部1/3にうっすらとオフホワイトより一段明るい #FAF6EE のスポット光、画面下部1/3にうっすらと #E8DCC4(クリームベージュ)へ柔らかくフェード、全体に手すきの和紙のような繊維テクスチャと微細なフィルムグレイン、朝の自然光が差し込む和カフェの空気感
- 文字色:
- メイン本体(強調語以外): #4A3C2E(ナチュラルブラウン、深い焙煎コーヒーのような落ち着いた色、中太の明朝体で温かみのある格調)
- メイン強調語: #3E2723(深い焙煎ブラウン、メイン本体よりさらに濃く、コーヒー豆のような深さで「一杯」の重みを担保)
- サブ: #6B5544(ナチュラルブラウンの中間色、透過 80%)
- サブ内の日付部分: #4A3C2E(ナチュラルブラウン、透過 100%、開始日を控えめに強調)
- 店名(英字部分): #4A3C2E(ナチュラルブラウン、字間極広め、ロゴ風)
- 店名(漢字部分): #6B5544(ナチュラルブラウンの中間色、透過 75%、字間広め)
- カテゴリタグ: #6B5544(ナチュラルブラウンの中間色、透過 70%)
- 期間バッジの文字: #FAF6EE(限りなく白に近いオフホワイト、バッジ背景は #C4634D テラコッタ、和紙の質感)
- メニュー詳細ブロックの文字: #4A3C2E(ナチュラルブラウン)、ラベル部分は #6B5544(ナチュラルブラウンの中間色、透過 70%)
- メニュー詳細ブロックの価格部分: #4A3C2E(ナチュラルブラウン、透過 100%、数値を一段濃く)
- 営業情報: #6B5544(ナチュラルブラウンの中間色、透過 70%)
- CTAの文字: #4A3C2E(ナチュラルブラウン、ボタン枠も同色)
- アクセント:
- 中央オブジェクト(コーヒーと和菓子のスティルライフ): 縦長コーヒーカップは #E8DDD0(オフホワイトの陶器のようなマット質感、ろくろの手跡が残る手作り感)、内部のコーヒーは #3E2723(深い焙煎ブラウン)、湯気は柔らかな #F5EFE6(オフホワイト、長く上昇)、コーヒーカップの脇に小さな和菓子(栗まんじゅうor季節の上生菓子、優しい暖色系の色合い)、和菓子を置く小さな黒漆の銘々皿
- 周辺のナチュラル要素: 麻のリネン布(オートミール色 #C4A57B、ぼやけた背景として)、小さなドライフラワーの一枝(画面手前にうっすら、画面の縦約8%の小ささ)、木製のカウンター(深いダークブラウン #6B4E36)
- 自然光の質感: 画面右上から斜めに差し込む朝の柔らかな自然光、被写体の右側にハイライト・左側に長い柔らかな影、店内特有の暖色照明と外からの自然光が混じり合う温度感
- 細い水平セパレータ・縦線: #4A3C2E(ナチュラルブラウン、透過 25%、線幅0.5px)
- メインコピー直下の手描き矢印装飾: #4A3C2E(ナチュラルブラウン、線幅0.8px、ダブルラインの細い水平線+先端の小さな三角矢印)
- 期間バッジ: #C4634D(テラコッタ、和紙の繊維質感、外周に1pxの薄い金線フレーム)
- メニュー詳細ブロックの縦線区切り: #4A3C2E(ナチュラルブラウン、透過 25%、線幅0.5px)
- CTAの枠: #4A3C2E(ナチュラルブラウン、線幅0.8px、内部背景透明)
- 画面四隅のコーナー装飾(L字): #4A3C2E(ナチュラルブラウン、透過 30%、線幅0.5px、各辺約20px)
- コーヒーカップの下の影: #4A3C2E(ナチュラルブラウン、透過 25%、柔らかな楕円ぼかし)
- 画面手前のうっすら浮かぶ粒子(湯気と朝の光が混じる質感): #C4A57B(オートミール、透過 30%、直径1〜3px)
# フォント
- メインタイトル: 情緒ある中太の明朝体(しっぽり明朝 / Noto Serif JP Medium)、わずかに字間を詰めて密度感、和カフェの店内POPのような温かみある格調(極太ではなく中太で穏やかさを担保)
- メイン強調語: メイン本体と同じ書体、色のみ深くしてさらに重み
- サブ: 細身の明朝体(Noto Serif JP Light / しっぽり明朝)、字間やや広め、日付部分のみ少し濃く
- 店名(英字): 古典的セリフ体(Cormorant Garamond Light / EB Garamond Light)、字間極広め(トラッキング+500)、独立系コーヒーロースター風の格調
- 店名(漢字): 細身の明朝体(Noto Serif JP Light / Klee One)、字間広め(トラッキング+300)、和カフェ屋号の落ち着き
- カテゴリタグ: 細身のサンセリフ(Inter Light)、字間極広め(トラッキング+300)、英字
- 期間バッジの文字: 細身の明朝体(Noto Serif JP Light)、字間広め
- メニュー詳細ブロックのラベル: 細身のサンセリフ(Inter Light)、字間広め
- メニュー詳細ブロックの値・数字: 中太のサンセリフ(Inter Medium)、価格と時間を品位ある格調で
- 営業情報: 細身のサンセリフ(Noto Sans JP Light)
- CTA: 細身の明朝体(Noto Serif JP Regular)、字間広め
- ※フォントのジャンプ率を中程度にしてください(メイン 5 : 店名英字 1.4 : サブ 1.0 : メニュー詳細の値 0.95 : カテゴリタグ・期間バッジ 0.7 : CTA 0.85 : 営業情報 0.6 で穏やかな多階層構成、明朝×サンセリフ×セリフの3書体ミックスで「和カフェの温度感とエディトリアル誌の格調」の両立)
# 人物
※人物は登場しません(縦長コーヒーカップと和菓子のスティルライフ+タイポグラフィ主役、4:5の縦長フォーマットを商品の縦長性と湯気の上昇で完全に活かす)
# レイアウト
- テキスト配置:
- 画面左上(余白約6%): カテゴリタグを横組みで配置(極細枠の小さなラベル、わずかな存在感)
- 画面右上(余白約6%): 期間バッジを円形で配置(直径画面横幅の約11%、わずかに右に2度傾けて控えめなアクセント)
- 画面上部から約12〜26%エリア: メインコピーを2行配置(両行とも中央揃え、画面横幅の約88%エリア内に収める、メイン強調語の名詞「一杯」だけが深い焙煎ブラウンで色変えされる繊細な強調、行間ゆったり)
- メインコピー直下 約3%エリア: サブコピーを中央揃えで細字明朝配置、日付部分のみ一段濃く
- サブコピー直下 約4%下: 短い手描き矢印装飾(ダブルラインの細い水平線+先端の小さな三角矢印、長さ画面横幅の約12%、中央配置、ナチュラルブラウン)
- 画面中央 約32〜68%エリア: 中央オブジェクトのコーヒーと和菓子のスティルライフ(占有 縦約36%・横約42%)を画面中央に配置、4:5の縦長フォーマットを活かしてコーヒーカップが画面の中央軸を貫き湯気が上方向に長く上昇、画面手前に小さな和菓子と銘々皿、画面奥にうっすらと木製カウンターと麻のリネン布
- 画面下部 約70〜76%エリア: 店名を中央揃えで配置(英字を主、漢字を副、上下2行構成)
- 店名直下 約3%下: メニュー詳細ブロックを画面横幅約78%で配置(背景なし、上下に細い0.5pxの水平ライン)、内部に3項目を縦線区切りで横並び
- メニュー詳細ブロック直下 約2.5%下: 営業情報を中央揃えで極細字配置
- 画面下部 約88〜94%エリア: CTAを極細枠のフラット長方形(画面横幅の約42%・高さ画面の3.5%)で中央配置、ナチュラルブラウンの細枠+透明背景
- 画面四隅(各角から内側に約3%): 古い装丁本の見出し装飾風のL字コーナー(線幅0.5pxのナチュラルブラウン、各辺約20px、透過 30%)を4箇所配置
- 視線誘導: 画面左上のカテゴリタグ(モーニングセットの文脈設定) → 画面右上の期間バッジ(秋限定の希少性) → 中央のメインコピー(深い焙煎ブラウンの強調語で視線停止) → サブコピー(具体情報と提供開始日) → 画面中央のコーヒーカップ(縦長の主役で再停止、湯気の上昇で視線が画面上方向へ流れまた中央へ循環) → 店名(ブランド着地) → メニュー詳細ブロック(具体スペック) → 営業情報(来店判断材料) → CTA(行動喚起)
- サイズ比率: メイン 5 : 店名英字 1.4 : サブ 1.0 : メニュー詳細の値 0.95 : カテゴリタグ・期間バッジ 0.7 : CTA 0.85 : 営業情報 0.6。コーヒーカップのスティルライフが画面の縦約36%・横約42%を中央に占有(4:5の縦長フォーマットを縦長カップと湯気の上昇で完全に活かす)、テキストエリアが画面横幅の約88%(中央揃え)を上下に配置
- レイアウトパターン: 中央集約×上下テキストの4:5ナチュラル変奏(画面中央軸に縦長コーヒーカップを配置し湯気を上方向に長く上昇させる垂直構成、上にメインコピー・下に店名と詳細情報を配置する古典的中央シンメトリー、4:5の縦長フォーマットでは中央軸を貫く垂直構成と湯気の上昇が画面の縦長性と完全に呼応する)
- 4:5縦長最適化: 1080×1350px仕様、Meta広告フィードのモバイル特化サイズ、スマホ画面占有率が高くCTR改善に直結する縦長フォーマット、最重要要素(コーヒーカップ+湯気+メインコピー+CTA)を画面の縦中央軸に揃えることで視線誘導の縦の流れを最大化、Instagram フィード・Facebook フィードの両方で適切に表示
# あしらい
- 中央オブジェクト(コーヒーと和菓子のスティルライフ): 画面中央に縦長のオフホワイトの陶器コーヒーカップ(高さ:幅 = 約2:1の比率で4:5の縦長フォーマットに呼応、ろくろの手跡が残る手作り感、口元に小さな欠け、内部に深い焙煎ブラウンのコーヒーが半分ほど、湯気が柔らかく長く上昇)、コーヒーカップの脇に小さな和菓子(栗まんじゅうまたは秋の上生菓子、優しい暖色系の色合い、季節感を担保)、和菓子を置く小さな黒漆の銘々皿(画面横幅の約8%、控えめなアクセント)、画面奥にうっすらと木製カウンター(深いダークブラウン)、その上に麻のリネン布(オートミール色、ぼやけた背景として)、画面手前のフレームにうっすらとドライフラワーの一枝(秋の野花のような落ち着いた色合い)、シネマティックな浅い被写界深度でコーヒーカップに焦点・周囲の背景は柔らかなボケ
- 画面右上から差し込む朝の自然光: 和カフェの店内に外から差し込む柔らかな朝の光、被写体の右側にハイライト・左側に長い柔らかな影、店内特有の暖色照明と外からの自然光が混じり合う温度感、シャドウは深くせず暖色寄りの自然光
- 湯気の上昇: コーヒーカップから上方向に長く柔らかく上昇する湯気(画面の縦約20%の長さ、画面の縦長フォーマットを湯気の縦の動きで強調)、湯気の中にうっすらと朝の光の粒子が浮かぶ
- カテゴリタグ: 画面左上、極細枠の小さな角丸長方形(角丸半径2px、線幅0.5pxのナチュラルブラウン透過 60%)、内部背景透明、極細サンセリフ英字、字間極広め
- 期間バッジ: 画面右上、テラコッタの和紙風円形(直径画面横幅の約11%)、和紙の繊維質感、内部に細字明朝で「秋限定」、外周に1pxの薄い金線フレーム、わずかに右に2度傾けて押印感、控えめな存在感(医療系・薬機法配慮の控えめな訴求)
- メインコピー直下の手描き矢印装飾: 中央揃えの細い水平のダブルライン(線幅0.8px、長さ画面横幅の約12%、ナチュラルブラウン)+両端に小さな三角矢印、サブから商品スティルライフへ向かう視線の流れを示唆
- メニュー詳細ブロック: 店名直下に画面横幅約78%で配置、背景なし(写真の上に直接配置)、上下に細い0.5pxの水平ライン(ナチュラルブラウン透過 25%)、内部にナチュラルブラウン透過 25%の縦線区切り(2本)で3項目を等分、各項目はナチュラルブラウンの細字英字ラベル+ナチュラルブラウンの中太値の縦並び構成
- 営業情報: メニュー詳細ブロック直下に中央揃えで極細字配置、左右に小さな点(直径2px、ナチュラルブラウン透過 40%)を添えて余白を整理
- CTA: 画面下部中央、極細枠の角丸長方形(角丸半径2px、線幅0.8pxのナチュラルブラウン)、内部背景透明、ナチュラルブラウンの細字明朝+「─」アイコン、ボタンとしての主張を最小限にし「**お選びいただく**」誘導、和カフェ特有の煽りビジュアル(「**今だけ50%OFF!**」「**期間限定セール!**」)を意図的に排除
- 店名: 画面下部、英字を上品なセリフ体で大きく(字間極広め)、直下に漢字を細字明朝で副配置、独立系コーヒーロースター風の格調
- 画面四隅のコーナー装飾: 各角に極細L字ライン(線幅0.5pxのナチュラルブラウン透過 30%、各辺約20px)を4箇所、エディトリアル誌の見開き扉ページの装飾を再現
- 紙の質感: 画面全体に手すきの和紙のような繊維テクスチャ+わずかな凹凸感+ごく薄いフィルムグレイン、和カフェの店内POP特有の手仕事感を担保、デジタルな完璧さを和らげる
- 自然光の質感: 画面右上から斜めに差し込む朝の柔らかな自然光、被写体の右側にハイライト・左側に長い柔らかな影、シャドウは深くせず暖色寄りの自然光、和カフェの店内特有の暖色照明と外からの朝の光が混じり合う温度感
- 画面手前のうっすら浮かぶ粒子: 湯気と朝の光が混じる質感のオートミール色の細かな光点(直径1〜3px)を15〜20個、自然光の中に浮かぶように散布、和カフェの朝の空気感を演出
- 装飾はすべて「和カフェの店内POP・独立系コーヒーロースターのフライヤー・暮らしの手仕事感」の世界観で統一、現代的な3Dパーティクル・ネオングロー・グラデーション・派手な色面は一切使わない、飲食業界特有の煽りビジュアル(「**今だけ!**」「**衝撃の価格!**」「**SNSで話題!**」)を意図的に排除し、季節限定の控えめな期間バッジと提供時間の具体性で来店動機を担保
# サイズ
- アスペクト比: 4:5(1080×1350px、Meta広告フィードのモバイル特化サイズ、Instagram・Facebookフィードで最も画面占有率が高くCTR改善に直結する現代の主役比率)
# スタイル
- 実写商品スティルライフ撮影+ナチュラルタイポグラフィ合成、ナチュラル、温もり、和カフェ、独立系コーヒーロースター風、紙質感、自然光、限定的彩度(オフホワイト+ナチュラルブラウン+深い焙煎ブラウン+クリームベージュ+テラコッタの主要五色構成)、飲食SNS広告、Meta広告フィード特化、季節限定モーニングセット訴求、煽りを排除した編集姿勢、来店誘導、和カフェの朝の温度感

# テキスト
- メイン: {{型は、思考の輪郭を描く。}}
- メイン強調語(ネオンシアンで強調する部分): {{輪郭}}
- サブ: {{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<T> = { shape: T; depth: number; }`のような構造)、シンタックスハイライトで色分けされた数行のコード、技術記事のテーマ「型システム」と内容的に呼応、4:5縦長フォーマットでエディタが横長のままなので表示されるコード行数は5〜8行程度に絞る
# サイズ
- アスペクト比: 4:5(1080×1350px、Meta広告フィードのモバイル特化サイズ、Instagram・Facebookフィードで最も画面占有率が高くCTR改善に直結する現代の主役比率)
# スタイル
- フラットイラスト+サイバーテックタイポグラフィ合成、テック・サイバー、フューチャリスティック、ハイテク、ミニマル、プロフェッショナル、限定的彩度の中のネオンアクセント(深いミッドナイトネイビー+クールホワイト+ネオンシアンの主要三色構成+シンタックスハイライト4色のアクセント)、ターミナル文化、ダークテーマIDE、サイバーセキュリティ業界の編集デザイン、エンジニアブログ、技術書のカバー、4:5縦長フォーマット最適化、Meta広告フィード特化、知的・現代的・冷静なトーン











お気軽にコメントどうぞ