Web業界に入ってまず苦戦するのが専門用語の多さです。これからWebデザイナーとしてお仕事をする新社会人の方は、こうした専門用語を入社前にきちんと覚えておくと良いスタートを切れるのではないでしょうか。
そこで今回は、新人のWebデザイナーが知っておきたい専門用語をご紹介します。
すでに聞いたことのある用語でも、なんとなくのニュアンスで使っていないかチェックしてみてくださいね。
概念
UI
「ユーザーインターフェース（User Interface）」の略で、ユーザーがコンピュータなどのIT・デジタル機器/システムと情報のやりとりをするための仕組みや操作感のことです。ユーザーの目に触れる部分や使用する部分はすべてUIといえます。
UX
「ユーザーエクスペリエンス（User Experience）」の略で、ユーザーがある製品・サービスを通じて得られる体験を意味します。その体験によってユーザーが抱く感情もUXに含まれます。
ユーザー中心設計
デザインの各段階で、技術優先の考えや作り手の勝手な思い込みを排除し、常にユーザの視点に立って設計を行うこと、またはそのようなデザイン哲学を指す言葉です。UXを設計する際にとても重要な考え方です。
IA（インフォメーション・アーキテクチャー）
Webサイトを構築するときの知識やデータの組織化を意味し、情報をわかりやすく伝え、受け手が情報を探しやすくするために、情報の整理や情報の設計を行うことを言います。
インタラクション
「インタラクション（Interaction）」とは、「相互作用」という意味の英単語で、ITの分野では、システムと人間との間で行われる能動的な情報のやり取りのことを意味します。例えば、Webサイト内のボタンにカーソルを当てたらボタンの色が変わるといったことをインタラクションと呼びます。
アクセシビリティ
「年齢や身体障害の有無に関係なく、どのような環境（うるさい場所や、暗い場所など）でも、誰でも必要とする情報に簡単にたどり着け、利用できること」を意味します。
モバイルファースト
「モバイルファースト」とは、サイトの機能や表示方法、操作方法を設計するときに、携帯端末などの使いやすさを優先することを指します。従来のWebデザインではPC→モバイルといった風にモバイルは後付になることが多かったですが、モバイルユーザーの急増により、このような考え方が普及しました。
ビジュアルヒエラルキー
「ビジュアルヒエラルキー」は、「視覚的階層ルール」とも言い、視覚表現による情報の重み付けのことです。例えば、重要な情報はサイズの大きい文字や目立つ色を使い、あまり重要でない情報は小さい文字や目立たない色を使う、といったことが「ビジュアルヒエラルキー」です。
トーン＆マナー
雰囲気やコンセプトに一貫性を持たせることを意味します。「トーン&マナー」はもともと広告業界用語で、「トーン（Tone）」は「調子」、「マナー（Manner）」は「方法、流儀」を意味し、広告の雰囲気を統一させようという意味で使われます。「トンマナ」と略す人もいます。
レイアウト・表現手法
ワイヤーフレーム
Webページの大まかなコンテンツやレイアウトを示した構成図のことです。主にレイアウトやメニュー構成などを決定するための下書きの役割を果たします。
デザインカンプ
ワイヤーフレームに肉付けをし、制作物の仕上がりイメージを提示するための完成見本のことで、モックアップとも言います。具体的には、実際の制作にとりかかる前にクライアントへ提出する「デザイン案」を指すことが多いです。
レスポンシブWebデザイン
「レスポンシブWebデザイン」とは、PCやタブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 レスポンシブWebデザインはデバイス毎にレイアウトを変えたHTMLファイルをいくつも用意する必要がなく、単一のHTMLファイルをCSS3で制御し、ブラウザの横幅サイズに応じてページのレイアウトを調整することができます。
ミニマルデザイン
「ミニマル（Minimal）」は「最小の」という意味の英単語で、「ミニマルデザイン」とは、余計な装飾や要素を限りなく少なくしたシンプルなデザインのことです。
グリッドレイアウト
画面やページを縦横に引いた直線で格子状に分割し、組み合わせるデザイン方式のことです。もともとは新聞や雑誌など、印刷物のレイアウトによく用いられる手法ですが、Webサイトやアプリなどにおいても主流なレイアウトデザインのひとつです。
リキッドレイアウト
「リキッドレイアウト」とは、ブラウザの横幅を変更したときにコンテンツの表示サイズも変更されるデザインのことです。リキッドレイアウトであれば、Webページの表示領域の幅が多少変更されても従来のレイアウトを維持できます。
エラスティックレイアウト
Webページを製作する際に、ページの横幅を決める基準を文字数にする手法のことです。リキッドレイアウトは表示幅を％で指定しますが、エラスティックレイアウトはemという単位で指定します。エラスティックレイアウトのメリットはユーザーが文字サイズを変更したときにレイアウト崩れを防ぐことができ、テキストが読みやすいままでアクセシビリティが向上するという点です。
カラム
Webページにおけるページ垂直方向の区切りのことを指します。１カラムはサイドメニューが無く、ランディングページなどによく用いられ、２カラムや３カラムはブログ・サイトなどによく用いられるレイアウトです。
パララックス
パララックスは別名「視差効果」とも言い、Webデザインで使われているエフェクトのひとつです。スクロールなどの動作に応じて、複数のレイヤーにある要素を異なるスピードで動かすことで、奥行きのある立体的な空間を生み出すことができます。
ホワイトスペース
文字や画像などが何も配置されていない余白部分のことです。ホワイトスペースの大きさによって、Webページの雰囲気や使いやすさが左右されます。
Webデザインパーツ
ハンバーガーメニュー
三本線のナビゲーションメニューのことです。少ないスペースで表示できるメニューなので、主にスマートフォンサイトやタブレットサイトに使われています。
プルダウンメニュー（ドロップダウンメニュー）
Webサイトなどに使われているメニューの一種で、カーソルをあてたりクリックするといった操作によって複数のメニュー項目を表示させるタイプの表示方法を指します。
ナビゲーション
Webサイトを利用するユーザーが目的のページまでたどり着けるようサポートする機能を意味します。その中でも、Webサイト内の各ページに共通して設置される、コンテンツ全体の構造を案内するためのメニューを「グローバルナビゲーション」といい、コンテンツの詳細な内容を示すメニューを「ローカルナビゲーション」と言います。
パンくずリスト
ユーザーが今Webサイト内のどの位置にいるのかを視覚的に分かりやすくするため、Webページを階層順にリストアップし、リンクを設置したリストのことを指します。通常は、コンテンツの最上部に「○○＞○○＞○○」といった形で「＞」で区切られて記載されます。
ファーストビュー
Webページを表示した時に一番最初に表示され、ユーザーの目に入る画面の領域のことです。ユーザーがWebページにアクセスしてきた際に、興味のないユーザーは数秒でサイトを離れていってしまうため、ファーストビューでいかにユーザーの心をつかむかがサイトのデザイン・レイアウトにおいて重要な要素になると言われています。
モーダルウィンドウ
操作が完了するまで親ウィンドウへの操作を受け付けなくさせるタイプのウィンドウのことで、ヘルプやアラートなどの画面に良く使用されています。
システム
CMS
「CMS」とは、「コンテンツマネジメントシステム（Content Management System）」の略で、Webサイトを管理・更新できるシステムのことです。CMSを使えば、HTMLやCSSの知識がなくても、管理画面で文章や画像を指定すれば、あらかじめ用意されたテンプレートをベースにしたWebサイトを作成することができます。代表的なものでは、WordPressなどがCMSにあたります。
クラウド
クラウドとは、「クラウドコンピューティング（cloud computing）」の略で、データを自分のコンピュータや携帯端末ではなく、インターネット上に保存する使い方やサービスのことです。例として、テキストベースのメモをクラウド上に保存できるEvernoteや、多種多様な形式のファイルを保存できるDropboxがあります。
マーケティング
コンバージョン
広告やECサイトの閲覧者が、会員登録や資料請求、商品購入といった企業の望む行動を起こすことを言います。サイトの種類によって最終的な成果として定められるものは変わるため、コンバージョンが指すものはサイトによって変わります。
A/Bテスト
異なる２パターンのWebページや広告を用意し、実際にユーザーに利用させてその効果を比較するテストのことです。製品の売り上げや特定のページへのアクセス数などを増やすことを最終目的として行います。
SEO
「SEO」は「サーチエンジンオプティマイゼーション（Search Engine Optimization）」の略で、GoogleやYahooなどの検索エンジンで特定のキーワードで検索した際に上位に表示されるための対策のことです。検索エンジンロボットが読みやすいHTMLを書いたり、情報がきちんとした階層構造をなしていることなどもSEOにおいて重要な対策のひとつになります。
まとめ
今回はWebデザインに関わる専門用語を30語ご紹介しましたが、いかがだったでしょうか？
この他にも、普段は使わないような専門用語がたくさん使われています。また、Web業界は新しい技術が開発されたりトレンドが目まぐるしく変わり、常に新しい用語が生まれているので、最新の用語もしっかりキャッチしていけると良いですね！
