スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2017年1月4日

Webデザイナーがこだわるべき情報設計とは

information-design-webdesigner-should-consider

Webデザインを制作するとき、
みなさんはどんなことに気をつけているでしょうか?
もちろんデザイン性や
クライアントの要望に沿うことも
大事なことと言えますが、
それ以前に
まずはWebデザイナーなら知っておいて欲しい
過程が、「情報設計」です。
「情報設計」と聞くと、
デザインとはかけ離れて聞こえるかもしれませんが、
情報設計にこだわることで
ユーザーにとって使いやすく、
わかりやすいサイトができあがってきます。
この情報設計の過程は、
Webサイト制作をしていく中で
ワイヤーフレームやサイトマップの作成以前に
取りかかるべき工程です。
そしてしっかりと情報設計を行った上で
ページ構成・サイト構成といった
ワイヤーフレームやサイトマップを
作成していくのが良い手順だといえます。
今回は
その情報設計について詳しく紹介していきたいと思います。

情報設計とは何か?

Webデザインを制作したとき、
「なぜこういうデザインにしたのか?」
と聞かれて、あなたは即答できるでしょうか?
情報設計とは、簡単に言ってしまえば
利用者にとってわかりやすく、使い勝手がよい
設計をしていくことを指します。
情報設計をしていくことで、
デザインができあがったとき、
ボタンひとつにしても、
「なぜここにこのデザインで
ボタンを置いたのか?」
という質問にも答えられるようになるでしょう。
制作する上で必要な情報をまとめ、
ユーザにとってわかりやすく、
使い勝手がいいように設計をしていくこと、
更にはユーザーをゴールまで
きちんと誘導できるような設計を
していくことが、
情報設計といえます。

情報設計の流れ

実際に情報設計する際に、
まずはクライアントのヒアリングで
詳しく色々な情報を聞き出していきましょう。
その中でも最低限こちらは
考慮していくべきというポイントを
挙げていきたいと思います。

なぜWebサイトを作るorリニューアルするのか?

Webサイトを制作するにあたり、
まずはなぜサイトを作りたい、
もしくはリニューアルをしたいと思い、依頼したのか?
その点は必ずヒアリングしていただきたい項目です。
なぜなら、
その「きっかけ」が
今回制作するサイトの課題であり、
改善するポイントであるからです。
例えば、
・訪問数が少ない
・必要な情報が載せきれていないためユーザーが不満に思っている
・ECサイトの売り上げを伸ばしたい
・企業の認知度をあげたい
などなど、
Webサイトを制作する上で期待している効果が
どういったものなのか?
何を問題と感じているのか?
そういった点を明確にしていきましょう。
企業サイトの場合などには、
とりあえず案内できるホームページが欲しい、という
クライアントも多くいるかと思います。
そういった方にも、
せっかく作るのであれば、
ホームページを通してどういうことを
伝えていきたいか?
を必ず聞くべきだと思います。
例えば、採用情報をサイトにしっかりと載せていき
サイトからの応募も受け付けたいなども
出てくるかもしません。
特にサイトを作る目的がなく、
案内できるものでいいのであれば、
最近はテンプレートなどもあり、
専門知識がなくてもWebサイトが作れてしまうので、
自社で簡単に作ってしまった方が
コストもかからず良いとは思いませんか?
それでも費用をかけて制作会社にお願いをする、
ということは少なからず制作をすることで何かを
求めているということは理解しなければいけません。
それが何なのか、
それに応えるためにはどうしていけばいいのか
クライアントと一緒に考えていくことが
大事だと思います。

原因を分析しよう

こちらはサイトのリニューアルの際に
特に重要となってきます。
現行サイトで、問題と感じているものが
なぜ発生しているのか?
どこで発生しているのか?
問題点の分析をしていきましょう。
この分析においては、
制作会社によっては他部署がしてくれたり、
また何かツールを使ったりと
様々な方法があります。

戦略をたてよう

現状の問題点やその原因の分析、
把握ができたところで
どうしていくべきなのか戦略をたてていきましょう。
その中で、競合他社との比較、
差別化、
または対象となるユーザー(ペルソナ)の設定など
を考えていく必要があります。
そして、ゴールの設定、
そこまでの誘導など様々なことを
この段階で整理していきます。
ゴールに向けての施策を練っていき、
しっかりとした目的・目標をもった
Webサイトを制作していきましょう。

