覚えておくべきWEBサイト・デザイン用語集！WEB制作に関わっている方は必見

WEB制作の過程では、さまざまな専門用語が使われています。きちんと理解せずに、なんとなく使っている、という方も多いのではないでしょうか。

用語の意味をきちんと覚えなくても業務ができる、と思う方もいるでしょう。
しかし、間違えたままで用語を使うと、相手に意図を正しく伝えることができません。
ましてや、WEB制作に必要なやりとりにも齟齬が発生し、イメージとおりのサイトに仕上がらないというリスクも出てきます。

今回はWEBデザイン用語を中心に、WEB制作に携わる方がよく使う用語をご紹介します。
すでに知っている用語でも、間違った認識で使用してしまっている場合がありますので、ぜひチェックしましょう。

WEB制作を依頼するうえで重要なこと

まずは、WEBサイト制作を依頼する前に準備しておきたいことを確認していきましょう。

制作の目的を明確にする

制作依頼の段階で特に重要なことは、WEBサイトを制作する目的です。

「なぜWEBサイトを作る必要があるのか」
「なぜ今のWEBサイトのままではいけないのか」

その根本となるきっかけを明らかにし、確認しておくことが大切です。

具体的な情報の共有

大前提として、WEBサイトは商品のように「発注さえすればイメージどおりの完成品が届く」というわけではありません。

• ページの構成
• どんな雰囲気でどんな色合いを使用するのか
• 機能
• コンテンツの内容や配置する場所
• 文章のライティング

WEBサイトリリース後の動き

WEBサイトは作ってリリースしたら終わり、というものではありません。
リリース後は「分析→ターゲットやコンテンツの見直し→改善」を繰り返し、最適化する必要があります。

また、WEBサイト内に情報や機能を詰め込みすぎると、のちの対応工数が増える原因にもなります。真に必要な情報や機能を、しっかりと検討しましょう。

覚えておきたい！WEBサイト・デザイン用語集

ここからは、WEB制作でよく使われる用語を、具体的な意味と合わせて紹介します。
すでに知っているという方も、間違った認識をしていないか、もう一度確認しましょう。

WEBサイトの種類

コーポレートサイト

その企業の企業概要や、どのような製品・サービスを扱っているのか、採用情報など、企業についての情報を発信するWEBサイトのことをいいます。

例えば、当社「コクー株式会社」のWEBサイトは、所属する社員（人財）と会社が掲げるミッションをメインコンテンツとした、コーポレートサイトです。
企業概要や事業内容はもちろん、セミナー情報や社内活動情報などの様々なニュースも掲載しています。

コーポレートサイトは、名刺の代わりにもなりうる重要な役割を担っています。

プロモーションサイト

「プロモーション」とは「販売促進」を意味します。そして、特定の製品やサービスのアピール、イベントの告知などに使うWEBサイトのことをいいます。コーポレートサイトに比べると、紹介する情報の範囲が狭くなります。

• 新しくスタートしたサービスを広めたい
• 問合せの数を増やしたい
• 購買につなげたい

といった目的に合わせ、ターゲットとなるユーザー層を絞って制作します。
そのため、WEBサイトの制作担当に依頼するうえで、ターゲティングはとても重要になります。

ECサイト

ECサイトとは、インターネット上で商品やサービスを販売するWEBサイトのことを指します。
また、ショッピングサイト、オンラインストアサイトとも呼ばれ、商品一覧ページや商品詳細ページ、ショッピングカート画面ページ、決済画面ページなど、多くのページで構成されているのが特徴です。

ECサイトを制作する目的としては、以下のようなことが挙げられます。

• 商品をオンラインで販売したい
• 実店舗があり、ネットを利用して販路を拡げたい
• 商品を海外展開したい

単に商品を掲載するだけでなく、「どうしたら買ってもらえるのか」を考え、見せ方や使い勝手を改良する必要があります。

LP（ランディングページ）

LPは、商品やサービスの紹介を行う、縦長の１ページ完結型のページです。商品の注文や問い合わせ、資料請求などのアクションに結び付けるためにも、そこへ導く画面構成が重要になります。

LPは、検索結果や広告などを経由し訪問者（ユーザー）が最初にアクセスするページでもあります。そのため、ユーザーの目的とサイトの内容が一致していない場合、離脱に繋がる恐れがあります。

