どのような業界でも、特殊な専門用語は付きものです。
それはWeb業界においても同様で、専門用語が多く、Webデザイナーになって間もない方にとって苦労するポイントの一つであることは間違いありません。
特に、次々と新しい製品、トレンドが誕生するWeb業界では用語も新たに生まれているので、プロのデザイナーでも常にチェックしておかなければなりません。

そこで今回は、Webデザイナーなら押さえておくべきデザイン用語を20個厳選して紹介します。
すでに知っている用語でも間違って認識している場合もあるので、きちんとアウトプットできるまで理解できているかチェックしてみてください。

Webデザイナーなら押さえておくべきデザイン用語まとめ20個

1.アクセシビリティ

アクセシビリティ（accessibility）とは、アクセスのしやすさ、近づきやすさのことを言います。

Webページにおける"アクセシビリティ"はWebアクセシビリティとも呼び、高齢者・障害者・不自由のある方を含めて、誰にでも支障無くWeb情報にアクセスできること、、容易に利用できる度合いを表しています。国内では、日本工業規格（JIS）が発行するJIS X 8341-3が基準です。

アクセシビリティを高める方法には様々なものがありますが、例えば音声読み上げに配慮したコンテンツ内容にする、代替テキストを入れる、といったものです。
Webが重要な情報源となっている今、多くの人が問題なく情報を取得するためにもアクセシビリティに配慮したホームページの構築が必要となります。

2.SEO

SEO（Search Engine Optimization）とは、「検索エンジン最適化」を意味する用語です。

Google、Yahooといった検索エンジンにおいて、特定のキーワードで検索した時により上位に表示されるように対策することを言います。サーチエンジンがWebページを表示する際、それぞれ独自のアルゴリズムに従い順位を決定します。この時表示順位が上にあり露出度が高い程、ユーザーの目につきやすく流入も増えるため重要な手法です。

3.グリッドレイアウト

ホームページを作成する際のレイアウト手法の一つで、グリッドレイアウトを取り入れたホームページを「グリッドシステム」「グリッドデザイン」と言います。

グリッド（grid）には格子状、方眼状（のもの）という意味があり、画面を格子状に分割しブロックを組み合わせ、文字や画像といったコンテンツを配置していきます。元々、印刷物で利用されることの多いレイアウトでしたが、Webデザインでも幅広く使わる手法です。

各グリッド線に合わせて要素を配置することで、きっちりと整理された印象を与えることができ、秩序を生み出すことで情報が伝えやすく、規則的に見えるのがメリットです。

4.コーディング

プログラミング言語を使用し、コンピューターが処理するためのソースコード（プログラム）を作ることです。
Webデザインにおいてのコーディングは、HTML・CSS等を使ってデザインをブラウザ上に表示できるページに変換することを指します。

また、コードを記述する職種のことをコーダーと言います。

5.コンバージョン

コンバージョン（conversion）は「変換」「転換」という意味がある言葉です。

Webマーケティング分野では、ホームページや広告に訪れたユーザーが会員登録、問い合わせ、商品購入、資料請求などの行動を起こすことを言います。

また、コンバージョンを獲得した件数の割合のことをコンバージョン率と呼び、コンバージョン数・コンバージョン率をホームページ改善の一つの指標とすることができます。

6.サイトマップ

サイトマップは、ホームページ内のどこにどのようなページが存在するのかをまとめた構成図で、本で言えば目次のようなものです。

大きく分けて、サイトマップは2種類存在し、サイト利便性向上のためユーザーに向けて用意するHTMLサイトマップと、検索エンジンにページの構成を伝えるためのXMLサイトマップがあります。

7.CMS

CMS（Contents Management System）は、その名のとおり「コンテンツ管理システム」のことを言います。

通常ホームページの更新には、HTML、CSSの知識が必要のため、全くの初心者ならハードルの高い作業です。しかし、CSSを使えば大部分をシステム側が制御してくれ、画像・文字を入れるだけで専門的な知識が無くとも更新することができます。

CMSには様々なものがありますが、中でもWordPressが有名です。

8.デザインカンプ

制作前にクライアントへ渡す完成見本のことをデザインカンプ（Desing Comprehensive Layout）と言います。デザインの完成イメージを共有する目的で作成するもので、色・画像を具体的に指定しWebページの見本を作ります。

9.ナビゲーション

ホームページに訪れたユーザーが目的地まで行くのをサポートする機能のことを、ナビゲーションと言います。特に、全体的な項目を案内するものを「グローバルナビゲーション」、詳細な項目を案内するものを「ローカルナビゲーション」と呼び、ホームページ内の各ページに共通して置くのが普通です。

