読者です 読者をやめる 読者になる 読者になる

久保清隆のブログ

ライフハック、健康、旅行など、役立つ情報を書きます。

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

デザイン

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

f:id:kiyo560808:20151213114801j:plain

準備

サイトの目的を確認する

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

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

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

情報を整理
  • まずは、作成予定のコンテンツを全て洗い出す。
  • そのコンテンツを以下のような項目で評価する。
    • 更新頻度:よく更新されるものか。すべきものか。
    • プッシュ性:アピールしたい項目か。
    • 実用性:使って便利な機能か。
    • 話題性:時代、流行に合っているか。目新しさはあるか。
    • テーマ性:サイトのコンセプトを表現したものか。中心的なものか。
    • ブックマーク率:ブックマークしてもらえる内容か。
  • 評価の結果とサイトの目的を考慮し、重要なものへのリンクは大きくするなど、レイアウト、ナビゲーションにおける位置づけを考える。
ビジュアルテーマを決める
  • サイトの目的を確認する。
  • 目的に応じて以下のようなテーマのどれにするかを考える。
    • エレガント:上品で優雅なイメージ。グレイ系の低彩色。
    • シンプル:単純ですっきりしたイメージ。
    • ゴージャス:豪華なイメージ。ちょっと激しめな。
    • クラシック:時代を超え変わらず存在する正統派。重厚的。低中明度、低中彩度の暖色系。
    • モダン:現代的なイメージ。モノトーンなど。幾何学的でシャープ。
    • ナチュラル:自然のイメージ。
    • ロマンチック:かわいらしいイメージ。パステルカラーなど。
    • プリティ:かわいらしいイメージ。
    • ドラマティック:映画的な。ドラマチックな。
カラープランを決める
  • テーマカラーを決める

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

与える印象や効果
情熱な印象を与える。カルティエなどは赤を貫いている。
グレー 高級感、高貴な印象を与える。
オレンジ 明るさ、親しみやすさ、若々しさを表現する。若者に人気。
神秘的な印象、不安や嫉妬のイメージを持つ。
黄色 元気、希望、幸福、健康的な印象を与える。
クールで落ち着いた印象。探究心。憂鬱な気分。色の濃度で与える印象が変わる。
安らぎ、生命や希望、平和や安定を象徴する色。
  • 色使いの6つの手法
    • 二色使いで表情をつける
      • コントラスト配色:メリハリのある強い印象。
      • カマイユ配色:近い色調の組み合わせ。統一感と調和が得られる。
      • 中差配色:調和とコントラストの両方。
    • 同系色で無難にまとめる
      • 穏やかで落ち着いた印象。まとめやすい。
      • 平凡になる。
    • 多色をうまくまとめる
      • カラフルで楽しいサイトになる。
      • まとまりのない散漫な印象になりうる。
      • テーマ色、対比色、調和色、アクセントカラーを意識し、まとめる。
    • 華やかなモノトーン
      • 高級感、神秘的な雰囲気、クールな雰囲気を与える。
    • 柔らかなパステルトーン
      • 軽い、柔らかで、優しい印象。
      • 白を多めにすると清潔感も生まれる。
    • リズミカルなグラデーション
      • 調和しやすい。
      • リズミカルで奥行きのある印象を与える。

実際の作成

トップページ

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

  • エントランス型
    • タイトル、イメージ画像、メッセージ、入口ボタンだけのシンプルな構成。
    • ホテル、高級店、ヨーロッパの企業に多い。
    • 長所:シンプル、高級感、ウェルカムメッセージ、振り分け(言語など)
    • 短所:すぐに情報にたどりつけない
    • 例 ザ・リッツ・カールトン ホテル オフィシャルサイト
  • 目次・カタログ型
    • カテゴリー別に整然と並べられたナビゲーションで、ユーザをスマートに誘導する。
    • 通販サイトに多い。
    • 長所:実用的、わかりやすい、信頼感がある
    • 短所:特になし
    • 例 無印良品ネットストア
  • ポータルサイト型
    • たくさんの情報を1ページに集約し、情報をより早くユーザに届ける。
    • ニュースサイトなどに多い。
    • 長所:情報量が豊富、目的への到達が速い、ニュース性がある
    • 短所:デザインが難しい
    • 例 Yahoo! JAPAN
  • 情報・キャンペーン型
    • 1つの目的や、短期的なキャンペーンのためのサイト。
    • 長所:実用的、キャンペーン向き、単一目的で訴求力がある
    • 短所:キャンペーンなど以外には向かない
