Webデザイン基本の”き”！基本用語とルールをわかりやすく解説
「Webデザインを始めてみたけど、何から手を付ければいいかわからない…」
「方向性は決まっているけど、 なんかしっくりこない（何が悪いのかわからない）…」
と嘆くWebデザイン初心者さんは多いと思います。
「先輩から褒めてもらう」「クライアントからOKをもらう」「ABテストで勝つ」など、デザインにおける正解は立場や目的によって変化します。
Webデザイン初心者さんにとっての正解は、自分なりのルールを決め、基本のポイントをしっかりおさえることでしょう。そうすることで初心者から一歩レベルアップしたデザイナーへと、成長していけるはずです。今回はそんな初心者さんにおすすめの効率アップにつながるルール決めと、基本のデザインのポイントをご紹介します。
「Webサイトデザインに自信がある会社に制作を頼みたい」とお考えの方は、以下のボタンからご連絡ください。Webサイト制作経験が豊富なメンバーで構成されたプライムナンバーズの制作チームが、貴社の理想のサイトづくりをサポートします。ご相談は無料ですので、いつでもお気軽にお問合せください。
目次
1.Webサイトのパーツ・エリアの名前
まずはWebサイトのパーツの名前を知ることから始めましょう。名前を知らないとデザインの参考を探すことができません。よく使われるパーツだと下記のようなものがあります。
- ヘッダー
- ナビゲーション（グローバルナビゲーション）
- ハンバーガーメニュー
- MV（メインビジュアル）・KV（キービジュアル）・ヒーローエリア
- FV（ファーストビュー）
- パンくずリスト
- サイドメニュー
- コンテンツ
- フッター
それぞれ解説します。
❶ ヘッダー
ページ最上部の横長のエリアをさします。一般的には会社ロゴやナビゲーションが入り、下層ページにも共通で使用することが一般的です。
❷ ナビゲーション（グローバルナビゲーション）
Webサイトにおけるメニュー表のようなものです。
ユーザーがサイトの色々なページを迷わずに閲覧しやすくなる重要な役割も担っています。コーポレートサイトなど、トップページの下に子ページがたくさんあるようなサイトだと、必須の機能です。
❸ ハンバーガーメニュー
役割は❷のナビゲーションと同じですが、ハンバーガーのような三本線のアイコンをクリックすると情報が表示されます。
情報を収納できるので、画面をすっきりと見せたいときにおすすめです。
❹ MV（メインビジュアル）・KV（キービジュアル）・ヒーローエリア
一般的にはヘッダー下から最初のコンテンツ上にある、会社・ブランドをイメージした写真やキャッチコピーを入れる重要なエリアのことです。
全画面写真、動画埋め込み、バナー・スライド、3Dグラフィックなど表現方法は様々でデザイナーの腕の見せどころです。
❺ FV（ファーストビュー）
Webサイトを開いたときに最初に目に入るエリア全体のことです。（FVの中にMVがあるイメージです。）
日本では1920×1080pxのディスプレイのシェア率が約14％で一番高いため、画面最上部から1080pxまでを FV（ファーストビュー）とすることが多いです。（2023年2月時点）
参考ページ：Screen Resolution Stats Japan | Statcounter Global Stats
❻ パンくずリスト
ユーザーが今どこの階層のページにいるのかが分かるナビゲーションの1つです。
一般的には❷のグローバルナビゲーションがあるので、下層ページのヘッダー下や MV（メインビジュアル）下に控えめに設置することが多いです。
❼ サイドメニュー
画面の左右どちらかに設置されるメニューエリアです。ユーザーの遷移回数の多いECサイトなどに設置することで情報が探しやすくなります。
❽ コンテンツ
Webサイトを形成するテキストや画像などの情報・要素をさします。
一般的にはヘッダー下からフッター上までのエリアに入るもの全てに当てはまるので、第三者に説明する際はコンテンツの中の情報を提示したほうが伝わりやすいと思います。
❾ フッター
ページ最下部の横長のエリアです。一般的には会社ロゴ、住所、電話番号、メニュー、お問い合わせ、コピーライトなどが入ります。
いま紹介した9つ以外にもWebサイトデザイン用語はたくさんあります。制作現場でよく使われる用語をまとめて解説した資料を作りましたので、ぜひ以下からダウンロードして使ってみてください！
Download
2.色のルール
色はWebサイトの印象を決めるとても重要な要素です。
色を決める際には以下のようなポイントがあげられます。
使用する色は3～4つに絞る。
色をたくさん使いたくなってしまうのはWebデザイナーのサガです。
しかし色を使い過ぎてしまうと、情報が散乱しユーザーに見てほしいところを見てもらえなくなってしまうかもしれません。コンセプトがカラフルやポップな場合をのぞいて、色は最低限に絞りスッキリとさせましょう。
また、絞った色の中でベースの色70％、メインの色25％、アクセントの色5％の割合で配色すると、美しく統一感のあるデザインになるといわれています。
色の意味を調べる
「白は清潔なイメージ」、「緑は安心・安全なイメージ」など、色にはそれぞれ心理的な効果を与える力があるといわれています。
特に食品系に寒色を使うと美味しくなさそうに見えるなど、マイナスな効果を生んでしまう場合があるので色が持つ意味を調べてみることをおすすめします。
最初は色見本を見る
色の方向性が決まったら、最初のうちは定義されている色見本を参考にして色を試してみると、悩む時間が短縮できるのでおすすめします。
参考ページ：WEB色見本 原色大辞典 – HTMLカラーコード
3.文字（フォント）のルール
タイトルや本文で重要な役割を担うのがフォントです。ブランドや会社の雰囲気がユーザーに伝わるかどうかは、フォントの持つイメージによって大きく変わってきます。
フォントに関するルールは以下があげられます。
メインビジュアルのタイトルのフォントは雰囲気と可読性で選ぶ
メインビジュアルのタイトルのフォントは、サイトの第一印象にかかわるのでしっかり選んでください。
「そんなことわかってるよ！」と思われるでしょうが、私も8年デザイナーをしていますがフォント選びはいまだに時間がかかります。
日本語フォントは大きく分けて4つあり、角ゴシック体・丸ゴシック体・明朝体・その他デザインフォントがあります。
たくさんのフォントがあるなかで、私は雰囲気がそのサイト（ブランド）に合っているかつユーザーが読みやすいフォントを優先して選んでいます。
しかしデザインソフト上で1つずつフォントを試すと時間がかかってしまうので、好きな文言を入れて一覧でフォントを確認できるサイトがいくつかあるのでぜひ活用してみてください。
参考ページ：Wordmark
フォントの大きさにルールを作る
特にコーポレートサイトでは、見出し、本文、注釈など、コンテンツに合わせてフォントの大きさに変化をつけて読みやすくしなければなりません。
デザインを始める前にフォントサイズを決めておくと、いちいち考える手間が省けるので効率アップにつながり、全体の統一感もでてきます。
カーニングをする
カーニングとは文字と文字の間を詰めたりあけたりして調整することです。
特にバナーや画像文字を作る際はカーニングは必須です。私も新人の頃バナーを提出した際上司から「カーニングした？」と聞かれ「へ？（なにそれ）」となった思い出があります。
「」（かぎかっこ）や句読点などをそのままにすると不自然な間があき、見栄えが悪くなってしまいますので、フォントと大きさが決まったらカーニングを絶対に行ってください。
Webサイト上のHTMLで書かれたテキストはCSSで簡単にカーニングできます。
4.余白（マージン・パディング）のルール
一般的にマージンとはコンテンツの間の余白をさし、パディングはコンテンツ内のテキストや画像などの要素とそれらを囲むエリアまでの余白をさします。
余白もフォントサイズと同様に、あらかじめルールを決めておくと、作業をスムーズに進めることができます。
ちなみに私はデザインを教えてくれていた先輩の真似をして、8の倍数で余白をとっています。理由は多くのデバイスの解像度に8の倍数が用いられており、コーディングする際にも端数が出にくくなるためです。（最近知った）
8の倍数でなくてもルールを決めることで一貫性がでるので、コーディングで都度styleを指定する手間も省けます。
5.画像やオブジェクトのサイズ・縦横比（アスペクト比）のルール
画像やオブジェクトのサイズや縦横比は地味に悩むポイントです。
「なんでこの形なの？」と、鋭いツッコミに冷や汗をかかないためにもある程度根拠を持つことをおすすめします。
横幅のサイズはグリッドで考える
ページ全体やコンテンツを格子状に分割して考えたレイアウトを、「グリッドレイアウト」と呼びます。
単に「小さめの画像」ではなく「コンテンツ幅の3分の1」とグリッドに沿って考えると画像のサイズを決めやすくなります。
1グリッドの幅を何ピクセルにするかを考えるのは非常に面倒なので、私はよく下記のサイトでグリッドの計算をしています。全体の幅とパディング（隙間）と何分割にしたいかを入力すると一瞬で計算してくれるすぐれものです。
参考ページ：Gridpx:グリッドデザイン計算ツール | Webデザイン便利ツール
縦横比（アスペクト比）はググる
私は正方形にする場合を除いて、画像の縦横比は黄金比を参考にしています。
黄金比がしっくりこなければ白銀比にしてみたり……。下記サイトでは美しいとされている比率のテンプレがいくつか用意されているので、横幅のサイズが決まったら試してみてください。
参考ページ：METALLIC RATIO ／ 貴金属比 [黄金比・白銀比などを計算]
ただし全て同じ比率だと画面が単調になり、ユーザーも飽きてしまう可能性があるので、バランスを見て比率を変えて遊び心を加えることをおすすめします。
基本とルールで脱初心者！
上記で述べた基本的なスキルと最低限のルールで、作業効率もアップし土台がしっかりしたデザインができるようになると思います。
もっと基本スキルをマスターしたい・デザインを改善するヒントがほしいというかたは、下記のような書籍を参考にするのもよいでしょう。
どちらも初心者さんが目で見てわかりやすく、事例をもとに優しく解説してくれています。
だんだんと基本に慣れてきたら自分らしさやオリジナリティをたくさん追加し、唯一無二のWebデザインができるようスキルアップを目指し頑張っていきましょう！
