ウェブサイトやアプリケーションで新しいコンテンツが追加されたとき、「NEW」の表示マークが付いているのを見かけたことありませんか？
新しいコンテンツを追加したとき、「NEW」マークを表示させることはユーザーに重要な情報を与えるための基本的な手法です。
しかし、単に見た目だけを整えるだけではいけません。
適切なHTMLタグを選ぶことで意味やアクセシビリティを向上させることに繋がります。
本記事では、「NEW」マークの表示をする際に、使用するべきHTMLタグについて解説します。
- HTML5で新しく導入されたタグの紹介
- <article>、<section>、<aside>など、構造的に意味を持つタグの使い方
- 新しいタグがSEOやアクセシビリティに与える影響
- 実際のコード例を通じて、新しいタグを活用する方法
適切なタグの選択基準。
まず、前提としてタグを選択するときは、以下の基準を考慮します。
- 意味: タグが持つ本来の意味と「NEW」が伝えたい情報の性質が一致しているか。
- 視覚効果: デフォルトのブラウザ表示が適切か、またはCSSで調整が可能か。
- アクセシビリティ: スクリーンリーダーなどを使用するユーザーにも意図が伝わるか。
意味もなくタグを使うことはSEO的にもよくありませんので、注意しましょう。
各タグの特徴と活用方法。
ここからは、「NEW」を表示するときに適したHTMLタグと特徴を紹介します。
<strong>
- 意味: 強調すべき重要な情報として「NEW」を表示。
- 視覚効果: デフォルトで太字。
以下、使用例です。
<a href="/new-page">新しいページ <strong>NEW</strong></a><em>
- 意味: 文脈的に強調する必要がある場合に使用。
- 視覚効果: デフォルトで斜体。
以下、使用例です。
<a href="/new-page">新しいページ <em>NEW</em></a><mark>
- 意味: 現在の文脈で注目すべき情報を表示。
- 視覚効果: デフォルトで黄色の背景色。
以下、使用例です。
<a href="/new-page">新しいページ <mark>NEW</mark></a><abbr>
- 意味: 「NEW」が略語や特定の意味を持つ場合に使用。
- 視覚効果: 特にスタイルはなし（CSSでカスタマイズ可能）。
<a href="/new-page">新しいページ <abbr title="New Entry Warning">NEW</abbr></a><span>
- 意味: 特に意味を持たせず、見た目のカスタマイズに特化。
- 視覚効果: デフォルトではスタイルなし（CSS次第）。
以下、使用例です。
<a href="/new-page">新しいページ <span class="new-label">NEW</span></a>ケースごとの推奨タグ。
ずらずらっと書きましたが、なかなか微妙な表現で分かりずらいと思います。
分かりずらいが故に、<span>がよく使われる理由かもしれません。
そこで、以下に簡単ですがケースごとの推奨タグを書いておきます。
ご自身の使用ケースに合わせて、選択してください。
| シチュエーション | 推奨タグ | 理由 |
| 情報を強調したい場合 | <strong> | 「NEW」を重要な情報として伝えられる。 |
| 文脈的な強調が必要な場合 | <em> | 文脈に合わせた強調が可能。 |
| 視覚的に注目を集めたい場合 | <mark> | デフォルトで目立つスタイル（黄色の背景）が適用される。 |
| 略語や特定の意味を補足的に説明したい場合 | <abbr> | 略語や詳細情報をスクリーンリーダーに伝えやすい。 |
| デザイン重視でカスタマイズしたい場合 | <span> | クラスやCSSを自由に適用できる柔軟性がある。 |
以上、簡単ですが使用ケースを書いてみました。
「NEW」を使う状況として1番多いのは、やはりメニューやコンテンツの追加のときに、マークととして表示させるのが多いと思います。
そう考えると、<strong>や<em><abbr>などのタグは使いずらいです。
特に意味を持たない<span>を使っておくのが無難ですが、マークとして表示させるのであれば、<mark>を使うのもよさそうです。
視覚的に注目を集めたい。というシュチュエーションの通り、NEW自体にはそれほど意味はないですが、視覚として「新しいコンテンツ」というのが分かりますね。
アクセシビリティの対応をする場合。
少し話がそれますが、視覚的に「NEW」を目立たせるだけでなく、スクリーンリーダーでもその情報を伝えるための方法をご紹介します。
それは、ARIA属性を活用した方法です。
<a href="/new-page" aria-label="新しいページ、新着情報あり">
新しいページ <span class="new-label" aria-hidden="true">NEW</span>
</a>- aria-label: リンク全体の意味を説明。
- aria-hidden=”true”: 視覚的な装飾としての「NEW」をスクリーンリーダーが読み上げないように設定。
こちらの方法は絶対ではないですが、アクセシビリティを考慮すると「検索エンジンが当該サイトを「有意義なサイト」として認識するため、検索上位に表示されやすくなる」となっているため、実施しておいて損はないでしょう。
まとめ。
「NEW」を表示する際には、情報の重要性や文脈に応じて適切なHTMLタグを選択することが重要です。
特におすすめの選択肢は以下の通りです。
- 重要性の強調 → <strong>
- 注目すべき情報 → <mark>
- 見た目重視のカスタマイズ → <span> + CSS
デザイン重視になりがち、意味が考えるのがめんどう。ということで、<span>を多様しがちですが、
タグを正しく使うことで、ユーザー体験やアクセシビリティを向上させることを意識してみましょう。
<strong>や<mark>のデフォルトのスタイルが邪魔なら、あらかじめリセットCSSでスタイルを打ち消してしまうのも方法です。
そうすることで、<span>のように、タイルが当たってない状態で使用することができるので、使い勝手も向上します。