サイズを決める

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

ナビゲーションを考える

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

  • ナビゲーションの種類

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

    • アイコン
      • 速いナビゲート、思考を中断させない、共通の認識がある
    • 引用イメージ、バナー
      • 大きなイメージ、インパクトがある、説明文を入れられる、期待感を持たせられる
    • 文字とボタン
      • ビジュアルを注目させる、知的なイメージがある、信頼感がある、
    • イメージマップ
      • 魅力的な大きな画像、統一感がある
    • フレーム
      • ナビゲーションを固定する、メンテナンスが楽
  • ナビゲーションの5つの鉄則
    • 分類してわかりやすくする
      • メインとサブの2つに分ける
      • メリハリをつける
      • 一目で判断できるようにする
      • 階層化する
    • 統一して迷わないようにする
      • 色、形、大きさ、技法、法則、一、ボタンを統一する
    • 強調して誘導する
      • わかりやすくユーザを誘導する
      • アクセスの快適さを保証する
      • 重要なページには複数のルートを作る
    • 省略して安心させる
      • 多すぎるナビゲーションは整理して省略する
      • プルダウンを活用してすっきりさせる
    • インタラクティブなナビゲーション
      • カーソルを合わせたとき色を変える
      • カーソルを合わせたときコメントを表示させる
  • ナビゲーションの位置

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

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

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

レイアウトを考える

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

パーツを作る

最後に全てのパーツを作っていく。
パーツのファイル名を、内容がわかりやすく系統だてたり、全体のデザインと統一感を持たせるように気をつける。

作製中、随時ブラッシュアップする

書体(フォント)を最適化する
  • 書体の種類
    • 大きく分けて、明朝体、ゴシック体、その他の3種類。
    • 明朝体は文字数の多い文章を読む時にリズム感があり、読みやすい。
    • ゴシック体は、はっきりしているので、短い文章や単語を認識しやすい。
    • Webでは明朝体は読みにくいのでゴシック体にするのが無難。
  • 書体の使い方
    • 大きさ、太さ、色を使い分ける。メリハリのきいた見栄えのよいページになる。
  • 文字組みの基本
    • 文章の構造、段落、行間、マージン、揃える位置に注意して見やすいページにする。
カラーの最適化
  • Webで使える色
    • ブラウザによってフルカラーが使えるものと、256色しか使えないものがある。
    • 最近はほぼフルカラーに対応していると思う。
  • カラープランシートを作成
    • 制作途中にスタッフ全員で色彩計画を確認したり、自分の中で色彩計画を整理するために作る。
    • 各ページのテーマカラー、ベースカラー、対比色、調和色、アクセントカラー、サブテーマカラーをメモしておく。
    • 色は#ffffffなどの16進数表示で書いておく。
  • 背景色と文字色
    • 文字を読みやすくする。
    • 訪問済みの場合のリンクの色も含め、背景画像、背景色で文字が見づらくならないように気をつける。
  • 質感を加える
    • 背景画像や色面に質感を表現するテクスチャー効果を加え、さらに深い表現を持たせる。
  • 透明感を演出する
    • 奥行きや光を感じさせ、美しく見せる。
  • 写真の色をコントロールする
    • 写真も背景色などとマッチするようにコントラストの調整や色の補正を行う。

ページデザインのコツ

ページデザインの法則
  • グループ化する
    • 1ページを3つか4つのグループに分ける。
    • グループによって色やスタイルを変えたり、仕切りをつけたりする。
  • メリハリをつける
    • 強調したいところは大きくしたり、太くしたり、色を変えたり、スペースをつけたりする。
  • 揃える
    • 頭、幅、大きさは揃える。
    • 文章は左揃えが原則。
  • 繰り返す
    • サイト全体の一貫性を保つために同じデザインを繰り返す。
    • ブランドイメージ、コンセプト、内容の統一がサイトの価値を高める。
  • 立体感を演出する
    • 目立たせるために立体感を持たせる。普段見ているものが3次元なので、立体感を持たせることで親近感も増す。
    • ただし、使い過ぎると散漫なイメージを与えてしまう。

参考文献

色彩検定2級問題集

色彩検定2級問題集

色彩検定で最も売れている本。色彩心理について参考にした。


ゼロから始めるWebデザイン

ゼロから始めるWebデザイン

基本的なことから網羅されていてWebデザインの初心者にとってすごく勉強になる本。
方法よりも考え方を中心に書かれている。



お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。
ブログランキング・にほんブログ村へにほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ プログラム・プログラマへ人気ブログランキングへ