デザイナーの方は、ディレクターやエンジニア、マーケターの方々など、複数人で制作を行なっている方が多いかと思います。
制作関係者との意思疎通が円滑に進められるようになれば、作成したいデザインのイメージを正確に知ることができ、ご自身の作品の品質向上にも繋がります。
今回の記事では現役デザイナーが実務でよく使うWebデザイン用語集をご紹介します！
実務でよく使うWebデザイン用語
アイキャッチ
Webページやブログ等の記事において、トップ部分に表示される、人目を引く画像のことを言います。Webページを表示したとき、特にブログで多用され、各記事の先頭部分で記事の内容を示唆するような画像が使われることが多いです。
あしらい
デザインの装飾やディテールのことです。
デザインにおいて「注目させる」「演出する」「強調する」「情報整理」といった効果があります。
カラム
Web上でのレイアウト、段組みを意味します。
Webサイトの表示スペースを縦方向に区切って、テキストや画像などの要素を配置していくデザインのパターンをカラムレイアウトと呼びます。
カーニング
文字と文字との間隔（余白）を調整することです。
文字間の余白を広げたり詰めたりする事で、文章を読みやすく、文字列の見栄えを美しくするために行われます。
サイトマップ
ユーザーや検索エンジンに、Webサイト内でどこにどのようなコンテンツがあるかを一覧に表したもので、本の目次のような役割を果たすものです。
サイドバー
画面の右側か左側にある、メニューやバナー画像などを配置する領域のことです。
セレクトボックス
WEBサイト上で、ユーザーに入力してもらうための入力フォームの1つで、複数の選択肢の中から、1つを選択する入力フォームです。
ラジオボタンと似ていますが、入力個所をクリックするとリスト形式で選択肢が表示されるようになります。
日付や性別など、検討する必要がない項目を選択する設問に向いているものになります。
チェックボックス
WEBサイト上で、ユーザーに入力してもらうための入力フォームの1つで、複数の設問に対し、1つ1つを確認してチェックさせていく入力フォームです。
「はい」や「いいえ」で回答できる設問に向いているものになります。
デザインカンプ
デザインの完成イメージのことです。
ワイヤーフレームの段階では、骨組みのみしか記載されていないのに対し、デザインカンプでは具体的なテキストや画像をあてはめ、より詳細なイメージを伝えることが可能になります。
トラッキング
選択したテキスト全体の文字間隔を調整することです。
カーニングとは違い、テキスト単位で選択した文字を一括で調整することが可能です。
トンマナ
トーン（tone）＆マナー（manner）の略で、 制作物のコンセプトや雰囲気など、デザインに一貫性をもたせることを指します。
デザインの色味や雰囲気、フォント等に一貫性を持たせることで、ユーザーに与える印象を統一させることが可能です。
ナビゲーション
Webサイト内に存在する各ページのリンクをまとめているメニューのことです。
グローバルナビゲーション、ローカルナビゲーション、ダイナミックナビゲーションと言われるものがあります。
ハンバーガーメニュー
スマートフォン等でWEBサイトを表示したときに、クリックすることでナビゲーションが表示されるタイプのメニューのことです。
主にスマートフォンのUIデザインで使われ、三本線で表現されていることが多いです。
パソコンと比べて画面サイズに制限があるため、グローバルナビゲーションなどをハンバーガーメニューのなかに隠すことで、情報を整理しています。
パンくず
WEBサイトを訪れたユーザーが、現在サイト内のどのページにいるのかを視覚的にわかりやすくした誘導表示のことです。
Webサイトのトップページからアクセスした際に「トップページ＞メニュー＞コンテンツ」のように、ページがどこの階層に位置しているかを表示するものになります。
ファーストビュー
WEBページにアクセスした際に、スクロールせずに最初に画面に表示される領域のことです。
ファーストビューを見て離脱してしまうユーザーもいるため、ユーザーの興味を引くために最も重要な部分になります。
フッター
WEBサイト全体の共通要素であり、WEBサイトの最下部に記載する領域のことです。
運営者情報や著作権表示などの情報をまとめて記載することが多いです。
フラットデザイン
デザインスタイルの1つで、立体感や光沢感などの視覚効果を無くし、シンプルで平面的な概念を用いたデザインのことです。
フラットデザインは、凹凸のありなしだけでなく、スッキリとした印象を与えることも可能です。
プルダウンメニュー
入力したい箇所を選択した際に、ドロップダウンリストの項目から選んでデータを入力することができるタイプのメニューのことです。
プロトタイプ
デザイン制作に加えて、実際のWebサイトやアプリのように操作することができる機能のことです。
デザイン制作段階から動作を検証することができるため、デザインや動作性のイメージを明確に付けることが可能になります。
ヘッダー
WEBサイト全体の共通要素であり、WEBサイトの最上部に記載する領域のことです。
サイトロゴやキャッチコピー、会社概要などの情報をまとめて記載することが多いです。
ホバー
画像やボタンなどのリンクにカーソルを合わせた際に、アニメーションが起こる表現のことです。
他にも、マウスオーバーやマウスホバー等の言い方があります。
ホワイトスペース
何も存在しない余白のスペースのことです。
このホワイトスペースをうまく使えるようになると、見た目がスッキリして、ユーザーが得たい情報をすぐに得るようにすることも可能になります。
ミニマルデザイン
デザインスタイルの1つで、装飾を最小限に抑えたシンプルなデザインのことです。
邪魔になる要素が少ないことから、メッセージ性を印象強く打ち出すことが可能です。
モックアップ
デザインのビジュアル部分の完成イメージのことです。
スワイプやアニメーション等の動的要素は実装されないので、動きがある部分は口頭での説明が必要です。
モバイルファースト
近年、スマートフォンの普及率が急速に伸びてきているユーザーの利用状況を元にスマートフォン向けに表示内容を最適化して設計するデザインのことです。
画面のサイズ、マウスやキーボードより、スワイプで操作することなどのモバイル端末を中心としたデザインで設計を行なっていきます。
モーダルウィンドウ
画面に別枠で表示されるウィンドウのことです。
指定された操作を完了、もしくはキャンセルするまで表示され続けます。
使用箇所を誤ると、ユーザーのストレスに繋がることもあるので、注意が必要です。
ラジオボタン
WEBサイト上で、ユーザーに入力してもらうための入力フォームの1つで、複数の選択肢の中から、1つのみを選択する入力フォームになります。
常に選択肢が全て表示されているため、複数の項目を比較する設問に向いているものになります。
ラフ
おおまかなイメージ画像やデザインイメージのことを意味します。
ラフ案・ラフ画ともいい、企画やデザイン案を共有する際に、完成のデザインイメージを伝えるために手描きのスケッチやイメージラフを作成することがあります。
レスポンシブデザイン
デバイス毎にデザインが最適化されたWebサイトを作ることを指します。
端末毎に表示する画面の大きさや解像度が異なるため、どれか1つに合わせたレイアウトにすると、表示のバランスが崩れてしまうため、端末毎に見やすい表示にすることがおすすめです。
ワイヤーフレーム
Webサイトの大まかなデザインやレイアウト等の骨組みを決める設計図のことです。
デザインやコーディングなどの作業に入る前に作成し、どこに画像やテキストを配置するか、具体的なイメージを書き出して、完成イメージを「見える化」する目的で作られます。
まとめ
いかがでしたか？？
現役デザイナーが実務でよく使うWebデザイン用語集について、ご紹介しました。
依頼を受ける際に抽象的なデザインをイメージされること、企画段階から関わっていくことなどあるかと思います。
制作を依頼する側と受注する側でも、認識に齟齬が生じないよう、基本のデザイン用語を正しく理解することは大切ですので、1つ1つ覚えていきましょう！
