WEBデザイン用語について

この記事ではWEBデザイン業界でよく使われる用語を解説していきます。

カンプ

カンプとは簡単に言えば「デザインの完成見本図」のことです。

正式名は「Design Comprehensive Layout」の略でデザインカンプと呼ばれています。

それを縮めて「カンプ」と呼ばれたり、「モックアップ」と呼ばれたりすることもありますが、意味は同じです。

カンプは完成品と同等の見た目をデザインツールであるPhotoshopやAdobe XDで制作します。

カンプを作成する目的は、【制作物の完成イメージを共有】するために作られます。

クライアントの要望を元に制作物を作りますが、言葉の説明だけでは「なんだか思っていたものと違うものができた」ということになりかねません。

ですので【百聞は一見にしかず】で、デザインカンプを作成し、確認することでクライアントは視覚情報から様々な要望を元に変更を加えることができます。

クライアントとの認識のズレがなければ製作側も安心して作業に取り掛かれます。

また、HTMLやCSSのコーディング作業をスムーズに進めるためにもカンプは必要です。

余白は何ピクセルなのか、ここの文字のサイズはどれくらいなのかはカンプを見ることで確認できるので、クライアントの要望通りのWebサイトを作成できます。

サイトマップ

サイトマップとは、サイトを制作する際に全体を俯瞰してみることができる資料で構成図とも呼ばれています。

ページの構成をツリー上に表したもので、トップページからどのようにページ同士がつながっているのかをわかりやすくしたものです。

ユーザーや検索エンジンにサイトの内容をわかりやすく伝える役割を担っています。

ワイヤー

ワイヤーとはWebページのレイアウトを決める設計図のことです。

正式名称はワイヤーフレームといって、サイトのコンテンツ等を線（ワイヤー）でどこにどのコンテンツを配置するのかを一目でわかりやすくするためのものです。

実際のデザインやコーディング等の作業に入る前に作成し、コンテンツの配置イメージを「見える」ようにすることが目的です。

絵を書く前のラフ画のようなものだと思っていただけるとわかりやすいかと思います。

ワイヤーフレームの目的は、Webサイトのレイアウトを決めることです。

余計なデザインがないのでWebサイトとしての機能、使いやすさを意識したレイアウトにすることができます。

上で紹介したデザインカンプと間違えられることもありますが、カンプは「完成形のデザイン」に対してワイヤーは「設計図」になりますのでまったくの別物です。

UI

UIとはユーザーインターフェイス（User Interface）の略称で、一般的にユーザーとプロダクトをつなぐ接点を意味する言葉です。

Webサイトにおいては、サービスのデザイン性や操作性をさします。

美しい、かっこいいデザインというだけではユーザーの心は掴めません。

ユーザーの心を掴むためには快適な操作性や視認性に優れたレイアウト、知りたい情報にするぐたどり着ける検索性能の高さなど、ユーザーが「使いやすい」と感じられるサービスである必要があります。

UX

UXとはユーザーエクスペリエンス（User Experience）の略称で、「モノやサービスによって得られる体験や経験」のことです。

例えば新型のスマートフォンと手にしたとします。そこに備わっている機能が使いやすかったり、美しかったりしたらこのような感想を持つのではないでしょうか。

・見た目がかっこいい

・動作が快適で使いやすい

・カメラの性能が高くて写真撮影が楽しい

これらの感想がUXです。

モノやサービスに触れて、ユーザーが感じることすべてがUXとなるのです。

ユーザー中心設計

作り手がユーザーの視点に立ち、ユーザーについて理解し、ユーザーの体験をデザインすることです。

ユーザー中心ということで作り手の都合を考えずにユーザーのためのみを考えて設計します。

ユーザビリティ

ユーザーが使いやすいもののことを「ユーザビリティが高い」といわれます。

サイトを閲覧していて、スクロール速度が意図的に遅くされていたり、ナビゲーションの位置が変わったところにあり、知りたい情報にたどり着くまでに時間がかかったりして目標の達成までに満足感少なかったりする場合、ユーザビリティが低いと言えます。

逆に知りたい情報にすぐにたどり着けて、ユーザーが目標を達成したとき、高い満足感を感じていればユーザビリティが高いと言えます。

SEO

SEOとはSearch（検索）Engine（エンジン）Optimization（最適化）の頭文字をとったものです。

日本語ではそのまま検索エンジン最適化と訳されます。

Googleなどでキーワード検索をしたとき、検索結果ページで上位に特定のサイトが表示されるよう、Webサイトの構成などを調整することです。

検索結果ページで最もクリック率が高いのはやはり上位に表示されるページといわれています。
あたらにWebサイトを公開しても、検索結果ページの4ページ目や5ページ目に表示されていてはユーザーがサイトを閲覧する機会は見込めません。

あたらに公開したWebサイトが検索結果の上位に表示されるためにもSEO対策をしっかりと考えたWebサイトの構成にする必要があります。

レスポンシブWebデザイン（レスポンシブ）

レスポンシブWebデザインとは、スマートフォン・タブレット・PCなど、異なる画面サイズの幅を基準にしてWebサイト表示を柔軟に調整し、見やすくすることを指します。

WebサイトをPC、タブレット、スマートフォン等、異なる画面サイズで表示した際、PCでのレイアウトをそのままスマートフォンの画面サイズで使おうと思うと、コンテンツのサイズが小さくなったり、横スクロールで閲覧しなければならなかったり、とても不便なサイトになってしまいます。

様々なデバイスが普及している今、どんなデバイスで表示してもきれいに見えるようにレスポンシブ対応は必ず必要だと考えられます。

まとめ

WEB用語についてまとめました。

いろいろな用語があり、初めて聞いたときにはよくわからない用語もあるかと思いますのでこの機会にぜひ覚えてみてください。