NEWS & COLUMN
お知らせ・コラム
SCROLL
DESIGN
知っておくと役立つWEBデザインに関する基本用語
2022
.07.25
WEBデザインの打ち合わせでは、一般的なビジネス用語に加えて多くの専門用語が使用されます。
英語やカタカナの単語が多く、実はしっかり理解できていない方も少なくないのではないでしょうか。今回は、ホームページ制作に関わったことのある方や、これから関わる方にも知っておいていただきたいWEBデザインに関する基本用語の意味をご説明します。
【目次】
1.WEBデザインの構成段階で使用されやすい基本用語
a.UI
b.UX
c.アクセシビリティ
d.モバイルファースト
e.ワイヤーフレーム
f.デザインカンプ
2.WEBデザインの制作段階で使用されやすい基本用語
a.ファーストビュー
b.ハンバーガーメニュー
c.ヘッダー
d.フッター
e.グローバルナビゲーション
f.パンくず
g.サイトマップ
h.カラム
i.アコーディオンメニュー
j.ページネーション
3.今回のまとめ
WEBデザインの構成段階で使用されやすい基本用語
この項目では、WEBデザインの構成段階で使用されやすい基本用語を紹介いたします。
UI
「User Interface」の略称で、ユーザー(主にWEBサービスを利用する人)インターフェース(接点やつながり)は、2つのものの間での伝達方法・接続方法のことです。
WEBデザインにおけるUIでは、表示されるデザインやレイアウト、フォントなどのことを指します。デザインだけでなく、操作性や機能性などもUIに含まれます。
UX
「User Experience」の略称で、ユーザーが製品やサービスを通じて獲得できる体験を指します。「デザインがきれい」「操作方法がすぐわかった」といった表層的なことから、「窓口の対応が良かった」「他社製品より使いやすい」といった質に関わる感情的なこともUXに含まれます。
アクセシビリティ
主に利用しやすさという意味で用いられることが多いです。WEBデザインにおけるアクセシビリティとは、年齢・性別・障害の有無などに左右されることなく、さまざまな環境の中でも、必要とする情報に簡単にアクセスできることを意味します。
モバイルファースト
ユーザーの利用状況などの情報を元にWEBサイトを設計し、スマートフォンでもストレスなく利用できるデザインにすることです。
ワイヤーフレーム
WEBサイトにどのように「配置(レイアウト)」するのかを決める設計図のことです。画像やテキストなどの、コンテンツのおおまかな配置がわかるようになります。このワイヤーフレームをもとにデザインカンプが作られます。
デザインカンプ
「Design Comprehensive Layout」の略称で、WEBページの完成イメージを示すために使用します。
「カンプ」と呼ばれることもあります。色や画像などが決まっていなかったワイヤーフレームをもとに、完成をイメージして詳細までデザインを決定していきます。
WEBデザインの制作段階で使用されやすい基本用語
この項目では、WEBデザインの制作段階で使用されやすい基本用語を紹介いたします。
ファーストビュー
WEBサイトにアクセスした時に、スクロールせずに最初に表示される部分のことです。
ハンバーガーメニュー
WEBサイトにおける、ナビゲーションメニューの表示形式の一つです。横線3本のアイコンデザイン「≡」がハンバーガーに似ていることから名付けられました。このアイコンは、主にスマートフォンやタブレット端末に対応した画面の左上隅か右上隅に配置されていることが多いです。
ヘッダー
WEBサイトの上部に配置され、どのページを訪れても共通して表示される部分のことです。 一般的には、WEBサイトのメインコンテンツとなるページへのリンクや、企業ロゴ、お問い合わせに繋がる動線などが配置されています。
フッター
WEBサイトの下部に配置され、どのページを訪れても共通して表示される部分のことです。 一般的には、各ページへのリンクや企業の基本情報などが配置されています。
グローバルナビゲーション
WEBサイト内の各ページに共通して設置されるリンクの集まりを指します。 主に上部や左右部に設置され、お問合せページやサービス概要ページなどの主要ページに素早くアクセスできるように配置されています。
パンくず
WEBサイトに訪れたユーザーが、WEBサイト内のどこのページを閲覧しているか一目で分かるよう、ページ名をリンクで階層順にリスト化して表示したものです。ページの上部に表示されていることが多いです。
サイトマップ
WEBサイト内のページをまとめて表記して、リンクできるようにしてある部分です。WEBサイトを訪れたユーザーや検索エンジンに対して、サイト内の構造をひと目でわかるように配置します。SEOの観点からも、サイトマップの有無は非常に重要です。
カラム
「段組み」という意味で、WEBサイト上のレイアウトの種類のことです。1段構成のWEBサイトだと1カラム、2段構成だと2カラムといったように呼び方が変わります。
アコーディオン
指定部分をクリックしたりタップすることで、隠れている情報を表示させることができます。Q&Aのページなどの長文になりやすいページで活用されることが多いです。
ページネーション
内容量の多いコンテンツを分割して表示する時に用いられるUI要素です。
今回のまとめ
今回ご紹介した基本用語以外にも、WEB業界には数多くの専門用語があります。
WEB業界では、新しい技術が日々開発されており、トレンドが早いサイクルで変わっていきます。その変化に伴い、たくさんの新しい用語も生まれているので、最新の用語についても目を向けて新しい知識へとアップデートしていくことが重要です。