グラムあたりの価格（値段）比較ツール　ブラウザで簡単入力

ツールの概要

グラムあたりの価格比較ツールは複数の商品の単価を自動計算し、最もお得な商品を見つけるための便利なツールです。

スーパーやオンラインショッピングで、異なる容量の商品を比較する際に役立ちます。

基本的な使い方

商品情報の入力

ツールを開くと最初から2つの商品カードが表示されます。それぞれのカードには以下の入力欄があります

• 価格（円）：商品の販売価格を入力してください（例：298円）
• 内容量（グラム）：商品の重量を入力してください（例：100グラム）

数値を入力するとリアルタイムで「1グラムあたり」の単価が自動的に計算されて表示されます。

商品の追加と削除

商品を追加する場合

画面下部にある「+ 商品を追加」ボタンをクリックすると、新しい商品カードが追加されます。必要なだけ商品を追加して比較できます。

商品を削除する場合

各商品カードの右上にある「削除」ボタンをクリックすると、その商品を削除できます。ただし、最低1つの商品は残る仕様になっています。

最安値の表示機能

2つ以上の商品に価格と内容量を入力すると、最もお得な商品（グラムあたりの単価が最も安い商品）が自動的にハイライト表示されます。

ハイライトの特徴

最安値の商品には以下の豪華な演出が施されます

• ゴールドのグラデーション背景：高級感のある金色の背景に変化します
• キラキラエフェクト：光が流れるアニメーションと星マークの回転演出
• 価格表示の強調：グラムあたりの価格が濃いゴールドカラーで大きく表示されます
• 王冠マーク付きバッジ：「👑最安値！」というバッジが表示され、上下に揺れます

この演出により、一目でどの商品が最もお得かがわかります。

活用シーン

このツールは以下のような場面で便利です

• スーパーマーケットで複数サイズの商品を比較するとき
• オンラインショッピングで容量違いの商品を検討するとき
• まとめ買いと通常サイズのコストパフォーマンスを確認するとき
• ブログやウェブサイトで商品比較記事を作成するとき

表示について

パソコンでの表示

商品カードは2列で並んで表示されるため、複数の商品を同時に見比べやすくなっています。

スマートフォンでの表示

画面サイズが小さい場合は自動的に1列表示に切り替わり、スクロールして各商品を確認できます。

注意事項

• 価格と内容量の両方を入力しないと計算結果は「¥0.00」と表示されます
• 最安値のハイライトは有効な入力がある商品が2つ以上の場合のみ表示されます
• 小数点第2位まで正確に計算されますので、わずかな価格差も比較できます

このツールを使って賢くお得な買い物を楽しんでください。