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

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

ウェブサイトのデザインを行う際には感性のまま形にするのではなく、実際にパソコンやスマートフォンなどのディスプレイに表示されることや人の目で見たときの見やすさや字の読みやすさなど考慮すべき基礎について紹介する。

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

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

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

デザインする上で踏襲したしたほうがよいルールがあり、そのルールの基に知識とスキルで良いデザインに仕上げている。

2. デザインのルールを知る

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

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

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

例えば配色において、一般的に黄色は注意を促し、赤色は注意よりも緊急度が増した危険を促すイメージがあったり、脳に食欲や興奮が増しやすい傾向がある。
そのため、落ち着いた雰囲気を出したい場合は黄色や赤色の暖色系は避けるといった説明が成り立つ。

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

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

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

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

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

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

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

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

例えば学校関連のサイトであれば受験生向け、保護者向けに情報が整理され、文章だけでは雰囲気が伝わりにくいので学生が映った構内の風景写真が多用されることが多い。
また、病院関連のサイトであれば高齢者が閲覧することを想定してマウスやタップの頻度を下げる工夫をしたり、文字を全体的に大きくするなど操作性を重視する傾向が多い。
このようにデザインはデザイナーが持つアイデアの引き出しが基礎知識となり良いデザインが生まれる。

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

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

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

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

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

関連記事