banner-design

Name: banner-design
Author: arnavpuri

github.com/arnavpuriデザイン・UI17129 回インストール5 週間前に更新

リポジトリ

banner-design について

banner-designは、ウェブサイトのバナー、メールヘッダー、イベントバナー、ヒーローセクションを設計するスキルです。サイズ、構図、レスポンシブ対応、アニメーション、CTAの優先順位を扱い、ブランド情報も考慮します。

主な機能

01ウェブ、メール、イベント用バナー設計
02一般的なバナー寸法と比率
03ヒーロー構成とCTA配置
04アニメーションとレスポンシブ設計
05季節・販促向けのデザイン案

活用シーン

01ブレークポイント別のウェブ用ヒーロー制作
02メールマーケティング用ヘッダーの設計
03イベントページ用告知バナーの作成
04季節やセールのキャンペーンバナー企画

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/arnavpuri/designskills --skill banner-design

インストール後、Claude Code で/banner-designを入力して読み込まれたか確認します。

詳細

バナーデザイン

ウェブサイトのバナー、メールヘッダー、イベントバナー、ヒーローセクションをデザインします。標準的な寸法、静止画とアニメーションの手法、CTA の階層、レスポンシブな拡大縮小、季節やプロモーション向けのフレームワークを扱います。

ステップ 1：デザインコンテキストを読み込む

まず .agents/design-context.md を読み込みます。ブランドカラー（hex）、フォント、スタイルのアーキタイプを確認します
ファイルがない場合は、design-context のデフォルトのフォールバックを使用し、デフォルトを使用したことをユーザーに伝えます
バナーはブランドを目に留めてもらう機会の多い重要なタッチポイントです。ブランドガイドラインを厳守してください

Gemini 画像生成パス

パイプライン／CLI：image-generation。プロンプトの作成、トリミング、テキストオーバーレイの代替方法については、graphic-design のステップ 3 を参照してください。

ステップ 2 の表に記載された Gemini の比率で生成し、その後 --resize WxH を指定します（例：--aspect-ratio 21:9 --resize 1440x600）。ウェブ／メール用バナーは 2 倍のサイズで書き出し（例：2880x1200、1200x400）、高精細な Retina 表示のために 1 倍で表示します
ウェブのヒーロー画像はブレークポイントごとにトリミングが異なります。被写体を中央に配置し、テキスト用の余白を確保するか、モバイル向けに別途 4:5 の画像を生成します
ウェブやメールでは、テキストを含めずにビジュアルを生成し、見出しと CTA をライブ HTML テキストとして設定する方法を推奨します（アクセシブルで編集可能なうえ、メールの画像がブロックされても表示されます）
出力された PNG を確認し、スペル、表示サイズでの読みやすさ、テキスト領域がすっきりしているかをチェックします。フォローアップのターンごとに問題を 1 つ修正します

プロンプトの例

ヒーローバナー：「[brand] のための横長のウェブサイト用ヒーローバナーを作成してください。[product/service] のビジュアルを右側に、見出し「[text]」を左側に [font-style] で配置してください。[color] のグラデーション背景。CTA ボタン「[action]」。モダンで大胆なレイアウト。」
メールヘッダー：「[brand] のための横長のメールヘッダーバナーを作成してください。[color palette] を使った [campaign theme]。上部中央にロゴ、その下に見出し「[text]」。すべてのメールクライアントで表示される、シンプルでクリーンなデザイン。」
イベントバナー：「[event name] のための横長のイベントバナーを作成してください。[decorative elements] を含む [style] の背景。イベント名「[text]」を目立つように表示。下に日付「[date]」と会場「[venue]」。[mood/tone]。」

ステップ 2：バナーの種類と寸法を特定する

ウェブサイトのバナー

種類	寸法	Gemini の比率	用途
ヒーローバナー（全幅）	1440 x 600	21:9	ホームページのヒーロー、スクロールせずに見える領域
ヒーローバナー（縦長）	1440 x 800	16:9	ビューポート全体を使うヒーローセクション
セクションバナー	1440 x 400	4:1	下層ページのセクション区切り
サイドバーバナー	300 x 250 または 300 x 600	5:4 / 9:16	自社プロモーション（有料掲載の場合：ad-creative-design）
通知バー	全幅 x 48px	ページ上部のお知らせ
Cookie／同意バー	全幅 x 80px	下部の通知

メールバナー

種類	寸法	Gemini の比率	備考
メールヘッダー	600 x 200	21:9	標準的なメール幅
メールヒーロー	600 x 300	16:9	メール全幅のヒーロー
メールバナー	600 x 150	4:1	コンパクトなプロモーション

