Webサイトやブログを制作する過程で、さまざまな専門用語が使われていますが、きちんと理解せずになんとなく使っているという方も多いのではないでしょうか。
しかし、これらの用語の意味や解釈を間違えたまま使うと、例えば制作会社などに外注した場合の相手に意図を正しく伝えることができません。
また、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サイトを制作する目的としては、以下のようなことが挙げられます。
・自社商品をオンライン販売したい
・実店舗があるが、インターネットを利用して販路を拡張したい
・商品を海外展開したい
単に商品を掲載するだけでなく、どうしたら買ってもらえるのかを考え、見せ方や使い勝手も考慮する必要があります。
楽天市場やAmazon、価格.comもECサイトといえます。
Webページ（WP）
Webページ（WP）は、基本的な構成単位となる1枚の文書のことを言います。
Webブラウザで1枚の画を1度に表示されるデータのまとまりで、文字や画像、図表、音声、動画、プログラミング言語などさまざまな要素を組み合わせて構成されたものです。
上記に挙げたコーポレートサイトやプロモーションサイト、ECサイトの各ページもこれに当たります。
あなたがブログを運営しているなら、各記事ページも同じです。
詳しくは別記事がありますので、以下の記事をご参考ください。
Webコンテンツ作りに役立つ最低限のIT用語＜制作編＞
ランディングページ（LP）
ランディングページ（LP）は、商品やサービスを紹介・宣伝する1ページ完結型のページです。
アピールしたい商品やサービスの情報を１ページに集約することで、ユーザーに商品の注文や問い合わせ、資料請求などのアクションを促す効果があるため、そこへ導く画面構成が重要になります。
詳しくは別記事がありますので、以下の記事をご参考ください。
Webコンテンツ作りに役立つ最低限のIT用語＜制作編＞
WebサイトやWebページの構成要素
Webサイトの構成要素は、ある程度の形式が決まっています。
Webサイトを作る目的を明確にし、成果を上げるためにも構成要素を把握しておくことが重要です。
ヘッダー
・ロゴ
・グローバルナビゲーション
・パンくずリスト
ヘッダーには、主に上記のような要素を配置します。
ロゴはWebサイトの看板でもあり、コーポレートサイトなら会社名、プロモーションサイトなら販促したい商品名やサービス名にあたり、シンボルマークと組み合わせて配置することが多いです。
グローバルナビゲーションは、Webサイト全体で共通する要素となり、主要ページへリンクするメニューで、場合によっては同じページ内のアンカーリンクなどを配置します。
グローバルナビゲーションは、ユーザービリティの観点だけでなく、SEOの観点でも重要な役割があります。
パンくずリストは、Webサイトを訪れたユーザーがどのページにいるのかを視覚的にわかりやすくした誘導表示のことをいい、ユーザビリティの1つでもあります。
ただ、トップページと2階層目ページのみといったように階層が深くない場合には設置しなくていいこともあります。
コンテンツ
・メイン画像（ビジュアル画像）
・メインとなるコンテンツの情報発信
・他の注目コンテンツへのリンク
・バナー
コンテンツには、主に上記のような要素を配置します。
ヘッダーやフッターのように、Webサイト全体で共通する要素はなく、Webサイトによって内容が変わります。
ユーザーの求めている情報を提供し、商品やサービスにつながるような内容であることが重要です。
1つのWebサイト内で同じような情報が被らないようにすることがSEO対策に繋がります。
上記はあくまで基本的に盛り込む要素なので、見せ方はWebサイトによってバリエーションはさまざまです。
コンテンツエリアが左右分割で配列されている場合は、メインコンテンツとサイドコンテンツ（またはサイドメニュー）として表記されます。
詳しくは、後に「カラム」で解説します。
フッター
・フッターナビゲーション
・コピーライト
フッターには、主に上記のような要素を配置します。
フッターナビゲーションは、Webサイト全体で共通する要素となり、著作権・免責や個人情報保護方針といった留意事項を案内するためにWebサイトの下部に記載することが一般的です。
他にもお問い合わせや予約、特定商取引法など、コンバージョンにつながる重要なページにユーザーを誘導することができます。
時に関連サイトへのリンクも配置されることがあります。
フッターは、サイトマップ的要素や企業情報など重要事項の掲載、またSNSへのリンクを設置するなど、サイトや企業全体の情報を整理しつつ、信頼を獲得するための場所として非常に重要な役割を担っています。
コピーライトは著作権表示のことで、日本では著作権マークを記載しなくても著作権法上で保護されているため必須ではありません。
ただし、著作権マークをつけることで著作権侵害の抑止力となり、「守られている・転載してはいけない」と意思を示すことにはなるので、表記することをおすすめします。
カラム
Webサイトの構成で、「段組み」という意味です。
コンテンツエリアが左右分割で展開されているWebサイトやブログを見たことがあると思いますが、これがカラム分割という意味です。
1カラムレイアウト（1列配置）
1カラムレイアウトは、シングルカラムレイアウトともいい、画面の上からヘッダー・グローバルナビゲーション・コンテンツ・フッターの順に縦に長く配置させるパターンです。
上から下へスクロールして閲覧するのでランディングページに使われることが多いです。
サイドメニュー（サイドバー）のない1カラムレイアウトのメリット
・メインコンテンツに集中してもらえる
・商品の訴求力を高めることができる
・スマホとPCでのデザインに統一感が出しやすい
・レイアウトのデザインの幅が広がる
2カラムレイアウト（2列配置）
2カラムレイアウトは、コンテンツが2つの段組みで構成されているレイアウトで、ブログなど一般的によく見られるので馴染みがあります。
メインコンテンツとサイドメニューを左右に並べて表示するため、ユーザーはWebサイト内で自分が閲覧している位置を把握しながら情報コンテンツを読み進めることができます。
また、サイドメニューだけでなくサイドコンテンツとして、メインコンテンツに加えて他の情報も掲載することができるので回遊率の向上が期待できます。
3カラムレイアウト（3列配置）
3カラムレイアウトは、コンテンツが3つの段組みで構成されているレイアウトで、ECサイトなどでよく見られます。
基本的にはメインコンテンツの左右にサイドメニューを並べて表示されるため、Yahooや価格.comなど多数のコンテンツを発信するWebサイトに多い形です。
コンテンツを3カラムにすることで縦の長さが短くなり、結果としてユーザーのスクロールに対する負担を減らすことができます。
また、スクロール量が減ることで、ユーザーがあるコンテンツに気づかずにサイトを離脱するといったことも少なくなります。
スマートフォンでの表示について
なお、2カラムレイアウトや3カラムレイアウトは、パソコンで見た時のレイアウト表示です。
画面の幅が狭いスマートフォンでは、コンテンツが右から順にカラム落ちされた1カラムレイアウト（1列配置）になることが基本的に多いでしょう。
図解内に表記されているmainやasideといった英字は、HTMLマークアップでエリア別に分ける時に必ず使うタグですので今は気にしなくてよいです。
HTMLを少し触ったことのある方は、ページ全体をエリア別に分けて記述するタグとして参考にしていただければと思います。
Webサイト制作で使われるプログラミング用語
HTML
Webサイトを作る土台や骨組みとなる言語です。
Webページに表示させたい内容をtitle、h1、pなど「< >」で挟まれた「タグ」と呼ばれる文字列で囲んで記述していきます。
インターネット上に存在する多くのWebサイトが、HTMLを使って作られています。
CSS
HTMLで作った骨組みに、背景や文字などの色、サイズなどを追加して、内容を装飾するための言語です。
CSSを読み込ませることで、HTMLだけで構成されたWebサイトに比べ、見た目を変化させることができます。
JavaScript
WebサイトやWebページに動きをつけるために使われます。
例えば、テキストを右から左へスクロールさせたり、画像をギャラリー風に自動スライドさせたり、送信フォームの必須項目の入力チェックを行ったりするなどの動きを実現することができます。
jQuery
JavaScriptで用いられたプログラムの内容を、より簡単に分かりやすく記述するためのJavaScriptライブラリです。
通常のJavaScriptでは、コードの複雑さやWebブラウザによる挙動の違いなどが開発・制作者を悩ませる1つの要因となっていました。
そこへjQueryが登場したことにより、JavaScript同様の動きをより分かりやすく少ないコードで実装することができるようになりました。
PHP
動的にWebページを生成することができる、サーバーサイドのスクリプト言語です。
HTMLとセットで活用されることが多く、HTMLで制作された静的なページにPHPを使い動的な処理を加える、というイメージです。
全ページで共通となるヘッダーやフッターを分ける時もPHPを用いています。
ECサイトを構築する際によく使われ、WordPressでの設定でも見かけることがあると思います。
スクリプト言語とは
習得するのを簡単にするために工夫された、プログラミング言語のことです。
Webサイトの制作段階で使われる用語
ディレクトリマップ
Webサイト内の全ページのURLと、タイトルや記事内容がまとめられた一覧表のことで、人によっては「階層マップ」ということもあります。
クライアントや制作側にとって、どんなページを展開するかどのくらいページが必要なのか、Webサイトの制作に必要な情報を正確に把握するための資料になります。
サイトマップ
Webサイト全体のコンテンツを一覧で表示したページのことで、ユーザーや検索エンジンにどのようなページがあるかを知らせる役割があります。
大型商業施設などでいうフロアマップと同じで、ユーザーのことを第一に考えた使いやすいサイトマップの設計をすることが、とても大切です。
ワイヤーフレーム
Webページのレイアウトを決める設計図のことをいいます。
Webサイト制作では欠かせないものであり、デザインやコーディングなどの作業に入る前に作成し、完成イメージを可視化する目的で作られます。
デザインカンプ
Webページの完成イメージ、デザインを盛り込んだ仕上がりイメージのことをいいます。
相互での認識にズレが生じないよう、制作物のイメージを共有するために作られます。
主に、AdobeのPhotoshopやIllustratorといったデザインツールを使用して作成されます。
プロトタイプ
Webページデザインに加え、実際のWebサイトやアプリのように操作することができる機能です。
デザインの制作段階から動作を検証することができるため、デザインや動作性のイメージがしやすくなります。
コーディング
WebデザインをWebブラウザ上で閲覧できる形にするためにソースコードを記述していく作業のことです。
主にHTMLやCSS、JavaScriptといったプログラミング言語を使用しますが、その際にSEOの知識があると同時作業がしやすくなります。
終わりに
以上で、Web制作の過程でよく使われる用語を紹介しました。
Web制作に向けて大切なことは、目指すデザインのゴールをしっかり汲み取り、リリース・リニューアル後の運用面も考えたサイト設計をすることです。
そのためには、Web制作を依頼する側と受注する側で認識に食い違いが生じないよう、基本の用語を正しく理解することが大切です。
-
-
Webサイト制作を進める上で必要な要件定義とは？
2023/6/13