Webサイトの設計をしよう

施策とゴール、
今回制作するWebサイトの目的・目標を
明確にしたところで、
ようやくWebサイトの中身を考えていきます。
設計前の情報整理がないと、
設計をする際にそもそもの目的がブレてしまったり、
クライアントの意向にばかり沿った設計に
なってきてしまいがちなので、
まずはここまでの過程(情報整理)を
必ずしっかりと行い、
クライアントにもそれを共有していきましょう。

必要なコンテンツを洗い出そう

まずは現行サイトを参考にコンテンツを洗い出し、
その中でも必要なコンテンツ、
必要でないコンテンツ、
または載せていきたいコンテンツなどを
整理していきましょう。
ゴールを明確にしていることで、
そのコンテンツがゴールに向けて
必要なのかどうか検討しやすくなると思います。
また、この時に重要なのが、
必ずしも全ての情報を
Webサイトに載せるべきではない、
ということです。
コンテンツが多くなれば多くなるほど、
ユーザーに何を伝えたいのか?が
わかりにくくなり、
結局のところ何のためのWebサイトなのかが
わからなくなってしまうことが
多々あります。
ユーザーにとって本当に必要なのかどうか
Webサイトに載せるべき情報なのかどうかを
この工程でじっくりと考えていきましょう。

コンテンツを見せる流れを考えよう

コンテンツを見せていく中でも、
その流れによって
伝わりやすさが格段に違ってきます。
どんな流れで見せていけば
ユーザーがわかりやすく、
納得してくれるのかを考えましょう。

サイト構成・ページ構成を作成しよう

必要なコンテンツと流れ(重要なコンテンツ)を整理したところで、
ようやくサイト構成とページ構成を作成していきます。
この工程がいわゆる
サイトマップ・ワイヤーフレームの作成となります。

ここまでの一連の流れが
「情報設計」となります。
これ、全部Webデザイナーがやる仕事なの!?と
思われる方も多いかもしれません。
制作会社によって異なってくるとは思いますが、
制作側との認識の違いを
減らしていくためにも、
制作側もこの流れを必ず知っていなくてはいけません。
その中で、
ヒアリング・情報整理までは他部署で行い
その情報を制作側に落とし込むという
制作会社も多いのではないでしょうか?
情報設計に全て携われないとしても
最低でも情報の落とし込みをして、
実際の制作担当が
しっかりとそのWebサイトを制作する
目的やゴールがわかっていないと
結局中身がブレたサイトができあがってしまいます。

Webデザイナーとして、
デザイン・構築をすることが全てではありません。
指示通りにデザインをおこして
構築するだけなら知識さえあれば
誰でもできることです。
言ってしまえば、
ここまでは学生の範囲です。
お仕事としてこなしていくのであれば、
それ以上が求められるのは
当然のことですよね。
自分が満足するだけのデザインでは
もちろんお仕事とはいえませんし、
もちろんクライアントのことだけを
考えたデザインでもいけません。
Webデザイナーとして大事なのは
その先にユーザーがいることを
踏まえた上で、
そのWebサイトの目的を達成できるような
デザイン・設計をしていくことです。
その一歩として、
まずは情報設計を自分の中でしていってみるのも
良い方法なのではないかと思います。
ぜひ実践してみてください。

おすすめ情報

2017年1月3日

そのデザイン、マークアップ意識してる?文書構造を理解せずしてWebデザインを作るな!

そのデザイン、マークアップ意識してる?文書構造を理解せずしてWebデザインを作るな!

あなたはどんなWebデザイナー?

もしあなたが「Webデザイナー」という職業ならば、
自分の作ったデザインを、きちんとコーディングできますか?

「Webデザイナー」がどこまで手広くやるかは
昔からよく議論されている内容ではありますが、
「Webデザイナー」「コーダー」が完全分業という考えは、
今はもうだいぶ古くなってきているのではないでしょうか。
(決して完全分業を否定しているわけではありません)

