タグ: デザイン

トップページ > デザイン > ウェブサイトのデザインを行う上で知っておくべき基礎知識とは

ウェブサイトのデザインを行う上で知っておくべき基礎知識とは

[最新更新] 2022年04月29日
[初回公開] 2021年10月02日

ウェブサイトのデザインを行う際には感性のまま形にするのではなく、実際にパソコンやスマートフォンなどのディスプレイに表示する見た目の考慮と、ボタン類の押しやすさやスクロール量など操作性の考慮など、知っておくべき知識について紹介する。

1. ウェブサイトのデザインに必要な知識とスキルとは

ウェブサイトのデザインには色の使い方やフォントが与える印象といった見た目の知識と、実際にデザインしたものがパソコンやスマホなどディスプレイ上に表示するための技術的なスキルが必要になる。

見た目の知識とは、見る人にどのように内容を伝えるか、または行動させるかのアイデアを持っているか否かである。
例えば表示する内容を写真やイラストで視覚的にイメージとして伝えたい場合は文字が少なり、反対に具体的に伝えたい場合は文字の量が多くなる傾向があるのも数あるアイデアの中の一つである。

さらにウェブサイトは印刷物と異なりさまざまな機種の画面に対応させたり、ボタンやリンクを押すといった行動も伴うことから、実際にウェブサイトとして利用できる状態にできるスキル、もしくはプログラムができずとも大よその実現方法がイメージできるスキルを有しておきたい。

また、デザインというとデザイナーの個性に委ねられるイメージが大きいが、デザインする上で最低限必要なルールも存在し、それが下記となる。

2. デザインする上で考慮しておくとよい 3 つのポイント

ウェブサイトのデザインでは印刷や建造物のデザインと異なり、ディスプレイで表示される点とその画面でマウスやタップにより操作される点を考慮した上で、次の 3 つのルールをまず念頭に置いておいたほうがよい。

2-1. 配置や配色の理由が説明できること

デザインはデザイナーの感性に左右されるイメージが強いが、ウェブサイトのデザインは文字やボタンなど各パーツの配置（レイアウト）、そして利用する配色にされた理由がある。
そのためデザインする時に「なぜこの位置に配置したのか」「なぜこの色を利用したのか」と問われても説明できるようにデザインするとよい。

例えば配色において、一般的に黄色は注意を促し、赤色は注意よりも緊急度が増した危険を促すイメージがあるので「特に目を引きたいところには赤色など暖色系を用いた」といった点がデザインの理由となる。

また暖色系は脳に食欲を湧かせたり、興奮が増しやすい傾向がある。
そのため、落ち着いた雰囲気を出したい場合は黄色や赤色の暖色系は避けるといったウェブサイト全体の配色のコンセプトにもつながる。

2-2. 配置する情報をグループ化すること

人の目線はディスプレイであれば左上から右方向に移り、そこから左下に辿る傾向があるため、似たような情報が離れたところにあると情報の認識も分散して伝わりにくくなったり、記憶されにくくなってしまう。

そのため、新着やお知らせの情報は一か所に集めて配置するなど、情報をグループ化して配置したほうがよい。

2-3. 色などのガイドラインを決めること

ウェブサイトは複数のページで構成されることが多いため、ページごとに見出しの色や表の枠線がの色がが異なると情報に統一性が無くなり印象が薄くなったり、記憶されにくくなってしまう。

ウェブサイトのデザインに統一性を出すためには h1 タグや h2 タグの見出しのデザインの統一化、フォントサイズ、利用する色系統など手引きとなるガイドラインを用意しておくとよい。

3. デザインの基礎知識を身に付ける方法

デザインの基礎知識を身に付けるために、まず今ある数々のウェブサイトやデザインを見て覚えておくことである。
時には誰も考えない奇抜なアイデアが必要になることもあるが、万人受けされなければ見づらい、または使いにくいサイトになってしまうため多くのウェブサイトの事例を持ち、各ウェブサイトの良い点と悪い点が見極められるとよい。

例えば学校関連のサイトであれば受験生向け、保護者向けに情報が整理され、文章だけでは雰囲気が伝わりにくいので学生が映った構内の風景写真が多用されることが多い。

また、病院関連のサイトであればパソコンやスマホ操作に不慣れな高齢者が閲覧することを想定してマウスやタップの頻度を下げる工夫をしたり、文字を全体的に大きくするなど操作性を重視する傾向が多い。
このようにデザインはデザイナーが持つアイデアの引き出しが基礎知識となり良いデザインが生まれる。

また、ウェブサイトのデザインではレイアウト・フォント・配色の 3 つの基礎がある。
レイアウトは全てのパーツが 1 列に並べる 1 カラムか、パソコン向けに左右のどちらかまたは両方にボタン等を配置する。2・3 カラムのレイアウトの使い分けを知っておくとよい。

フォントについては若者向けで印象が柔らかくなるゴシック体と掲載内容が引き締まって固い印象を与える明朝体の使い分けが挙げられる。
配色は特に重要で、色の使い方次第では文字が読みづらくなるため色覚に障がいがある人に配慮した色の知識が必要になる。

4. デザインを実現するためのスキルを身に付けること

ウェブサイトのデザインでクライアントが満足するものができたり、誰もが考えつかなかった全く新しいものができても、それがディスプレイに表示して操作できなければ、ページへのアクセスあってもすぐに違うサイトに移動されてしまう。
そのため、デザインを実現するためのスキルとして、HTML やスタイルシート（CSS）といったウェブサイト作成に必要な技術的なスキルを身に付けておく必要がある。

また、頭に浮かんだり、手書きしたデザインはデータ化して出力しなければならないため、データ化するためにデザインができるソフトウェアの操作方法を習得する必要がある。

5. ウェブサイトデザインに必要な知識のまとめ

ウェブサイトデザインに必要な知識のまとめとしては、感性よりもデザインの理由や情報のグループ化など論理的な積み重ねでデザインされることが多い。

また、デザインするために操作するソフトウェアや実際にウェブサイトとして動作するように HTML をコーディングするスキルも求められる。

関連記事