Webデザイン用語を徹底解説！Webデザイナーを目指す方は必見

Webデザインの用語について

IT業界に限らず、専門用語を覚えるのは大切なことであり、大変なことです。Webデザイナーも例外ではありません。これからWebデザイナーを目指している方や、Web制作系の企業へ就職する方は、Webデザインに関する専門用語を事前にきちんと覚えておくと、就職後の苦労が多少なりとも減少するでしょう。この記事では、いくつかに分類してWebデザインについて押さえておくべき用語について詳しく解説していきます。

概念に関する用語

ここでは、Webデザインの概念に関する用語を集めて解説します。

UIとは、「User Interface」の略称で、ユーザーインターフェースと呼ばれることも多いです。一般的にユーザーと製品やサービスとのインターフェースのことを指します。ここでいうユーザーとは、主にWebサービスを利用する人のことです。インターフェースとは、接点やつながりを指し示し、2つのものの間での伝達方法・接続方法のことです。

UXとは、「User Experience」の略称で、ユーザーエクスペリエンスと呼ばれることも多いです。ユーザーが製品やサービスを通じて獲得できる体験を指します。また、その体験からユーザーが抱いた感情もUXに含まれます。

アクセシビリティとは、近づきやすさやアクセスしやすさのを指し示し、主に利用しやすさという意味で用いられることが多いです。例えば、年齢・性別・障害の有無などに左右されることなく、さまざまな環境の中でも、必要とする情報に簡単にアクセスできることを意味します。

インタラクションとは、日本語では相互作用という意味で、ITの専門用語としては人とシステムとの間で能動的な情報のやり取りのことを指します。例えば、企業のホームページのボタンにカーソルを当てると、ボタンの色や大きさ変化することなどをインタラクションと呼びます。

IAとは、インフォメーション・アーキテクチャーと呼ばれることもあり、情報を整理してユーザーにわかりやすく伝えたり、ユーザーが情報を探しやすくしたりするための手法のことを指します。Webサイトを制作する際に、IAは必要不可欠とも言えます。

モバイルファーストとは、スマートフォン向けのWebサイトを優先に制作したり、公開したりすることを指します。近年では、スマートフォンやタブレットなどのスマートデバイスからのインターネットへのアクセスが増加し、PCよりもモバイル端末のほうが閲覧数が多いWebサイトも少なくありません。そのため、モバイルファーストという考え方が普及し始めました。

ビジュアルヒエラルキーとは、日本語では「視覚的階層」とも訳され、デザインの中の視覚的な情報の重み付けのことを指します。例えば、目立たせたい情報には、フォントが大きい文字や強調色を使用したり、重要度が低い情報にはフォントが小さい文字を使用したりします。

トンマナとは、Web制作においてデザインに一貫性を持たせることを指します。トンマナは広告業界でよく使用される用語であり、トーンは調子、マナーは方法・流儀を意味し、広告の雰囲気やコンセプトを統一させるという意味で使われることが多いです。コンテンツの品質を保つのが可能となり、ブランディングやSEOなどの戦略にも重要と言われています。

レイアウト・表現手法の用語

ここでは、Webデザインのレイアウト・表現手法に関する用語を集めて解説します。

ワイヤーフレームとは、Webサイトのレイアウトやコンテンツの配置を決めた設計図のことを指します。ワイヤフレームを作成する目的は、「レイアウトや機能を制作者の間で共有するため」「Webサイトの内容に関するアイデアを出したり、議論したりするため」などが挙げられます。

デザインカンプとは、ワイヤーフレームをもとに色をつけ、画像・テキストを挿入して、Webサイトの完成イメージを指します。Webサイト制作の善し悪しを決定するポイントともなるため、デザインカンプはWebデザインにおいて重要とされています。

カラムとは、Webサイトにおけるページ垂直方向の区切りを指します。1カラムの場合、サイドメニューがなく、ランディングページ（LP）に使用されることが多いです。一方、2カラムや3カラの場合、ブログや企業ホームページなどに使用されることが多いでしょう。

