Webデザインの基本。デザインのルールや目的について紹介

サイト制作

【初心者向け】Webデザインの基本。デザインの目的やルールについて紹介

Webデザインの目的

Webデザインの目的は、Webサイトの目的・企画を達成しやすくするためにビジュアルでユーザーにアプローチすることです。ターゲット(サイト閲覧者)を意識し、対象が感じる「見やすさ、伝わりやすさ、印象、理解など」を高めます。

Webサイトの目的

では、Webデザインが補助するWebサイトの目的はどのようなものがあるでしょうか?

「認知の拡大・印象を変えたい・見栄えを良くしたい・読みやすくしたい」など他にもありますが、やはり最終着地は売上の拡大です。信用や印象のためにという目的もありますが、それも信用や印象が売上に影響を及ぼすという判断からです。それらを踏まえたうえで、デザインの良し悪しについて

デザインの良し悪し

Webデザインの目的で話した『ターゲット(サイト閲覧者)を意識し、対象が感じる「見やすさ、伝わりやすさ、印象、理解など」を高めることができたか?』これに尽きると思います。「いいな!購入しようかな!」「わかりやすい!他にも何か知りたい情報あるかな!」など次への行動に繋げる事が重要です。

良いデザイン

  • 保育園のサイトを見て、信頼できる安心できる印象を受けて見学会を問い合わせた。
  • 動物園のサイトを見て、どんな動物がいて、特別な楽しみを知って訪問した。
  • コスメのサイトを見て、世界観が理想にあっていて試してみたい気持ちになってトライアルを購入した。

悪いデザイン

  • 50代以上を対象としているWebサイトなのに、文字が小さく見にくい。
  • 旅行のサイトなのに暗い印象の色使いをしていて、楽しい旅をイメージしにくい。
  • ネットショップなのに気になる細部のディティールなどの写真が無く購入に踏み切れない。

Webデザインに必要な習慣と経験と知識

最適なデザインをするために、他のWebデザインを見る

場面にあった、良いデザイン・最適なデザインをするためにまずは「見る」という行為が大切になります。

「見る」という行為は、ただ単に眺めるということではありません。デザインの背景にどのような意図や思いがあり、このデザインや構成にしているのか、スペースは何故この大きさなのか、この文字サイズは読みやすい、この色の組み合わせはキレイなどを考えながら見ることが重要です。

サイト閲覧をする際はビジュアルや業界から見たいジャンルを選択しやすい、まとめサイトやピンタレストなどがおすすめです。

人気のWebデザインまとめサイト

コーディングに関する知識

コーディング(マークアップ)は、デザインをWebサイトとしてインターネットで表示するために構築することを言います。「私はWebデザインがしたいからコーディングの知識は要らない!」という考えの方も、コーディングの知識を蓄えることによって、デザイン表現の可否を判断できたり、コーディング担当への実装相談ができるようになったりします。

この判断ができることと、相談ができることが業務をスムーズに進めるためには重要な要素です。例えば、良いデザインを作ることができ、クライアントの確認もクリアした後に構築段階で実装できない事がわかったとしましょう。めちゃくちゃ面倒ですよね?もし、実装できても追加の予算が必要になったり、残業続きになったらどうでしょうか?

コーディングの知識を蓄えておくと、このような面倒を回避することができます。

デザイン開始前の準備

では、実際にあなたがデザインを作成するとなった際、どのような準備をする必要があるでしょうか?

目的を確認

まずは、先述しましたWebサイトとデザインの目的を把握しましょう。

認知を拡大したいのか、印象を変えたいのか、はたまたターゲットの属性が変わったからそれに合わせてデザインを最適化したいのか。Webサイトの目的を把握し、デザインを見るターゲットはどのような人で、どのような悩みを抱えている人なのかを明確にディレクターやクライアントからヒアリングしましょう。

競合他社をチェック

競合他社をチェックすることで、市場におけるデザインのメジャーなサイズ感やあしらいを把握できます。

また、競合と比べた際の強みや弱みの把握、ワイヤーフレームにはないけど追加した方が良い構成の発見など強調すべき場所や抜け漏れの予防へ繋がります。追加した方が良い構成を発見した場合は、構成通りにデザインしてほしいディレクターと構成をより良くしてくれるアイディアを求めるディレクターがいるので、勝手にコンテンツを追加せずに一度相談しましょう。

デザインのルール・セオリー

野球やサッカーなどにもルールや戦術のセオリーがあるように、デザインにもルールやセオリーがあります。スポーツの場合はルールを守ることでゲーム性が高まったり、規律が守られます。そして実績のあるセオリーの戦術を取り入れることで得点を得る確率は高くなるでしょう。

デザインの場合も同様です。デザインはクリエイティブだから、「感性を大切にしたい」「個性を表現したい」などの強い思いもあるでしょうが、まずはルールに則って見やすく、使いやすく、わかりやすいWebサイトを作りましょう。

情報のグルーピング

グルーピングは、情報の整理整頓です。どこからどこまでが情報Aなのか、どこからどこまでが情報Bなのか。見た人がわかりやすいように情報をグループ化しましょう。余白をしっかりと確保して見やすいデザインにしましょう。

要素を揃える

要素を揃えることで見栄えが整えられ、コンテンツはグッと見やすくなります。見にくいWebサイトになってしまうと、記載している情報を理解することの難易度もあがります。

繰り返す

同じ要素は、デザインを繰り返すことで統一感を出して、見栄えを整えて見やすさを担保しましょう。

重要度を意識する

デザインをする上で、コンテンツの重要度を意識することは要素の主従関係に大きく影響します。大見出し、中見出し、小見出し、本文、補足文章、文章内のリンク、ボタンリンクなどを見てわかるようにデザインしましょう。

最後に

Webデザイン初学者向けにWebデザインの目的や考え方、意識するべきルールについても紹介しました。クリエイティブな職種の印象がありますが、基本となる考え方や作り方のルールやセオリーがあります。

基礎をしっかりと身に付け、基本ができる上で感性や個性をいい方向へ爆発させましょう。

Webサイトや営業資料に必要な数字の作り方Webサイトや営業資料に必要な数字の作り方前のページ

【Webデザイン】可読性を意識した最適なフォントサイズと行間の決め方。次のページ可読性を意識した。最適なフォントサイズと行間の決め方

関連記事

  1. Webサイトの見出しデザイン!パターンとSEO視点から考える作り方を紹介
  2. 可読性を意識した。最適なフォントサイズと行間の決め方
  3. ランディングページの基礎を紹介します
  4. Webサイトの下層ページメインビジュアルのデザインについて
  5. Webサイトに設置されているパンくずリストについて
  6. Webサイトや営業資料に必要な数字の作り方
  1. Webサイトに設置されているパンくずリストについて

    SEO

    Webサイトに設置されているパンくずリストについて
  2. Webサイトの見出しデザイン!パターンとSEO視点から考える作り方を紹介

    サイト制作

    Webデザインで使える見出しパターンとSEO視点から考える文言の作り方
  3. Webサイトや営業資料に必要な数字の作り方

    その他

    Webサイトや営業資料に必要な数字の作り方
  4. Webデザインの基本。デザインのルールや目的について紹介

    サイト制作

    【初心者向け】Webデザインの基本。デザインの目的やルールについて紹介
  5. Web制作業界の労働環境と残業についての話

    その他

    Web制作業界の労働環境と残業についての話
PAGE TOP