【依頼者、初心者向け】WEBサイト制作の際に知っておくといい専門用語

ろん
ろん

WEBサイト制作を依頼する際に覚えておくと便利な専門用語を紹介します。
我々が普段お客様とお話する場合、専門用語を使わないように意識しておりますが、制作が進むにつれて専門用語を使わざる負えないタイミングが増えてきます。
すべて完璧に覚える必要はありませんので、「こんな言葉があるんだ~」程度で読んでいただければ幸いです。

サーバー

WEBサイトを見るときにコンピュータにデータを提供するプログラムのことです。WEBサイトを公開する際に必ず必要になります。
弊社でもレンタルサーバーを提供しております。

電脳職人村 レンタルサーバー

ドメイン

インターネット上の住所といわれており、弊社のWEBサイトでいうと、「omakase.net」がドメインにあたります。こちらもサーバーと同様必ず必要になります。

SSL(Secure Sockets Layer)

インターネット上のWEBブラウザとWEBサーバーのデータ通信を暗号化する仕組みです。
例えば、インターネット上でクレジットカードを使って買い物したときに、第三者が情報を抜き取ろうとしても暗号化されていれば盗難を防ぐことができます。
暗号化されたサイトはURLの横に鍵マークが表示されるので、簡単に確認することができます。

webdesign01.jpg

最近はSSLの設定が正しくされていないと警告が出るようになりました。ですから、SSLの設定はほぼ必須なものになっています。

CMS(Contents Management System)

WEBサイトのコンテンツを簡単に構築、更新、管理ができるシステムです。つまり、WEBサイト制作に必要な専門的な知識がなくてもWEBサイトを運用することができます。新着情報や採用情報などを更新したい時に、制作会社に依頼する必要はなく、好きなタイミングで時短かつ低コストで更新することができるのが最大のメリットです。

ブラウザ

WEBサイトを閲覧するためのソフトで、「閲覧する」を英語では「browse」と言いますが、名詞形の「browser」が語源になっています。例えば、Google Chrome、Safari、Microsoft Edgeなどがあります。
詳しくは過去の記事で紹介しております。

ブラウザとは?初心者でも分かりやすく解説!

検索エンジン

インターネット上で言葉や画像などを検索するもののことをいいます。有名なものだと、Google、Yahoo!などがあります。

SEO(Searche Engine Optimization)

日本語にすると検索エンジン最適化といいます。WEBサイトの内容を検索エンジンが理解しやすいように最適化することで評価が上がり、ユーザーがブラウザで検索したときに表示しやすくなります。(マーケティング戦略のひとつです。)

アクセス解析

WEBサイトにアクセスされたときの行動を分析することです。具体的にはどのページが何回閲覧されているか、どんなユーザーが閲覧しているか、どんな環境で閲覧しているか、何回お問い合わせされたかなどあらゆる情報を知ることができます。分析することでWEBサイトの課題を見つけ改善し、よりコンバージョンが増えるようにします。アクセス解析にはGoogle アナリティクスが有名です。

サイト構成図

どんなページがあるのか、全部で何ページあるのか、導線はどうなるのかなどWEBサイト全体を樹形図のようにまとめたものです。
情報を整理するために、ワイヤーフレームと同時に作成します。

ワイヤーフレーム

言葉の通りワイヤー(線)フレーム(枠)でつくられたものです。WEBページに載せる情報をまとめたものでいわゆる設計図です。一見デザインされたように見えますが、デザインとして見るものではなく、このページに載せる情報は正しいのか、足りない部分はないか、構成に問題ないかなどデザインに取り入れる内容を確認するためのものです。ここで、掲載内容を整理します。
下記のワイヤーフレームは簡易的なものです。

webdesign02.jpg

サイト構成図

どんなページがあるのか、全部で何ページあるのか、導線はどうなるのかなどWEBサイト全体を樹形図のようにまとめたものです。情報を整理するために、ワイヤーフレームと同時に作成します。

レスポンシブデザイン

