• ブログ
  • ノンデザイナー必見!よく使うWebデザイン用語をやさしく解説
2023.03.31 更新
2023.03.31 更新

ノンデザイナー必見!よく使うWebデザイン用語をやさしく解説

Written By
N.I.

デザイナー

Webデザイナー・ディレクターにカタカナのデザイン専門用語を使われ、何を言ってるかよくわからないけど、とりあえず肯定をしていませんか?その場で質問できれば良いのですが、質問できない場合もあると思います。

当記事では基本的なWebデザイン用語を、図を交えてやさしく解説します。意思疎通のできないままプロジェクトが進んでしまい、修正によるもったいない工数・費用を生まないためにも、正しい用語を使って相手にわかりやすく伝えることが大切です。
また、Webデザイナー初心者さんにもとっつきやすい内容になっているので参考にしてみてください。

「とりあえず用語集だけ欲しい!」という方は、以下のボタンからダウンロードページに移動できます。

「Webサイトデザインのことがよくわかってるデザイナーに制作を依頼したいなあ…」とお考えの方は、以下のボタンからご連絡ください。企業公式サイトやLP、広告バナーなど、Webデザイン全般をおまかせいただけます。バナー1枚からでもご依頼可能です。ご相談は無料でお受けいたしますので、お気軽にお問合せください!

Webページの構成に関する用語

Webサイトはたくさんのパーツで構成されています。
ここでは特に使用頻度の高いモノをご紹介します。

Webページのおもにファーストビューまわりのデザインパーツを示した図
▲ここではおもにWebページのファーストビューまわりの用語を紹介します。

❶ ヘッダー

ページ最上部の横長のエリアをさします。一般的には会社ロゴやナビゲーションが入り、下層ページにも共通で使用することが一般的です。

❷ ナビゲーション(グローバルナビゲーション)

Webサイトにおけるメニュー表のようなものです。
ユーザーがサイトの色々なページを迷わずに閲覧しやすくなる重要な役割も担っています。コーポレートサイトなど、トップページの下に子ページがたくさんあるようなサイトだと、必須の機能です。

❸ ハンバーガーメニュー

役割は❷のナビゲーションと同じですが、ハンバーガーのような三本線のアイコンをクリックすると情報が表示されます。
情報を収納できるので、画面をすっきりと見せたいときにおすすめです。

❹ MV(メインビジュアル)・KV(キービジュアル)・ヒーローエリア

一般的にはヘッダー下から最初のコンテンツ上にある、会社・ブランドをイメージした写真やキャッチコピーを入れる重要なエリアのことです。
全画面写真、動画埋め込み、バナー・スライド、3Dグラフィックなど表現方法は様々でデザイナーの腕の見せどころです。

❺ FV(ファーストビュー)

Webサイトを開いたときに最初に目に入るエリア全体のことです。(FVの中にMVがあるイメージです。)
日本では1920×1080pxのディスプレイのシェア率が約14%で一番高いため、画面最上部から1080pxまでをFV(ファーストビュー)とすることが多いです。(2023年2月時点)

参考ページ:Screen Resolution Stats Japan | Statcounter Global Stats

❻ パンくずリスト

Webページのおもにコンテンツ周りのデザインパーツを図示した画像。
▲以下ではおもにページコンテンツ周りの用語を紹介します。

ユーザーが今どこの階層のページにいるのかが分かるナビゲーションの1つです。
一般的には❷のグローバルナビゲーションがあるので、下層ページのヘッダー下や MV(メインビジュアル)下に控えめに設置することが多いです。

❼ サイドメニュー

画面の左右どちらかに設置されるメニューエリアです。ユーザーの遷移回数の多いECサイトなどに設置することで情報が探しやすくなります。

❽ コンテンツ

Webサイトを形成するテキストや画像などの情報・要素をさします。
一般的にはヘッダー下からフッター上までのエリアに入るもの全てに当てはまるので、第三者に説明する際はコンテンツの中の情報を提示したほうが伝わりやすいと思います。

❾ フッター

ページ最下部の横長のエリアです。一般的には会社ロゴ、住所、電話番号、メニュー、お問い合わせ、コピーライトなどが入ります。

レイアウトに関する用語

レイアウトとは一言でいうと「配置」です。
レイアウトによってWebサイトの見え方や伝わりやすさが大きく変わってきます。

カラムレイアウト

カラムレイアウトの例
▲カラムの本数に応じて「1カラム」「2カラム」「3カラム」…と名前が変わる。

Webデザインにおけるカラムレイアウトとは、コンテンツを縦方向に分割して配置することです。
分割しない場合は1カラム(シングルカラム)と呼ばれています。

グリッドレイアウト

グリッドレイアウトの例
▲グリッドレイアウトの例

ページ全体またはコンテンツを格子状に分割して配置することです。
商品を一遍に見せたり、同レベルの情報がたくさんある場合に適しています。

メイソンリーレイアウト

