Webサイトのデザインの作り方　Webサイトデザインの基礎の基礎

Webサイトのデザインをする流れについて、色彩検定の勉強で学んだことを活かしつつまとめてみた。

f:id:kiyo560808:20151213114801j:plain

準備

サイトの目的を確認する

何かを売りたいのか、情報を発信したいのか、など何の目的でサイトを作るかをはっきりさせておく。目的によって、カラー、ロゴ、ナビゲーションなどのデザインやコンテンツが決まる。

訪問者、利用者の属性を見極める

目的によって、訪問者、利用者を推定できる。ターゲットを明確にしておく。
ターゲットの性別、年齢、職業、住まいなどの属性によって、色、書体、ビジュアルテーマなどが決まってくる。

情報を整理

まずは、作成予定のコンテンツを全て洗い出す。

そのコンテンツを以下のような項目で評価する。
- 更新頻度：よく更新されるものか。すべきものか。
- プッシュ性：アピールしたい項目か。
- 実用性：使って便利な機能か。
- 話題性：時代、流行に合っているか。目新しさはあるか。
- テーマ性：サイトのコンセプトを表現したものか。中心的なものか。
- ブックマーク率：ブックマークしてもらえる内容か。

評価の結果とサイトの目的を考慮し、重要なものへのリンクは大きくするなど、レイアウト、ナビゲーションにおける位置づけを考える。

ビジュアルテーマを決める

サイトの目的を確認する。
目的に応じて以下のようなテーマのどれにするかを考える。
- エレガント：上品で優雅なイメージ。グレイ系の低彩色。
- シンプル：単純ですっきりしたイメージ。
- ゴージャス：豪華なイメージ。ちょっと激しめな。
- クラシック：時代を超え変わらず存在する正統派。重厚的。低中明度、低中彩度の暖色系。
- モダン：現代的なイメージ。モノトーンなど。幾何学的でシャープ。
- ナチュラル：自然のイメージ。
- ロマンチック：かわいらしいイメージ。パステルカラーなど。
- プリティ：かわいらしいイメージ。
- ドラマティック：映画的な。ドラマチックな。

カラープランを決める

テーマカラーを決める

目的、ターゲットに応じて色を決める。いろいろなパターンを試してみることで、客観的に選べるようにする。自分の好みになってしまわないように注意する。色がどのような印象を与えるか、どのような効果を持つかを知っておく必要がある。

色	与える印象や効果
赤	情熱な印象を与える。カルティエなどは赤を貫いている。
グレー	高級感、高貴な印象を与える。
オレンジ	明るさ、親しみやすさ、若々しさを表現する。若者に人気。
紫	神秘的な印象、不安や嫉妬のイメージを持つ。
黄色	元気、希望、幸福、健康的な印象を与える。
青	クールで落ち着いた印象。探究心。憂鬱な気分。色の濃度で与える印象が変わる。
緑	安らぎ、生命や希望、平和や安定を象徴する色。

色使いの６つの手法
- 二色使いで表情をつける
  - コントラスト配色：メリハリのある強い印象。
  - カマイユ配色：近い色調の組み合わせ。統一感と調和が得られる。
  - 中差配色：調和とコントラストの両方。
- 同系色で無難にまとめる
  - 穏やかで落ち着いた印象。まとめやすい。
  - 平凡になる。
- 多色をうまくまとめる
  - カラフルで楽しいサイトになる。
  - まとまりのない散漫な印象になりうる。
  - テーマ色、対比色、調和色、アクセントカラーを意識し、まとめる。
- 華やかなモノトーン
  - 高級感、神秘的な雰囲気、クールな雰囲気を与える。
- 柔らかなパステルトーン
  - 軽い、柔らかで、優しい印象。
  - 白を多めにすると清潔感も生まれる。
- リズミカルなグラデーション
  - 調和しやすい。
  - リズミカルで奥行きのある印象を与える。

実際の作成

トップページ

まずは、トップページのタイプを決める。タイプは主に以下の６つがある。

エントランス型
- タイトル、イメージ画像、メッセージ、入口ボタンだけのシンプルな構成。
- ホテル、高級店、ヨーロッパの企業に多い。
- 長所：シンプル、高級感、ウェルカムメッセージ、振り分け(言語など)
- 短所：すぐに情報にたどりつけない
- 例　ザ・リッツ・カールトンホテルオフィシャルサイト