レスポンシブ(responsive)はすぐ応答する、敏感なという意味を持ちます。 ユーザーがWEBサイトを閲覧する際の端末サイズに合わせてWEBサイトのデザインが変化することをいいます。
弊社のWEBサイトもレスポンシブデザインで、スマホでの閲覧が増えた現代ではレスポンシブデザインは必須です。

■電脳職人村 PCデザイン

webdesign03.png

■電脳職人村 スマートフォン

webdesign17.png

知っておくと便利な機能

PCでスマートフォンのデザインを確認する方法を紹介します。

  1. WEBサイトの画面上で右クリックをして、検証を押します。または、画面上でShift+Ctrl+Iを同時に押します。
  2. 下記の赤丸のアイコンをクリックします。または、Shift+Ctrl+Mを同時に押します。
    webdesign08.png
  3. 下記の赤丸の▼をクリックすると端末の一覧が表示されるので、そこから選択します。または、最上部のResponsiveをクリックすると好きなサイズを入力することができます。
    webdesign09.jpg

トップページ

WEBサイトに訪れたときに最初に開くページのことで、一番見られるページなのでWEBサイトの顔となるページです。

電脳職人村のトップページはこちら

下層ページ

トップページの次のページのことで、事業内容や会社案内などトップページに載せきれない詳しい情報を別のページに載せます。
例えば、トップページの次の事業内容一覧ページは第一下層ページ、さらに一覧ページからの詳細ページは第二下層ページといっています。第三、第四と続くと分かりにくいWEBサイトになってしまうので、基本、第二下層で収めるようにします。

次から紹介する専門用語はデザインを作成するときに多用されます。

ファーストビュー

ユーザーがWEBサイトにアクセスしたときに、最初に表示される部分のことです。一見トップページと同じだと思われますが、スクロールせずに表示される部分のことなので、トップページの上部一部分がファーストビューにあたります。ここでWEBサイトの第一印象が決まります。

webdesign10.jpg

ヘッダー

ページの最上部にあるロゴやキャッチコピー、連絡先などが入っている部分で、全ページ共通で入っています。

webdesign11.jpg

フッター

ページの最下部にあるコピーライトやグローバルメニューに入れなかったページのリンク、SNSのリンクなどが入っている部分で、こちらもヘッダーと同じように全ページ共通で入っています。

webdesign12.jpg

グローバルナビゲーション

WEBサイトのメニューで、ここからそれぞれのページに移動します。全ページのリンクを掲載しているわけではなく、よく見られるページのリンクを貼ります。こちらも全ページ共通で入っています。

webdesign13.jpg

メインビジュアル

ファーストビューの中で最も目に入るところで、WEBサイトのイメージを決める部分です。画像や動画を表示することが多いです。

webdesign14.jpg

パンくずリスト

下層ページに移動したときに表示されるもので、WEBサイトの道しるべを指しています。こちらを表示すれば、ユーザーが今どこの階層にいるのか分かるので、使いやすいWEBサイトになります。

webdesign15.jpg

バナー

画像にリンクを貼りつけたものです。他のWEBサイトのリンクを貼ることもあります。

webdesign16.jpg

サイトマップ

WEBサイトの全ページをリスト形式に並べたものです。見たいページを探すときに便利です。

電脳職人村 サイトマップはこちら

内部リンク

同じWEBサイト内のリンクのことをいいます。

外部リンク

他のWEBサイトのリンクのことをいいます。

ユーザビリティ

WEBサイトにおけるユーザーの使い勝手の良さをいいます。奥が深いので、興味があれば調べることをおすすめします。

コーディング

プログラミング言語を記述する作業のことです。
デザインが完成しただけではどこもクリックできませんし、何も動きません。そこで、デザイン完成後にコーディングを組んでいき、普段みているようなWEBサイトにしていきます。コーディング作業が始まってからのデザインの変更は大変な作業になるので、コーディングを始める前にデザインをしっかりチェックします。

webdesign18.jpg

おまけ

WEBサイトにはさまざまなタイプに分かれるのはご存知でしょうか?こちらも知っておくと便利かもしれません。よければお読みください。

WEBサイトの種類を解説【8種類】

関連記事