メイソンリーレイアウトの例
▲メイソンリーレイアウトの例

高さが不規則なカードを積み上げるようなレイアウトです。Pinterestがまさにメイソンリーレイアウトの1つです。バランスを整えるのが難しいかもしれませんが、グリッドレイアウトでは少し物足りない、アクセントが欲しい場合におすすめです。

Webデザインに関する用語

ここからはWeb制作には欠かせないデザインに関係する用語をご紹介します。

マージン

一般的にはコンテンツの間の余白のことです。
パディングと区別がつきにくいですが、下記図の通り「マージン=コンテンツの外側」のようなイメージです。

パディング

一般的にはコンテンツ内のテキストや画像などの要素とそれらを囲むエリアまでの余白のことです。

マージンとパディングの例
▲コンテンツとコンテンツの隙間がマージン、コンテンツ内の要素の隙間がパディング。

フォント

フォントの例
▲フォントによって与えるイメージは大きく変わる。

「書体」または文字そのもののことです。日本語フォントは大きく分けて4つあり、角ゴシック体・丸ゴシック体・明朝体・その他デザインフォントがあります。

h1(エイチワン)

Hタグの例
▲H1は記事タイトル、H2は大見出し、H3は小見出しという使い方をされることが多い。

ページ内で一番重要な見出しです。その次に重要な見出しをh2、h3、h4、h5…と数字が大きくなるにつれ重要度は下がります。

アール

アールの例
▲アールの半径によって図形の印象が変わる。

長方形などの図形の角の丸みのことで「角丸」とも呼ばれます。
角が丸いことで柔らかく優しい印象を与え、他のデザイン要素との調和が取りやすいためボタンなどによく使用されます。

サムネイル

サムネイルの例
▲一般的にはリンク先ページの概要が一目でわかる画像をサムネイルにする。

商品の一覧ページなどに使用される、イメージを縮小表示した画像のことです。一度にたくさんの情報をユーザーに伝えることができます。

ベタ(ベタ塗り)

ベタ塗りとグラデーションの例
▲グラデーションよりも立体感はないが、ベタ塗りの方が強い印象を与えやすい。

グラデーションや質感がない1つの単色で塗られた面のことです。シンプルで視認性が高く、クリーンな印象を与えます。

トンマナ

トンマナの例
▲ベースカラー、キーカラー、アクセントカラーを同系色にしてトンマナを整えた例。

トーン(tone)&マナー(manner)の略称です。
Webデザイナーから「既存パンフレットとトンマナを合わせてデザインしました」と言われたら「既存パンフレットと雰囲気を合わせて統一感のあるデザインしました」ということになります。

コントラスト

明度でコントラストを付けた例
▲明度でコントラストをつけると、モノクロでも見やすい画像になる。

明度や鮮やかさ、色相の差のことです。文字などの大きさに差をつける際にも使われます。

あしらい

文字につけるあしらいの例
▲細かい部分だが、ページ全体の印象を左右することもある。

見出しや画像に添える装飾のことです。また、ボタンや吹き出しなど、そのものに細かいデザインがほどこされていることをいいます。

カーニング

カーニングの例
▲カーニングするとデザインが効いてしまりのあるイメージになる。

文字の間隔を詰めたりあけたりしてバランスをとることです。間隔を均一にすることで読みやすさと美しさが向上します。

カンプ

デザインカンプの例
▲PC版・スマホ版など、デバイスによってカンプを作り分けるのが現在は一般的。

「Comprehensive Layout(カンプリヘンシブ・レイアウト)」の略称で、デザインの完成イメージのことです。

フラットデザイン

影や質感が少ないシンプルで平面的なデザインをさします。
無駄がなくスッキリとした印象を与えますが、情報の重要度がわかりにくくなることや、派手さや視覚的なエフェクトがないことで、人によっては「手抜き感」を感じられる場合があります。

マテリアルデザイン

2014年にGoogleが提唱した、影や光沢など奥行きがある、直感的に操作しやすいデザインをさします。

参考:Material Design

AndroidやChromeなどGoogleの製品で広く採用されているため、ユーザーが親しみやすいデザインです。しかしどれも同じような見た目になりやすいため、オリジナリティをどう出すかがポイントになります。

フラットデザインとマテリアルデザインの例
▲デザインによってはボタンかどうか分かりにくいが、シンプルでレイアウトしやすい「フラットデザイン」。ボタンであることが分かりやすいが立体的な分、バランスの取り方がカギになる「マテリアルデザイン」。

レスポンシブデザイン

レスポンシブデザインの例
▲1種類のソースで、膨大な種類のデバイスすべてに対応できる。

PC、タブレット、スマートフォンなどユーザーの使用する媒体に応じて最適化された見た目で表示されるデザインのことです。
複数のURLを持たず、同じコンテンツを異なる画面サイズに対応させるため、SEO対策の強化にもつながるとされています。

UX

