CTA・特徴紹介コード生成用
写真つき左右分割のCTA
担当者の写真を添えて、相談しやすい雰囲気に。
用途・説明
左に見出しとボタン、右に写真を置く、カード型のCTAを作成します。担当者やスタッフの写真を使うと、「人が対応してくれる」安心感が伝わります。相談や見積もりの依頼を受けたいサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：導入のご相談は、お気軽にどうぞ
[説明文]- 例：専任スタッフが、30分でご案内します。
[ボタンの文言]- 例：相談を予約する
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「写真つき左右分割のCTA」を実装してください。 ## 表示内容 - 見出し：[見出し] - 説明文：[説明文] - ボタン：[ボタンの文言] - 写真（仮の画像を置き、差し替える場所をコメントで示す） ## レイアウト - 全体を1枚のカードにする。最大幅 1000px、中央配置 - PC：左（58%）に文章とボタン、右（42%）に写真。写真はカードの高さいっぱいに広げる - スマホ：写真（縦横比 16:9）→ 文章 の順に縦並び ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 20px、overflow: hidden - 文章の部分：padding PC 48px / スマホ 28px - 見出し：PC 28px / スマホ 22px、font-weight 700、line-height 1.5、色 #1B2A44 - 説明文：15px、line-height 1.9、色 #5F6D84、見出しの下 12px - ボタン：高さ 48px、左右padding 28px、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700、説明文の下 24px - 写真：object-fit: cover - hover：ボタンを少し暗くする ## マークアップ - section 要素。見出しは h2、ボタンは a 要素 - 写真の alt には、写っている人や場面を説明する文を入れる ## アクセシビリティ - ボタンに focus-visible のスタイルを用意する - タップ領域は高さ 44px 以上 ## 出力形式 - [使用技術]のコードを1つ出力 - 写真を左に置きたい場合の変更箇所をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。