CTA・特徴紹介コード生成用
注釈つきスクリーンショット
画面の上に番号を置き、ポイントを横で説明する。
用途・説明
サービスの画面のスクリーンショットに番号のピンを重ね、横にその説明を並べるセクションを作成します。実際の画面を見せながら使い方を伝えられるため、SaaSや管理画面のあるサービスに向いています。ピンと説明が連動して強調されます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[スクリーンショット]- 画像のパスと、画面の内容の説明
[注釈のリスト]- 見出し・説明・ピンの位置（左から%、上から%）を3〜4つ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「注釈つきスクリーンショット」のセクションを実装してください。 ## 表示内容 - スクリーンショット：[スクリーンショット] - 注釈： [注釈のリスト] ## レイアウト - PC：左（60%）にスクリーンショット、右（40%）に注釈のリスト。間隔 48px - スマホ：スクリーンショット → 注釈のリスト の順に縦並び - スクリーンショットは、ブラウザのウィンドウ風の枠（上に3つの丸）に入れる - ピンは、画像の上に % で位置を指定して重ねる ## デザイン - ウィンドウの枠：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、影 0 8px 24px rgba(27,42,68,0.08) - ピン：28px の円、背景 #1463F0、文字 #FFFFFF・13px・font-weight 700。まわりに #1463F0 の半透明の輪（6px） - 注釈の各行：左に番号の円（ピンと同じ見た目・24px）、右に見出しと説明 - 注釈の見出し：16px、font-weight 700、色 #1B2A44。説明：14px、line-height 1.8、色 #5F6D84 - 行の間隔 24px ## 動作 - 注釈の行に hover またはフォーカスすると、対応するピンが 1.2倍になり、輪が広がる - ピンに hover またはフォーカスすると、対応する注釈の行の背景が淡い色になる ## アクセシビリティ - スクリーンショットの alt に、画面の内容を説明する文を入れる - ピンは button 要素で、aria-describedby で対応する注釈と結びつける - 注釈のリストは ol / li - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。