「User Experience(ユーザーエクスペリエンス)」の略称で、ユーザーがWebサイトの利用を通じて得た感覚や感情、経験など、体験したすべてのことをさします。

UI

「User Interface(ユーザーインターフェース)」の略称で、Webサイトにおいては画面上でユーザーが操作する部分すべてのことをさします。

UXとUIの概念を表した図
▲より良いUXを生み出すために、UIを含めたサイト全体をデザインする必要がある。

ギミック(動き)に関する用語

Webサイトではデザイン面・UI面で効果的な動きをつけることができます。
視覚的魅力を向上させることができ、ユーザーの強い印象を与えることもできます。

マウスオーバー・ホバー

ボタンやリンクなどのコンテンツにマウスのカーソルを乗せたときに起こる動きのことです。
UXの観点から、人は動きのあるものに興味を示す傾向があるとされているので、積極的に実装することをおすすめします。

マウスオーバーの例
▲ホバーのON/OFFが明らかに分かるデザインがよい。

アコーディオン

アコーディオンの例
▲クリックすると詳細な内容が表示される。

クリック(タップ)で要素を表示・非表示の選択ができるUI要素の1つです。
長いテキストなどもコンパクトにまとめることができ、ユーザーが興味を持った場合のみ表示させることができるので「FAQ」や「お客様の声」などでよく使用されます。

カルーセル・スライド

カルーセルの例
▲画像が自動で切り替わるタイプと、クリックやスワイプで切り替わるタイプがある。

複数のコンテンツ(テキスト、画像、動画など)を1つのスペースでスクロールして切り換える表示方法です。

モーダルウィンドウ

モーダルウィンドウの例
▲コンテンツが一時的に隠されるため、使いどころには注意が必要。

もともと見ている画面の上に表示される小さい画面のようなものです。
一般的には、ユーザーがモーダルウィンドウを閉じるまで、ウィンドウ外のコンテンツは動かないように設定します。
警告メッセージや重要なお知らせなどで使用されることが多いです。

タブ

タブの例
▲ページ遷移を伴わず、複数コンテンツをユーザーに提供できる。

ニュース一覧のカテゴリーなど、並列で見せたいコンテンツを、すべて表示せずボタンで切り換えて表示する方法です。
画面のスペースを節約でき、ユーザーも別ページに移動する手間が省けます。
しかし、タブが多すぎるとコンテンツ幅にもよりますが、ひとつひとつのタブが小さくなり読みにくくなるため、個人的には2~5つくらいまでが見やすいと感じます。

ラジオボタン

ラジオボタンの例
▲1個だけ選ばせたい場合はラジオボックスが適切です。

ユーザーに複数の選択肢から1つだけ選ばせたいときに使用するHTMLのinput要素の1つです。

チェックボックス

チェックボックスの例
▲チェックボックスにはさまざまな使い方があるため、ユーザーに設置意図をしっかり伝える必要があります。

ユーザーに複数の選択肢から1つ以上選ばせたいときに使用するHTMLのinput要素の1つです。
規約の同意など1つだけチェックボックスを置く場合もあります。

パララックス

パララックスの例の動画
▲前面のコンテンツと背面の画像のスクロール速度を変えることで、立体感が生まれる。

ユーザーがスクロールすると、背景とコンテンツが同時に動かず、時間差で動くことで奥行きを出す手法のことです。

追従ヘッダー

追従ヘッダーの例の動画
▲どこからでも別ページに遷移できるのが便利。

ユーザーが画面を下にスクロールしても、上部に固定されてついてくるヘッダーのことです。
ユーザーが閲覧しているコンテンツの表示領域を狭くしてしまうため、元のヘッダーより高さを縮めたり、ユーザーがページの下から上に戻る動作をしたときのみヘッダーを表示させるなど工夫が必要です。

ドロップダウン、プルダウン

ドロップダウンの例
▲ドロップダウンに含まれる要素が多すぎると、かえって不便になりがち。

クリック(タップ)やマウスオーバーすると新しい選択肢が表示される手法の1つです。
ナビゲーションに下層ページへのリンクを設置するために使用されることが多いです。

良いWebサイトをつくるためには良いコミュニケーションを!

今回はノンデザイナーに向けたWebデザインでよく使用される専門用語をご紹介しました。
Web制作には避けて通れないカタカナ語がたくさんあるので、少しづつインプットし制作チームと円滑なコミュニケーションを築き、最高のWebサイトを作っていきましょう。

今回紹介したWebデザイン用語を、PDFにまとめました。以下のリンクからダウンロードできますので、ぜひご利用ください!

Written By
N.I.

デザイナー

Webサイトから広告バナーまで、あらゆるWebデザインを一手に引き受けるマルチなデザイナー。得意なデザインは「シュッとしたコーポレート」と「ゴツゴツしたデザイン」(本人談)。1児(大きなミニチュアダックス・3歳・♂)の母でもある。