どちらかに特化した人材は作ることはできますが、
どちらにしても、双方の手法を知らないと、
結局両者への負担が大きくなったり、
意味のないコードが増えたり、
デザイン通りのサイトにならなかったり、
SEOを無視したソースの汚いサイトが
出来上がってしまったりなど
マイナス面が大きくなってしまいます。

Webデザイナーを含む、Webクリエイターの相関図

Webクリエイター相関図

上図のとおり「Webクリエイター」という括りの中には
複数の職種が存在しています。

デザインしかできないWebデザイナーか、
コードしか書けないコーダーから始まり、その次のステップに
多少のコードなら書けるWebデザイナーと、
多少のデザイン修正ならできるコーダーと、
html・cssをより深く理解したマークアップエンジニア、
よりシステムが絡むフロントエンドエンジニアが位置します。

マークアップエンジニア

ここで出てきた「マークアップエンジニア」とは、
HTML5でのコーディング、
CSS3でのデザインあてはもちろんのこと、
コンテンツの内容をきちんと理解しながら
デザインや文章を構造化し、
検索エンジンにもフレンドリーなマークアップをするなど、
ディレクターやデザイナーの意図を汲み取り
かつ改善の提案ができるレベルでのコーディングが
できる人材のことを指します。

フロントエンドエンジニア

また、「フロントエンドエンジニア」とは
Web標準やアクセシビリティに配慮した
質の高いコーディングを行い、
長期的に見た保守性にも優れた
設計をできることが前提となります。
その他、UI(ユーザーインターフェース)にも
意識した実装に気を配りつつ、
画像素材の用意やデザイン設計といった
Webサイトやページデザインなどの
Webデザイナーとしての役割も
求められることがあります。
企業によってはこの職種がシステム部分を理解し
触るケースも多く、簡単に言えば、
プログラマ寄りのWebクリエイターと言えますね。

かくゆう私は「デザイナー」兼「マークアップエンジニア」
という立場になるかと思うのですが、
最近は実作業に集中するよりは、
ディレクション業務の方が主なため、
「コードが書けるデザイナー」
「簡単なデザイン修正ができるコーダー」を
育て上げることに現在は熱意を注いでいます。
(※熱意はあってもその分時間を
費やせているわけではありませんが、、)

「デザイナー」兼「コーダー」兼
できれば「マークアップエンジニア」まで
になれれば最高ですが、現在弊社には
「デザイナーのひよっこ(or卵)」
「コーダーのひよっこ(or卵)」
レベルのスタッフが大半なので、まずは欲張らずに、
「サイト(ページ)構成を理解した上で、
きれいなデザインが作れて、
htmlとcssを使ってコーディングできる」
レベルのお話をしましょう。

こんな人はWebデザイナーと名乗らないで欲しい

私が一番Webデザイナーとして危険だと思うのは、
デザインしかできなくて無理難題なデザインや、
ページ構成を無視したデザインが上がってきて、
ひとりよがりのデザインだけたたきつけて、
コーダーやマークアップエンジニアを
泣かせるデザイナーです。

決して否定しているわけではないですが、
最近は「Webデザイナーです」と名乗ると
最低限のコードは書けると思われることがほとんどなので、
そういった方は自分の首を絞めないためにも、
「コードはかけませんがWebデザイナーです」
とでも言っておきましょう。

さて、デザインしかできないWebデザイナーについて、
何がダメなのかきちんと理由を紐解いてみましょう。

デザインの理由や構成を説明できない

こういったタイプの人は、
「どうしてそのデザインにしたの?」
「ここ、どう組むかわかってる?」
という質問を投げかけた時に、悩んで黙り込んだり、
曖昧な返事しかできないことが非常に多いです。

たとえ業務上、完全分業であっても、
きちんとコードを思い描いてデザインして欲しいですね。
html構成を初心者であれば手書きで、
できるようになってきたら頭の中でもいいので
最初に決めてから、デザインして下さい。

誰のためのデザイン・サイトなのか理解できていない

これはどんなデザインを作る時もですが、
そのデザインは、必ず誰かのために
作らなくてはいけないものです。

