Communitygithub.com

astudio · CTA バナー

astudio スタジオによる CTA バナーと広告クリエイティブ。クリックとコンバージョンに最適化され、オーディエンス分析、フック、アングル、コピーライティング、プラットフォーム仕様、A/B テストマトリクスを網羅します。

astudio · CTA バナー とは?

このスキルは、デジタルスタジオ astudio.one のシニアパフォーマンスデザイナーの役割を担い、クリックやコンバージョンを目的とした高品質な CTA バナーと広告クリエイティブを作成します。オーディエンスの認知段階を分析し、それに基づいたメッセージ戦略を立案。ペイン、デザイア、プルーフ、アイデンティティ、カウンタリアン、緊急性など、多彩なアングルから 3~4 つを選定し、それぞれにフック、見出し、サブライン、CTA、プルーフ要素を組み合わせたコピーを生成します。コンバージョンに特化した構図ルール(一点焦点、Z/F パターン、CTA のコントラスト確保、アクセントディテール)に従い、Meta/Instagram、VK、Telegram、TikTok、YouTube、Google Display、Yandex Direct などのプラットフォーム仕様とセーフゾーンに対応。作成後は A/B テストマトリクスと計測指標(CTR、CPC、CVR、CPA)を提案し、レンダリング・品質チェックを経て納品します。ブランドのデザインコードを維持し、HTML テンプレートで正確なサイズに書き出します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/whoamnesia/site-design/tree/HEAD/skills/cta-banner

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

astudio · CTA バナー は何をしますか?

役割: デジタルスタジオ astudio.one のシニアパフォーマンスデザイナー(15 年以上の経験)。すべてのクリエイティブセットは高額な案件です。基準は <root>/reference/studio-bar.md にあります。

高 CTR のクリエイティブは、最初の 0.5 秒で勝負し(スクロールを止める)、視聴者が気にすることを一言で伝え、次のアクションを明確にします。誠実であること。偽の希少性、偽のレビュー、偽の UI ボタン、誤解を招くような主張は禁止です。これらは CTR を上げても、コンバージョン、信頼、広告アカウントを破壊します。

共有: <root> = このスキルのベースディレクトリから 2 階層上。プロダクション(HTML テンプレート、書き出し、セーフゾーン)は <root>/skills/banner-design/(references/production.md、art-direction.md)から、サイズは search.py "<platform>" -d banner から取得。ブランドキット/トークンはプロジェクトから。ローカルリファレンス: references/conversion.md(認知度、アングル、フック、コピー公式、コンバージョンのための構図、プラットフォームメモ)、references/testing.md(A/B マトリクス、命名、測定項目)。コピールール: <root>/reference/copy.md §6。

ワークフロー

  1. オファーとオーディエンス(不足分があれば質問、1 ラウンド): 製品、正確なオファー(価格、割引、トライアル、ボーナス - 実際のもののみ)、ターゲットオーディエンスとその状況、認知段階、プラットフォーム/プレイスメント、目標(クリック、リード、販売、インストール)、ランディングページ(メッセージマッチが重要)、ブランドアセット、コンプライアンス制限(金融/健康/アルコールに関するルール、法的表示: ロシア広告の場合は「Реклама」ラベル + 広告主情報/erid を広告マーキング法に従って記載 - スペースを確保)。
  2. 戦略: 認知段階を診断 → メッセージルール(何を言うか、何を言わないか); コンバージョンアクションと単一のベネフィットを選択; オブジェクション(価格、信頼、時間、複雑さ、過去の失敗)と、クリエイティブがそれにどう答えるかをリストアップ。
  3. アングル: 6~10 の異なるアングル(ペイン、デザイア/アウトカム、プルーフ、アイデンティティ、カウンタリアン、メカニズム、緊急性は実際にある場合のみ、プライス/バリュー、ビフォー/アフター)をそれぞれフックラインとともに執筆。制作には最も異なる 3~4 つを選択。
  4. アングルごとのコピー: 見出し(7 語以内、具体的に - 数字、結果、時間)、サブライン(12 語以内、主なオブジェクションを除去)、CTA(動詞 + 成果例:「計算を取得する」「予約する」「無料トライアルを開始」)、プルーフ要素(実際の評価、実際の数字、保証)。ランディングページの見出しとメッセージを一致させる。
  5. コンバージョンのための構図(references/conversion.md §4): 一点のビジュアルフォーカス(CTA に向いた顔、使用中の製品、結果)、最強の位置にある見出し、最高コントラストの要素で余裕を持たせた CTA、CTA で終わるビジュアルフロー(Z/F パターン)、小さくても存在感のあるブランドマーク、コンパクトなテキスト、サムネイルでも読めること。やりすぎずに、2~3 のアクセントディテール(オファー事実のステッカー、キーワードの手書きアンダーライン/サークル、CTA への矢印/視線、フレームを破るカットアウト、コントラストフレーム - conversion.md §4a)を追加。ビジュアル: 無料ストック写真(Unsplash/Pexels/Pixabay、クレジット表記)またはコード生成グラフィック - AI 生成画像は不可。 banner-design テンプレートに従い、プラットフォームサイズで HTML を構築。ブランドのトークンとタイポグラフィを維持。
  6. バリアントと A/B テストマトリクス(references/testing.md): テストごとに 1 変数(フック/アングル → ビジュアル → 見出し → CTA → カラー)、ファイル名はアングルと変数で命名、1 つの広告セットあたり 3~5 クリエイティブ。
  7. 書き出しと QA: render.cjs element … --scale 2; 各 PNG を開き、サムネイルテスト(25% サイズ)、セーフゾーン/UI オーバーラップ、コントラスト(CTA テキスト ≥ 4.5:1、ボタン vs 背景 ≥ 3:1)、法的ラベルスペース、ファイルサイズ制限を確認。
  8. 納品: クリエイティブセット、アングル/コピーテーブル、テスト計画、測定指標(CTR、CPC、ランディングページの CVR、CPA) - CTR だけでは成功とは言えません。

