【Web制作基礎知識】Webデザインの概念、基礎を理解しよう！
Webサイトのデザインというと、グラフィカルでアート作品のようなデザインを思い浮かべたりしませんか？
Webサイトを開くと、画面いっぱいに広がる美しい写真やイラスト。
まるでポスターやファッション雑誌を見ているような洗練されていて美しいデザイン。
誰でも美しいデザインには憧れるものですが、例えばGoogle検索エンジンのデザインがアート作品のようだったとしたら、それは良いデザインだと思いますか？
Webサイトのデザイン基礎と合わせて構造基礎の理解も深めましょう！
良いデザインとは？
例えばスーパーのチラシデザインは全国共通、どのスーパーもほとんど同じようなデザインですよね。
デザインをただアート作品のような美しさという認識でとらえるとしたら美しいとは言えませんが、スーパーのチラシの目的は、特売の商品や値段、品数などを限られた紙面で最大限にアピールすることにあります。
そのデザインが高級さを訴求しようとするマンションのチラシのようなものだったとしたら、安い！というポイントが訴求できませんよね。
このようにスーパーのチラシであれ、Webサイトであれ、その目的の訴求に最適化されたデザインが良い、優れたデザインなのです。
良いデザインの条件
もちろん、アート作品のような美しいデザインが悪いわけではありません。
ファッションブランドなど、ブランドイメージを高めることを目的とする場合は、洗練された美しい画像で飾られたWebサイトも多く存在します。
お堅いイメージ、堅い＝堅実・優秀さをアピールしたい企業Webサイトであれば、濃紺やグレーなどの配色でカチッとしたレイアウトのデザインが多いなど、業界、業種に応じたイメージ感があり、それらを踏襲することが望まれます。
閲覧するユーザーは他社比較することも多く、あまりにイメージ感とかけ離れたデザインであった場合、逆に不安になる、信用できないなどのネガティブイメージを持たれる恐れもあり、最悪認識すらしてもらえないという可能性もあるからです。
優秀な弁護士を探そうと検索をかけ、これだ！と思って開いたWebサイトが、ピンクなどビビットカラーの配色、かわいらしいキャラやイラストで装飾されたキラキラしたデザインだったとしたら、その弁護士に依頼したいと思いますか？
このように、企業や製品、サービスのブランドイメージを的確、明確に表現することを望まれるのが良いデザインなのです。
Webデザインの基本設計
デザインは、それが施される媒体に向けて最適に設計される必要があります。
チラシやポスターなどの紙媒体とWebデザインでは、最終的に閲覧する形態が異なるため、同じようなデザイン要件でも異なる設計が必要です。
パソコン画面で閲覧することを前提とするWebサイトと手に取って見るチラシとでは全体サイズや閲覧の仕方が異なるので、それぞれに適するレイアウト、また印刷物のパソコン用のデザインは色の扱い方の違いがあるからです。
Webサイトの目的の設定
Webサイトには必ず以下のような目的があります。
- 企業や商品、ブランドイメージを高める、アピールする。
- サービスや商品の認知度を高める。
- サービスや商品を実際に購入してもらう。
Webサイトのデザインは、これらの目的を果たすために制作されるものであり、単に見栄えだけのためにあるのではないのですね。
Webデザイナーはこの目的を最大限に実現させるため、まずデザインコンセプトを策定します。
デザインコンセプトの策定
Webデザインの制作に着手する際にはまず、以下の点に留意してデザインコンセプトを策定します。
- 企業、製品、サービスなど、企業、ブランドイメージをきちんと継承し、的確に再現すること
- 訴求したいポイント（ブランドイメージや情報）を最適に訴求、閲覧できる機能を持っていること。
ここでのポイントは、「美しい」とか「かっこいい」という表現があてはまるものが必ずしも良いデザインとは限らないということです。
以上の点を踏まえデザインコンセプトは、制作する企業や団体、商品、サービスなどのイメージ感を想定して策定していきます。
イメージ感とは例えば、高級⇔大衆、高い⇔安いなど、ターゲットユーザー層やコーポレートイメージ、価格帯などを踏襲するもの、楽しい、優しい、安心、安全、クール、信頼、優秀・・・等々、訴求したい雰囲気、テイストを表現するキーワードに置き換えて考えます。
これらのキーワードは、配色、装飾、配置する画像（写真やイラストなど）のテイストで表現することが出来ます。
このようにデザインコンセプトは、Webサイトの印象を決定づけるデザイン、配色、構成する素材類の選定にも大きく影響していきますので、デザイン制作において最も重要な作業となります。
Webデザインの構造設計
Webサイトの目的、デザインコンセプトが決定したら次にWebサイトの全体構造を設計します。
この段階でいよいよ実際のデザイン制作に着手する形となり、ワイヤーフレームと呼ばれるレイアウト構成図を作成します。
ワイヤーフレームの作成
ワイヤーフレームは、Webデザインを制作する前に作成するレイアウト構成図です。
ワイヤーフレーム作成の意図は、全体構造、レイアウトを確定するためにあります。
Webデザインの根幹はレイアウトにあるからです。
このレイアウト、その他デザイン要素は最終的にHTMLとCSSコーディングにより組み上げられますので、コーディング段階でこのレイアウトが変更されたりすると、根本からやり直さなければなりません。
そのような事態を避けるため、また、その他のデザイン構成要素を効率よく配置しデザインを確定させるため、まずこのレイアウトを確定するために作成するのがワイヤーフレームです。
トップページデザイン制作の要点
新規訪問者の多くは、検索エンジンを通じてやってきますが、ページを開いた時に訪問者が取る行動は２つにひとつ。
このWebサイトを見ようと感じ、ページをスクロールしてくれるのか・・・
そのまま戻るボタンで検索結果ページに戻ってしまうのか・・・
このようなことは皆さんも経験があると思います。
せっかく数あるWebサイトやブログの中から選んでもらったにも関わらず、トップページを開いた瞬間に即離脱されてしまうようでは、Webサイトの存在価値がありませんよね。
トップページの目的と役割
トップページには3つの大きな役割があります。
- 訪問者を惹き付け、引き止める
- 会社やお店、事業、商品、サービスなどの印象を与える
- 訪問者が知りたい情報へ適切に誘導する
これらの目的と役割を果たすために、トップページでは次項で紹介する構成素材を最適化させてデザインを制作します。
人との出会いの中で大切とされる第一印象ですが、Webサイトの第一印象となるトップページデザインを最適化させることはとても大切なことです。
人との出会いは、たとえ第一印象が悪かったとしても、リカバリーすることは可能ですが、Webサイトの場合はそうはいきません。
一度離脱されたら、2度目、3度目のチャンスはまずないと考えた方がいいでしょう。
このようにWebサイトのトップデザインはクライアントの要望を十分にくみ取りつつ、最適な閲覧機能を提供するものでなければなりません。
すぐれたWebデザインはトップ企業のWebサイトが参考になります。
例えば今ご自分が所属されている業界、業種の競合他社のWebサイトを複数参照してみるなど、より多くの優れた例を見てイメージ感を掴みましょう。
Webサイトの構成要素
Webデザインの構成要素、Webサイトの印象を決定づける要素は以下の5つです。
この5つをデザインコンセプトに応じて配置していくのがWebデザインですが、ワイヤーフレームでは、まず全体レイアウト、グローバルナビゲーションや各コンテンツの配置（位置やサイズ感）を行います。
- レイアウト
- グローバルナビゲーション
- 配色
- テキスト（文字情報）
- 画像（写真、イラスト、図案など）
レイアウト、ナビゲーションについてはこちらの記事で詳しく説明していますのでご覧ください。
Webサイトの目的、デザインコンセプトに応じてこれら5つの要素を組み上げていくのがWebデザインです。
Webサイトの構成素材
Webデザインの要点、構造、構成要素が理解できたところで、次はWebサイトの構成素材について具体的にご紹介していきます。
Webサイトデザインに配置される構成素材は、全体バランスを取りながら独自にデザイン、制作していきます。
ロゴマーク
ロゴマークは企業名、ブランド・サービス名などが冠された画像素材です。
一般的にロゴマークはクライントから提供されますが、ロゴマークの制作を依頼されるケースもあります。
グローバルナビゲーション
グローバルナビゲーションはWebサイトのメインメニューとなり、Webサイトの重要コンテンツへの導線を果たします。
グローバルナビゲーションについてはこちらのページで詳しく解説しています。
メインビジュアル（キービジュアル）
メインビジュアルは、主にヘッダー、グローバルナビゲーション直下に設置される大型のバナーで、キャッチコピー＋画像・イラスト素材を合成して作成する画像素材です。
Webサイトを開いた際に最初に目に入るため、デザインの印象を左右する最も重要なパーツのひとつとなります。
Webサイトやブログのコンセプトがわかりやすいキャッチコピーで表現されていること、タイトルやコンセプトを象徴とするような写真やイラストなどのイメージ画像で瞬間に、感覚的に理解できるデザインが不可欠です。
タイトル/ラベル
タイトル/ラベルは、Webサイトコンテンツ部分の大中小見出しです。
この素材のデザインが全体デザインにメリハリをつける役割を果たします。
リンクボタン
リンクボタンは、コンテンツ部分などで下層ページへの導線として設置する素材です。
バナー
バナーは、メインビジュアルと同様、キャッチコピーや特にアピールしたいテキスト+画像・イラスト素材を合成して作成します。
バナーにリンクを設置し、リンクボタンとしての役割を果たす場合もあります。
Webサイトの尺度
Webサイトはコンピュータ画面上に表示されるものですので、サイズを図る尺度は、センチ/ミリ（cm/mm）ではなくピクセル（pixel=px)で表します。
ピクセルはコンピュータ上で画像を扱う際に主に使用される尺度ですが、Webサイトを制作する際には、実は頻繁にこのピクセルを指定しなければなりません。
例えばWebサイト全体の幅や高さ、ヘッダーやフッダー、サイドバーなどレイアウトパーツの大きさ、コンテンツ内に貼り付ける写真やイラストなどの画像の大きさなどいたるところでサイズを指定していきますので、扱い方は覚えておきましょう。
ピクセルの基本的な指定方法は、幅（width）と高さ（height）に数値を設定します。
ピクセルは技術的な尺度（用語）ではありますが、難しく考える必要はありません。
但しこのピクセルの概念をしっかり理解しておかないと、Webサイト全体のレイアウトが作れない、設置する画像が期待するデザインに対し、大きい、小さいなどの不具体が生じます。
