◎○△×で比べる比較表

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[比べる対象]

例：当社、A社、B社

[比較の内容]

項目と、対象ごとの評価（◎○△×）・補足の文

[比較の根拠]

例：2025年4月時点、各社の公式サイトの情報による

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「◎○△×で比べる比較表」を実装してください。

## 表示内容
- 比べる対象：[比べる対象]
- 比較の内容：
[比較の内容]
- 比較の根拠：[比較の根拠]

## レイアウト
- 左端に項目の列、その右に対象の列を並べる。対象の列は同じ幅
- 項目の列は左揃え、対象の列は中央揃え
- セルのなかは、上に記号、下に補足の文（ある場合）
- スマホで収まらないときは、項目の列を固定して横スクロールにする

## デザイン
- 表：外枠 1px solid #E2E8F0、角丸 10px
- 見出しの行：背景 #F7F9FC、文字 14px・font-weight 700・色 #5F6D84
- 自社の列の見出し：背景 #1463F0、文字 #FFFFFF
- 自社の列のセル：背景は #1463F0 の9%の淡い色
- 記号：20px、font-weight 700。◎と○は #1463F0、△は #946200、×は #8A96AA
- 補足の文：12px、色 #5F6D84
- 項目の名前：14px、font-weight 700、色 #1B2A44
- セルの padding：14px 12px、下に 1px solid #EDF1F7
- 比較の根拠：12px、色 #5F6D84、表の下に

## 注意点
- 比較の根拠を、省略しない
- 事実にもとづく比較だけを載せる。他社を不当に低く見せる表現にしない
- 自社が劣る項目も、隠さずに載せる

## アクセシビリティ
- 記号には、読み上げ用の文字を添える（◎＝「とても良い」、○＝「良い」、△＝「一部対応」、×＝「非対応」）
- 項目のセルは th（scope="row"）、対象のセルは th（scope="col"）
- 色だけでなく、記号の形で評価が分かるようにする
- 記号の意味の説明を、表の近くに置く

## 出力形式
- [使用技術]のコードを1つ出力