WEBデザイン・サイト用語50選｜何この言葉…をスッキリ解決

WEBデザイナーを目指して勉強している人にとって、大きな壁の1つがWEB業界特有の専門用語です。

どのような業界でもそうですが、WEB業界にも専門用語が多くあります。

この記事では、WEB制作の現場で使われている専門用語について、使われる場面ごとに分けて解説します。

ここで紹介されている用語をひととおり覚えておけば、すぐにWEBデザイナーの仕事を始めたとしても会話の内容が理解できるようになるでしょう。

これからWEBデザイナーを目指しているあなた、既に知っている用語があったとしても確認の意味を込めてすべてチェックしておくとよいでしょう。

＼ 14364人にセミナーをして分かった！／

顧客やWEBディレクターとの会話で出てくるWEBデザインの専門用語

最初に、WEBデザイナーとは仕事内容の調整をおこなうことになる、顧客やWEBディレクターとの会話でよく使われる専門用語について紹介します。

仕事内容に関わる話題なのに、用語がわからなくて理解できないということがないように、しっかりと確認しておきましょう。

SEO

SEOは”Search Engine Optimization”の略称です。

日本語では「検索エンジン最適化」と訳されます。

Googleの検索エンジンで、自社のサイトが検索結果の上位に表示されるようにサイトの構成や内容などを調整することです。

WEBサイトは、どれほど見栄えや質のよいものを作ったとしても、見てもらうことができなければ意味がありません。

検索結果で上位表示させることができれば、自社の提供しているブランドや商品などが検索したユーザーの目に触れやすくなります。

検索結果は、Googleが検索したキーワードに対して、「ユーザーにとって価値のあるサイト」を上位に表示させる仕組みとなっています。

つまり、検索ユーザーが求める情報を掲載していると判断されることが重要です。

各企業の担当者はさまざまな手法を用いて、ユーザーが求めている情報の分析をおこない、サイトの構成やコンテンツを見直して、検索結果の上位に表示されるように努力しています。

コンバージョン

コンバージョン（conversion）は、インターネット業界では、ユーザーがホームページにアクセスしてきて、最終的に起こした行動のことを意味しています。

コンバージョンを省略して、CVと呼ばれることもあります。

ユーザーが起こす行動には、以下のような行為が含まれます。

資料請求
お問合せ
製品購入
会員登録

WEBサイトには、ユーザーに閲覧してもらうだけでなく、上記のような最終的な目標を設定しています。

ユーザーを効率よくコンバージョンに導くためにホームページの改善をおこなうことを改善の指標とすることができます。

ページビュー

ページビュー（Page View）は、WEBサイト内の特定のページが閲覧された回数を表す指標です。

制作したWEBページがどの程度アクセスされているかを知ることができます。

A/Bテスト

WEBサイトの改善には、必ずこうしなければいけないというような定石は存在しません。

改善策には複数のパターンが考えられることも出てきます。

このような場合、AパターンとBパターンでどちらのほうが改善効果が得られるか、実際に表示させてみて比べてみる検証方法のことです。

UI（ユーザーインタフェース）

UIは”User Interface（ユーザーインタフェース）”の略称です。

ユーザーインタフェースは、ユーザーが見るWEBサイトの外観のことを指しています。

ユーザーインタフェースが優れていると、ユーザーが見やすいようにコンテンツが配置され、操作しやすいように入力欄やボタンが用意されているものです。

UX（ユーザーエクスペリエンス）

UXは”User Experience（ユーザーエクスペリエンス）”の略称です。

ユーザーがホームページを見ることによって得られるExperience（体験）や抱く感情を総合した言葉として使用されます。

WEBサイトの操作感やコンバージョンまでの流れがスムーズに購入できるか、文字は見やすいかなどの観点はすべてUXに含まれます。

レスポンシブWEBデザイン