離脱を防ぐためにも、ファーストビューに訴求力のある要素を配置したり、コンバージョンに結び付くボタンをページ内に繰り返し設置するなど、業種やサイトの目的によって、ページ内の情報設計やデザイン、文章を工夫して制作する必要があります。

LPについてもっと詳しく確認したい方はこちらのページをご確認ください。
参考記事：LP（ランディングページ）の作り方

WEBサイト全体の考え

UI（ユーザーインターフェース）

ユーザーが、「WEBサイトやアプリを快適に使うためのヴィジュアル設計」です。
文字のフォントや余白、色やアイコンを使った情報の強弱など、視覚に触れる部分全ての情報です。

UX（ユーザーエクスペリエンス）

プロダクトやサービスを通じて得られる、使いやすさや印象といったすべてのユーザー体験のことをいいます。UX向上のためには、優れたUIが不可欠となります。

WEBサイトページの構成要素

WEBサイトの構成要素は、ある程度形式が決まっています。
WEBサイトを作る目的を明確にし、成果を上げるためにも、構成要素を把握しておくことは非常に重要です。

ヘッダー

• ロゴ
• グローバルナビゲーション（プライマリーナビゲーション）
• パンくずリスト

以上のような要素を配置します。

「グローバルナビゲーション」とは、WEBサイト全体の共通部分となり、各ページへのリンクや同じページ内のアンカーリンクなどを配置します。グローバルナビゲーションはユーザービリティの観点だけでなく、SEOの観点でも重要な役割を果たします。

「パンくずリスト」とは、WEBサイトを訪れたユーザーが今、サイト内のどのページにいるのかを視覚的にわかりやすくした誘導表示のことをいいます。

コンテンツ

• メイン画像
• 情報発信エリア
• ピックアップコンテンツへのリンク
• バナー

以上のような要素を配置します。

ヘッダーやフッターのように、WEBサイト全体で共通の部分ではなく、WEBサイトによって内容が変わります。ユーザーの欲している情報を提供し、自社の商品やサービスにつながるような内容であることが重要です。

フッター

• フッターナビゲーション
• コピーライト

WEBサイト全体で共通する要素で、ナビゲーションや著作権表示などを、WEBサイトの下部に記載することが一般的です。
フッターにリンクを置くことで、「お問い合わせ」ページや「予約」ページなど、コンバージョンにつながる重要なページに、記事を読んだユーザーを誘導することができます。

WEBデザインに関する用語

トンマナ

トーン＆マナーの略で、デザインの色味や雰囲気などに一貫性を持たせることです。

あしらい

デザインの装飾、ディテールのことをいいます。

カーニング

隣り合う文字の間隔を調整することをいいます。
文字間の余白を整えることにより、文章が読みやすく、美しくなります。

カラム

WEBサイトの構成で、「段組み」という意味です。

＜レイアウトの例＞

２カラムレイアウト（２列配置）

３カラムレイアウト３列配置）

サイト全体の幅やWEBサイトの操作性を考慮し、カラム数を決めましょう。

ファーストビュー

ユーザーがWEBページにアクセスした時に、スクロールせずに最初に画面に表示される部分のことをいいます。ファーストビューを見て離脱してしまうユーザーもいるため、最も重要な部分です。

ナビゲーション

WEBサイト上で目的のページを探す手がかりとなる、リンクがまとめられているメニューのことをいいます。
グローバルナビゲーション、ローカルナビゲーション、ダイナミックナビゲーションなどがあります。

psd

Photoshopのデータの拡張子です。

ai

Illustratorのデータの拡張子です。

ビットマップデータ

小さな点（ピクセル）が集合し、画像を表現します。ベクターデータと異なり、画像を拡大すると見た目が粗くなります。
写真や複雑な画像を表現する際に向いており、Photoshopはこのデータ方式です。

ベクターデータ

点の座標とそれを結ぶ線などの数値データをもとにして、描画する方式です。画像を拡大・縮小しても劣化することがありません。
線や面を扱うイラストやアイコン、テキストを表現する際に向いており、Illustratorはこのデータ方式です。

WEBサイトのギミックに関する用語

ホバー

