ECサイト初心者必見！商品ページ作成に役立つHTML入門ガイド

こんにちは！かーぎーです！
先日ECサイトに出店している知人から商品ページをHTMLで凝ったページを作ってみたい。と相談を受けました！
これは出店されているみなさんも同じ悩みを持っている方も少なくないと思いましたので、
今回はHTMLを使って商品ページを作る際の基礎知識、注意点、よく使うタグの使い方、初心者にありがちなミスまでを、わかりやすく紹介していきます！

そもそもHTMLとは？
HTMLを使って商品ページを作るメリット
1. 見やすく・伝わりやすいページが作れる
2. 商品の魅力が伝わりやすくなる
初心者でも安心！よく使うHTMLタグ一覧
HTMLを使う際の注意点
1. 閉じタグを忘れない
2. タグの入れ子構造に注意
3. 不要な装飾は逆効果
よくある失敗と解決策
スマホ表示にも配慮しよう
まとめ：HTMLを覚えれば、商品ページがもっと魅力的に！

そもそもHTMLとは？

HTML（エイチティーエムエル）とは、「HyperText Markup Language」の略で、ウェブページの構造を作るための言語です。

例えば、商品の説明文に「太字」や「改行」、「見出し」などの装飾を加えるとき、HTMLタグを使えばそれが可能になります。

HTMLを使うことで：

文章に装飾ができる（見やすくなる）
レイアウトの自由度が上がる
スマホ・PCでも崩れにくい構成が作れる

というメリットがあります。

HTMLを使って商品ページを作るメリット

1. 見やすく・伝わりやすいページが作れる

例えば、次のような説明文があったとします。

HTMLなし：
このバッグは軽くて丈夫。素材はナイロンで水にも強く、旅行にも通勤にもおすすめです。サイズは縦30cm×横40cm×マチ10cmです。

HTMLあり：
このバッグは軽くて丈夫！
素材はナイロンで水にも強く、旅行にも通勤にもおすすめです。

【サイズ】
・縦：30cm
・横：40cm
・マチ：10cm

このように、HTMLを使うだけで見やすさ・印象が大きく変わります。

2. 商品の魅力が伝わりやすくなる

情報を整理し、箇条書きや見出しを使うことで、買うかどうか迷っているお客様の背中を押すことができます。

初心者でも安心！よく使うHTMLタグ一覧

ここでは、ECの商品ページでよく使うHTMLタグを厳選して紹介します。

内容	タグ	使用例
改行	`<br>`	「素材はナイロンです。`<br>` 水に強くて軽いです。」
太字	`<strong>～</strong>` または `<b>～</b>`	`<strong>軽くて丈夫！</strong>`
下線	`<u>～</u>`	`<u>おすすめポイント</u>`
見出し	`<h2>～</h2>`（数字は1～6）	`<h2>商品の特徴</h2>`
リスト（箇条書き）	`<ul><li>～</li></ul>`	`<ul><li>軽量</li><li>防水</li></ul>`
リンク	`<a href="URL">～</a>`	`<a href="https://example.com">詳細はこちら</a>`
画像	`<img src="画像URL" alt="代替テキスト">`	`<img src="bag.jpg" alt="ナイロンバッグ">`
文字の色	`<span style="color:red;">～</span>`	`<span style="color:red;">在庫わずか！</span>`

HTMLを使う際の注意点

1. 閉じタグを忘れない

HTMLタグは基本的に「開く」→「閉じる」のペアで使います。

例：
✅ 正しい → おすすめ
❌ 間違い → おすすめ

閉じタグが抜けると、その後の文章が全部太字になるなど、レイアウトが崩れることがあります。

2. タグの入れ子構造に注意

HTMLは「タグの中にタグ」を入れることもできますが、順番を守らないと正しく表示されません。

✅ 正しい順番：人気商品

❌ NG例（順序がおかしい）：人気商品

3. 不要な装飾は逆効果

目立たせたい気持ちはわかりますが、赤文字・太字・下線を全部使うと逆に読みづらくなります。
→ 強調は1つ、最大2つまでに抑えるのがプロっぽく見えるコツです。

よくある失敗と解決策

よくある失敗	解決方法
改行されない	`<br>` を入れる
全文が太字になる	`<strong>`タグを閉じていない
画像が表示されない	`<img>`タグのURLが間違っている or サーバーに画像がない
表示が崩れる	タグの順番や閉じタグを確認