ペルソナを設定する、とよく言いますが、
まさしくこれのことですね。
設定したペルソナになりきって、
「どうすれば心に響くか」を考えたり、
詳細なペルソナ設定がまだ難しければ、
せめて年齢層・性別・地域くらいは焦点を絞って、
「どうすればこのターゲット層に対してアプローチできるか」
を考えながらデザインすることが重要です。

ここで勘違いしてはいけないのが、
「クライアントのため」のデザインでは
全くないということです。

ここを履き違えると、膨大なクライアントからの修正依頼を
全て鵜呑みにして、エンドユーザーには全く響かない
サイトデザインになってしまったりします。

さて、ここで質問です。

すこしコードもわかるようになってきたWebデザイナーは
どういった分類となるのでしょう?

Webデザイナーは2種類に分けられる

Webデザイナーには、Webデザインと
初歩的なコーディングまでしか出来ないデザイナーと、
マークアップエンジニアの領域も手広くこなすデザイナーの
2種類に分けられます。

デザインしかできないWebデザイナーとは
言わばコーダーから一歩踏み込んだばかりの
人の事と言えるでしょう。

もしくは、デザイン学校卒業の学生や、
印刷会社などでグラフィックデザインを学び
「印刷は下火だしもういいや、Webしてみたい!」
と転職を決意し、この世界に足を踏み入れた
タイプの人に該当します。

そもそも原点回帰するなら、Webデザインとは、
グラフィックアートやイラストとは違い、
最終的にはhtml化をしないといけない媒体です。

つまりいくらデザイン単体で優れていても、
html化するにあたって、構造が複雑すぎたり、
いくつものjsや無駄なcssをばりばりに使って
ユーザービリティが下がってしまっては
エンドユーザーにストレスを与えるだけの、
無駄なデザインとなってしまうのです。

だからこそ、マークアップを
最初から意識しているWebデザイナーと
そうでないWebデザイナーで分けられるのです。

当然の話ではありますが、
前者のデザインしか出来ないWebデザイナーでも
最低限度のHTMLの知識はあるので、
Webサイトデザインとしてはあらかた形にはなりますが、
根底からマークアップを理解し制作した
Webデザイナーのサイトデザインの場合は、
デザイン要素とマークアップ要素が
完璧に合致し素晴らしいWebサイトになるのです。

ですので、採用の際など特に、
一概にWebデザイナーと言っても
優れているか否かを見極める際は
「マークアップエンジニアの範疇もこなせるか?」
という基準に基づき、見定めることも重要です。

まとめ

2017年を迎えたWebデザイナーの皆様、
あなたがどこを目指したいか、目指すべきか
決意を新たにしていただけたでしょうか。

今年は去年よりも一歩踏み込み
コーディングを前提とし、html構造をより深く理解し、
さらなるステップとしてSEOやアクセシビリティ、
保守性やエンドユーザーへの訴求にも配慮した
Webデザインをできるよう、邁進してください。

おすすめ情報

2016年12月30日

ビジュアルウェイトとは?

what-is-visual-weight

みなさんビジュアルウェイトという言葉は知っていますか?
重さは、見た目だけでなく、色にも重さがあります。
一目でみて重たそう、軽そうと感じるのは何故でしょうか。
今回はそんなビジュアルウェイトについて
書いていきたいと思います。

見た目の重さ?

生活の中で、重たそう、軽そうと印象に繋がるものもは
見た目の大きさです。
当たり前ですが、大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。

それではグラフィックの中ではどうでしょうか?
グラフィックの中で占領する
大きさが大きければ大きいほど重く感じます。
逆に小さければ小さいほど軽く感じます。
ところがそこに色彩が加われば、
見た目の大きさだけでなく、
色によって重さが変わります。
つまり人は見た目の大きさではなく、
色によって重さを感じ取っていることが分かります。

色の重さの関係性とは?

先ほどの話であったように、
人は見た目の大きさだけでなく
色によって重さを感じ取っています。
つまり、同じ大きさのもがあったとしても
色によっては重さが違うということです。
例をだしていきます。

1大きさ

形が大きいものと小さいものがあったら、
どちらが重たそうと感じるでしょうか?
よほどのことがない限り、
大きい方が重たいと感じます。
よくある話ですね。

2色の重さ

