『Webデザインとコーディングのきほんのきほん』
マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！
Webデザインに興味のある方やこれから学ぶ人におすすめの1冊です。

Webサイトをデザインするとは

※書籍のChapter3『Webサイトデザインのセオリー』/Section01『Webサイトをデザインするとは』からの抜粋です。

これまでの章でご紹介したデザインの目的やセオリーなどは、表現する媒体に関わらずベーシックで普遍的な内容です。
これからのページでは、デザイン全般の基本的なセオリーを、Webサイトをデザインするときにどのように活用していくかを考えていきましょう。

Webページ各エリアの名称

複数のWebページが1つのまとまりとして公開されているものがWebサイトです。
サイト内のそれぞれのページを行き来するためには、ほかのページへジャンプするためのリンクが必要になります。
各ページへのリンクをグループ化したエリアは「メニュー」とも呼ばれます。
多数のページで構成されるWebサイトでは、カテゴリを分類するための大きなメニューをグローバルメニュー、カテゴリ内で各ページへリンクする詳細メニューをローカルメニューと呼ぶこともあります。
また多くのサイトでは、ページ内が役割ごとにエリア分けされています。
ページの上部エリアは「ヘッダー」、下部は「フッター」と呼ばれ、Webサイトのタイトルやグローバルメニューなど共通フォーマットに合わせたレイアウトで統一することが一般的です。
ページの主役となる中央部は「コンテンツエリア」と呼ばれます。コンテンツエリアを構成する段組みは、「カラム」とも呼ばれます（図01）。

印刷物と異なるWebサイトの大きな特徴

Webサイトの各ページを閲覧する行為は本や雑誌のページを見る感覚に似ていますが、印刷物とは異なる特徴があります。
Webサイトをデザインするときには、その特有の環境や機能を考慮する必要があります。

全体像がわかりにくい

本や雑誌は手に取った瞬間に全体のページ数やおおよその内容量を想定することができますが、Webサイトは1つのサイト内にどのくらいの情報量があるのかわかりにくいものです。
検索エンジンを利用した訪問では、最初に閲覧するページがトップページ以外である場合も多いでしょう。
現在見ているWebサイトにどれくらいの情報が掲載されているか、その中で今表示されているページがどのカテゴリに属するのかなどをわかりやすく表示したり、サイト内の別のページに容易に移動できるようなナビゲーションが必要になります。
グローバルメニューで現在表示しているカテゴリの背景色を変えたり、「パンくずリスト」とも呼ばれるトップページから現在のページまでの階層がわかりやすい表示を追加するなど、表示しているページがWebサイト内でどの階層にあるのかがわかりやすいナビゲーションが必要です（図02）。

画面の面積内の内容しか見ることができない

印刷物では特大サイズのポスターでも見る位置を後退させることで全体像が確認できますが、Webサイトは使用しているパソコンやスマートフォンなどの画面の面積内の内容しか見ることはできません。
制作者がページの全体像（図03左）をイメージしてデザインしても、ユーザーは閲覧している媒体の画面サイズの領域だけしか一度に見ることはできないのです（図03右）。
 

このため、スクロールやスワイプすることで表示領域を移動したり表示倍率を変える、クリックやタップで別のページやコンテンツに移動するなどの操作が必要になります。
さらにアニメーションや動画など時間経過で変化するイメージがコンテンツに含まれていることも、印刷物とWebサイトの大きな違いです。
Webサイトをデザインするときには、「どの領域・瞬間が見られているか」を考える必要があるのです。

閲覧環境によって外観が変化する

ユーザーが使用してるデバイスやブラウザなどによって表示内容が変化する場合があることも、Webサイトの特徴の1つでしょう。表示される環境によってレイアウトが変化したり、フォントの有無によって文字の外観が変わる場合もあります。閲覧しているモニタの設定状況によって、カラー表現も変化してしまうことがあります。
デザインしているときの表示が、そのまま完全に再現されない環境があることも考慮しておきましょう（図04）。

「更新する」ことが前提

印刷物は完成して公開されるとその時点で制作者の仕事はいったん終了しますが、Webサイトは公開後にもコンテンツを更新することが一般的です。
更新して公開情報の鮮度を保つことが、多くのユーザーを集めたり商品の売り上げを増加するなどの結果につながります。
Webサイト制作時には、公開後の更新作業が容易に行えることも考慮してデータを構成します。
たとえばページ内の文字はイメージ画像ではなくできるだけテキストとしてHTML上に入力するなど、データの構成までを考えてデザインを行うことが必要とされます（図05）。



マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！
次回はChapter3/Section07『ユーザーの経験値を利用した構成』の一部内容を公開予定です。