今回はWebデザイナーがWebサイトを作る上で、必ず知っておきたい基礎知識についてです。
Webデザインにはセンスだけではなく知識も必要です。基礎を固めることで、より良いWebデザインができるようになりましょう。
レイアウトの基礎知識
まずはレイアウトの基礎知識です。
Webサイトには1カラム、2カラム、3カラム、グリッドレイアウトなどのレイアウトがあります。
サイトの目的やタイプによって、適したレイアウトは異なります。
ページ全体のレイアウト
1カラム
最近ではシンプルな1カラムのデザインが増えています。
1カラムのメリットは視線が中央に集まるので、閲覧者に見てもらいたいコンテンツが明確な場合有効なレイアウトです。
例えば、閲覧者に特定の商品を購入して欲しい、申し込みや会員登録してもらいたい時に使われます（ランディングページ）。
また、左右に要素がないので、画面いっぱいに要素を広げることができます。
インパクトのある画像を画面いっぱいに見せたい
カラム数を切り替える必要がないので、レスポンシブデザインの実装が楽になります。
コンテンツに集中しやすいというメリットがありますが、縦に長くなるのでコンテンツが多くなるとスクロールが多くなってしまうというデメリットもあります。
1カラムの例
参考サイト：https://www.softbank.jp/
2カラム
2カラムのレイアウトは主にブログやECサイトなどに利用されます。
ユーザーにサイト内の複数ページを見てもらいたい場合に有効なレイアウトです。
サイドなどにカテゴリーなどのメニューを配置することで、ユーザーが迷わないようにします。
2カラムの例
参考サイト：http://www.livedoor.com/
3カラム
3カラムはECサイトでよく使われるレイアウトです。ファーストビューで多くの情報を見せることができます。
一度にたくさんのコンテンツを見せることで、サイトを回遊したくなるワクワク感を与えることができます。
例えば、アパレルのECサイトに訪れた時たくさんの商品が並ぶとワクワクしますね。
商品数が多いECサイトに向いています。
参考サイト：http://zozo.jp/
グリッドレイアウト
要素を格子状にレイアウトするのがグリッドレイアウトです。
画像を一覧で見せるのに効果的です。一度に多くの要素を見せることができます。
配置の自由度が高く、オシャレなサイトにはよく使われています。
デメリットとして、要素のサイズが均一で情報量も多いので、特定のページに誘導させたい場合には向いていません。
参考サイト：https://www.fujiya-peko.co.jp/countrymaam/
コンテンツのレイアウト
ここでは、コンテンツの配置などについて解説します。
グループ化（近接）
関連している要素同士を近づけ、他のグループとの間に距離を置きます。
この画像の左は余白が均一なため、見出しと文章の関わりが分かりづらいです。
右のように、見出しと対応する本文を近づけて他の文章と遠ざけることにより、関係性がわかりやすく見やすくなります。
端を揃える（整列）
端が揃っていないと、気持ちの悪い感じがします。基本中の基本ですが、まずは徹底してそろえることから始めてみましょう。
同じデザイン・配置を繰り返す（反復）
デザインを繰り返すことによるメリットはいくつかあります。
- 全体として統一感が出る
- 閲覧者がまだ見ていないコンテンツもある程度予想できる
- HTMLやCSSが実装しやすい
- システム化しやすい
例えば、以下のサイトを見て下さい。これは食べログが運営しているメディアです。
よく見ると、「見出し」「説明」「口コミ」（「補足」）「店舗情報」という規則で構成されているのが分かります。閲覧者は同じパターンが繰り返していることに気がつき、店舗情報などがどこに書かれているのか予想することができるのです。
同じデザインの繰り返しであれば、CSSを共通化したりシステムで自動生成にすることもできます。
Webデザインにおいて、繰り返しというのはとてもメリットがあります。
ここまでの内容は、この本に詳しく載っています。
要素間の距離を均一に
各要素同士の間隔は均一にしましょう。
各要素との距離がまちまちだと、雑で美しくありませんね。
同じ距離を保つことで、整理された美しいデザインになります。
タイポグラフィー
文字の扱いを変えるだけで、Webサイトの雰囲気も変化します。そしてサイトの読みやすさを左右します（可読性）。
ここではタイポグラフィーについての説明を行います。ただし、HTMLやCSSで表現できる（一般的に表現されるであろう）内容に絞っています。
フォント
デザインによって適したフォントは異なり、コンセプトに合ったフォントを選びましょう。
英字フォントの種類
- セリフ
- サンセリフ
- スラブ
- スクリプト
日本語フォントの種類
- ゴシック体
- 明朝体
- ポップ体
多くのWebサイトで使われるフォント
- メイリオ（Windows）
- ヒラギノ角ゴシック（Mac）
- 游ゴシック
この他にも、Google Fontsにある「Noto Sans CJK JP」を使うサイトも増えています。「Noto Sans CJK JP」は読みやすく綺麗なフォントですが、PCにインストールされていないので、読み込みに少し時間がかかります。
一般的なフォントの使い方
サンセリフとゴシック体を使っているサイトがほとんどです。この二つが相性が良く、クセがないので馴染みやすいのが特徴です。
和テイストなデザインでは明朝体がマッチします。
高級感を出すためにセリフ体を使うこともあります。
また、楽しい雰囲気を出すために手書き風のフォントを利用することもあります。
フォント選びのポイント
使用するフォントは絞る
フォントはWebサイトの印象を左右します。使用するフォントが多すぎると、全体的に統一感のないデザインになってしまいます。
長い文章はオーソドックスなフォントを使用する
長い文章には、オーソドックスなフォントを使用しましょう。たとえば、メイリオやヒラギノ角ゴ、游ゴシックなどです。
これらのフォントは、クセが弱く可読性に優れています。
逆にクセの強いフォントは可読性に劣り、見慣れていないため文章に集中しづらくなります。
そのようなクセのあるフォントは、サイトのタイトルであったりアクセントであったり、限られた場所にだけ使用するべきです。
Webデザインと画像ではタイポグラフィーの扱いが異なる
バナーやキービジュアルなどの画像の中にあるテキストと、HTMLやCSSを使ってサイト内に表示させるテキストではタイポグラフィーの扱いが異なります。
いくつかの違いを紹介していきます。
Webサイトでは文字の細かいサイズ指定やカーニングは行わない
バナーを作ったことがある人なら分かると思いますが、バナーでは文字のサイズを細かく変えて、重要な部分だけ強調します。
この画像のような細かい文字サイズの指定を、HTMLやCSSで実装することはほとんどありません。
また、この画像では日付やカタカナの文字間を調整しています（カーニング）。HTMLを使ってこのようなカーニングを行うこともほとんどありません。
Webサイトでは改行の位置が変化する
画像は改行の位置が決まっていますが、Webサイト内のテキストでは改行位置が決まっていない場合がほとんどです。
レスポンシブデザインではデバイスのサイズによって、改行の位置は変化します。また、ブログのようなサイトではタイトルや本文の文字数やテキストはページによってまちまちです。
使用できるフォントが限られている
画像に入るテキストには、PCにインストールできればどんなフォントでも利用できます。
一方、Webサイトで利用できるフォントというのは限られています。パソコンにデフォルトで入っているフォント、もしくはWebフォントです。
Webフォントといえば、Google Fontsが有名ですね。日本語なら「Noto Sans Japanese」がGoogle Fontsにありますね。これらはファイルを読み込んでCSSを記述するだけで利用できます。
他にもモリサワなど有料でWebフォントを販売している会社もあります。
それ以外のフォントは、Web上で表示することができません。
ブラウザ・デバイスによってフォントが異なる
画像であれば、どのブラウザやデバイスで見てもフォントが変わることがありません。画像サイズの違いはあるかもしれませんが。
Webサイトの表示される文字フォントというのは、ブラウザやデバイスによって異なります。
例えば、San FransiscoというフォントはiPhoneやMacで見ることができますが、WindowsやAndroidで見ることができません。
ですから、以下のように端末に応じたフォントを細かく設定する必要があるのです。
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}タイポグラフィーについては、以下の書籍がおすすめです。
配色
お次は、配色の基礎知識です。
メインカラー、ベースカラー、アクセントカラー
まず、サイト全体に対して、メインカラー、ベースカラー、アクセントカラーを決めます。
たとえば、以下のようなサイトがあったとします。
この画像でいえば、ページのほとんどを占める「ホワイト」が「ベースカラー」となります。
そして、水色が多くの場所で使われており、これを「メインカラー」といいます。
「get started」ボタンの色が「アクセントカラー」です。
ベースカラーとメインカラーでもそれなりのデザインになりますが、アクセントカラーを入れるとよりグッと印象が変化します。
青とオレンジは補色の関係にあり色味の差が大きいので、より目立つようになります。
色の明るさ、彩度を合わせる
画像の一番上の色は彩度が高く、明度は中間にしています。このような色はほとんど使われません。色が強すぎて、調和が取れないからです。
彩度を抑えていくと、色同士の雰囲気が近づき、それぞれの組み合わせたに調和が生まれます。
以下のサイトは、色味が近いカラーを複数組み合わせた例です。
色を複数使用していますが、色味を併せているので統一感が生まれます。
いくつかのカラーを使う時は、このように色味（彩度や明度）を合わせる様にしましょう。
まとめ
ここに書いていることを頭に入れておけば、Webデザインの初心者から少し進歩すると思います。
とはいえWebサイトをデザインするには、抑えておくべきことがたくさんあります。ここで紹介したのはほんの一部で、覚えることはまだまだあります。
その奥の深さに尻込みするのではなく、探究するのを楽しんで欲しいと思います。
他にもこんな記事があります。
全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG
WEBデザインの勉強におすすめの書籍、入門書の紹介 | SHIROMAG