例えば同じ大きさのもがあったとします。
色は白と黒。どちらが重く感じるでしょうか?
大体の人が黒と答えるはずです。
コントラストの強いもの、
強烈な色のものが一番重く感じるということです。
明度が高いほど軽く感じ、低いほど重く感じます。
では、黒背景の場合はどうなるでしょうか?
この場合色が強烈なのは白ですね。
つまり、黒背景の場合は白が強く出て、
重く感じるということです。
また、赤は黒と同じくらいに重く感じます。

3サイズが違うもの

今まではサイズが同じもので比べてきました。
それでは、サイズが違い、
色も違うものはどうなるでしょうか?
例えば大きいものが白で、
小さいものが黒の箱が置いてあるとします。
どちらが重く感じますか?
大きい箱の方が重く感じそうですが、
この場合は小さく黒い箱の方が重く感じます。
先ほど書いた通り、
人は色によって重さを感じ取っているので、
色が強烈な黒の方が重く感じます。
サイズが変わっても、
小さい黒の方に重さの比重がかかってしまいます。

4テクスチャが加わると

同じ大きさでも、
テクスチャが加わるだけで見た目の重さが変わってきます。
テクスチャがあるのとないのでは、
ある方が重く感じます。

5縁が加わると

今度は縁を加えてみます。
同じ色のものでも、
黒い縁があるものとないものではどう感じますか?
黒い縁がある物の方が重く感じますよね。
黒は近くの色まで重く感じさせてしまう性質があるからです。

デザインに活かそう

早速デザインに活かしてみましょう。
ここは重く感じるなと思ったら、
サイズだけでなく色を変えてみたり、
強く見せたい所には縁をつけてみたりと
様々な所に活かすことが可能です。
ですが、途中で色や縁を加えた場合は
一度全体を見直すことが必要です。
また、黒は特に近くの色を重く感じさせる力があるので、
黒の近くに配置するときは注意が必要です。

その他のビジュアルウェイト

私たちの生活の中にも
ビジュアルウェイトは活かされています。
例えば、引越屋や宅配便のダンボール箱です。
ダンボール箱といえば薄い茶色を
思い浮かべる人は多いと思います。
実際、引越屋や宅配便のダンボール箱はどうでしょうか?
白色の物が多いですよね。
これもビジュアルウェイトが関係しています。
白は茶色に比べ明度が高いので、軽く感じます。
重たい荷物も白いダンボール箱に入れるだけで、
軽いと錯覚します。

他にも囲碁の碁石も黒の方が少し大きく作られています。
この場合、白は膨張色なので黒に比べて
大きく感じ取られてしまうためです。
ファッションで例えるなら、
白は膨張色のためあまり選ばれないと
いわれていることと同じです。

色の大きさや重さは
私たちの生活の中でも活かされることが分かりますね。

まとめ

いかがでしたでしょうか?
色にまつわる不思議な話はたくさんありますね。
そしてデザインだけでなく、
私たちの生活にも活かされていることが分かります。
よく見るダンボールも
そんな意味があったなんてと驚かされました。
私自身も色の重さは明度くらいだろうと思っていたので、
この記事を書いていくうちに、
縁やテクスチャを加えるだけで、
こんなにも見た目の重さが変わることを知ることができました。
これからの自分自身のデザインに活かしていきたいと思います。
もちろんデザインやダンボールだけでなく、
ファッションにも活かせるはずです。
色彩力を磨いて、
自分のファッションにも活かしてみてはいかがでしょうか?
色彩やその意味を調べて活かすだけで、
見えているものも変わってくるはずです。
この記事を読んで、
少しでも色彩について興味を持っていただけたら幸いです。

おすすめ情報

2016年12月20日

デザインと心理学の関係

relationship-between-design-and-psychology皆さん、デザインと心理学は違うものだと分けていませんか?

実はそうじゃないんです。
ここでは、心理学に則った効果的なwebデザインを
紹介していきます。

1.色の持つイメージ

WEBサイトを初めて見た時、
直感的に利用者の脳内に働きかけるものが色です。
それぞれの色には人間が直感的に感じるイメージが存在します。

