デザイナーであれば必ず知っておきたい基礎用語２０選！

デザイナーには種類がある！

デザイナーと言うと、洋服のファッションデザイナーを思い浮かべる人が多いのではないでしょうか？

デザイナーの定義は、何か物をデザインして考案したものを製品化することですから、何を作るかによって名称が変わってきます。例えば、CGを作るのであればCGデザイナー、ゲームを作るのであればゲームデザイナー、ポスターやチラシ、雑誌などを作るのであればグラフィックデザイナーといったように名称や呼び名が変わってきます。

その中でも、今回はホームページやWebサイトなどをデザインするWebデザイナーに焦点を当てていきたいと思います。Webデザイナーになるために、必ず押さえておくべき基礎用語２０個をピックアップしてみました。Ｗebデザイナーは、クライアントや他の部門の人と打合せをする機会が多い職種です。

その時に、Ｗebデザインに関する専門用語が分からないと、何をすれば良いかが分かりませんし、製作をすることもできません。以下の用語とその意味を１つ１つしっかりチェックし、どんな場面に使われるかを想定しながら、その状況を予めイメージトレーニングしておきましょう。

Webデザイナーに必要な用語とは？

①UI

UIとは、User Interface（ユーザーインターフェース）の略称です。

例えば、製品購入やサービスを受ける時に、利用者がWebサイトで調べるとします。

そのWEBサイトの見た目や使いやすさがUIなのです。

サイトのレイアウトはもちろんのこと、文字のフォントの見やすさや、メニューやボタンの操作性など、ユーザーの目に入るもの、操作するもの全体が含まれます。

②UX

UXとは、User Experience（ユーザーエクスペリエンス）の略称です。

ユーザー（お客さん）が製品を購入する場合や、サービス提供を受ける場合に、それを通じて得られ得る経験や体験を指します。

③ユーザビリティー

ユーザビリティーの意味は、UI同様、使いやすさとして使われることが多いです。

ISOの国際規格で定義されているユーザビリティーとは、「特定のユーザーが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合いを指します。

ユーザビリティーの権威とされるヤコブ＝ニールセン博士は、ＵＩのユーザビリティーは５つの特定から成る多角的な構成要素を持っていると提唱しています。

学習しやすさ、効率性、記憶しやすさ、エラー発生率、主観的満足度の５つです。

これらに注意して、ＷＥＢサイトを作成していくことが良いＵＩやＵＸを生み出してくれるのです。

④ビジュアルヒエラルキー

ビジュアルとはその名の通り「目で見るもの」、ヒエラルキーとは「階層」を指します。

私たちは見る時にあまり意識していないかもしれませんが、実はWebページのレイアウトは特定のヒエラルキーに従って製作されているのです。

サイズ、色、コントラスト、整列、繰り返し、近接性、空白、質感やスタイルなど、さまざまな箇所に工夫が凝らされています。

テキストコンテンツが少ないWebサイトではZパターン、多いWebサイトではFパターンが使用されています。

⑤ホワイトスペース

余白や空白を指します。

敢えてホワイトスペースをとることで、情報を際立たせることができたり、読みやすくするなどの効果が生まれます。

⑥ＳＥＯ

SEOとは、Search Engine Optimizationの略称です。

検索エンジン最適化を指します。

GoogleやYahoo!などの検索エンジンでキーワード検索された時に、自分のサイトが上位に表示されるようにすることです。

上位に表示されれば、質の高いユーザーからの安定してサイト流入が見込めるようになるわけなのです。

⑦コンバーション

ビジネスの向上のために、ユーザーを別のステータスに転換させることを指します。

また、ユーザーがWebサイト上で商品購入や問い合わせなどの特定の行動をすることを指します。

⑧クラウド

クラウドの正式名称は、クラウド＝コンピューティングです。

ダウンロードを行わなくても、データベース、ストレージ、アプリケーションなどのＩＴリソースを利用できるシステムを指します。

⑨ＣＭＳ

CMSとは、Contents Management Systemの略称です。

ＷＥＢサイトのコンテンツを構成しているテキスト、画像、デザイン、レイアウト情報などを一元的に保存や管理するシステムを指します。

⑩モバイルファースト

スマホに最適化され、スマホを利用する湯ユーザーが最も快適な状態になることを指します。

スマホ向けサイトは、スマホユーザー向けにどんな情報が必要なのか、機能は何かを考えて作る必要があるのです。

⑪ＳＳＬ

ＳＳＬとは、Secure Sockets Layerの略称です。

Ｗebサイトとユーザーの通信のやり取りを暗号化するためのシステムを指します。

⑫Ａ／Ｂテスト

Ａ／Ｂテストとは、バナー、広告、Ｗebサイトなどを最適化する目的で実施するテストの１つです。

コンバージョン率やクリック数がどちらの方が高いかを、パターンを２つ以上作り検証します。

⑬パンくず（リスト）

今閲覧してるページがサイト内のどの位置にあるかを階層構造で表したものです。

パンくずリストは、ユーザーの利便性向上に効果的な施策になります。

⑭カラム

カラムとは段組みをしてレイアウトを整えることを指します。

カラム作成はサイトのベースや骨組みを決める時に非常に重要になります。

⑮ナビゲーション

ユーザーが目的とするページにいかに早くたどり着けるようにするか、さまざまな工夫を凝らしたものを指します。

⑯ワイヤーフレーム

どこに何を配置するかなど、ＷＥＢページのレイアウトを決める設計図を指します。

構成の異なるページの分だけ、ワイヤーフレームは必要になります。

⑰レスポンシブWebデザイン

ユーザーの閲覧する機器の画面サイズに合わせて、デザインを最適化することを指します。

例えば、コストはかかりますが、スマホ、タブレット、パソコンなどのサイズに合わせて、別々にデザインするのが理想的です。

⑱コーティング

マークアップ言語のHTMLや、プログラミング言語のPHP、JavaScriptなどで、Ｗebサイトの表示や動作に指示を与えたり、サイトを動かすために言語を書くことを指します。

⑲デザインカンプ

クライアントに見せるデザイン案や完成見本を指します。

⑳カルーセル

写真などの複数の項目を、マウス操作やタッチ操作で左右にスライドして、真ん中に表示される項目を次々と入れ替えられることを指します。

まとめ

Ｗebデザインに関する用語は、今回挙げたのはほんの一握りで細かく分類すると、もっともっとたくさんあります。

自分の専門分野や請け負う仕事が何かによって、さらに細分化される場合もあるでしょう。

でも、まずは良く使う語、打合せ等で良く聞く語から覚えていきましょう。

また、聞いても分からない用語は、ノートやメモに書き留めておき、後で調べてみると良いですね。

実務の中でさまざまな用語を学び、Ｗebデザインを行う際に実際に使えるようにしていきましょう！