画像やリンクにマウスカーソルを合わせた時に、アニメーションが起こるような表現のことをいいます。「マウスオーバー」「マウスホバー」とも呼ばれます。

カルーセル

ユーザーのアクションや一定の時間で、画像などのコンテンツをスライド表示させる手法です。限られたエリアで、複数のビジュアルをユーザーに訴求するために使われます。

モーダルウィンドウ

元のウィンドウに、別枠で表示されるウィンドウのことです。指定された操作を完了、もしくはキャンセルするまで表示され続け、他のウィンドウに移ることができません。

＜使用例＞

• 警告メッセージ
• 必ず読んでほしいお知らせ

ただし、モーダルウィンドウの使い方を誤ると、ユーザーのストレスにつながることもあります。「ユーザーの手を止めるべきではない画面」での使用は控えましょう。

アコーディオンメニュー

指定部分をクリックすることで、開閉して隠れている部分が出てくる動きをするメニューです。Q&Aや、長文になりやすいページで活用されることが多いです。

ハンバーガーメニュー

サイト内の３本線のナビゲーションメニューのことで、クリックすると隠れている情報が表示されます。主にスマートフォンのUIデザインで使われることが多く、パソコンと比べて画面サイズに制限があります。そのため、グローバルナビゲーションなどをハンバーガーメニューのなかに隠すことで、情報を整理しています。

WEBサイト制作で使われるプログラミング用語

HTML

WEBサイトを作る土台や骨組みとなる言語です。WEBページに表示したい文章を「< >」で挟まれた「タグ」と呼ばれる文字列で囲んで書いていきます。
インターネット上に存在する多くのWEBサイトが、HTMLを使って作られています。

CSS

HTMLで作った骨組みに、背景や文字の色、フォントなどを追加して、文章を装飾するための言語です。CSSを適用することで、HTMLだけで構成されたWEBサイトに比べ、見た目を大きく変化させます。

JavaScript

WEBサイトに動きをつけるために使われます。例えば、画像を自動でスライドさせる、送信フォームの必須項目の入力チェックを行う、などの動きを実現することができます。

PHP

動的にWEBページを生成することができる、サーバーサイドのスクリプト言語(※)です。HTMLとセットで活用されることが多く、HTMLで制作された静的なページに、PHPを使い動的な処理を加える、というイメージです。
PHPは、ECサイトを構築する際によく使われます。

※スクリプト言語とは・・・
習得するのを簡単にするために工夫された、プログラミング言語のことです。

さらに知っておきたい用語

CMS（コンテンツ・マネジメント・システム）

WEBサイトのコンテンツを構成するテキストや画像、テンプレートなどを編集・管理するシステムのことです。CMSを導入することで、WEBの専門知識がない方でも簡単にWEBサイトの作成や更新ができます。サイトの更新頻度を高めることで、タイムリーに情報発信をすることができ、ユーザー満足度の向上にもつながります。
ただし、高いセキュリティレベルを要するサイトや、デザイン性の高いページを必要とする場合などはCMSの導入には向かないため、導入する際はしっかりと検討する必要があります。

モバイルファースト

必ずしも「スマートフォン向けに優先的に制作する」ということではありません。ユーザーの利用状況などを元にスマートフォン向けに最適化され、スマートフォンでもストレスなく利用できるデザインにすることです。画面のサイズや通信環境、マウスやキーボードではなく「スワイプ」で操作することなどを踏まえた上で、デザインを決めていきます。

レスポンシブWEBデザイン

WEBサイトに掲載するコンテンツを変更することなく、表示領域の幅によって見え方が変わるようにデザインされたWEBサイトのことです。PCやスマートフォンなど、デバイスの画面サイズに合わせ、CSSだけで見た目を変更することができます。
スマートフォンが急速に普及している現代では、PCのWEBデザインだけでなく、スマートフォンにも対応させてほしいというニーズも高まっています。レスポンシブWEBデザインは、SEOにおいても重要です。
ただし、デザインの崩れやすさやスマートフォンの表示遅延リスクなど、デメリットもあります。レスポンシブWEBデザインを制作する際は、汎用性のあるデザインで制作することや、データを詰め込みすぎないなどの工夫が必要です。