たとえば、WEBサイトを見に行ったとき、
赤いボタンと緑のボタンが並んでいたとしましょう。
どちらか一つ押さないといけないと言われたら
あなたはどちらを押しますか?

おそらくは緑のボタンではないでしょうか?
信号機のように緑には「安全」や「健全」などの
イメージがあります。逆に赤には「危険」の
イメージがあります。

何のボタンかわからない状況でわざわざ危険と感じる
ボタンを押す人はそういないと思います。
ですが、ボタンの意味がわかった状況だと結果は一転します。

例えば買い物をするためにWEBサイトを訪れた場合には、
赤い購入ボタンの方が売上が上がるという結果が出ています。

実は赤色には危険というイメージの他に、
活動的や行動力などのイメージもあるのです。
そのため、購買意欲を掻き立てると言われています。

このように色によって人間の感じ方は様々です。そのWEBサイトが
見てくれる人に最初にどのような印象を与えているかは
色で決まると言っても過言ではないでしょう。

2、視覚階層

視覚階層とは、人間の目が、対象物を把握する順番を指すことで、
良質なウェブデザインを支える要素の中でも、
特に重要度が高いです。

なぜ、視覚階層が重要なのかといいますと
ビジュアルによる判断は何が重要で、何が違うのかを
決定づけることができるからです。

あるデザイン要素のウエイトを
強くすることで、それらが重要であるとユーザーは認識します。
デザインの基本原理を理解することで、
ユーザーによりうまくリーチすることができるでしょう。

階層において情報は取り込みやすく、
そしてより分かりやすいことが重要です。
じっくりと考慮された階層は、ユーザーが混乱することなく、
スムーズに情報を理解できるでしょう。

さらにデザイン要素まとめることで、
統一感を表現できデザイン面が良くなります。

3、黄金律

見た目が美しくなる(と言われている)バランスの黄金律は、
1:1.618です。古代ギリシャのパンテノン神殿が良い例です。

また、フィボナッチ数と呼ばれる、二つの数字0と1から始まる
数列で、一つ前の数を次々に加算た数列の法則もあります。
(0、1、1、2、3、5、8、13、21…)

この2つの法則は、全く関係がないように見えるものの、
同じ数字を導き出します。
この黄金律もデザインにおいて重要です。

4、ヒックの法則

ヒックの法則は、選択肢を増やすと、それだけ意思を
決定する時間が長くなります。メニューにあまりに多くの選択肢が
用意されていると、選ぶのに困ります。
しかし、2つしか選択肢がないなら決定までに
かかる時間は遥かに短くなると思いませんか?

ウェブサイトを利用する際に選択肢が多いと、
使いにくくなります。最悪、全く使ってもらえなくなる
場合もあります。そのため、より楽しいUXを提供するため、
選択肢を少なくする必要があります。

ウェブデザインを改善する上で、気を散らす選択肢の削除は、
継続的に実施しなければなりません。

5、三分割法

デザインに画像を利用する手は有効であります。
なぜなら視覚的な要素は、テキストよりも遥かに迅速にアイデアを
伝えることが出来るからです。

三分割法とは2本の横線と2本の縦線でスペースを
同じ9つの大きさに区切って考え、重要な構成要素を線、
もしくは、線が交差する点に画像などを配置する手法です。

中心に置くより上記のところに置いたほうが
デザインが良くなります。

6、余白&清潔感のあるデザイン

余白は、ページの「手をつけない」スペースです。
グラフィック、縁、溝、カラムの間のスペース、そして、
文字や視覚要素の列の間のスペース等が該当します。

「空白」のスペースと認識するべきではない余白は、
余白の中のオブジェクトの存在感を引き立てる効果があり
デザインにおける大事な要素の一つです。

余白において鍵を握るのが、階層の利用です。
文字であれ、色であれ、画像であれ、情報の階層が欠かせません。

テキストやグラフィックで埋め尽くされた余白のないページは、
ゴチャゴチャした印象や散らかった印象を与えてしまい、
また、とても読みにくいです。

十分に余白のスペースを確保すると、「清潔感」が生まれます。
清潔感のあるウェブサイトは、明確なメッセージを伝える上で
重要ですが、コンテンツを少なくすればいいわけではありません。