レスポンシブWEBデザイン（Responsive Web Design）は、あらゆるデバイスに対してデザインが最適化されたホームページを作る手法のことを指します。

パソコンとタブレットやスマートフォンでは、表示する画面の大きさや解像度がことなるため、どれか1つに合わせたレイアウトにすると、他のデバイスでは見にくくくなることが予想されます。

しかし、CSSを調整して、画面の大きさによってデザインやレイアウトを変更することで、どのデバイスでも見やすい表示にすることができます。

アクセシビリティ

アクセシビリティ（accessibility）は、近づきやすさやアクセスのしやすさの指標です。

WEBサイトでは、高齢者や体に不自由のあるかたにも、支障なく容易に利用できるように設計されていることを表す指標として使われています。

日本では、日本工業規格（JIS）が定める統一のガイドラインが公開されています。

参考：「JIS X 8341-3:2010 関連文書」 https://waic.jp/guideline/jis-x-8341-3_2010/

多くの公共機関や企業がガイドラインに準拠するようWEBサイトの改善をおこない、アクセシビリティの改善に努めています。

その他にも、サイト内の音声読み上げ機能の導入や、文字や画像の表示サイズを変更するなど、さまざまな取り組みが公開されています。

プライオリティ

「優先すること」や「優先権」という意味を持つpriorityという英単語です。

WEB制作の現場では、重要度という意味の単語して用いられます。

「この2つの要素のプライオリティはどちらが高い？」のように、WEBデザインの要素に重要度をつけて、表示順序の変更や掲載するかどうかの判断基準にしたりします。

この他に、やるべきことが複数ある場合の優先順位という英単語本来の意味で使用されるケースもありますので注意して使用しましょう。

ユーザビリティ

ユーザビリティ（usability）は、WEBサイトの使用しやすさという意味です。

WEBサイトのユーザーが満足して利用できているかを表しています。

ポートフォリオ

ポートフォリオはWEBデザイナーの作品集のことです。

過去に担当したデザインを見てもらえるようにまとめ、顧客に実績や力量を見てもらうための資料とします。

サイトマップ

サイトマップは、ホームページのどこにどのようなコンテンツがあるかを一覧に表したもので、本の目次のような役割を果たすページです。

ホームページと同様にHTMLで記載される場合もありますが、検索エンジンが読み取ることに特化させた形式で保管されることもあります。

モバイルファースト

従来、WEBサイトはパソコンを使って表示させることが多かったため、パソコンで表示する構成を設計してからモバイル端末で表示する内容を決定することが主流でした。

しかし、近年はスマートフォンの普及率が急速に伸びてきており、モバイル端末を中心に表示内容を設計するケースが増えてきました。

このように、モバイル端末を中心としたWEBサイトの設計おこなうことをモバイルファーストと呼びます。

ユーザー中心設計

WEBデザインを設計するための手法の1つです。

デザインを制作する過程で、作成途中のデザインをユーザーの視点に立って見直し、改善点を見つけ出します。

そして、見つけた改善点を設計に反映させることで、WEBデザインをよりよいものにしていきます。

WEBデザイナー同士の会話で出てくる専門用語

続いては、仕事をおこなううえで仲間となるWEBデザイナー同士の会話で使用される専門用語について解説します。

ただし、整理しても覚える用語が多くなってしまうため、使われる場面によってまとめて確認できるようにしました。

WEBデザイン制作で使用する専門用語

まずはWEBデザイン制作に関連する話題で使用される用語です。

WEBデザインの基本的な考え方に関わる用語が多くなりますので、しっかりと確認するようにしましょう。

ワイヤーフレーム

WEBデザインを設計するための手法の1つです。

デザインを制作する過程で、作成途中のデザインをユーザーの視点に立って見直し、改善点を見つけ出します。

そして、見つけた改善点を設計に反映させることで、WEBデザインをよりよいものにしていきます。

デザインカンプ

WEBサイトの制作開始前に、顧客に渡して確認してもらうための完成見本のことです。

