料金表コード生成用
他の方法との比較表
自社と、ほかの選択肢を同じ項目で並べて違いを示す。
用途・説明
自社のサービスと、ほかの選択肢（自分でやる場合、従来の方法、一般的なサービスなど）を同じ項目で比べる表を作成します。料金だけでなく、手間や期間、サポートの違いを並べることで、選ぶ理由を伝えられます。特定の会社名を出さずに比べる形にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[自社サービス名]- 例：Toolly
[比べる相手]- 例：自分で作る場合、制作会社に依頼する場合
[比較項目]- 項目と、それぞれの内容。例：費用、期間、修正のしやすさ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「他の方法との比較表」を実装してください。 ## 表示内容 - 列：[自社サービス名]、[比べる相手] - 比較項目： [比較項目] ## レイアウト - 左端の列に項目名、その右に自社の列、さらに右に比べる相手の列 - 自社の列を左から2番目に置き、ほかの列より少し広くする - スマホ：項目ごとにカードにし、カードのなかで自社と相手を縦に並べる ## デザイン - 表：背景 #FFFFFF、角丸 12px、枠線 1px solid #E2E8F0 - 自社の列：背景は #1463F0 の9%の淡い色、左右に 2px solid #1463F0 の枠。列名は背景 #1463F0・文字 #FFFFFF - ほかの列の列名：背景 #F7F9FC、文字 #5F6D84 - 項目名：14px、font-weight 700、色 #1B2A44 - 内容：14px、line-height 1.6。自社の列は font-weight 700 - 評価の記号を使う場合：◎・○・△ を文字の前に置く（色は #1463F0 / #47566E / #8A96AA） - 行の上下 padding 16px、行の間は 1px solid #E2E8F0 ## 表示の決まり - 比べる相手は、特定の会社名や商品名ではなく、「方法」や「一般的なサービス」として書く - 相手を不当に悪く見せない。相手のほうが優れている項目も、正直に載せる - 金額や期間は、根拠のある数字だけを使い、目安である場合は「目安」と明記する ## アクセシビリティ - table 要素を使い、列名は th（scope="col"）、項目名は th（scope="row"）にする - ◎・○・△ には、読み上げ用の文言（「とても適している」など）を付ける - 色だけで優劣を示さない ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。