清潔感のあるデザインとは、スペースを
有効に活用するデザインをさします。

まとめ

このように心理学を知ることでwebデザインに
活用することができます。ここでご紹介した以外にも
デザインと心理に関するものがあります。
全てのことで共通して言えるのは、見てくれる人のことを考えて
良いUXデザインを作っていきましょうということです。

おすすめ情報

2016年12月5日

HTML5のマークアップ

markup-of-html5以前こちら(今更聞けない!HTML5・CSS3)の記事でも
取り上げたように
2014年にHTML5の勧告がされたことによって、
HTML4ではできなかった様々なことができるようになりました。
実際にHTML5を使ってどのように
マークアップするといいのか
今回はそちらを書いていきたいと思います。

マークアップとは?

そもそもマークアップとは、
人間語が認識出来ない機械でも文書の構造が認識出来るように、
文書の各要素に目印を与えて行く事です。
見出しや段落などと言った紙の文書では
当り前にある要素だけでなく、
ハイパーリンクのアンカーなどのような
ハイパーテキスト独自の要素なども、
マークアップに依り認識が可能になります。
HTMLでのマークアップは、タグと呼ばれる目印を利用します。

SEO対策にも

正しいマークアップを身につけることは、
もちろんSEO対策にも効果的です。
Googleの基準に習い正しくマークアップし、
より優れたコードをめざしながら
サイトパフォーマンスを向上させましょう。

文書構造をまとめよう

HTMLマークアップをはじめる前に、
ページの文書構造を確認しましょう。
デザインから作成の場合には
レイヤー名などにあらかじめクラスやIDを
ふっておくと、構造が理解しやすくなります。
最初の方はデザインを印刷したものに
書き込んでいくとわかりやすいと思います。
ソースコード内で迷子にならないよう
先に構造を整理しておくクセをつけておきましょう。

カテゴリーとコンテンツモデル

要素を記述するルールとなるのが
「カテゴリー」と「コンテンツモデル」です。
HTML5では、類似する特性をもった要素が
7つのカテゴリーに分類されており、
どの要素を子要素として持てるのかは
コンテンツモデルによって定義されます。

カテゴリー

HTML5では、類似する特性を持った要素が
以下で紹介する7つの「カテゴリー」に
分類されています。
それぞれの要素は、0個以上のカテゴリーに分類されます。
つまり、どこのカテゴリーにも属していない要素や、
複数のカテゴリーに属する要素も存在します。

メタデータコンテンツ

文書内のコンテンツの表示や動作を指定したり
ドキュメントの関連性の指定、
文書のメタ情報などを指定したりする要素。

フローコンテンツ

body要素内で使われるほとんどの要素は
「フローコンテンツ」に分類されます。

セクショニングコンテンツ

明示的にアウトラインを生成する要素。
各セクショニングコンテンツは通常、
見出しを伴って使用されます。
article、aside、nav、section要素が該当します。

ヘディングコンテンツ

セクションの見出しを定義する要素。
暗黙的にアウトラインを生成します。
h1、h2、h3、h4、h5、h6要素が該当します。

フレージングコンテンツ

文書を構成するテキストを表す要素。
従来のHTMLでインライン要素と呼ばれていた分類です。
※従来インライン要素とブロックレベル要素で
わけられていたものがHTML5では廃止され、
今回紹介しているコンテンツモデルによって
より細かくわけられるようになりました。

エンベディッドコンテンツ

ドキュメントに他のリソースを組み込む要素。
audio、canvas、embed、iframe、img、
object、video、picture要素が該当します。

インタラクティブコンテンツ

ユーザーの操作に特化した要素。
button、textarea、labelなどが該当します。

コンテンツモデル

コンテンツモデルは、ある要素がどの要素を
内容として持つことができるか、
つまり子要素とできるかというルールを表します。
例えば、コンテンツモデルが「フローコンテンツ」の
aside要素は、フローコンテンツに属する
p要素などを内容として持てます。
フローコンテンツに属していない
link要素などを内容として持つことはできません。

また、audio要素のように、
属性と属性値の指定によって
コンテンツモデルが変化する要素も存在します。
なお、空要素のコンテンツモデルは「空」です。

