横文字の専門用語が飛び交うWeb業界。これだけ排他的な業界も、ある意味珍しいかもしれません。

Web制作をお願いしたのはいいけど、クリエイターの使う言葉の意味がよくわからなくてお困りのご担当者様のために、
「これだけは最低限押さえておきたい」Web制作用語を見ていきましょう。

サイトマップ

サイトマップは、出てくる場面によって意味が分かれるのですが、
Webサイトを作るための準備段階においては、「Webサイトの構成図」のようなものです。

上図のように、Webサイトを構成する各ページ（コンテンツ）を洗い出して、階層ごとに整理します。
これを関係者で共有することで、制作する上での行き違い等を減らします。

ワイヤ―フレーム

ワイヤーフレームは、簡単にいうとWebページの設計図です。
デザインの前段階で、ページにどのような要素がどのような配置で置かれるのか、図で表します。
前述のサイトマップは「サイト全体の構成図」、ワイヤーフレームは「ページごとの設計図」です。

最近では各デバイスで表示方法が変わったり、実際の閲覧環境で確認しないとイメージが湧きづらい作りのサイトも多いため、
静止図ではなくで、ブラウザ上で動きを確認できるワイヤーフレームを作成し、共有度をより高めることも増えています。

デザインカンプ

Webページデザインの完成見本、またはデザイン案です。
Webページは、コーディングという作業を通してHTMLファイル作成し、それをWebサーバにアップロードしてはじめてインターネット上に公開されます。
コーディングの工程では、デザインの調整がそう簡単ではないため、デザインカンプをクライアントと共有し、確定してからコーディングに入るのが一般的なWeb制作の流れです。
デザインカンプはIllustratorやPhotoshopなどのグラフィックソフトを使って制作します。

コーディング

コーディングとは、広義には、プログラミング言語を用いて、コンピュータに処理させるソースコードを書く作業を指します。
Webサイトを作る場合、使われる言語がいくつかあります。
まずHTMLで骨組みをし、CSSでレイアウトや装飾を、Javascriptで動きや機能を...というふうにその言語によって役割が異なります。
一般にはHTML、CSS、Javascriptはまとめて書き、目に見える部分を制御します。これを「フロントエンド」と呼ぶ場合もあります。
「フロントエンド」に対し、PHPやPython、Rubyなど、目に見えない部分のシステムを構築する言語もあり、「バックエンド」と呼ばれます。

マークアップ

マークアップとは、文書の構造をコンピュータに伝えるための手法です。
具体的に何をするかというと、文書の各要素を、それぞれ意味をもつ「タグ」という目印で囲む、ということをします。
HTMLはマークアップ言語と呼ばれ、文書構造、要素の意味をコンピュータに伝える役割を担っています。
なので、HTMLで適切なマークアップができていないと、コンピュータに文書の意味がきちんと伝わらず、検索エンジンなどの評価を受けにくい場合があります。

CMS

コンテンツ・マネージメント・システム（Contents Management System）の略です。
コンテンツを管理するシステムなのですが、最も典型的なのはブログです。
ブログは、管理画面で記事を書いたり写真をアップロードしたりしますよね。
要するに、Web制作の知識がなくても、管理画面で各種コンテンツを編集し、Webサイトを管理できるシステムのことです。
CMSをつくるためのツールはたくさん出回っていますが、WordPressが最も有名です。

レスポンシブデザイン

デスクトップパソコン、ノートパソコン、タブレット、スマートフォンなど、Webを閲覧する環境は様々で、Web制作者も対応に頭を悩ませています。
異なるデバイス、画面サイズでも快適に閲覧できるようにWebページをつくる手法が「レスポンシブデザイン」です。
レスポンシブデザインでは、画面サイズに応じて、ひとつのHTMLファイルの表示を変化させます。
そのため、たとえばPC用とスマートフォン用のサイトを別々につくるよりも、更新しやすい、同じ内容のページが作られずSEO効果が見込める、などのメリットが期待できます。

フラットデザイン

2013年頃から本格的に流行しはじめたデザイン手法です。
シンプルで余白を生かしたデザインが特長です。
それまでWebは、グラデーションやシャドウなどの質感を生かしたデザインが主流でしたが、そういう装飾を排し、より機能性を重視したフラットデザインが一気に普及しました。
上記のレスポンシブデザインとも相性がよく、現在では主流となっています。

UI

ユーザー・インターフェース（User Interface）の略です。
Webサイトやアプリを使うときに、ユーザーが視覚的に接する画面のことです。
UIデザインというと、アイコンだったり、要素の配置だったり、余白だったり、といったところです。
UIが考えぬかれていると、ユーザーがストレスなく操作し、目的の情報にたどり着きやすくなります。

UX

ユーザー・エクスペリエンス（User Experience）の略です。
Webサイトやアプリを使ったり、触ったりした時に感じる体験のことを指します。
たとえばボタンを押した時や画面をスライドしたときなんかに、ちょっとしたアニメーションがついて、気持ちよさを感じる場面なんかは、
UXがきちんと考えられている証拠です。

ランディングページ

検索や広告などのリンク元から、ジャンプしてくる着地点としてのページです。
ユーザーが何かを探して辿りつくページなので、特定のキーワードを想定し、ターゲットを絞って訴求するページに仕立てるのが一般的です。
そのため、戦略的な作りこみが必要です。

まとめ

以上、分かりづらいWeb制作用語を一部紹介いたしました。

進化がはやい業界なので「レスポンシブデザイン」や「フラットデザイン」なんかは数年後に使われているかどうか未知数ですが...

ある程度用語をつかんでおけば、Web制作者ともコミュニケーションがとりやすくなりますね。