コンテンツの更新は「見た目」ではなく「構造」で考える

コンテンツを「見た目」で考える人は、たとえば以下のように、コンテンツを作ろうとします。

• ここは「小見出し」だから、文字を太く （ボールドに） しよう。
• この「中見出し」、もうちょっと目立たないから、頭に「■」を書こう。
• 文中のこの語句は目立たせたいから赤く （目立つ色に） しよう。
• この部分 （セクション） は重要で、埋もれさせたくないから、前後に改行をたくさん入れよう。
• このリストは箇条書きっぽくまとめよう。各項目の頭を「・」ではなく「●」にするほうが、見やすいかな。

eメールやワープロで文書 （ドキュメント） を作っていると、ついつい、このように考えてしまいがちなので、しかたないことではあるのですが、ウェブサイトのコンテンツを更新する際には、「見た目」のことはいったん考えないようにして、「構造」で考えることをおすすめしたいと思います。

コンテンツを「構造」で考える、とは、たとえば、以下のようなことを言います。

• これは「中見出し」である （見出しレベルは「2」、つまり <h2> である）。これ以外にも、同ページ内には「xx」と「xx」という中見出しがある （同じレベルの見出しとして、つまり <h2> として存在する）。
• 見出しレベル「2」の下に、これこれこういう「小見出し」（見出しレベル「3」つまり <h3>） が存在する。
• 文中のこの語句は「強調したい箇所」である。
• この部分 （セクション） はひとつの「段落」という塊である。
• この部分 （セクション） は他のコンテンツからの「引用」である。
• この部分 （セクション） は「箇条書き」である。含まれる項目はこれとこれとこれである。

いかがでしょうか。コンテンツの中味を分解して検討するにあたって、「外見」ではなく、「意味」や「はたらき」で捉えているということに、お気づきでしょうか？

このように捉えることによって、「見た目」に左右されないコンテンツ作りが可能になります。少し専門的な話になりますが、上記で挙げた各構造 （見出し、強調箇所、段落、引用、箇条書き、など） は、いずれも「HTML」というフォーマットで情報構造を記述する （マークアップする） ことが可能です。つまり、各構造を、ブラウザをはじめとするウェブ技術によって適切に理解/解釈できるように、作ることができます （そして、「HTML」とは別に「スタイルシート」と呼ばれるファイルがあるので、それを用いて「見た目」を規定します）。

同じコンテンツをパソコンで閲覧する場合とスマートフォンで閲覧する場合とでは、異なる「見た目」になっている （それによって、小さなスマートフォン画面でも読みやすく/利用しやすくなっている）...というウェブサイトをご覧になったことは、あると思います。つまり、「構造」と「見た目」は完全に不可分というわけではなく、ユーザーの環境に応じて「見た目」を柔軟に変更することが、ウェブでは可能なのです。

今後、ウェブを利用する端末がますます多様化することを考えると （大小さまざまなパソコン、スマートフォン、タブレット、などなど...）、このように、ユーザーが閲覧するデバイスに応じて「見た目」を （自動的に） 切り替えることは、あたり前になると思います。そして、閲覧デバイスの選択権は100％ユーザーの側にあり、サイトを作る側/運営する側が制限をかけることはできません。多種多様な閲覧デバイスに対応できるように、コンテンツは「構造」で考えるクセを習慣化することが、大事だと思います。