イメージマップ型
- 画像にリンクをはって、ビジュアルでサイト内各ページへアクセスさせる。
- 親しみやすさを重視する企業に多い。
- 長所：賑やか、楽しい、親しみやすい、個性的
- 短所：画像サイズが大きいとページの表示速度が遅くなる。
- 例　【公式】東京ディズニーランド、東京ディズニーシー、東京ディズニーリゾート・オフィシャルウェブサイト

目次・カタログ型
- カテゴリー別に整然と並べられたナビゲーションで、ユーザをスマートに誘導する。
- 通販サイトに多い。
- 長所：実用的、わかりやすい、信頼感がある
- 短所：特になし
- 例　無印良品ネットストア

ポータルサイト型
- たくさんの情報を１ページに集約し、情報をより早くユーザに届ける。
- ニュースサイトなどに多い。
- 長所：情報量が豊富、目的への到達が速い、ニュース性がある
- 短所：デザインが難しい
- 例　Yahoo! JAPAN

情報・キャンペーン型
- １つの目的や、短期的なキャンペーンのためのサイト。
- 長所：実用的、キャンペーン向き、単一目的で訴求力がある
- 短所：キャンペーンなど以外には向かない

アニメーション型
- 動画を使ってナビゲーションする。
- 長所：きれい、ファッション性がある、エンターテイメント性がある
- 短所：高度な技術が必要
- 例　【公式】東京ディズニーランド、東京ディズニーシー、東京ディズニーリゾート・オフィシャルウェブサイト

サイズを決める

Webページを作る際、モニターによって見え方が異なることを知っておく。
モニターの実際のサイズと解像度の組み合わせによって見え方が決まる。
小さいモニターだと横スクロールしないと見れなかったり、大きいモニターだとサイトがちっぽけに見えてしまったりする。
全体を少しせまめにして、中身を左寄せにし、右に少しのスペースを作ることで、ある程度のサイズの違いに対応することができる。

ナビゲーションを考える

ページへ訪問した人が離脱するかサイト内を探索してくれるかはナビゲーションにかかっている。ナビゲーションがわかりにくいと、ユーザは迷子になり、不快になり、ページから去ってしまう。

ナビゲーションの種類

ナビゲーションには以下の５つの種類がある。

- アイコン
  - 速いナビゲート、思考を中断させない、共通の認識がある
- 引用イメージ、バナー
  - 大きなイメージ、インパクトがある、説明文を入れられる、期待感を持たせられる
- 文字とボタン
  - ビジュアルを注目させる、知的なイメージがある、信頼感がある、
- イメージマップ
  - 魅力的な大きな画像、統一感がある
- フレーム
  - ナビゲーションを固定する、メンテナンスが楽

ナビゲーションの５つの鉄則
- 分類してわかりやすくする
  - メインとサブの２つに分ける
  - メリハリをつける
  - 一目で判断できるようにする
  - 階層化する
- 統一して迷わないようにする
  - 色、形、大きさ、技法、法則、一、ボタンを統一する
- 強調して誘導する
  - わかりやすくユーザを誘導する
  - アクセスの快適さを保証する
  - 重要なページには複数のルートを作る
- 省略して安心させる
  - 多すぎるナビゲーションは整理して省略する
  - プルダウンを活用してすっきりさせる
- インタラクティブなナビゲーション
  - カーソルを合わせたとき色を変える
  - カーソルを合わせたときコメントを表示させる

ナビゲーションの位置

基本的には以下の５つのどこかに配置する。

- ヘッダ型
  - 画面の一番上に表示。画面の幅を有効に使える。
- インデックス型
  - 画面のサイドに表示。たくさん書けるので、きめの細かいナビが可能。
- 逆L字型
  - 多い情報を手際よく配置できる。大量のコンテンツを整理できる。
- フッタ型
  - スマートで軽快。上部の空間を有効活用。操作しやすく感じさせる。
- FLASH型
  - 新鮮な感覚。時間軸が加わり、インタラクティブ性が増す。操作してて楽しい。

タイトルロゴをデザインする

タイトルロゴはサイトの超重要な要素。サイトの印象に大きな影響を及ぼす。
ロゴをうまく使えばサイト全体のデザインが統一され、強い印象を与えることができる。

レイアウトを考える

ページのビジュアルイメージを具体的に絵に描いて、情報をどこに配置するかを決めていく。タイトル、メインメニュー、コンテンツの３つの要素の配置を決める。
グリッドシステムで統一感を出す。例えば、ページの横幅を３〜９等分したサイズを１単位として縦横に格子を作り、基準線を引いて、各パーツをそれに合わせて配置する。