料金表コード生成用
「お問い合わせ」プラン付きの料金表
価格が決まったプランの隣に、個別見積もりのプランを並べる。
用途・説明
料金が決まっているプランの横に、「お問い合わせください」とだけ書かれた大規模向けのプランを並べる料金表を作成します。規模や要件によって金額が変わる法人向けプランを、ほかのプランと同じ並びで案内できます。BtoBのSaaSや業務システムの料金ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[通常プラン]- プラン名・月額・内容を1〜2つ
[個別見積もりプランの内容]- 例：専任の担当者、SSO、請求書払い
[ボタン文言]- 例：営業に相談する
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「『お問い合わせ』プラン付きの料金表」を実装してください。 ## 表示内容 - 通常のプラン： [通常プラン] - 個別見積もりのプラン（プラン名：エンタープライズ）： [個別見積もりプランの内容] - 個別見積もりプランのボタン：[ボタン文言] ## レイアウト - PC：プランを横に並べる。個別見積もりのプランはいちばん右 - スマホ：1列。個別見積もりのプランはいちばん下 - すべてのカードで、価格の位置とボタンの位置をそろえる ## デザイン - 通常のカード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 28px 24px - 個別見積もりのカード：背景 #1B2A44、文字 #FFFFFF、枠線なし - プラン名：16px、font-weight 700 - 価格：32px、font-weight 700。個別見積もりのカードは、価格の位置に「お問い合わせください」（22px、font-weight 700）と表示する - 価格の下の一言：13px（例：ご利用の規模に合わせてお見積りします） - 内容：14px、行頭にチェックマーク。個別見積もりのカードは「上のプランのすべてに加えて」の一言を先頭に置く - ボタン：高さ 48px、角丸 999px。通常は #1463F0 の塗り、個別見積もりは背景 #FFFFFF・文字 #1B2A44 ## アクセシビリティ - プラン名は h3、内容は ul / li - 暗いカードの文字は、コントラスト比 4.5:1 以上 - ボタンの行き先（申し込み／問い合わせフォーム）が文言で分かるようにする - フォーカスリングは、暗いカードの上でも見える色にする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。