ノンデザイナー必見！よく使うWebデザイン用語をやさしく解説
Webデザイナー・ディレクターにカタカナのデザイン専門用語を使われ、何を言ってるかよくわからないけど、とりあえず肯定をしていませんか？その場で質問できれば良いのですが、質問できない場合もあると思います。
当記事では基本的なWebデザイン用語を、図を交えてやさしく解説します。意思疎通のできないままプロジェクトが進んでしまい、修正によるもったいない工数・費用を生まないためにも、正しい用語を使って相手にわかりやすく伝えることが大切です。
また、Webデザイナー初心者さんにもとっつきやすい内容になっているので参考にしてみてください。
「とりあえず用語集だけ欲しい！」という方は、以下のボタンからダウンロードページに移動できます。
Download
「Webサイトデザインのことがよくわかってるデザイナーに制作を依頼したいなあ…」とお考えの方は、以下のボタンからご連絡ください。企業公式サイトやLP、広告バナーなど、Webデザイン全般をおまかせいただけます。バナー1枚からでもご依頼可能です。ご相談は無料でお受けいたしますので、お気軽にお問合せください！
Webページの構成に関する用語
Webサイトはたくさんのパーツで構成されています。
ここでは特に使用頻度の高いモノをご紹介します。
❶ ヘッダー
ページ最上部の横長のエリアをさします。一般的には会社ロゴやナビゲーションが入り、下層ページにも共通で使用することが一般的です。
❷ ナビゲーション（グローバルナビゲーション）
Webサイトにおけるメニュー表のようなものです。
ユーザーがサイトの色々なページを迷わずに閲覧しやすくなる重要な役割も担っています。コーポレートサイトなど、トップページの下に子ページがたくさんあるようなサイトだと、必須の機能です。
❸ ハンバーガーメニュー
役割は❷のナビゲーションと同じですが、ハンバーガーのような三本線のアイコンをクリックすると情報が表示されます。
情報を収納できるので、画面をすっきりと見せたいときにおすすめです。
❹ MV（メインビジュアル）・KV（キービジュアル）・ヒーローエリア
一般的にはヘッダー下から最初のコンテンツ上にある、会社・ブランドをイメージした写真やキャッチコピーを入れる重要なエリアのことです。
全画面写真、動画埋め込み、バナー・スライド、3Dグラフィックなど表現方法は様々でデザイナーの腕の見せどころです。
❺ FV（ファーストビュー）
Webサイトを開いたときに最初に目に入るエリア全体のことです。（FVの中にMVがあるイメージです。）
日本では1920×1080pxのディスプレイのシェア率が約14％で一番高いため、画面最上部から1080pxまでをFV（ファーストビュー）とすることが多いです。（2023年2月時点）
❻ パンくずリスト
ユーザーが今どこの階層のページにいるのかが分かるナビゲーションの1つです。
一般的には❷のグローバルナビゲーションがあるので、下層ページのヘッダー下や MV（メインビジュアル）下に控えめに設置することが多いです。
❼ サイドメニュー
画面の左右どちらかに設置されるメニューエリアです。ユーザーの遷移回数の多いECサイトなどに設置することで情報が探しやすくなります。
❽ コンテンツ
Webサイトを形成するテキストや画像などの情報・要素をさします。
一般的にはヘッダー下からフッター上までのエリアに入るもの全てに当てはまるので、第三者に説明する際はコンテンツの中の情報を提示したほうが伝わりやすいと思います。
❾ フッター
ページ最下部の横長のエリアです。一般的には会社ロゴ、住所、電話番号、メニュー、お問い合わせ、コピーライトなどが入ります。
レイアウトに関する用語
レイアウトとは一言でいうと「配置」です。
レイアウトによってWebサイトの見え方や伝わりやすさが大きく変わってきます。
カラムレイアウト
Webデザインにおけるカラムレイアウトとは、コンテンツを縦方向に分割して配置することです。
分割しない場合は1カラム（シングルカラム）と呼ばれています。
グリッドレイアウト
ページ全体またはコンテンツを格子状に分割して配置することです。
商品を一遍に見せたり、同レベルの情報がたくさんある場合に適しています。
メイソンリーレイアウト
高さが不規則なカードを積み上げるようなレイアウトです。Pinterestがまさにメイソンリーレイアウトの1つです。バランスを整えるのが難しいかもしれませんが、グリッドレイアウトでは少し物足りない、アクセントが欲しい場合におすすめです。
Webデザインに関する用語
ここからはWeb制作には欠かせないデザインに関係する用語をご紹介します。
マージン
一般的にはコンテンツの間の余白のことです。
パディングと区別がつきにくいですが、下記図の通り「マージン＝コンテンツの外側」のようなイメージです。
パディング
一般的にはコンテンツ内のテキストや画像などの要素とそれらを囲むエリアまでの余白のことです。
フォント
「書体」または文字そのもののことです。日本語フォントは大きく分けて4つあり、角ゴシック体・丸ゴシック体・明朝体・その他デザインフォントがあります。
h1（エイチワン）
ページ内で一番重要な見出しです。その次に重要な見出しをh2、h3、h4、h5…と数字が大きくなるにつれ重要度は下がります。
アール
長方形などの図形の角の丸みのことで「角丸」とも呼ばれます。
角が丸いことで柔らかく優しい印象を与え、他のデザイン要素との調和が取りやすいためボタンなどによく使用されます。
サムネイル
商品の一覧ページなどに使用される、イメージを縮小表示した画像のことです。一度にたくさんの情報をユーザーに伝えることができます。
ベタ（ベタ塗り）
グラデーションや質感がない1つの単色で塗られた面のことです。シンプルで視認性が高く、クリーンな印象を与えます。
トンマナ
トーン（tone）＆マナー（manner）の略称です。
Webデザイナーから「既存パンフレットとトンマナを合わせてデザインしました」と言われたら「既存パンフレットと雰囲気を合わせて統一感のあるデザインしました」ということになります。
コントラスト
明度や鮮やかさ、色相の差のことです。文字などの大きさに差をつける際にも使われます。
あしらい
見出しや画像に添える装飾のことです。また、ボタンや吹き出しなど、そのものに細かいデザインがほどこされていることをいいます。
カーニング
文字の間隔を詰めたりあけたりしてバランスをとることです。間隔を均一にすることで読みやすさと美しさが向上します。
カンプ
「Comprehensive Layout（カンプリヘンシブ・レイアウト）」の略称で、デザインの完成イメージのことです。
フラットデザイン
影や質感が少ないシンプルで平面的なデザインをさします。
無駄がなくスッキリとした印象を与えますが、情報の重要度がわかりにくくなることや、派手さや視覚的なエフェクトがないことで、人によっては「手抜き感」を感じられる場合があります。
マテリアルデザイン
2014年にGoogleが提唱した、影や光沢など奥行きがある、直感的に操作しやすいデザインをさします。
AndroidやChromeなどGoogleの製品で広く採用されているため、ユーザーが親しみやすいデザインです。しかしどれも同じような見た目になりやすいため、オリジナリティをどう出すかがポイントになります。
レスポンシブデザイン
PC、タブレット、スマートフォンなどユーザーの使用する媒体に応じて最適化された見た目で表示されるデザインのことです。
複数のURLを持たず、同じコンテンツを異なる画面サイズに対応させるため、SEO対策の強化にもつながるとされています。
UX
「User Experience（ユーザーエクスペリエンス）」の略称で、ユーザーがWebサイトの利用を通じて得た感覚や感情、経験など、体験したすべてのことをさします。
UI
「User Interface（ユーザーインターフェース）」の略称で、Webサイトにおいては画面上でユーザーが操作する部分すべてのことをさします。
ギミック（動き）に関する用語
Webサイトではデザイン面・UI面で効果的な動きをつけることができます。
視覚的魅力を向上させることができ、ユーザーの強い印象を与えることもできます。
マウスオーバー・ホバー
ボタンやリンクなどのコンテンツにマウスのカーソルを乗せたときに起こる動きのことです。
UXの観点から、人は動きのあるものに興味を示す傾向があるとされているので、積極的に実装することをおすすめします。
アコーディオン
クリック（タップ）で要素を表示・非表示の選択ができるUI要素の1つです。
長いテキストなどもコンパクトにまとめることができ、ユーザーが興味を持った場合のみ表示させることができるので「FAQ」や「お客様の声」などでよく使用されます。
カルーセル・スライド
複数のコンテンツ（テキスト、画像、動画など）を1つのスペースでスクロールして切り換える表示方法です。
モーダルウィンドウ
もともと見ている画面の上に表示される小さい画面のようなものです。
一般的には、ユーザーがモーダルウィンドウを閉じるまで、ウィンドウ外のコンテンツは動かないように設定します。
警告メッセージや重要なお知らせなどで使用されることが多いです。
タブ
ニュース一覧のカテゴリーなど、並列で見せたいコンテンツを、すべて表示せずボタンで切り換えて表示する方法です。
画面のスペースを節約でき、ユーザーも別ページに移動する手間が省けます。
しかし、タブが多すぎるとコンテンツ幅にもよりますが、ひとつひとつのタブが小さくなり読みにくくなるため、個人的には2～5つくらいまでが見やすいと感じます。
ラジオボタン
ユーザーに複数の選択肢から1つだけ選ばせたいときに使用するHTMLのinput要素の1つです。
チェックボックス
ユーザーに複数の選択肢から1つ以上選ばせたいときに使用するHTMLのinput要素の1つです。
規約の同意など1つだけチェックボックスを置く場合もあります。
パララックス
ユーザーがスクロールすると、背景とコンテンツが同時に動かず、時間差で動くことで奥行きを出す手法のことです。
追従ヘッダー
ユーザーが画面を下にスクロールしても、上部に固定されてついてくるヘッダーのことです。
ユーザーが閲覧しているコンテンツの表示領域を狭くしてしまうため、元のヘッダーより高さを縮めたり、ユーザーがページの下から上に戻る動作をしたときのみヘッダーを表示させるなど工夫が必要です。
ドロップダウン、プルダウン
クリック（タップ）やマウスオーバーすると新しい選択肢が表示される手法の1つです。
ナビゲーションに下層ページへのリンクを設置するために使用されることが多いです。
良いWebサイトをつくるためには良いコミュニケーションを！
今回はノンデザイナーに向けたWebデザインでよく使用される専門用語をご紹介しました。
Web制作には避けて通れないカタカナ語がたくさんあるので、少しづつインプットし制作チームと円滑なコミュニケーションを築き、最高のWebサイトを作っていきましょう。
今回紹介したWebデザイン用語を、PDFにまとめました。以下のリンクからダウンロードできますので、ぜひご利用ください！
