1-04Webサイトのレイアウトについて知ろう
前回はHTMLとCSSの役割とルールを説明しました。今回はWebデザインのレイアウトついて学んでいきます。
Webページを分解してみよう
まずはWebページの基本となるレイアウトについて知っていきましょう。
ヘッダー・フッター・コンテンツについて
Webページは、大きく3つの部位に分けることができます。
ヘッダー
Webページの一番上のスペースに位置する、ロゴ・目次となるリンク・ログインなどの重要なボタンが設置されます。どのページでも共通で表示されることが多く、そのWebサイトの打ち出したいイメージを訴求する役割も持っています。
N予備校のWebサイトを開いてみましょう。
N予備校
ページの一番上に表示されている部分がヘッダーです。
ヘッダーの中には「ロゴ」や、目次となるリンクをまとめた「グローバルナビゲーション」と呼ばれるものが置かれています。
図：N予備校のグローバルナビゲーションTips 目次？メニュー？ナビゲーション？
本やマンガには目次がありますが、Webサイトにも訪れた人が目的のページに辿り着きやすくするために目次があります。この目次のことをWeb制作の現場では「ナビゲーション」と呼び、一番主要なナビゲーションをまとめたものを「グローバルナビゲーション」と呼びます。この「ナビゲーション」という言葉は制作現場ではお馴染みですが、一般的にはあまり馴染みがない言葉なので、よく「メニュー」と呼ばれたりすることもあります。
また、主要な目次の次にピックアップされた目次を「サブナビゲーション」と呼んで設置することもあります。「niconico」のようなページがたくさんあるサイトには、複数のナビゲーションが設置されています。
コンテンツ
ヘッダーから下の部分、読み物が載っている部分はコンテンツと呼ばれます。
このヘッダーから下の部分は、より複雑なレイアウトが組めるようになっているので、このあとの「カラム（段組み）について」で詳しく解説します。
フッター
ページの一番下に表示されている部分がフッターです。
Webサイトのロゴ、ヘッダーに表示しきれなかったナビゲーションやFacebookページ・Twitterアカウントへのリンク、コピーライトなどが設置されます。コピーライトというのは、そのWebサイトが誰によって作られたものか明記し、無断にコピーすることを禁止しますという意思表示の役割を果たしています。
N予備校のWebサイトのレイアウトについて
参考に見てきたN予備校のWebサイトは以下のようなレイアウトで構成されています。
カラム（段組み）について
先ほど紹介した、ヘッダーとフッターに挟まれたコンテンツの部分は、情報を整理して見やすくするために「段組み」を行います。特にWebページは本と違って、リンクによって次から次へと目的の情報を探してページを移動できるという特徴があるので、レイアウトを工夫することによって移動がしやすいように整理してあげる必要があります。
シングルカラムレイアウト
N予備校のWebサイトは情報がそこまで多くないので、すっきりと縦長で1列に段組みされています。こういった段組の仕方を「シングルカラムレイアウト」と呼びます。
マルチカラムレイアウト
Webサイト全体のページ数が増えてくると、他のページへの目次などが増えてくるため、段組みを分けてより見やすい形に整えます。
ニコニコニュースを見てみましょう。
左側には記事の一覧、右側にはピックアップやランキングや広告などが表示されています。このようにタテに2列に段組みしたものを「2カラムレイアウト」と呼びます。
また、左右にサイドバー・真ん中にコンテンツという段組みもあります。こういった段組みを「3カラムレイアウト」と呼びます。
このような2カラム・3カラムで段組みを組んだレイアウトのことを「マルチカラムレイアウト」と呼びます。
レスポンシブウェブデザインについて
Webサイトは、PC・スマートフォン・タブレットなど様々な画面サイズで閲覧されるため、閲覧する環境に合わせて最適な見た目に変化をさせる必要があります。1つのWebサイトで多様なデバイスに対応したデザインのことをレスポンシブウェブデザインと呼びます。
レスポンシブウェブデザインの事例
ドワンゴ採用情報サイトを見てみましょう。
PCの画面サイズで見た場合は以下のような見た目です。
Chromeの画面サイズを狭めて、スマートフォンの横幅サイズにしてみましょう。
このようにナビゲーションの形・文字のサイズ・NEWS一覧の見た目など、様々な部分が画面のサイズに合わせて変化します。
レスポンシブウェブデザインに対応したWebサイトを集めたリンク集がありますので、参考にいくつかのサイトを見てみましょう。
レスポンシブウェブデザインを実現する方法
レスポンシブウェブデザインに対応したWebサイトでは、主に以下の3つのような対応方法で、デバイスごとに合ったデザインを表示しています。
これらの大抵のことはHTMLとCSSで実現できますが、最後の「形状を変化させる」にはJavaScriptというプログラミング言語を使う必要が出てきます。JavaScriptによる複雑な振る舞いはこのコースの後半で説明していきます。
最近の傾向について
ここ数年は、スマートフォンに最適化されたWebデザインが主流となってきているため、レスポンシブウェブデザインは当たり前のように導入されるようになってきています。そして、1ページにたくさんの情報を表示するマルチカラムレイアウトは、スマートフォンの狭い画面サイズに合わないため、情報を縦長ですっきりと見せることができるシングルカラムレイアウトが主流になってきています。