料金表コード生成用
お店の料金メニュー表
メニュー名と価格を点線でつなぐ、サロンや飲食店の料金表。
用途・説明
美容室、サロン、整体、飲食店、教室などの料金メニュー表を作成します。カテゴリごとにメニュー名と価格を並べ、間を点線でつないで読みやすくします。所要時間や補足も添えられます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メニューの内容]- カテゴリごとに、メニュー名・価格・補足を数件ずつ
[注記]- 例：価格はすべて税込です
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お店の料金メニュー表」を実装してください。 ## 表示内容 [メニューの内容] （カテゴリ名、メニュー名、価格、あれば所要時間などの補足） - 注記：[注記] ## レイアウト - カテゴリごとに見出しを置き、その下にメニューの行を並べる - 各行：左にメニュー名、右に価格。間を点線でつなぐ - PC：カテゴリを2列に並べる。スマホ：1列 ## デザイン - カテゴリの見出し：13px、font-weight 700、letter-spacing 0.15em、色 #1463F0 - メニュー名：16px、font-weight 700、色 #1B2A44 - 価格：16px、font-weight 700、色 #1B2A44、等幅の数字（tabular-nums） - 点線：2px dotted #CBD5E1。メニュー名と価格の文字の下端にそろえる - 補足：12px、色 #5F6D84、メニュー名の下 - 行の間隔 16px、カテゴリの間隔 40px ## アクセシビリティ - カテゴリは h3、メニューは dl / dt / dd（または table）でマークアップし、名前と価格が対で読み上げられるようにする - 点線は装飾。疑似要素や flex で描き、「・・・」などの文字を使わない - 価格は「4,400円」のように単位まで文字で書く ## 出力形式 - [使用技術]のコードを1つ出力 - メニューを配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。