【初心者必見】WEBデザイナーが現場でよく使う用語35選（前編）

・WEB業界は用語が難しくて覚えるのが大変…
・毎日聞いたことない単語が出てくる…
・横文字多すぎ…

こんにちは、フリーランスWEBデザイナーのSHINOBUです。

IT業界には英語を略した専門用語が多く、他の業界と比べても横文字の使用頻度が高い気がします。

WEB関係の仕事に就いたばかりの人は特に、聞き慣れない用語を覚えるのにも一苦労です。
そこで、この記事では初級者WEBデザイナーが、初めに知っておきたい35個の用語を説明していきます。
前編では、まず19個の用語を見ていきます。（後編は準備中です。）

初級者の方はいくつわかるかチェックしてみてください。
脱初級者の方は、答え合わせで確認してみてください。

「 知っておきたい用語35選（前編） 」

35個の用語を解説していきますが、前編ではまず19個をお伝えしていきます。

【 デザイン周りの用語 】

1. CMYK・RGB
色の表現の仕方を意味する言葉。
CMYKは減法混色、RGBが加法混色。
難しい説明は割愛し、わかりやすく言うと、DTP（紙のデザイン）の時にはCMYKを使用し、WEBデザインではRGBを使用します。

2. ワイヤーフレーム（WF）
デザインを作る前の「骨組み」となるもの。
構成を、目に見える形で確認し、お客さんと制作側とで認識を合わせるために使います。

3. カンプ
ワイヤーフレーム以上、デザイン未満の状態のものをカンプと言います。
本番デザインほど細部まで作り込みはせず、色合いや雰囲気、レイアウトを確認できる程度に、デザインの下準備として作ります。

4. MVP
Minimum Viable Product の略。
簡単に言うと、WEBサイトやWEBサービスにおける、リリース前のβ版をMVPと言います。
最低限のデザインと機能を実装をした上で、リリース前に仮説検証・効果測定をするという目的で作られます。
「時間かけて作り込んだものの、いざリリースしたら全然ダメだった」というリスクを最小限に減らすため、まずはMVPでテストを行うという考えで作られます。

5. プロトタイプ
MVPの一つの手段です。
方法としては、次のようなものがあります。
・ 紙に手書きで再現する
・ AdobeXDやSketchなどのルーツを使って画面遷移を実現する
など。
この時点ではデザイン要素は皆無でも良くて、実際のサービスイメージが湧くような体験ができればOKです。

6. トンマナ
トーン＆マナーの略。簡単に言うと、「雰囲気」です。
デザインに一貫性を持たせるためのルールとも言えます。
例えば「可愛い系のサイトだから色は全体的にパステルピンクに統一して、フォントはポップな感じで」というような共通認識としての雰囲気を表す言葉です。

7. UI/UX
UIUXは一言でまとめられた状態でよく耳にします。
ただ意味するところはUIとUXとで明確に異なります。
UIとはユーザーインターフェースを略した言葉です。
直訳としては「ユーザーと〇〇の接点になるもの」という意味合いになります。〇〇には様々なものが入りますが、例えば「ユーザーとWEBサービスの接点」と言えばWEBサイトになります。「ユーザーとメールの接点」の場合、PCやスマホと言うこともできます。

一方でUXとは、ユーザーエクスペリエンスを略した言葉です。
意味合いは「ユーザー体験」という直訳そのものです。例えば、ユーザーがあるWEBサービスを使って「どんな体験をしたか」、またそれによって「どんな感情になったか」などを表します。

8. ベクター・ラスター
画像の形式を表す言葉です。
ベクター形式とは、数値の計算によってオブジェクトを表示するものです。特徴としては、拡大しても画像荒れを起こさないことです。

ラスター形式は、ビットマップ画像とも呼ばれ、小さな点を集めてオブジェクトを表示するものです。精密な表現に向いていますが、拡大表示すると画像荒れを起こします。

この辺りは専門的な内容で小難しいため、詳細はブログの記事にまとめていますので参考にご覧ください。

9. SVG JPG PNG
画像の種類を指します。
SVG（エスブイジー）はベクター形式で、荒れを起こさないため拡大に強い画像と言えます。WEBサイトでは、ロゴの部分で使うことが多いです。
JPG（ジェイペグ）とPNG（ピング）はラスター形式の画像です。
それぞれ使用頻度の高い形式です。PNGが特徴的で、背景を透過させることができます。
JPGは、JPEGとも書きます。

10. セリフ・サンセリフ
セリフ体とサンセリフ体は、フォントのジャンルの一つです。
セリフ（Serif）は英語で、文字の先端の装飾を指します。
サンセリフ（Sans-serif）はフランス語で、「セリフがない」という意味になります。

【 WEB制作全般の用語 】

11. レスポンシブ
正式には、レスポンシブWEBデザイン。
PC、スマホ、タブレットと、多岐にわたるデバイスごとで、それぞれのサイズに適した表示が考慮されたWEBデザイン。

12. LP（エルピー）
LP（ランディングページ、ランぺ）は、使われ方としては大きく2つあります。
1つ目としては、「縦長1枚のWEBサイト」を言い表す時によく使われます。
2つ目としては、純粋に「landing」つまり着地ページを言い表す際に使います。
LPは、集客や商品購入などのコンバージョンを目的としたページと言えます。

13. モバイルファースト
WEBサイト・サービスを作る際、スマホユーザーを優先的に考慮する考え方です。
スマホユーザーの数が圧倒的に増えているという背景を踏まえています。

14. ファーストビュー（FV）
ユーザーがサイトに訪れて、一番最初に目にする部分（主にページ最上部）を言います。
メインビジュアル（MV）や、キービジュアル（KV）、ヒーローイメージと言ったりもします。

15. カラム
カラムとは、表示画面の縦の区切りを表す言葉です。
1カラムは、サイドメニューがない1列のデザインです。
2カラムは、当サイトのようにメインコンテンツとサイドメニューの2列からなるデザインです。

16. ドメイン
たとえば私のブログのURLは、
https://shinoblog.net
になりますが、ドメインというのは
【 shinoblog.net 】
の部分になります。

ドメインはよく「インターネット上の住所」と例えられます。インターネット上の無数の情報の中から自分のサイトを見つけるためには、特定の「目印」が必要であり、その役割をドメインが担っています。

17. アナリティクス
Googleアナリティクスという、Googleが提供している無料のデータ収集ツールです。
サイトにコードを埋め込むと、訪問者数やページビュー数など、サイトに関するあらゆるデータを収集できます。

18. Chrome・IE・FireFox・Edge・Safari
Chrome（クローム）、IE（Internet Explorer、アイ・イー）、FireFox（ファイアフォックス）、Edge（エッジ）、Safari（サファリ）は、ブラウザの名前です。
これらは今もっとも使われているメインブラウザに当たります。
ブラウザとは、WEBサイトを閲覧する際のソフトで、このページもブラウザを介して閲覧されていることになります。

19. オフショア開発
オフショア開発とは、制作業務を海外の企業や、海外にある現地法人に委託するという開発方法です。
コストを抑えることを目的とし、中国やベトナム、フィリピンといった、比較的に人件費の安い国へ発注します。

「 後編に続く 」

ここまで19個の用語を説明してきましたが、これらはまだまだほんの一部です。
引き続き、後編で16個の用語を解説しますので（準備中）、参考までにご覧ください。

初めは聞きなれず覚えるのが大変かもしれません。
ただ、仕事をする中で自然に覚えていきますし、用語の意味をたくさん理解している方が話がスムーズに進むシーンがたくさんありますので、一読程度に見てみるだけで少し違ってくるかもしれません。