10.ファーストビュー

ファーストビューは、「初見」「一見」といった意味を持つ用語で、Webページへアクセスした際に一番始めに表示され、目に入る領域のことです。

ユーザーが訪れた時、初見で関心がない場合にはすぐに離脱してしまうため、ファーストビューで興味を引くことが重要となっています。様々なデバイスが普及している昨今、ファーストビューの範囲もデバイスによって異なります。

11.フラットデザイン

フラットデザインとは、質感・影・立体感といった要素をできるだけ排除し、代わりにシンプルなレイアウトと鮮やかな色使いでデザインする手法で、平面的なパーツを多く用いるのがポイントとなっています。

2012年頃から広まり、今では人気のWebデザインスタイルの一つとなりました。近年トレンドのデザインスタイルであると共に、使用画像が少ないため読み込み時間を少なくできるメリットがあります。

ただし、デザインによってはボタンの場所がわかり難くなる恐れがあり、安易に取り入れるのは危険です。

12.ホワイトスペース

ホワイトスペースは「空白」「余白」という意味の単語で、Webページ、印刷物において、文字・画像などを何も配置していない余白部分のことを言います。

「ホワイトスペース＝単なる余白」と思われがちですが、デザインを左右する重要なポイントです。適度にホワイトスペースを取り入れることで、使い勝手を向上したり、見た目を美しくしたり、上手くユーザーの視線を誘導したりすることもできます。

13.ミニマルデザイン

無駄な装飾を省き、最小限に抑えたデザインのことをミニマルデザインと言い、Webデザインはもちろん、建築、アートと幅広い分野で使われる用語です。不要な要素を削ぎ落とすことで洗練された見た目になり、ユーザーに伝えたいメッセージを明確に伝えやすくなります。

ミニマルデザインは、先にご紹介したフラットデザインと厳密には異なるものの、できるだけシンプルなデザインにするという部分では一致しています。

14.モバイルファースト

モバイルファースト（mobile first）は、ホームページ、ソフトウェアを開発する際の運営方針の一つで、2009年にルーク・ウロブルスキー氏が提唱した言葉です。

設計時にモバイル端末での使い勝手を常に優先することを指し、従来はパソコンの設計を優先し、モバイルは後付けすることも多くありましたが、近年モバイルデバイスが普及したことでモバイルファーストの考えが急速に広まりました。

15.UI

UIは、User Interface（ユーザーインターフェース）を略した言葉です。
ユーザーが見る部分、使用する部分はUIと見なすことができ、ホームページの場合であれば、ユーザーが目にする外観部分（フォント、画像、ボタン）を指します。

16.UX

UXは、ユーザーエクスペリエンス（User Experience）の略称で、UIが”外観部分”であったのに対し、UXは物・サービスによって得られる体験、抱く感情を指しています。
ホームページであれば、サイトが見やすい・商品がスムーズに購入できる・文字が見やすいといったものは全てUXに含みます。

17.ユーザビリティ

ユーザビリティ（usability）とは、ホームページの使いやすさのことを指します。

誰にでも操作でき、機能を使いこなせるようにするため、ホームページ制作時にはあらかじめユーザビリティに配慮して設計していくことが大事です。具体的なユーザビリティ向上の方法には、テキストリンクやボタンをわかりやすくする、意味が伝わりやすいアイコンにするといったものがあります。

18.リキッドレイアウト

ブラウザの横幅に応じてコンテンツ幅が変わるレイアウトのことを、リキッドレイアウト（liquid layout）と言います。このレイアウトにしておくことで、Webページの表示が変更された時でもレイアウトを維持することができ、様々な環境においてユーザビリティを損なわないように使われています。

19.レスポンシブWebデザイン

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

異なる表示デバイスに合わせて対応する単一のHTMLファイルを制作することで、どの機器でも同じ内容を表示することができ、ファイルを複数用意するのと比較して、管理・運営が楽になり更新漏れを防げるのがメリットです。

20.ワイヤーフレーム

Webページのコンテンツ、レイアウトをおおまかにまとめた構成図のことをワイヤーフレームと言い、主にレイアウトやメニュー構成の確認を目的として作成します。

この段階では、色などの細かいデザインについては考えず、ざっくりと骨組みを書き、ワイヤーフレームを作成することで、その後の作業をスムーズに進めることができます。なお、ワイヤーフレームは専門の作成ツールがある他、手書きで作ることもできます。