メールの制約：幅 600px（最大で約 640px）、レイアウトにはテーブルを使用し、CSS はインラインで記述します。ウェブフォントは一部のクライアント（Apple Mail、iOS）でしか表示されないため、必ず Arial／Helvetica のフォールバックを指定します。すべての画像に alt テキストが必要です。また、多くのクライアントでは画像がデフォルトでブロックされるため、重要なコピーはライブテキストにします。

イベント／プロモーション用バナー

種類	寸法	Gemini の比率	用途
イベントバナー（横長）	1200 x 400	21:9	イベントページのヘッダー
ミートアップバナー	1200 x 675	16:9	Meetup.com のイベントカバー
Eventbrite バナー	2160 x 1080	16:9	Eventbrite のイベントカバー（2:1）
カンファレンスバナー	1920 x 600	4:1	カンファレンスウェブサイトのヒーロー

ステップ 3：ヒーローバナーの構成

レイアウトパターン

分割ヒーロー（左にコンテンツ、右にビジュアル）

グリッド 1fr 1fr、最小高さ 600px、パディング 80px、間隔 60px。コンテンツ側：アイブロウ（14px、大文字、ブランドカラー）、見出し（clamp(36px, 4vw, 56px)、ウェイト 800、text-wrap: balance）、説明文（18px、控えめな色）、CTA グループ（フレックス、間隔 16px）。

中央配置のヒーロー（背景にテキストを重ねる）

Flex 列方向で中央揃え、最小高さは 600px、パディングは 80px。背景画像に、視認性を高めるためのグラデーションオーバーレイを重ねます。見出しは白色で clamp(40px, 5vw, 72px)、最大幅は 800px にします。

非対称のヒーロー（中央から外れた焦点）

グリッドは 55% 45% にします。コンテンツ側のパディングは 80px にします。ビジュアル側には clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%) を指定します。

全面表示のビジュアルヒーロー（テキストは最小限）

背景画像を cover で表示し、最小高さは 80vh、align-items: flex-end にします。テキストの視認性を高めるため、下部から黒色の不透明度が 0 から 0.7 へ変化するグラデーションスクリーンを ::after で追加します。コンテンツは z-index 2、最大幅は 600px、テキストは白色にします。

ステップ 4：CTA の配置と階層

プライマリー CTA + セカンダリー CTA のパターン

Flex コンテナを使用します（gap: 16px; flex-wrap: wrap）。プライマリー CTA はブランドカラーの塗りつぶし背景、白いテキスト、パディングは 14px 28px、角丸は 8px、シャドウありにします。セカンダリー CTA は透明な背景、ニュートラルカラーのボーダー（1.5px）にし、サイズは同じにします。どちらも font-weight: 600 にし、ホバー時は translateY(-1px) を適用するか、背景色を塗りつぶします。

CTA の配置ルール

ヒーローバナー： 見出しと説明の下に CTA を配置し、左揃えにします
中央揃えのバナー： 説明の下に CTA を配置し、中央揃えにします
サイドバナー： CTA を最下部に配置し、幅いっぱいにします
通知バー： CTA をテキストと同じ行の右側に配置します
メールバナー： CTA を大きなボタンとして中央に配置します

ステップ 5：アニメーションバナーのテクニック

アニメーションのテクニック

パララックス： perspective: 1px; height: 100vh; overflow-y: auto を指定したスクロールコンテナを使用します。背景レイヤーには transform: translateZ(-1px) scale(2) を指定します（scale = 1 + depth / perspective）
アニメーション付きグラデーション： background-size: 600% 600% を指定し、background-position を 12 秒かけてアニメーションさせます
浮遊する図形： 不透明度 0.08 の円を絶対配置し、それぞれに異なる translate／rotate のキーフレーム（7〜10 秒）を設定します
テキストの表示： 単語を inline-block の <span> で囲み、0.1 秒ずつ遅らせながら translateY(100%) -> 0 をアニメーションさせます
タイピング効果： white-space: nowrap; width: 0 を指定し、steps() で幅をアニメーションさせます。border-right で点滅するカーソルを追加します
モーションはすべて @media (prefers-reduced-motion: no-preference) で囲み、最初のフレームから見出しを読みやすく保ちます

ステップ 6：レスポンシブバナーのテクニック

流動的なスケーリング

最小高さ、パディング、フォントサイズには clamp() を使用します。例：font-size: clamp(28px, 4vw, 64px)
768px のブレークポイントでは、分割グリッドを 1fr にして縦に並べ、テキストを中央揃えにし、order: -1 でビジュアルをテキストより上に配置します
ブレークポイントごとに背景画像を切り替えます：モバイル（デフォルト）、タブレット（768px）、デスクトップ（1200px）

