ナビゲーションコード生成用
「もっと見る」で続きを読み込むボタン
一覧の下のボタンを押すと、続きがその場に追加される。
用途・説明
一覧の下に置く「もっと見る」ボタンを作成します。押すと、次の件数ぶんが下に追加され、すべて表示し終えたらボタンが消えます。ページを切り替えずに読み進められるので、商品の一覧、施工事例、記事の一覧など、スマホで見られることが多い一覧に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[一覧の内容]- 例：施工事例のカード
[1回に表示する件数]- 例：6
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「『もっと見る』で続きを読み込むボタン」を実装してください。 ## 表示内容 - 一覧：[一覧の内容]（最初は [1回に表示する件数] 件） - 一覧の下に「24件中 6件を表示」のような件数 - ボタン：「もっと見る」 ## デザイン - ボタン：幅 240px（スマホは 100%）、高さ 48px、背景 #FFFFFF、枠線 1px solid #1463F0、文字 #1463F0・15px・font-weight 700、角丸 999px - 文言の右に、下向きの矢印アイコン - 件数：13px、色 #5F6D84、ボタンの上 12px、中央揃え - 件数の下に、進み具合を示す細いバー（幅 160px、高さ 3px、#1463F0） ## 動作 - 押すと、次の [1回に表示する件数] 件を一覧の下に追加する - 読み込み中は、文言を「読み込み中…」に変えて押せなくする - すべて表示したら、ボタンを消して「すべて表示しました」と表示する - 追加された項目は、下から 12px 上がりながらフェードインする - 表示した件数をURL（?shown=12）に保存し、戻るボタンで戻ってきたときに同じ位置から見られるようにする方法をコメントで補足する ## アクセシビリティ - button 要素を使う - 追加されたら、追加ぶんの最初の項目にフォーカスを移す - 件数の変化を aria-live="polite" で伝える - JavaScript が無効でも一覧を見られるよう、通常のページ送りへのリンクを用意する - フェードインは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - データの取得はコールバックに分け、配列とAPIのどちらにも対応できるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。