フォーム・お問い合わせコード生成用
検索ボックス
虫めがねと入力欄とボタンを1つにまとめた検索窓。
用途・説明
サイト内検索や記事検索に使う検索ボックスを作成します。左に虫めがねのアイコン、中央に入力欄、右に検索ボタンを置いたピル型です。ヘッダーや一覧ページの上部に置けます。入力した文字を消すボタンも含みます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プレースホルダー]- 入力欄の案内文。例：キーワードで検索
[送信先]- 検索結果ページのURL。未定なら「#」のまま
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「検索ボックス」を実装してください。 ## 表示内容 - 虫めがねのアイコン、入力欄（プレースホルダー：[プレースホルダー]）、入力内容を消す「×」ボタン、「検索」ボタン ## レイアウト・デザイン - 全体：高さ 48px、最大幅 560px、背景 #FFFFFF、枠線 1px solid #DCE4F0、角丸 9999px - 虫めがね：18px、色 #5F6D84、左端から 16px - 入力欄：枠線なし、文字 16px、色 #1B2A44。プレースホルダーは #8A96AA - 「×」ボタン：入力があるときだけ表示 - 検索ボタン：全体の内側右端に、高さ 40px、左右padding 20px、背景 #1463F0、文字 #FFFFFF、角丸 9999px、font-weight 700 - フォーカス時：全体の枠線を #1463F0 にし、3px の薄いリングを表示 ## 入力まわりの属性 - form は role="search"、method="get"（送信先：[送信先]） - 入力欄：type="search"、name="q"、autocomplete="off"、enterkeyhint="search" - ブラウザ標準の「×」は非表示にして、自前のボタンと重ならないようにする ## 動作 - Enter キーと検索ボタンのどちらでも送信できる - 「×」を押すと入力を消し、入力欄にフォーカスを戻す - 空のまま送信した場合は何もしない ## アクセシビリティ - 入力欄には見えないラベル（「サイト内を検索」）を付ける。プレースホルダーだけに頼らない - アイコンは aria-hidden="true"、「×」ボタンには aria-label="入力を消す" - タップ領域は最低44×44px ## 出力形式 - [使用技術]のコードを1つ出力 - 色・高さ・角丸をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。