CTA・特徴紹介コード生成用
タブで切り替える機能紹介
機能ごとにタブを分け、画面と説明を入れ替える。
用途・説明
機能をタブで切り替えながら、説明と画面のイメージを見せるセクションを作成します。機能が多くても場所を取らず、読む人が気になるものだけを見られます。SaaSやアプリの紹介ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[機能のリスト]- タブ名・見出し・説明・画像のセットを3〜4つ
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「タブで切り替える機能紹介」を実装してください。 ## 表示内容 [機能のリスト] （各パネル：見出し、説明、「詳しく見る」のリンク、画像） ## レイアウト - 上にタブを横並び・中央揃え。その下 24px にパネル - パネルは2カラム：左に文章、右に画像（PC）。スマホでは 画像 → 文章 の縦並び - タブが画面に収まらない場合は横スクロール ## デザイン - タブ：高さ 40px、左右padding 20px、角丸 999px、枠線 1px solid #DCE4F0、背景 #FFFFFF、文字 14px・font-weight 700・色 #5F6D84 - 選択中のタブ：背景 #1463F0、枠線 #1463F0、文字 #FFFFFF - パネル：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding PC 40px / スマホ 24px - 見出し：24px、font-weight 700、line-height 1.5、色 #1B2A44 - 説明：15px、line-height 1.9、色 #5F6D84 - リンク：14px、font-weight 700、色 #1463F0 - 画像：角丸 12px、縦横比 4:3 ## 動作 - タブを押すとパネルを切り替える。切り替えのときは 0.2秒でふわっと表示 - パネルの高さが切り替えのたびに変わらないよう、いちばん高いパネルに合わせる ## アクセシビリティ - role="tablist" / "tab" / "tabpanel"、aria-selected、aria-controls を設定する - 左右の矢印キーでタブを移動、Home / End で最初・最後へ - 選択中のタブだけ tabindex="0"、ほかは "-1" - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。