ステップ 7：季節限定・プロモーション用フレームワーク

セール／割引バナー

赤色のグラデーション背景（135deg, #DC2626, #991B1B）を使用し、中央揃えにします。割引率の数字は clamp(60px, 10vw, 120px)、ウェイトは 900 にします。不透明度 0.03 の repeating-linear-gradient(-45deg) で斜めストライプの装飾を加えます。

製品ローンチバナー

暗色の背景（#0F172A から #1E293B）にし、テキストを中央揃えにします。ピル型の小見出しバッジを追加します（大文字、13px、ブランドカラー、不透明度のある背景／ボーダー）。見出しは白色で clamp(36px, 5vw, 64px) にします。上部中央に配置した radial-gradient を使い、::after でスポットライトのような光彩を加えます。

イベントカウントダウンバナー

ブランドカラーの背景にし、中央揃えにします。カウントダウンの各単位は Flex の行方向に並べ（間隔は 24px）、各単位には大きな数字（48px／800、tabular-nums、暗色の半透明背景）と、その下に小さなラベル（12px、大文字）を配置します。各単位の間に区切り記号を入れます。

通知／告知バー

幅いっぱいにブランドカラーの背景を設定し、Flex で中央揃えにします。パディングは 10px 20px にします。テキストは 14px／500 にし、リンクには下線と太字を適用します。閉じるボタンは右側に絶対配置します。

季節のテーマ

季節・イベント	色	要素	雰囲気
春	緑、ピンク、黄色	花、葉、蝶	爽やか、再生
夏	青、オレンジ、明るい黄色	太陽、波、ヤシの木	活気、暖かさ
秋	オレンジ、赤、茶色	葉、カボチャ、暖色系	居心地のよさ、収穫
冬	青、白、銀	雪の結晶、霜、常緑樹	すっきり、祝祭的
ブラックフライデー	黒、金、赤	大胆なタイポグラフィ、値札	緊急感、高級感
新年	金、黒、シャンパンカラー	紙吹雪、花火、きらめき	お祝い
バレンタインデー	赤、ピンク、ローズゴールド	ハート、花、柔らかなグラデーション	ロマンチック、暖かさ

ステップ 8：ヒーローとサイドバナーのパターン

ヒーローバナーのベストプラクティス

ビューポート幅いっぱいにし、高さは 50～80vh にします
明確な見出しを 1 つ、明確な CTA を 1 つ配置します
背景：グラデーション、オーバーレイ付き画像、またはアニメーション
コンテンツ領域の最大幅：1200～1440px、中央揃え
モバイル：縦に積み重ね、見出しのサイズを小さくします
読み込み時間：背景画像を最適化し、可能な場合は CSS グラデーションを使用します

サイドバナーのベストプラクティス

幅を固定します（通常 300px）
縦長の形式（300x600）は、短い形式（300x250）よりも効果的です
コンテンツはスクロールせずにすべて表示される必要があります
ページコンテンツとの境界を明確にします
テキストは最小限にします：見出しと CTA のみ
周囲のページとの視覚的なコントラストを強くします

サイドバナーのパターン：300x600px、flex column、ブランドグラデーションの背景、32px 24px のパディング、白いテキスト。ロゴは上部、ビジュアルは中央（flex:1）、見出しは 22px/700、本文は不透明度 0.85 の 14px、CTA は下部（margin-top: auto、白い背景、ブランドカラーのテキスト、中央揃え）。

ステップ 9：メールヘッダーの詳細

メール HTML には厳しい制約があります。次の方法を使用します。

テーブルベースのレイアウトを使用し、最大幅は 600px、インラインスタイルのみとします。フォント：Arial, Helvetica, sans-serif。構造：グラデーション背景の外側の <table>、中央揃えのロゴ <img>、<h1>（28px、太字、白）、<p>（16px、白、不透明度 0.9）、白い背景とブランドカラーのテキストリンクを使用したネストされたテーブルの CTA。

メールデザインのルール

Arial, Helvetica, sans-serif を使用します（メールでは Web フォントが安定して動作しません）
背景画像：フォールバックとして必ず background-color を設定します（Outlook は背景画像を無視します）
最大幅は 600px とし、320px のモバイル向けにデザインします
画像：必ず width、height、alt、display:block を設定します
CSS の省略記法を避け、ロングハンドプロパティを使用します
Litmus または Email on Acid でテストします

品質チェックリスト

Markdown 対応

ログインしてコメント

基本情報

作者: arnavpuri
リポジトリ: arnavpuri/designskills
カテゴリ: デザイン・UI
インストール数: 129
GitHub スター: 17

問題を報告