テーブル・一覧コード生成用
検索結果の一覧
キーワードを強調して、探しているものを見つけやすく。
用途・説明
サイト内検索の結果を表示する一覧を作成します。検索した言葉と件数を上に示し、各結果にはページの場所（パンくず）・タイトル・前後の文を表示して、一致した言葉を強調します。0件のときの案内まで含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[検索の言葉]- 例：請求書
[結果のリスト]- タイトル・ページの場所・本文の抜粋を5件程度
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「検索結果の一覧」を実装してください。 ## 表示内容 - 検索欄（検索した言葉が入った状態） - 「[検索の言葉]」の検索結果と、件数 - 結果： [結果のリスト] - ページ送り ## レイアウト - 最大幅 760px - 各結果は上から ページの場所 → タイトル → 抜粋 - 結果の間隔 24px、あいだに 1px solid #E2E8F0 ## デザイン - 検索した言葉と件数：15px、色 #5F6D84。検索した言葉は font-weight 700・色 #1B2A44 - ページの場所：12px、色 #5F6D84（例：ヘルプ › お支払い） - タイトル：18px、font-weight 700、line-height 1.5、色 #1463F0。hover で下線 - 抜粋：14px、line-height 1.8、色 #47566E、2行で省略 - 一致した言葉：背景 #FFE38A、色 #1B2A44、角丸 2px（タイトルと抜粋の両方で強調する） ## 動作 - 抜粋は、一致した言葉の前後を中心に切り出す。文の途中から始まるときは、先頭に「…」を付ける - 複数の言葉で検索したときは、それぞれを強調する - 強調のときは、ひらがな・カタカナ、全角・半角、大文字・小文字の違いを無視して探す - 検索の言葉を HTML として解釈しない（そのまま文字として表示する） ## 0件のとき - 「『〇〇』に一致するページは見つかりませんでした」と表示する - その下に、探し方のヒント（別の言葉で試す、言葉を減らす）と、よく見られているページへのリンクを3つ置く ## アクセシビリティ - 結果のリストは ol / li（順位に意味があるため）。タイトルは h2 のなかの a 要素 - 強調は mark 要素でマークアップする - 件数を、検索のあとに aria-live="polite" で伝える - 検索欄は role="search" の要素のなかに置き、label を付ける ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。