ファーストビューコード生成用
言葉が切り替わるファーストビュー
見出しの一部が入れ替わり、いくつもの使い道を伝える。
用途・説明
見出しのなかの一語が、数秒ごとに別の言葉へ切り替わるファーストビューを作成します。「〇〇を、もっとかんたんに。」の〇〇が入れ替わることで、対象や使い道の広さを短い言葉で伝えられます。対象の業種や用途が複数あるツールやサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しの形]- 例：〇〇を、もっとかんたんに。
[切り替わる言葉]- 3〜5個。例：予約管理、顧客管理、売上集計
[ボタン文言]- 例：無料ではじめる
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「言葉が切り替わるファーストビュー」を実装してください。 ## 表示内容 - 見出し：[見出しの形] - 〇〇に入る言葉（順に切り替える）：[切り替わる言葉] - ボタン：[ボタン文言] ## レイアウト - 中央揃え。上から 見出し → ボタン - 切り替わる言葉は1行目に単独で置き、2行目に残りの文を置く（言葉の長さが変わっても、ほかの文字が動かないようにする） ## デザイン - 背景 #FFFFFF - 見出し：PC 52px / スマホ 32px、font-weight 700、line-height 1.4、色 #1B2A44 - 切り替わる言葉：色 #1463F0。下に、#1463F0 の25%の淡い色のマーカー（高さ 0.3em）を敷く - ボタン：高さ 56px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700 ## 動き - 2.5秒ごとに次の言葉へ切り替える - いまの言葉が上へ 0.5em 動きながら消え、次の言葉が下から現れる（0.4秒） - 最後の言葉のあとは、最初に戻る - タブが非表示のあいだは止める ## アクセシビリティ - 切り替わる部分は aria-hidden="true" にし、読み上げ用には、すべての言葉を含む文（例：予約管理・顧客管理・売上集計を、もっとかんたんに。）を視覚的に隠して h1 のなかに置く - prefers-reduced-motion のときは切り替えをやめ、最初の言葉だけを表示する - JavaScript が無効でも、最初の言葉で見出しが成り立つようにする ## 出力形式 - [使用技術]のコードを1つ出力 - 言葉を配列で渡せるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。