SEOについては、こちらの記事で詳しくご紹介しております。
参考記事：SEOとは？初心者に優しい基礎知識

合わせて知っておきたい！制作段階で使用される用語

ここからは、WEB制作の制作段階で使用される用語をご紹介します。

ディレクトリマップ

WEBサイト内の全ページのURLと、タイトルや記事内容がまとめられた一覧表のことです。
クライアントや制作スタッフにとって、どんなページが何ページ必要なのか、WEBサイトの規模感や制作に必要な情報を正確に把握するための重要な資料になります。

サイトマップ

WEBサイト全体のコンテンツを一覧で表示したページのことで、ユーザーや検索エンジンに、サイト内にどのようなページがあるかを知らせる役割があります。「ユーザーのことを第一に考えた、使いやすいサイトマップの設計」をすることが、とても大切です。

Photoshop

画像の編集・作成、写真加工ソフトです。写真の編集のほか、WEBデザインやバナーデザインの作成、イラストの作成など、幅広い用途に使用します。

Illustrator

自由度の高いデザイン機能を持ち、イラストやロゴの作成、ポスターやチラシのデザインなどを行うことができます。

XD

WEBサイトやモバイルアプリのUI/UX（デザインや操作性）デザインツールです。ワイヤーフレームやデザインカンプ、プロトタイプの作成が可能です。

ワイヤーフレーム

WEBページのレイアウトを決める設計図のことをいいます。
サイト制作では欠かせないものであり、デザインやコーディングなどの作業に入る前に作成し、完成イメージを「見える化」する目的で作られます。

デザインカンプ

「デザインの完成イメージ」のことです。クライアントとの認識のズレが生じないよう、制作物のイメージを共有するために作られます。デザインカンプは、PhotoshopやIllustratorなどのデザインツールを使用して作成されます。

プロトタイプ

ページデザインに加え、実際のWEBサイトまたはアプリのように操作することができる機能です。デザイン制作段階から動作を検証することができるため、デザインや動作性のイメージがしやすくなります。

コーディング

プログラミング言語を使って、WEBデザインをブラウザ上で見える形にするためにソースコードを記述していく作業のことです。主に、HTMLやCSS、JavaScriptなどを使用します。コーディングを担当する場合、「SEO」や「CMS」の知識があるとなお良いでしょう。

Basic認証

WEBサイトに対して必要最低限の認証設定をかけることができる、簡易的な認証システムです。
Basic認証をかけたWEBサイトにアクセスしようとすると、認証ダイアログが立ち上がり、ユーザー名(ID)とパスワードの入力が求められます。

ただし、セキュリティの脆弱性や、クローラー(※)がアクセスできないなどのデメリットもあるため、使用する場合は注意しましょう。

※クローラー・・・
検索エンジンが検索の順位を決めるために、サイトを巡回して情報収集する巡回プログラムのことです。検索エンジンごとにクローラーの種類が異なり、例えばGoogleはGooglebotと呼ばれるクローラーを、Yahoo JapanはGoogleの検索エンジンを使用しています。
つまり、「クローラーがWEBサイトにアクセスできない」ということは、GoogleやYahoo!などで検索しても、ベーシック認証を設定した領域は検索エンジンに表示されないため、注意が必要です。

上記でご紹介したPhotoshop、Illustrator、XDについては、こちらの記事も合わせてご覧ください。
参考記事：知らないともったいない！「Adobe CC」であなたのつくる力を引き出す

理想のWEBサイトを作るために

WEB制作の過程でよく使われる用語を、幅広くご紹介しました。

WEB制作の過程で大切なことは、目指すデザインのゴールをしっかり汲み取り、サイトリリース後の運用面も考えたサイト設計をすることです。

そのためには、WEB制作を依頼する側と受注する側で認識に齟齬が生じないよう、基本の用語を正しく理解することが大切です。

「何からはじめたらいいのかわからない」「リソース不足で手が回らない」など、WEBサイトの運用にお困りではありませんか？クリエイティブ制作、SEO対策、運用、分析など、お客様のWEBマーケティングの課題全般を解決いたします。お気軽にご相談ください。

コクーなら、ご支援内容や予算に応じて、最適なプランをご提案いたします。常駐（派遣）、スポット派遣、受託など、柔軟に対応可能です。