WEBデザインは長い年月をかけて、読みやすさ、機能性、デバイスへの最適化、検索エンジンへの適応など様々な進化を遂げました。近年ではフラットデザインやレスポンシブデザインなど、新たなデザイン要素が加えられています。
WEBデザインの基本構成
WEBサイトでは様々なレイアウトが採用されています。WEBレイアウトには様々なバリエーションがありますが、WEBサイトの目的に応じて最適なレイアウトが採用されます。
WEBサイトを構成するレイアウト要素としては以下のようなものがあります。
ヘッダー
ヘッダーとはWEBサイトの上部に共通の画像、テキスト、ナビゲーションなどを配置するために設けられます。
- ロゴ
- ナビゲーション（メニュー）
- バナー
- イントロ・テキスト
ロゴ
ロゴはビジネスのアイデンティティとブランディングを表現するために重要な要素です。WEBサイトではGIFまたはPNG形式でロゴデータを作成します。美しいWEBサイトを作成するためにはロゴの画像品質が重要です。名刺やカタログからスキャンしたロゴデータではなく、オリジナルのロゴデータを使用するべきです。またロゴの背景は透過していることが多く、白い地色の前面にロゴを配置する場合とダークな色の前面にロゴを配置する場合ではロゴのデザイン処理も異なってきます。
ナビゲーション（メニュー）
ナビゲーション（メニュー）はWEBサイトの操作性を決める重要な要素です。かつてはボタン形状のナビゲーションメニューが作られましたが、最近のWEBデザイントレンドではナビゲーションはシンプルなテキストで表現することが多いようです。その理由はスマートフォンからのアクセスが増加し、狭い画面での操作性を考えると、ボタンよりもシンプルなテキストメニューの方が操作しやすいからです。
バナー
バナーはWEBページの中で広告的色彩の強い部分です。会社のビジネスや商品をひと目で表現するような画像やキャッチコピーがバナーに使用されます。確かにバナーはWEBサイトを訪問したユーザーにとっては目につきやすい部分です。しかしGoogleのオーガニック検索ではバナーデザインの良し悪しはSEOには関係がありません。シンプルでメッセージ性の高い情報をバナーには使用すべきであると考えます。
イントロテキスト
イントロテキストとはWEBサイトの会社やサービス、商品が「一言で言うとどのようなものであるのか？」を表現した文章です。イントロテキストはキャッチコピーよりは長く、本文よりは短い分量で、簡潔に作成する必要があります。またイントロテキストはバナーとは異なり、SEOにも高い効果があります。イントロテキストは「お客様にとってのメリット」を訴求すべきます。
サイドバー
サイドバーはWEBページのタイトルや本文以外の機能や情報をまとめてレイアウトする部分です。サイドバーに配置される情報としては以下のようなものがあります：
- 検索バー
- 新着情報のタイトル一覧
- 記事カテゴリ
- カレンダー
- バナー広告
- タグクラウド
- 更新履歴
- ショッピングカート
- コメント
- RSS
- ビデオ
- アーカイブ
サイドバーは機能的ですが、情報が多すぎるとサイドバーが使いづらくなります。またスマートフォンのような小さな画面ではサイドバーは邪魔になってしまいます。サイドバーにはメリットとデメリットがあることを考えて設定すべきです。
ボディ
ボディにはWEBページの本文、画像、動画などコンテンツそのものが配置されます。ボディをデザインする際に最も重要なのは本文の読みやすさです。適切なフォントファミリー、フォントサイズ、ヘッダの設定を行わなければなりません。
カラム設定
WEBサイトの読みやすさを考慮して、カラム設定を行う場合があります。例えば、自分の会社のビジネス領域が大きく分けて４つある場合、下のデザインのようなカラム設定を行うとこの会社は大きく分けて４つのビジネスカテゴリがあるのだと言うことがわかりやすくなります。
またブログを一覧表示する場合、リストで表示をするよりもタイル表示をした方がクリックしてもらいやすくなります。
リスト表示
タイル表示
フッター
フッターはWEBページの最下部にある全ページに共通した情報を表示する部分で、役割としてはサイドバーと同様の役割があります。フッターは３カラムや４カラムにしてあまり長くなりすぎないようにレイアウトすることがポイントです。
バックグラウンド
WEBデザインによっては画面全体にバックグラウンドを配置することがあります。しかしバックグラウンドの使用は本文の読みやすさとのトレードオフになるため、バックグラウンドをは必要がなければ使用しない方が無難です。
ワイヤフレームの作成
WEBデザインを行う際に、いきなり詳細デザインを始めるのではなく、まずワイヤーフレームを作成することを勧めます。ワイヤーフレームとはWEBサイトを構成するデザイン要素をラフに配置したもので、後になって要素が追加になることでWEBサイト全体の統一感やバランスが崩れてしまうことを防ぎます。
下記の実例はベトナムで人気のニュースサイトtuoi treですが、ワイヤーフレームに変換してみるとサイト全体をどのような要素がどのように配置されているのかがわかりやすくなります。
まとめ
WEBサイトをデザインする場合にまず最初に考えなければならないのは、いかに読みやすく、わかりやすいデザインを提供するのかと言うことです。読者はページの隅から隅を丁寧に読んでくれるわけではありません。読者が知りたい情報をいかにわかりやすく提供するのかが重要であり、そのためには奇をてらったデザインではなく、シンプルでわかりやすいデザインを心がけるべきです。
またWEBデザインを構成する要素と機能を理解して、適切にレイアウトの作成とコンテンツの配置を行うことがポイントです。