ワイヤーフレームの段階では骨組みだけしか記載されていないのに対し、デザインカンプでは具体的なテキストや画像をあてはめ、より詳細なイメージを伝えることができます。

ファーストビュー

ファーストビューは、ユーザーがホームページを開いたときに、最初に目に入る画面に表示される範囲のことです。

ホームページの第一印象を決める重要な要素になるため、特別な名前が付いています。

初見で印象が良くないと、ページを閉じるなどユーザーが離脱する原因につながる可能性があるため、ファーストビューでユーザーの興味を引くことが重要になります。

フロントエンド

ホームページのなかでも、ユーザーの画面に表示され、操作に利用される要素のことを指します。

フロントエンドを操作することによって、ユーザーからは見えないところでデータを保管したり、入力された内容を加工して別のシステムに引き渡すなどの処理をおこなうシステムのことを、”バックエンド”と呼びます。

LP（ランディングページ）

LPは、Landing Page（ランディングページ）の略称です。

検索エンジンで検索した結果や、オンライン広告などを経由してユーザーがアクセスしてくるページのことです。

特に、WEBデザインの世界では、商品などの広告をおこなうために準備される、1ページで完結する縦長のWEBページのことを指します。

LPの特徴はユーザーをコンバージョンに結びつけることに特化していることです。

ユーザーが商品に興味を持たせ、コンバージョンにつなげるアクションを起こしてもらうことを最優先に考えてWEBデザインを制作します。

CTA

CTAは（Call To Action）の略称です。

LPを表示したユーザーをコンバージョンに導くために誘導をおこなうことを意味しています。

たとえば、ホームページのなかにある、「お問合せ」や「購入はこちら」のように、ユーザーにクリックを促すボタンをCTAボタンと呼びます。

SNS

SNSはSocial Network Service（ソーシャルネットワークサービス）の略称です。

TwitterやFacebookのように、ユーザー同士のコミュニケーションをおこなうサービスのことを指します。

コンテンツ

コンテンツはホームページの内容をあらわす用語です。

特に、WEBデザインの分野では、WEBサイトの単純な内容だけではなく、「情報の中身」という意味で使われます。

WEBサイトの情報の中身は、掲載される文章や画像、動画などの要素だけでなく、その表現方法などをすべて含めます。

コーディング

HTMLやCSSと呼ばれるホームページを記述するための言語を使用して、WEBデザインをWEBブラウザで表示できるように組み立てることです。

また、コーディングを専門におこなう作業者をコーダーと呼びます。

カーニング・トラッキング・文字詰め

WEBデザインで使用する文字と文字の間隔を詰めたり、広げたりして見た目を調整することを指します。

カーニングおよびトラッキングは、文字の右側の余白を調整することで、文字と文字の間隔を調整します。

カーニングは1文字ずつ個別に間隔を調整することができるのに対し、トラッキングはテキスト単位で選択した文字を一括で調整できます。

これに対し、文字詰めは、文字の前後の余白を調整して文字間隔を調整します。

WEBフォント

WEBフォントは、インターネットを通じて公開されているフォントを読み込んで、WEBサイトに表示することができる機能と、そのフォント自体の総称です。

WEBデザイナー自身のデバイスに登録されていないフォントでも、公開されているフォントを直接読み込んで使用することができるため、どのデバイスでも同じフォントを使用しているように見せることができます。

マージン・パディング

WEBサイトの余白のことです。

WEBサイト上のすべての要素には、その表示領域と余白が存在しています。

要素の表示領域の外側の余白をマージン、表示領域の内側に余白を取る場合はパディングを使用します。

レイアウト

WEBサイトに含まれる情報を的確にユーザーに伝えるため、コンテンツの配置順序や視覚効果について、検討する際に参考にするデザインのパターンの総称です。

ミニマルデザイン・フラットデザイン

