WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

HTML5の新機能を使ってWEBサイトの構造を明確にする

HTML5の情報の構造

現在のブラウザはすべてがHTML5対応しており、2014年にWC3によって勧告されました。つまりはこれらからのコーディングのスタンダードはHTML5ということです。これにより使用できるタグが大幅に増え、Flashに頼り切っていたインタラクティブな表現も可能になりました。

HTML5といえどもWEBデザイナーの基本的な仕事は変わりません。HTMLの構造に関わる部分の要素はそのまま使用可能です。まずはしっかりとした骨組みを作り綺麗なレイアウトを整えることです。多くの現場ではインタラクティブな動作は専門的なプログラムを書けるシステムエンジニアの仕事になります。

1つだけ気をつけたいのは情報の持つ意味によって使うべきタグが増えたということです。今までは何も気にせずに情報の固まりをdivでくくれば良かったのですが、今後は適切なHTML5のタグを使うように推奨されています。

アルバイト採用レベルでは必須ではありませんが、大手企業の中に常駐することもある派遣WEBデザイナーのレベルでは知っておくべき知識です。
まずは正しいHTML5での構造のコーディングを覚えましょう。

現在のブラウザはすべてがHTML5対応しており、2014年にWC3によって勧告されました。つまりはこれらからのコーディングのスタンダードはHTML5ということです。これにより使用できるタグが大幅に増え、Flashに頼り切っていたインタラクティブな表現も可能になりました。

divの代わりに使用できるブロック要素が増えた

ナビやサイドバーなど、今までdivで囲っていたブロック要素が専用のHTML5のタグに置き換えることが出来るようになりました。WEBデザインで多く使われるタグは以下の通りです。

大まかな使い方はこのようになります。このHTML5のタグを使用してWEBサイトの骨組みを作っていきます。

divが少なくなったため見た目にもどのコードがレイアウト上のどこを指すのがが非常にわかりやすくなっています。これがHTML5でのコーディングの基本となります。意味を知っていないと適切に使えないタグもありますので最初の段階で覚えて負いましょう。

divとsectionとarticleの違い

多くのWEBデザイナーも適当に使っている事が多いこの2つのタグ。レイアウトだけみればどちらもブロック要素であるため違いがありませんが、使い所が違いますので注意が必要です。

div

意味を持たない括りです。レイアウトを整えるためだけに要素をくくりCSSのターゲットにする従来の使い方です。

section

見出しを使用したコンテンツのまとまりを指す要素です。見出し+紹介文のような形式のものはsectionタグで囲むことになります。たとえばWEBサイトの用語集で【見出し+コメント】このような組み合わせが一覧で複数続きます。その要素を囲む情報ブロックはsectionということになります。

sectionとセットで使用する見出しはh1が推奨されています。
見出しとセットで使うパーツはsectionと覚えると分かりやすいです。

article

sectionと同じく情報をブロック化する要素ですが、情報が独立したコンテンツとして成り立つものに関してはarticleを使用します。たとえばブログの記事内容は【タイトル+記事内容】で1つの意味を持ち、他の要素がなくても情報として成り立ちます。このような情報をブロック化するときはarticleを使用します。

新聞記事のように多くの情報の中でも、1つの話題+情報として切り抜いてしまっても意味が通じる要素をarticleと考えると分かりやすいです。

article要素の中にヘッダーからフッターまで1つのページとして情報がまとまっています。このようなときはarticleを使用します。

aside

ページの主要部分から切り離してしても扱うことができる情報の固まりです。ブログのサイドバーが典型例です。メインコンテンツの補足情報やバナーを設置して導線を作ったり、広告などを掲載するために使用できます。

nav

ユーザーを適切なページに導くための情報ブロックで使用します。ほとんどのケースではグローバルナビゲーションで使用することになります。情報の階層を表示するパンくずリストでも使用されます。

情報の意味を考えて適切なHTML5のタグでくくれる練習を

自分のWEBサイトやブログで判断に困った場合はdivを使ってしまってもデザインやCSSの勉強としては問題ありません。ただ派遣社員レベルのWEBデザイナーだとHTML5で情報が構造化されたWEBサイトやサービスのコーディングの案件があるため、現場で困らないために、どのような情報のくくりで使い分けるのかを知っておくだけでデザイン現場で困ることはなくなります。

すべてのコーディングにおいて適切なタグを使用するのは難しいですが、HTML5の基本として知っておくべき内容です。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST