モーダル・通知・タブコード生成用
コマンドパレット（検索モーダル）
キーボードで呼び出し、ページや操作をすばやく探す。
用途・説明
ショートカットキーで呼び出す、検索用のモーダル（コマンドパレット）を作成します。入力した文字でページや操作を絞り込み、矢印キーと Enter キーだけで実行できます。機能の多い管理画面やドキュメントサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目のリスト]- グループ名・項目名・行き先（URLまたは操作）を8〜12個
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「コマンドパレット（検索モーダル）」を実装してください。 ## 表示内容 - 検索欄（placeholder：ページや操作を検索…）と、右端にショートカットの表示（⌘K） - 結果の一覧： [項目のリスト] （グループごとに見出しを付けて表示する） - 下端に、操作のヒント（↑↓ 移動、↵ 決定、esc 閉じる） ## レイアウト - 画面の上から 15% の位置に、横は中央に表示。幅 560px（スマホでは左右に 16px の余白） - 結果の一覧は、最大の高さ 360px でスクロール ## デザイン - 背景の幕：rgba(27,42,68,0.5) - パレット：背景 #FFFFFF、角丸 12px、影 0 24px 64px rgba(27,42,68,0.3) - 検索欄：高さ 56px、枠線なし、下に 1px solid #E2E8F0、文字 16px。左に虫めがねのアイコン（色 #8A96AA） - ショートカットの表示：12px、枠線 1px solid #DCE4F0、角丸 4px、色 #8A96AA - グループの見出し：12px、色 #5F6D84、padding 12px 16px 4px - 項目：高さ 40px、左右padding 12px、角丸 6px、文字 14px・色 #1B2A44 - 選択中の項目：背景は #1463F0 の9%の淡い色、文字 #1463F0・font-weight 700。右端に ↵ - 入力した文字と一致する部分は、太字にする ## 動作 - ⌘K（Windows では Ctrl+K）で開閉する。入力欄にフォーカスがあるときも反応する - 入力した文字で絞り込む（ひらがな・カタカナ・全角半角の違いを無視する） - ↑↓ で選択を移動し、Enter で実行する。マウスを乗せても選択が移る - 結果が0件のときは「『〇〇』に一致する項目はありません」と表示する - 何も入力していないときは、「よく使う操作」を表示する ## アクセシビリティ - dialog 要素で実装する。検索欄は role="combobox"、一覧は role="listbox"、項目は role="option" - 選択中の項目を aria-activedescendant で伝える（フォーカスは検索欄に置いたまま） - 結果の件数を aria-live="polite" で伝える - ショートカットを使えない人のために、画面上に開くボタンも用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。