WEBデザインの考え方のなかでも、装飾を最小限に抑えたシンプルなレイアウトと色鮮やかな色を使ったデザインの考え方のことです。

近年のトレンドになっているデザインで、使用する要素が少なくなるため、表示速度が速くなりやすい特徴があります。

マテリアルデザイン

マテリアルデザインはGoogleが提唱したデザインの手法です。

マテリアル（material）は直訳すると「物質的な」という意味があります。

デザインの各要素に影や奥行き感が出るような装飾をおこない、ユーザーが直観的に操作しやすく、ストレスの少ないWEBサイトの提供を目指しています。

カラムレイアウト

「カラム」とは、ホームページの中の縦方向の区切りのことです。

ホームページの表示スペースを縦方向に区切ってから、テキストや画像などの要素を配置していくデザインのパターンをカラムレイアウトと呼びます。

グリッドレイアウト

グリッド（grid）は、格子状や碁盤目という意味を持った英単語です。

ホームページの表示スペースを格子状の枠で分割し、テキストや画像などの要素を配置していくデザインのパターンをグリッドレイアウトと呼びます。

リキッドレイアウト

リキッドレイアウトは、表示するデバイスの横幅に合わせて、画面全体が伸縮するように設定をおこなうデザインパターンのことを指します。

たとえば、パソコンとスマートフォンでは、表示する画面の大きさが異なりますが、画像を拡大・縮小して表示したり、画面をスクロールして表示させることで、見た目が変わらないように設定をおこないます。

フレキシブルレイアウト

フレキシブルレイアウトは、リキッドレイアウトと似たデザインパターンです。

リキッドレイアウトでは、表示するデバイスの横幅だけを基準にしていましたが、フレキシブルレイアウトでは表示する横幅の最大値と最小値が設定されています。

このため、パソコンの大きなディスプレイなどでは、画面の左右に大きな余白が表示されます。

エラスティックレイアウト

エラスティックレイアウトは、表示スペースの横幅を、文字数を基準に考えるデザインパターンのことを指します。

どのようなデバイスで表示しても、1行に表示される文字数が同じになるように、ホームページの横幅の設定をemという単位で指定するのが特徴です。

1emは、文字のサイズを基準として、1個分の長さを表しています。

色相環

デザインのなかでも重要な要素である色みのことを色相と呼びます。

コンピュータ上に色を表示するときには、赤・緑・青の基準となる3つの色を混ぜ合わせ、それぞれの割合を変えることですべての色が表現されています。

色相環は色相を円状に並べて表示した画像のことです。

WEBページに表示する色の組み合わせを考えるときの参考に利用されます。

コントラスト

WEBデザインにおけるコントラストは、色や大きさの対比のことを指します。

「デザインのなかでも強調したい要素は、その周りにある背景や画像と色のコントラストを高くして強調ましょう」というような使い方をします。

ピクセル（px）・DPI

ディスプレイに表示されている画像を拡大していくと、色のついたたくさんの点（ドット）が集まって表示されていることがわかります。

この色のついた1つ1つのドットのことをピクセルと呼びます。

アルファベットでpxと記載されます。

DPIはディスプレイの解像度と呼ばれる長さの単位です。

Dots per Inchi（ドットパーインチ）の略で、1インチ（約2.54cm）のなかに、どれだけのドットが含まれているかを表しています。

たとえば、500dpiで、200px × 200pxの画像があるとすると、画像の大きさは約1cm×1cmになります。

計算の補足：
500dpi = 2.54cm ÷ 500dpi = 約0.005cm
200px = 0.005cm × 200px = 1cm

WEBページの構成要素に関連する専門用語

続いて、WEBデザインのなかで使用する、WEBページの構成要素に関連する用語をご紹介します。

WEBデザイナー同士の会話では、頭のなかにイメージしていることを抽象的な表現で伝えるケースも少なくありません。

細かな表現についてもしっかりと理解することが、相手の伝えたいことを正確に理解するうえで重要になるでしょう。