トランスペアレントコンテンツ

a、audio、canvas、del、ins、map、
noscript、video要素は、
コンテンツモデルが
「トランスペアレントコンテンツ」となっており、
親要素のコンテンツモデルを受け継ぐ要素です。
例えば、親要素にaside要素を持つa要素は、
aside要素のコンテンツモデルが
フローコンテンツなので、
コンテンツモデルを受け継ぎ、
フローコンテンツを内容に持つことができます。

HTML5で新しく加わった要素

HTML5で新しく加わった要素について
詳しく見ていきたいと思います。
マークアップする順番に沿って
紹介していきます。

header要素

header要素(<header>)は、
HTML5 から新たに追加された要素で、
イントロダクションやナビゲーショングループで
あることを示す際に使用します。
文書のヘッダ情報を表すタグとは異なります。
header要素はページの構造化要素であり、
フロー・コンテンツにしか属していません。

<header>の中には、
通常は <h1>〜<h6> や <hgroup> など、
セクションの見出しが含まれることが想定されていますが、
必ず必要というわけではありません。

従来は<div id=”header”></div>としていたところを
<header></header>とマークアップすることが
できるようになりました。
divと同じようにidやclassをふることも
可能です。

nav要素

nav要素は文書内の
主要なナビゲーションのセクションを表します。
主要なナビゲーションとは、
Webサイト内で共通で使われている
グローバルナビゲーションと呼ばれるセクションや、
ブログのサイドメニューにあるカテゴリーの一覧といった
リンクブロック、あるいは文書内で
各セクションに移動するための
リンクブロックなどが該当します。
nav要素は
セクショニング・コンテンツです。
セクショニング・コンテンツは
『それ単体でページの骨組みを作るもの』です。
ですから、見出しがなければなりません。

こちらも従来は
<div id=”gnav”></div>などとマークアップされていました。
header要素と同じくidやclassをふって
複数存在するときには使い分けることが可能です。

main要素

main要素は文書内の主要なコンテンツを表します。
主要なコンテンツとは、
Webサイト内の各ページで繰り返し使われる
ヘッダーやナビゲーション、
検索フォームやフッター情報などを除いた、
その文書内で主な内容となる部分を指します。
また、セクショニングコンテンツではないので、
文書のアウトラインに影響を与えません。
article、aside、footer、
header、navの各要素を
祖先要素に持つことは不可とされています。

article要素

article要素は文書内の
独立した記事セクションを表します。
ニュースサイトやブログにおける各記事や、
それに付随するコメントなども
独立した記事セクションと考えられます。

article要素を入れ子にするときは、
子孫要素は祖先要素にあたる
article要素の内容に関連した内容を表します。
記事へのコメントをarticle要素で
マークアップする場合などが該当します。

section要素

section要素は文書内の一般的なセクションを表します。
「セクション」とは通常、
見出しを伴う文書内の章や節を意味します。
また、見出しがない場合でも、
暗黙的にあるものとみなされます。
段組みのために使うのはNGです。
divの代わりに使ってはいけません。

section要素はセクショニングコンテンツなので
アウトラインを生成しますが、
他に適切なセクショニングコンテンツが
ない場合に使用しましょう。

aside要素

asideは
その前後の要素のコンテンツに関係しているが、
別のコンテンツとして分離されたものとみなされます。
補足的な情報であることが多いです。
逆に、抜き取ってしまうと
本筋の意味が通らなくなる内容は
aside要素にするべきではありません。

footer要素

footer要素はheader要素と同じく
ページの構造化要素であり
フロー・コンテンツにしか属していません。
その直近の祖先にあたる
セクショニング・コンテンツ、
または、セクショニング・ルートのフッターを表します。

通常はページの最後に現れますが、
必ず最後に置かなければならないというわけではありません。

以上header、nav、main、article、
secrion、aside、footerの7つが
通常マークアップする際に
使用するものかと思います。

コーディングを行う際、
このような基礎的な構造を覚えていると
マークアップしやすくなるのではないでしょうか?
また、冒頭でも述べましたが、
正しいマークアップは
SEO対策としても期待ができるので
ぜひ身につけていきましょう!

1 2 3 4 5