このページでは、これからはじめてWEBサイトのデザインをする方や、効果の出やすいWEBサイトをデザインしたい方向けに、WEBデザイン時に気をつけなければならないポイントをお伝えします。
僕はWEB制作事業に約10年ほど携わってきました。
具体的には、WEBディレクション兼WEBコーダーとして活動してきました。
そのときの経験から事例を踏まえて具体的にお伝えします。
WEBデザイン制作時の注意点
さっそくですが、WEBデザインをする際に注意するポイントは下記のとおりです。
- スマートフォンで閲覧されることを前提にする
- 使用する書体（フォント）に注意する
- 画像にするものとテキストで表示するものを明確にする
- コンテンツ幅（解像度）を意識する
- 読みやすい文字サイズにする
- 文字サイズや行間、余白などは基準を決める
- ボタンやバナーのコントラストに差をつける
既に意識している項目がありましたら、読み飛ばして気になるポイントだけ読んで頂ければと思います。
スマートフォンで閲覧されることを前提にする
WEBサイトをデザインする際は、スマートフォンで閲覧されることを最優先で考えなければなりません。
その理由は「Googleがサイトの順位付けをする際にスマートフォンのページを優先的に評価するため」です。
専門用語にモバイルファーストという言葉がありますが、この言葉を常に意識することをおすすめします。
モバイルファーストの考えは、ざっくりですが「スマートフォン用のサイトから制作する」というものです。
その上でWEBデザインをする際は、まずはスマートフォン用ページをデザインし、次にタブレット用ページ、そしてPC用ページという小から大の流れで制作していきます。
上記の作業の流れは100%正しいわけではありませんが作業効率にも関わってくるため、これからデザインをはじめる方は作業の進め方の１つとして参考にして頂ければと思います。
使用する書体（フォント）に注意する
WEBサイト上で使用できるフォントは、パソコンで利用できるフォントと比べるととても少なくなります。
最近ではWEBフォントが充実してきましたが、まだまだ利用できるフォントは多くありません。
またフォントの種類によっては、月額費用が発生したり気軽に使うことが難しいです。
そのため、WEBデザインを行う際は使用するフォントに注意が必要です。
ちなみにAndroid端末では標準で明朝体のフォントが表示されない（ゴシック体に置き換わる）ので、僕はよくGoogleフォントの「Noto Serif JP」をWEBフォントとして利用してます。
画像にするものとテキストで表示するものを決める
WEBデザインに関わらず、デザイン制作物にイラストや画像を使用することが多いと思います。
そこで前述のフォントの種類の話とも関係することなのですが、「デザインした”コンテンツ部品”はWEB上でのどのように利用するのか？」をデザインする段階で明確に決めておく必要があります。
特にWEBブラウザで表現できないフォントが使用されている場合などは、画像部品として扱う必要があります。
逆に文章などは閲覧する端末によって文字サイズを読みやすくする必要があるので、画像ではなくテキストとしてコーディングする必要があります。
コンテンツ幅（解像度）を意識する
WEBサイトには印刷物とは違い、表示エリアの制限がありません。
つまり縦や横のサイズは自由に利用することができます。
しかし、WEBサイトを閲覧する際に上下左右方向バラバラにコンテンツが配置されていると見づらくて大変です。というより、見てもらえないでしょう。
そのため、WEBサイトをデザインする際は予めコンテンツ幅を決めます。
例えば、下記のとおりです。
コンテンツ幅を予め決めておくことで、サイト全体で統一感がでて見やすくなります。
またコンテンツ幅を予め決めておくことでコーディング作業の効率化にもつながります。
読みやすい文字サイズにする
WEBページ上で文章を読む際に、まれに小さすぎて読みづらい時ってありませんか？
特に文字が小さすぎる画像コンテンツを多く見かけます。
ページが閲覧しづらいとせっかく訪問してきた人が、ページを閉じてしまう恐れがあります。
なので、デザインする際は、フォントサイズに注意することをおすすめします。
ちなみに僕が目安としているフォントサイズは下記のとおりです。
| タグの種類 | スマホ時 | PC時 |
|---|---|---|
| H2 | 22〜26pxpx | 24〜28px |
| H3 | 18〜22px | 18〜22px |
| p | 16px〜 | 12px〜16px |
基本的にスマホのときは最低でも16pxは確保したほうが見やすくなります。
文字サイズや行間、余白などは基準を決める
意外にできていない（難しい）のがWEBサイト全体での、文字サイズ、行間、余白の統一です。
文字サイズについては予め基準を決めればいいだけですので問題ないです。
それ以外の行間や余白などについてですが、WEBデザイナーは自身の感覚で各コンテンツ毎に調整してしまうことがあります。
とくに商業デザインの経験が豊富な方ほど、WEBサイトのデザインを制作した際に統一感が無いことが多かったです。
これは見やすさにも関わるのはもちろん、デザイン制作、そしてコーディング作業にも大きく影響します。
そのためWEBデザインを行う際は、可能な限りサイト全体で「文字サイズ、行間、余白」を統一させることをおすすめします。
ここで注意ですが、後述するボタンやバナーなどの雰囲気まで統一するのはNGです。
ボタンやバナーのコントラストに差をつける
WEBページを見ているときに、動きのあるバナーやボタンを見たことはありませんか？
ボタンやバナーなどのように訪問者に気づいてもらい、何かしら行動してほしい要素は目立つようにデザインします。
成果の出づらいパターンは「サイト全体のデザインに合わせて、違和感がなく溶け込むような見た目のボタンやバナーにしてしまうこと」です。
やり過ぎには注意が必要ですが、目立たないより目立つほうが良いです。
以上がWEBサイトのデザインをする際に注意する７つのポイントになります。
WEBサイトで成果が出ない要因はデザイン以外にも様々ありますが、成果がでなくて困っていたり、はじめてWEBサイトをデザインするデザインナーさんの参考になればと思います。
コメント