- 先輩デザイナーから専門用語で指示されてわからなかった。
- デザイン専門用語をきちんと説明できるようにしたい。
- Web制作に関連した用語を勉強したい。
こんな悩みを解決できる記事になっています！
この記事で紹介する「Webデザイン用語」を覚えておけば、Web制作に関わる人なら絶対に理解しておきたい専門用語を知ることができます。
用語の意味をしっかり理解しておくことでクライアントやディレクターとの意思疎通もしやすくなれば、食い違いが減りスムーズな制作を行えるようになり、デザインの質も高くなります！
記事前半ではWebサイトの種類や構成に関する用語について、後半ではデザインするときに知っておきたい用語や、サイトの動きにまつわる用語を解説するので、ぜひ参考にしてくださいね！
この記事を読み終えることで、Webデザイナー必須の用語が理解できるだけではなく、 より求められるサイト制作のスキルを身につけることができます。
Webサイトの種類
LP（ランディングページ）
商品やサービスの訴求を行う縦長の１ページ完結型のサイト。最終的にはお問い合わせ、申し込み、購入などへ繋げることが目的。
コーポレートサイト
企業概要やその企業が扱うサービス・商品・採用情報などを発信するためのサイト。名刺のような役割をするサイト。
プロモーションサイト
新製品やサービスなどのアピールや、イベント告知に使うサイト。
Webサイトの構成要素
ヘッダー
ページ最上部にある、ロゴやメニューのある領域
グローバルナビゲーション
WEBサイトの全ページに共通して表示されるメニュー
（MV）メインビジュアル・（KV）キービジュアル
トップページに表示される画像。サイトの顔になる部分。
ファーストビュー
ユーザーがサイトにアクセスしたときにスクロールせずに表示される領域
パンくずリスト
ユーザーが今どこにいるのかを分かりやすく表示するWEBサイトの階層を示すリスト。
フッター
ページ最下部にある、会社情報やコピーライトなどのある領域。
ハンバーガーメニュー
ハンバーガーのような3本線のナビゲーションメニューでクリックすると隠れている情報が表示される。メニューを収納できるのでスッキリさせたいデザインで使われる。
ページネーション
ページを分割したり番号をふること。複数ページのブログや商品一覧の下に表示されることが多い。
サイトのレイアウトに関する用語
カラムレイアウト
縦方向に分割して並ぶレイアウト。２カラム、３カラム、分割しない１カラムはシングルカラム。
グリッドレイアウト
格子状に分割して並べたレイアウト。
メイソンリーレイアウト
高さがバラバラなカードを積み上げるレイアウト。ピンタレストで採用されている。
Webデザイン用語
トンマナ
トーン＆マナーの略称。ベースカラー、キーカラー（メインカラー）、アクセントカラーからなる色の雰囲気を統一するルール。
カンプ
デザインの完成イメージ。
ワイヤーフレーム
サイトのレイアウト構成を線や枠で表したもの。細かな装飾はしない。
フラットデザイン
影や質感など装飾を最小限にした無駄のないシンプルなデザイン。読み込み時間が短く動作が軽いが、見せたい箇所を目立たせられないこともある。
マテリアルデザイン
２０１４年にGoogleが提唱した、影や光沢、奥行き、質感などがあり直感的に操作できるデザイン。
UI
User Interface（ユーザーインターフェイス)の略称。ユーザーがサイトやアプリを快適に利用するためのサイトの見た目。
UX
User Experience(ユーザーエクスペリエンス)の略称。ユーザーがサイトやアプリを通じて感じる使いやすさや印象の体験。
Webサイトのギミック（動き）
ホバー・マウスオーバー
カーソルを合わせたときの動作。ユーザーの注意を引きたい箇所に使用される。
アコーディオン
楽器のアコーディオンのように開閉するメニュー。たくさんの情報をコンパクトに収納できる。Q&Aやよくある質問などでよく使われている。
カルーセルスライダー
画像や文字をスライドして表示させる。限られたスペースで複数の情報を見せることができる。
モーダルウィンドウ
ポップアップして表示するウィンドウ。エラーや警告、写真プレビューなどで使われることが多い。ページが遷移しないのですぐにそれまで見ていたページに戻ることができる。
タブ
本のしおりのように飛び出た部分をクリックすることで、ページを遷移せずに情報の表示を切り替えられる機能
パララックス
ユーザーがスクロールするとコンテンツとは別の動きや速度で背景が動作する。
追従ヘッター
最上部にあるヘッターが、ページをスクロールしても画面上部に固定されてついてくる。
まとめ
この記事では、Webデザイン制作で最低限知っておきたい用語２７選をご紹介してきました。
今回ご紹介したもの以外にもさまざまな用語がありますが、用語は正しく理解して使うことが大切です。
以前より見聞きしてきた用語でも意味を正しく理解していなかったり、時代とともに機能が変わり、新しい用語も増えていきますので定期的にチェックしておきましょう。
また、自分自身が正しく理解していても相手側が謝った認識を持っていると、互いの認識に誤差が生じてしまいます。
しっかりと正しい認識でコミュニケーションをとり、ズレを生じさせないように気をつけましょう。