レスポンシブデザインとは、どのようなデバイスからでも見やすく、操作しやすいレイアウトにするための技術を指します。近年では、PC・スマートフォン・タブレットなど、ユーザーがWebページにアクセスする端末が多様化したことから、レスポンシブデザインという考え方は普及し始めました。レスポンシブデザインを導入すれば、Webサイトの運営者が管理するHTMLファイルは1つで良いため、管理効率が向上します。また、修正・更新作業も簡単に行うことが可能です。

ミニマルデザインとは、構成する要素をできる限り少なくしたデザインを指します。 シンプルなデザインテイストは、余計な要素が少ないため、メッセージ性を強く打ち出すことができるメリットがあります。

グリッドレイアウトとは、グリッドデザイン・グリッドシステムと呼ばれることもあり、それぞれの要素を格子のように並べることで、整えられた印象のデザインを作成するデザイン手法を指します。新聞・雑誌などの印刷物のレイアウトによく利用される手法ですが、Webサイトにおいても使用されることが多いデザイン手法です。

リキッドレイアウトとは、Webデザインにおいて、Webページの表示領域の幅が変更されても従来のレイアウトを維持できるようにする手法を指します。

エラスティックレイアウトとは、Webサイト制作を行う際に、横幅を定める基準を文字数にする手法を指します。リキッドレイアウトでは、表示幅を「％」を利用して指定しますが、エラスティックレイアウトでは「em」という単位を利用して指定します。エラスティックレイアウトでは、ユーザーが文字サイズを変更したときにレイアウトが崩れるのを未然に防止でき、テキストが読みやすい状態を維持でき、アクセシビリティの向上が期待できます。

パララックスデザインとは、Webサイトに立体感・遠近感など高いデザイン性をもたせるデザイン表現を指します。パララックスは「視差」とも言い、Webデザインで使用されているエフェクトの1つです。パララックスデザインを活用すれば、アピールしたい情報やコンセプトをユーザーに対して強く印象付けさせることができます。

ホワイトスペースとは、テキスト・画像などが配置されていない余白の部分を指します。ホワイトスペースの大きさ次第で、Webサイトの雰囲気や操作のしやすさが左右されることもあります。

Webデザインパーツの用語

ここでは、Webデザインパーツに関する用語を集めて解説します。

ハンバーガーメニューとは、Webサイト内の三本線のナビゲーションメニューのことで、クリックすると隠れている情報が表示される仕組みとなっています。少ないスペースで表示できるメニューなため、主にスマートフォン・タブレット用のWebサイトに使用されることが多いです。

プルダウンメニューとは、メニュー項目の下に表示されるコマンドの一覧を指します。カーソルを当てたり、クリックしたりすることによって、複数のメニュー項目を表示させることが可能です。例えば、プルダウンメニューを使用すれば、入力間違いを未然に防ぐことができます。

パンくずリストとは、Webサイトの中で現在閲覧しているページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したものを指します。一般的に、コンテンツの最上部に「〇＞〇＞〇」のような形式で区切られて記載されることが多いです。

ファーストビューとは、Webサイトを表示したときに、最初にユーザーの目に入る画面の領域を指します。ユーザーがWebサイトにアクセスした際に、興味がないと感じたユーザーは数秒でWebサイトから離れてしまうことは多いため、ファーストビューでユーザーの関心を惹きつけることがWebサイトのデザイン・レイアウトにおいて重要と言われています。

モーダルウィンドウとは、ウィンドウ内で指定された操作を完了もしくはキャンセルするまで、他のウィンドウを開くことができないウィンドウを指します。モーダルウィンドウが利用場面として「警告メッセージ」「エラーメッセージ」「ロード中」などが挙げられます。

Webデザイン用語は時代とともに変化していくため新しい知識にアップデートしよう！

これまでに、Webデザイン用語について徹底解説しました。Webデザインの用語には「概念」「レイアウト・表現手法」「Webデザインパーツ」などがありますが、他にも通常では使用しない専門用語が多くあります。また、Web業界は新しい技術が早いスピードで開発されているため、トレンドが目まぐるしく変わり、常に新しい用語が生まれています。そのため、最新の用語についても目を向けて新しい知識へとアップデートしていくことが重要です。