料金表コード生成用
横長の1プラン料金カード
左に含まれる内容、右に価格とボタンを置いた横長の1枚。
用途・説明
プランが1つだけのサービス向けに、横長の料金カードを作成します。左側に含まれる内容を2列で並べ、右側に価格と申し込みボタンを色付きの面で置きます。オンライン講座、会員制サービス、買い切りのテンプレートやツールの料金案内に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[プラン名]- 例：メンバーシップ
[説明文]- プランの内容を1〜2文で
[含まれる内容]- 4〜6個
[価格]- 例：月額 2,980円（税込）
[ボタン文言]- 例：申し込む
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横長の1プラン料金カード」を実装してください。 ## 表示内容 - プラン名：[プラン名] - 説明文：[説明文] - 含まれる内容： [含まれる内容] - 価格：[価格] - ボタン：[ボタン文言] ## レイアウト - 1枚の横長カード（最大幅 880px）。左（幅 62%）にプラン名・説明文・含まれる内容、右（幅 38%）に価格とボタン - 含まれる内容は2列に並べる - 右側は中央揃えで、上から 小さな見出し → 価格 → ボタン → 補足 - スマホ：上下に並べる（内容が上、価格が下） ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 20px、overflow: hidden - 左側：padding 40px。プラン名 22px・font-weight 700、説明文 15px・色 #5F6D84 - 「含まれるもの」の小見出しの右に、横線を引いて区切る（12px、font-weight 700、色 #1463F0） - 含まれる内容：14px、行頭に #1463F0 のチェックマーク - 右側：背景は #1463F0 の9%の淡い色、padding 40px 32px - 価格：44px、font-weight 700、色 #1B2A44。「月額」「税込」は 13px - ボタン：幅 100%、高さ 52px、角丸 999px、背景 #1463F0、文字 #FFFFFF・font-weight 700 - 補足：12px、色 #5F6D84（例：いつでも解約できます） ## アクセシビリティ - プラン名は h3、含まれる内容は ul / li - 価格は「月額2,980円、税込」とひと続きで読み上げられるようにする - ボタンのタップ領域は 44×44px 以上 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。