ヘッダー

WEBページの最上部にある、サイト内で共通の表示項目です。

サイトロゴやキャッチコピー、運営者への連絡先などが記載されています。

フッター

WEBページの最下部にある、サイト内で共通の表示項目です。

記事の著作権に関する表示（コピーライト）が記載されることが多い項目です。

ナビゲーション

サイト内に存在する各ページのメニューを表示する項目です。

ナビゲーションから各ページへのリンクが付与されており、ユーザーは必要なページを探して表示させます。

サイドバー

画面の右側か左側にある、メニューやバナー画像などを配置するための領域です。

ハンバーガーメニュー

スマートフォンなどのモバイル端末でWEBサイトを表示したときに、タップすることでナビゲーションが表示されるタイプのメニューです。

三本の横線が手に並んだような画像が使われており、見た目がハンバーガーのような形をしていることから、ハンバーガーメニューと呼ばれています。

プルダウンメニュー

スマートフォンなどのモバイル端末でWEBサイトを表示したときに、タップするとタップした位置の下側にメニューが展開されるタイプのメニューです。

アコーディオンメニュー

WEBサイトのメニュー表示のなかでも、大項目をクリックすると中項目が展開され、もう一度クリックすると展開した中項目が閉じるというように、開閉可能なタイプのメニューです。

パンくずリスト

WEBサイトの規模が大きくなると、コンテンツの種類などによって分類をおこなうケースが多くなります。

このような場合、ユーザーがどの記事を見ているのか視覚的にわかりやすいように準備するのがパンくずリストもしくはパンくずと呼ばれるリストです。

WEBページの上部に、以下のように分類を表示します。

カラム

ホームページの中の縦方向の区切りのことです。

WEBページをメインのコンテンツとサイドバーの2カラムに分割したレイアウトが良く使われています。

バナー

バナー（banner）は直訳すると「旗」や「横断幕」という意味を持っています。

広告や宣伝のために使用されるケースが多く、ユーザーの目につきやすいデザインのバナーを掲載して、商品の購入ページなどへのリンクへユーザーを誘導します。

ラジオボタン

WEBサイト上で、ユーザーに入力してもらうための入力フォームの1つです。

複数の選択肢の中から、1つだけを選択して欲しい場合に利用します。

常に選択肢がすべて表示されているため、複数の項目を比較する設問に向いています。

セレクトボックス

WEBサイト上で、ユーザーに入力してもらうための入力フォームの1つです。

複数の選択肢の中から、1つだけを選択してほしい場合に利用します。

ラジオボタンとは異なり、入力個所をクリックするとリスト形式で選択肢が表示されるようになっています。

日付や性別など、検討する必要がない項目を選択する設問に向いています。

チェックボックス

WEBサイト上で、ユーザーに入力してもらうための入力フォームの1つです。

複数の設問に対し、1つ1つを確認してチェックして欲しい場合に利用します。

「はい」と「いいえ」で回答できるアンケートなどに向いています。

まとめ

最後まで読み進めていただき、ありがとうございます。

本記事では、WEBデザイナーを目指すあなたが、仕事をはじめたときに会話に困らないよう、基本的な専門用語に絞って解説しました。

WEBデザイナーの勉強を始めたばかりのかたは、専門的な用語の多さに戸惑ったのではないでしょうか。

しかし、本記事で紹介した50個の用語さえ覚えておけば、基本的な用語はひととおり網羅できますので、WEBデザイナーの仲間や顧客と仕事の話をすることになっても自信をもって望むことができるでしょう。

関係者との意思疎通が円滑に進められるようになれば、作成したいデザインのイメージを正確に知ることができ、ご自身の作品の品質向上にもつながります。

変化の激しいWEB業界のなかで取り残されないように、基本的な用語についてしっかりと理解しておくとよいでしょう。

こちらの記事もおすすめです。