テーブル・一覧コード生成用
カンバンボード
「未着手・進行中・完了」の列に、カードを並べる。
用途・説明
タスクのカードを、「未着手」「進行中」「完了」などの列に並べるカンバンボードを作成します。カードをドラッグして、別の列に移せます。ドラッグができない環境でも移動できるよう、メニューからの移動も用意しています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[列のリスト]- 例：未着手、進行中、確認待ち、完了
[カードのリスト]- タイトル・担当者・期限・ラベル・どの列か を8件程度
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「カンバンボード」を実装してください。 ## 表示内容 - 列：[列のリスト] - カード： [カードのリスト] （各カード：ラベル、タイトル、担当者のアイコン、期限） - 各列の見出しに、カードの件数。列の下に「＋ カードを追加」 ## レイアウト - 列を横に並べる。各列の幅 280px、間隔 16px - 画面に収まらないときは、ボード全体を横スクロールにする - 列のなかは、カードを縦に並べる（間隔 8px）。カードが多いときは、列のなかで縦スクロール - スマホでは、1列を画面の幅の85%にして、横にスワイプで切り替える（scroll-snap） ## デザイン - 列：背景は #1463F0 の12%の淡い色、角丸 12px、padding 12px - 列の見出し：14px、font-weight 700、色 #1B2A44。件数は 13px・色 #5F6D84 - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 8px、padding 12px、影 0 1px 2px rgba(27,42,68,0.06) - タイトル：14px、line-height 1.6、色 #1B2A44 - ラベル：11px、font-weight 700、角丸 999px、padding 2px 8px - 担当者のアイコン：24px の円。期限：12px、色 #5F6D84。期限を過ぎたものは 色 #C9343A - ドラッグ中のカード：少しかたむけ（2度）、影を濃くする。もとの場所は点線の枠にする - 落とせる場所：#1463F0 の線（2px）で示す ## 動作 - カードをドラッグして、別の列や、同じ列の別の位置に移せる - 移したら、すぐに画面に反映し、コールバックで結果を渡す。保存に失敗したら、もとの位置に戻して通知を出す - 列の件数を、移すたびに更新する ## アクセシビリティ - 各カードに、メニュー（⋯）から「次の列へ移動」「前の列へ移動」「いちばん上へ」を選べるようにする（ドラッグができない環境のため） - キーボードでは、カードにフォーカスして スペースキーでつかみ、矢印キーで動かし、スペースキーで置く。Esc キーで取り消す - 移動の結果を aria-live="assertive" で伝える（例：「『資料作成』を進行中の2番目に移動しました」） - 各列は section（aria-labelledby で見出しと結びつける）、カードは ul / li - ドラッグの動きは prefers-reduced-motion のとき、かたむけない ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。