CTA・特徴紹介コード生成用
スクロールで切り替わる特徴紹介
画像は固定したまま、文章が進むと絵が変わる。
用途・説明
片側に画像を固定し、もう片側の文章をスクロールで読み進めると、いま読んでいる特徴に合わせて画像が切り替わるセクションを作成します。1つずつ順番に見てもらいたいときに向いています。スマホでは通常の縦並びにします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[特徴のリスト]- 見出し・説明文・画像のセットを3つ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スクロールで切り替わる特徴紹介」を実装してください。 ## 表示内容 [特徴のリスト] （各ステップ：番号、見出し、説明文、画像） ## レイアウト - PC：2カラム。左に文章のステップを縦に並べ、右に画像を position: sticky で固定する（画面の上から 120px） - 各ステップの高さは画面の高さの約70%にして、1つずつ読めるようにする - スマホ：固定をやめ、ステップごとに 画像 → 文章 の縦並びにする ## デザイン - ステップの左に縦線（太さ 2px、色 #DCE4F0）。いま読んでいるステップの線だけ #1463F0 - 番号：14px、font-weight 700、色 #1463F0 - 見出し：28px、font-weight 700、line-height 1.5、色 #1B2A44 - 説明文：16px、line-height 2、色 #5F6D84 - 読んでいないステップは、不透明度 40% にする - 画像：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 12px ## 動作 - IntersectionObserver で、画面の中央にあるステップを「いま読んでいる」と判定する - 判定が変わったら、右の画像を 0.3秒のフェードで切り替える - スクロールの速さに関係なく、画像の切り替えが飛ばないようにする ## アクセシビリティ - 画像はすべて HTML に書き、表示していないものは非表示にする（JavaScript が無効でも、縦に並んで全部見える） - 各画像に alt を入れる - フェードは prefers-reduced-motion で無効化 - 不透明度を下げた文字も、読める程度のコントラストを保つ ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。