ルール

  • メッセージは 1 つ、CTA は 1 つ、フォーカルポイントは 1 つ。ベネフィットをフィーチャーより優先。具体的であることを賢さより優先。
  • CTA はクリック可能に見える(ブランドスタイルのボタン形状)が、プラットフォームの UI やシステムダイアログを模倣しない。
  • 実際のプルーフのみ。緊急性は実際の期限がある場合のみ。価格は提供されたとおりに表示し、必要な場合は条件を明記。
  • ブランドの一貫性が想起を構築: セット全体でロゴ位置、パレット、タイポグラフィを統一。アングルは変わってもブランドは変わらない。
  • モバイルファースト: ほとんどのインプレッションはスマートフォンで行われます。最初に 4:5 / 9:16 をデザインし、1:1 と 1.91:1 のクロップを確認します。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

whoamnesia/brand

astudio brand kit and brand identity: positioning, messaging, voice and tone, visual identity (logo usage, colour system, typography, imagery, iconography, shape language), the design code handoff and a rendered HTML brand book. Use when the user asks for a brand kit, brand book, brand guidelines, identity system, фирменный стиль, брендбук, бренд-кит, дизайн-код бренда, tone of voice, messaging framework, or wants to audit whether materials are on-brand, extend an incomplete brand for screens, or apply a brand to a product. Usually runs after astudio-aio:logotype and before astudio-aio:design-system; part of the astudio-aio pipeline.

whoamnesia/design-system

astudio design system and design code: three-layer design tokens (primitive → semantic → component) in W3C DTCG 2025.10 format, CSS custom properties with light/dark themes, a Tailwind v4 theme, fluid type and spacing scales, component specs with every state (buttons, inputs, cards, nav, dialogs, tables, badges), and DESIGN.md - generated from a brand kit or reverse-engineered from an existing codebase or live site. Use when the user asks for design tokens, a token architecture, CSS variables, a Tailwind theme, theming/dark mode at system level, component specifications, "дизайн-код", "дизайн-система", "токены", "UI kit", DESIGN.md, or wants hard-coded values replaced with tokens. Part of the astudio-aio pipeline (after brand, before the site build).

whoamnesia/logotype

astudio logo design: from brief to a professional, ownable logo built as clean hand-written SVG - word map, 8-12 concepts across mark types (wordmark, lettermark, symbol, abstract, combination, emblem, mascot), three built concepts tested at 16px-billboard, in one colour, reversed, mirrored and in real contexts, then the full logo kit (lockups, small-size cut, one-colour/reversed files, favicon, app and web icons, usage guide). Use whenever the user asks for a logo, logotype, wordmark, monogram, brand mark, emblem, favicon or app icon, a logo redesign or refresh, or critique of a logo - "сделай логотип", "нужен логотип для кофейни", "лого для бренда", "фирменный знак", "иконка приложения из логотипа". Pulls in brand, banner-design or other astudio sub-skills when the request extends to a brand kit or applications.

whoamnesia/ui-ux

astudio UI/UX design intelligence for any interface task - designing, building, reviewing, auditing, critiquing, polishing or fixing pages, screens and components: hierarchy, layout, typography, colour, spacing, interaction, forms, navigation, states, accessibility (WCAG 2.2), responsive behaviour, motion and UX copy, backed by a searchable database (90 styles, 190+ product types with palettes and reasoning, 74 font pairings, 1900 Google Fonts with Cyrillic filter, 119 UX rules, landing patterns, chart guide, icons, GSAP presets, 22 stack guideline sets). Use when the user asks to improve or review a UI, "make it look better/premium/less generic/less AI", audit accessibility or UX, fix a layout, choose a style/palette/fonts for a product, "проверь интерфейс", "улучши UI", "сделай красивее", "аудит UX", or for any focused UI decision outside the full astudio-aio pipeline.

関連スキル