セマンティックなマークアップでサンタクロースに手紙を出す

この記事はミツエーリンクスアドベントカレンダー2019の6日目の記事です。

12月に入り、街中はすっかりクリスマスムードですね。
ケーキやプレゼントを心待ちに、クリスマスを楽しんでいた幼少期が思い出されます。

サンタクロースには、サンタクロース中央郵便局を通じて手紙を出せることをご存じでしょうか。
1年に1度のクリスマス。今一度童心に返り、手紙をしたためてみれば、大人になったの私の元にもプレゼントが届くかもしれません。

それでは、早速手紙を書いていきましょう。

「書くだけ」では意味がない

ただ書きたいことを書きたいままに記述して、サンタクロースへの手紙が完成しました。
お世辞にも読みやすいものではありません。
フィンランドの寒空の下、トナカイの鼻の灯りだけで手紙を読む彼が、果たしてこれを理解することはできるでしょうか。

まだ諦めてはいけません。 どんなに読みにくく、分かりづらい手紙でも、UI開発者たる私がWebの力をもちいて発信すれば、きっと思いは伝わるはずです。

...
<main>
<h1>サンタさんへ</h1>

<p>ことしもいい子にしてました<b>！</b><br><b>クリスマスにもらったお人形</b>、とてもかわいくておきにいりです。<br>いもうとがほしいと言っていたので、プレゼントしてあげてください。わたしは<b><strong>ゲームと</strong>おかしが</b>ほしいです<b>！！！</b><br><br>サンタさんは牛にゅうとクッキーがすきだとママが言っていたのですがほんとうですか？クリスマスの前の日に、ママといっしょにつくるので<b>テーブル</b>においておきますね！わたしは<b>クッキー</b>があまり好きではないので、おかしは<b>ちょこれーと</b>がいいです。しんはつ売の<b>MLCチョコ</b>にはおまけのシールがつくので、それがいいです。<br><em>クリスマスたのしみにしてますね！</em></p>
<img src="chocolate.png" alt="">
<img src="santa.png" alt="">
</main>
...

なんでもHTMLに置き換えればいいというわけではないですね。

1つの<p>タグの中にぎっしりと文章が詰め込まれ、読み取るまでに時間がかかります。
<br>タグはデザインを再現するためにもちいるべきではありません。
HTML5において<b>タグは重要性を伝えることのない強調を指しますが、色付けしたい部分全てに使用するのはあまりにも煩雑です。

少しでも正しく手紙を理解してもらうために、UI開発者である私からできる本当のアプローチとは何でしょう。

そう、セマンティックに手紙を書くことです。

セマンティックとは一般的に、物事に意味合いを持たせることを指します。
Webの世界では、創始者であるティム・バーナーズ＝リーが提言したセマンティック・ウェブから始まりました。
HTML5ではタグのそれぞれが意味を持ち、文脈に応じて適切なタグをもちいて正しくマークアップすることが求められます。

例えば、先ほどマークアップした手紙を、スクリーンリーダーで読むとします。

<b>クリスマスにもらったお人形</b>、とてもかわいくてお気に入りです。<br>いもうとがほしいと言っていたので、プレゼントしてあげてください。わたしは<b><strong>ゲームと</strong>おかしが</b>ほしいです<b>！！！

今のマークアップでは

• お人形は私が昨年もらったプレゼント
• お人形を今年欲しがっているのは、私ではなく妹
• 私が今年プレゼントとして欲しいものは、ゲームとお菓子

といった情報が正しく伝わりません。
文脈を踏まえた段落分けや、正しいタグの活用ができていないからです。

ブラウザ、検索エンジン、スクリーンリーダー、そしてサンタクロースも、等しく情報を理解するために、手紙をよりセマンティックに書き直しましょう。

セマンティックな構成を目指す

伝えたいことを今一度見直し整えることで、同じ内容でもよりすっきりとした構成に生まれ変わりました。
ポイントは以下の3点です。

1. 見出しごとに文章がまとまった

同じ文中に混在していた「プレゼントとして欲しいもの」「サンタクロースにプレゼントしたいもの」が見出しごとにまとまりました。
手紙を再びHTML5でマークアップし、スクリーンリーダーに読ませた場合、見出しごとにブロックスキップを行うことができるようになります。
これでサンタクロースは「プレゼントとして欲しいもの」と「サンタクロースにプレゼントしたいもの」をそれぞれ確認することが可能です。

2. 挿絵が文章の内容に沿った位置に移動した

煩雑に置かれていた挿絵を、関係する文章のすぐ近くに並べました。
必要に応じてキャプションを追加すれば、初めて見る固有名詞でもすんなり理解することができますね。

3. 文字の色味がまとまって、重要性に優先度が付いた

カラフルな文字色は子供らしくてよいですが、本当に伝えたいものを正しく伝えるためには不向きです。
色は1色に統一して、部分的に太字を使用することで、強調したい部分を分かりやすく表現しました。

マークアップに置き換える際、「ゲームとおかし」は必ず伝えたい重要部分であるため、<strong>タグをもちいます。
細字部分はHTML要素それぞれのセマンティクスを考えて、<b>タグや<em>タグを使い分けましょう。
プレゼントとして欲しいものである「チョコレート」や場所を指す「テーブル」は、サンタクロースの注意を惹くというより強調したい部分なので、<b>タグではなく<em>タグが妥当です。
「ママ」ではなく「テーブル」を<em>タグで囲うことで、誰と作ったかではなく、どこに置いたかを伝える文になります。
「クリスマスたのしみにしてますね！」は手紙の内容に直接関係がなく、取り除いても手紙が成り立つため、<b>タグを使うのがよさそうですね。

手紙が完成

...
<main>
<h1>サンタさんへ</h1>

<section>
<h2>クリスマスのプレゼント</h2>
<p>ことしもいい子にしてました！</p>
<p>わたしは<strong>ゲームとおかし</strong>がほしいです！！！<br>わたしはクッキーがあまり好きではないのでおかしは<em>ちょこれーと</em>がいいです！しんはつ売の<em>MLCチョコ</em>にはおまけのシールがつくので、それがいいです。</p>
<p><em>クリスマスにもらったお人形</em>、とてもかわいくておきにいりです。いもうとがほしいと言っていたので、プレゼントしてあげてください。</p>
<figure>
<img src="chocolate.png" alt="">
<figcaption>MLCチョコとおまけのステッカー</figcaption>
</figure>
</section>

<section>
<h2>サンタさんへのプレゼント</h2>
<p>サンタさんは牛にゅうとクッキーがすきだとママが言っていたのですが、ほんとうですか？<br>クリスマスの前の日に、ママといっしょにつくるので<em>テーブル</em>においておきますね。</p>
<p><b>クリスマスたのしみにしてますね！！！</b></p>
<img src="santa.png" alt="">
</section>
</main>
...

......すっかりかわいげがなくなってしまいました。
しかし、これなら多忙なサンタクロースでも、手紙を理解しプレゼントを運ぶことができるでしょう。

マークアップにおけるセマンティックというと、意味を持つタグを意味通りに使用できているかが注目されがちです。
しかしそれ以前に、Webサイトの目的を理解し、その目的に合った構成で情報を提供できているかということも考えなくてはいけませんね。

それでは皆さん、よいクリスマスをお過ごしください。