CTA・特徴紹介コード生成用
アプリのダウンロードを促すCTA
スマホの画面とストアのボタンを並べる。
用途・説明
アプリの画面イメージと、ストアへのボタンを並べるCTAを作成します。PCで見ている人のために、QRコードを表示する欄も用意しています。アプリを提供しているサービスのトップページや、紹介ページの最後に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：アプリなら、もっと手軽に。
[ストアのURL]- iOS用とAndroid用のURL
[アプリの画面]- 画面のスクリーンショット
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「アプリのダウンロードを促すCTA」を実装してください。 ## 表示内容 - 見出し：[見出し] - 補足（1文。例：通知で、大切なお知らせを見逃しません。） - ストアへのボタン2つ：[ストアのURL] - QRコード（PCのみ表示）と「スマホで読み取る」の文 - アプリの画面：[アプリの画面] ## レイアウト - PC：2カラム。左に見出し・補足・ボタン・QRコード、右にスマホの画面。上下中央揃え、間隔 64px - スマホ：見出し → ボタン → スマホの画面 の順に縦並び、中央揃え。QRコードは表示しない - スマホの画面は、セクションの下端から少しはみ出すように置き、下を切る ## デザイン - セクションの背景：#1463F0 の9%の淡い色、角丸 24px - 見出し：PC 32px / スマホ 24px、font-weight 700、line-height 1.5、色 #1B2A44 - 補足：15px、色 #5F6D84 - ストアへのボタン：高さ 48px、背景 #1B2A44、角丸 10px、文字 #FFFFFF。2つを横に並べる（間隔 12px） - QRコード：96px、白い背景、角丸 8px、padding 8px - スマホの枠：幅 260px、角丸 36px、濃い色（#1B2A44）の枠 8px、影 0 24px 48px rgba(27,42,68,0.2) ## 注意点 - 各ストアの公式バッジを使う場合は、提供元のガイドライン（余白・大きさ・色）に従う必要があることをコメントで明記する。ここでは仮のボタンで実装する ## アクセシビリティ - ストアへのボタンは a 要素で、「App Store でダウンロード」のように行き先が分かる文言にする - QRコードの alt に「アプリのダウンロードページへのQRコード」を入れる - アプリの画面の alt に、画面の内容を説明する文を入れる - #1463F0 は、リンクの focus-visible の枠にも使う ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。