記事の詳細
【CSS】クラスタグの付け方ってどうやればいいの?HTML5のカテゴリ構造とコンテンツをまとめてみました!
「キーワードとかそういうののSEO対策ってもうほとんどありきたりになってきたよね」
「そもそういうのってどこまで通用するんですの?」
「ウェブサイトってコンテンツの良さで決まるから……いや、でもそれ前提としても、それ以外のところでやっぱりなんかあるんじゃないの?」
「Blackboooooox!!!」
という会話が頻繁に飛び交う昼休み、とりあえず「よいコンテンツ」というのはどういったコンテンツなのか?というのを考えたときに、ウェブデザイナー、あるいはコーダーができることというのはごくごく限られております。
いわゆるコーダーとかフロントエンジニア的な存在の役割というのは、本で例えると装丁のところにあり、文字組や表紙の作成、中表紙や見出しの作成などなど、実はエディトリアルに近しい部分があるなー、とグラフィックあがりのデザイナーは感じているのです。
コーディングは看板づくりのようなもの。ユーザーが見やすいようにきちんとマークアップしていくことが大切なのです。
ま、とりあえず作ってみましょ、ということで作ってみました。
今回のブログの見出しはコチラです!
ClassTagシート
1 file(s) 1.87 MB編集可能なaiデータ(IllustratorCC)、pdfデータが入っています。再配布は禁止であとはご自由にどうぞー。
セクショニングをきちんと明確にすると、ユーザーエクスペリエンスはあがる?
セクショニングというのは「文章構造を明確にする」考え方のことで、文書的に正しいアウトラインを得ることができるとされています。
早い話が「読みやすくしようや」ってことです。これは「見る人」もそうですが、サイトをたまにクロールしていく「コンピュータ」に対してもそうなのです。この考え方をセマンティックWebと言います。
セクショニングを正しくすることは、検索エンジンにクロールされるときに正しく評価されやすい、ということ。近年SEOは、小手先の技術で背伸びするようなものから、コンテンツの内容が利用者の目的に本当に合っていることを伝える方向へとシフトしていっています。
簡単に言うと、表紙にドでかく「これは役に立つ本」と書いていても、中身に目次も段落もいない役に立たない本なのに売れる、という時代から、「あなたのための本」としっとりとした明朝体で書かれていた上、きちんと目次があって、中表紙があって、カーニングトラッキングされて文字組も美しい書籍がニーズ、という時代へ変化していっているわけですね。
WEBサイトにおける文章構造の美しさは、そのまま人の眼にも美しいってことなんですね。
セクショニングができているかどうかの確認ができるウェブサイト
https://gsnedders.html5.org/outliner/ | HTML 5 Outliner
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo | Googlechrome拡張機能
クラスタグの基本的な付け方
セクショニングと同等にクラスタグもきちんと整理されているサイトは、コンテンツの修正や改善が容易になるので優秀と言えるでしょう。SEO的にはあんまり……? かもしれませんが、何がどこに書いてあるのかを一目瞭然にしておくことにこしたことはないのです。
クラスタグのルールはWEB制作会社ごとにルールがあるのが基本のようです。それでもなんとなく、その専門の人が見れば「ああなるほどね」となるようなクラス付けを心がけていきたいものですね。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。