Web制作はIT業界のなかでも、プログラミングやマーケティングと密接に結びついている分野なので、専門用語が多いです。
未経験からWeb制作者になると、その専門用語の多さに驚きますよね。
そのため最近は、下のようなお悩みが続出です。
Web制作の用語を全然知らなくてクライアントさんと打ち合わせできるか不安
勉強時点から意味不明な用語が多くて困っている
この記事では上のようなお悩みを解決します。
僕自身、未経験からWeb制作を始めたので、専門用語がわからない気持ちがよくわかります。
用語が意味わからなすぎて、クライアント様を困らせてしまったこともあります…。（ほんとによくないですよね…）
そこでこの記事では、僕が検索したり、案件をこなしたりしていく中で知った「Web制作用語」をお伝えします。
打ち合わせ時の頻出用語
この章では、打ち合わせ時に頻出の用語を解説します。クライアント様とのコミュニケーションをスムーズにするために大切なものばかりです。打ち合わせまでには必ず覚えておくようにしましょう。
ワイヤーフレーム
ワイヤーフレームとは、レイアウトのみのデザイン見本のことです。装飾はまだ施していない状態です。下のものがワイヤーフレームの例です。
ワイヤーフレームは、手書きのラフ画で作成する人もいますし、専用のソフト（XDやPhotoshopなど）を使用して作成する人もいます。
このようにワイヤーフレームは、下書きのような使い方をします。
ワイヤーフレームをクライアント様に提出して、本確定したら、装飾を施し、デザインカンプを作成する流れが一般的でしょう。
デザインカンプ
デザインカンプとは装飾まで施したデザイン見本のことです。下のものがデザインカンプの例です。ボタンからジャンプしてご覧ください。
デザインカンプは、基本的にデザイナーがXDやPhotoshopで作成し、コーダーはそのデザイン通りに制作を進めるのが一般的な使い方です。
画像ファイルや要素の大きさなどはデザインカンプからでも取得できます。
ランディングページ（LP）
ランディングページ（LP）とは、訪問者のアクションを誘導することに特化したWebページのことです。下が具体例です。
ランニングコスト
ランニングコストとは、毎月固定でかかる費用のことをいいます。
「レンタルサーバーを契約した際のランニングコストは？」なんていう風に聞かれるかも知れません。
逆に、最初のみかかる必要ことは「イニシャルコスト」といいます。
被リンク／発リンク
被リンクは、外部サイトから自サイトへ向けられたリンクのことを指します。
発リンクは被リンクの逆で、自サイトから外部サイトへ向けられたリンクを指します。
優良なサイトから被リンクされるとSEOによい影響があります。逆に粗悪なサイト（アダルトサイトのコメント欄など）から被リンクを受けるとSEOに悪影響が出る可能性があるといわれています。
Googleサーチコンソールという分析ツールで、被リンクは調べることができます。
CMS
CMSは”Contents Management System”の略で、エディタなどを用いて簡単にサイトを構築・編集できるシステムのことをいいます。
有名どころでいうと下記のものがあります。
- WordPress
- Shopify
- Movable Type
WordPress
CMSの1つであり、オープンソースのブログソフトウェアです。
簡単にブログ投稿が可能なため、好んで使う人がとても多いです。CMSのシェア率はダントツでナンバーワンです。
フルスクラッチ
フルスクラッチとは、WordPressなどのCMSを用いず、HTML・CSS、JavaScriptなどの言語を用いて開発することです。
時間と費用が莫大にかかりますが、オリジナルデザインのサイトを制作する際にはフルスクラッチで制作することが少なくありません。
AMP対応
まず、AMP（アンプ）とは「Accelerated Mobile Pages」の略で、モバイルページを高速で表示させるための手法によって作成されているコンテンツのことです。
下の画像は「唐揚げ 作り方」の検索結果です。検索結果の1つに「⚡︎」みたいなマークがありますが、これがあるのがAMPです。
そして、AMPを作成しておくことを「AMP対応」といいます。Googleが推奨しているため、一定のSEO効果が見込まれます。
ドメイン
ドメインとは、インターネット上の住所のことです。このブログだと「kaki-lab.org」がドメインにあたります。
ドメインがないとWebサイトをつくることはできません。そのため、ポートフォリオサイトなどを作る場合には、ドメインを取得しましょう。
ドメインはドメインショップで購入できます。
僕はいままで10個以上のドメインを購入してきてますが、すべて「お名前.com」で購入しています。ご興味がありましたら、ぜひ一度、お名前.comをご覧ください。下のボタンよりご覧いただけます。
サーバー
サーバーは、訪問者にWebページの情報を提供してくれたりするコンピュータです。ドメイン同様、サーバーがないとWebサイトをつくることはできません。
サーバーをレンタルして、使用するのが一般的です。僕はエックスサーバーというレンタルサーバーを利用しています。
最安値のサーバーではないですが、初期費用3,000円（税抜）、月額費用1,200円（税抜）とリーズナブルに利用できます。
また、エックスサーバーはシェア率がとても高いので、ネット上にたくさん情報が落ちているのが僕のお気に入りポイントです。WordPressの設置方法やデータベースのいじり方などの情報がたくさんです。
ご興味がありましたらぜひエックスサーバーをご覧ください。下記のボタンよりエックスサーバーの公式HPをご覧いただけます。
ドメインやサーバーの利用方法を知りたい方へ
以下の記事でドメインやサーバー関係の使い方を解説しております。
もしご興味がありましたらぜひご覧ください。
カラム
カラム（column）とは、「列」のことです。「1カラム構造」や「2カラム構造」など、サイト構造を指し示します。
ちなみに、このページは、左側に本文、右側にサイドバーからなる、「2カラム構造」になっています。
SEO
SEOとは、「Search Engine Optimization」の略で、検索エンジン最適化という意味です。簡単にいうと、”検索結果の表示順位をあげること”です。
こういうとシンプルですが、SEOを請け負う会社が大量にあるくらい難しいことです。
SEO対策のメインは、コンテンツ作成や被リンクの用意などにですが、コーディングでも関わってくる部分があります。
最低限覚えておかないと困る部分がありますので、ぜひ下記の記事を参考に最低限のSEOスキルを身につけましょう。
制作時の頻出用語
次に制作時に頻出の用語です。おそらく打ち合わせ時には出てこないと思いますが、押さえておかないと困った時に検索できず、実装できない可能性があります。ここで覚えておきましょう。
グローバルナビゲーション
グローバルナビゲーションとは、Webサイト全体で共通しているメニューのことです。
このサイトでいうと下の枠線部分のことです。
アコーディオン
アコーディオンとは、クリックすると情報が出現するエリアのことです。実装方法も含めて、下記のサイトがわかりやすいです。
ハンバーガーメニュー
ハンバーガーメニューとは、スマホ操作時に、クリックするとメニューが表示される「三」みたいなものです。
Web制作ではよくモバイル版のデザインでハンバーガーメニューが採用されます。
スーパーリロード
スーパーリロードとは、同時にキャッシュを削除するリロードのことです。
CSSを変えたのにリロードをしても、変更が反映されていないことはありませんか？それはキャッシュ（ブラウザがもつ“HTML・CSSを保存する機能”）が原因です。
過去の履歴をキャッシュごと削除することでも対応可能ですが、いちいち履歴を削除するのは面倒ですよね。
そこで有用なのが、「スーパーリロード」です。スーパーリロードはキャッシュを削除しつつ、ページをリロードできます。
ちなみにショートカットは下のものになります。
Mac：command+shift+R
Windows：Ctrl+F5
CSSを変更した際には、毎回スーパーリロードをしてあげましょう。
アイキャッチ画像
アイキャッチ画像とは、1記事に1つだけ設定される画像のことです。クリックを誘導する目的で表示されます。
パンくずリスト
パンくずリストとは、現在のページがサイト内でどの場所にあるかを示すものです。この記事のパンくずリストは記事下にあり、画像の赤枠で囲まれた部分です。
このサイトでは記事下に設置していますが、記事の上に設置しているサイトも少なくないです。
ラジオボタン
ラジオボタンとは、複数選択肢中で1つしか選択できない時に使われるボタンのことです。
“性別”などを選択する際によく使われます。
チェックボックス
チェックボックスは、複数選択肢で複数の選択が可能な時に使われるボタンのことです。
“サービスに興味をもった理由3つ”などを選択する際によく使われます。
セレクトボックス
セレクトボックスは、他の選択肢を隠しつつ、複数選択肢の中で1つだけの選択可能な時に使われるものです。
“都道府県”などを選択する際によく使われますね。
FTPツール
まず、FTPとは「File Transfer Protocol」の略で、クライアントとサーバーの間でファイル転送を行うための通信プロトコルの1つのことです。
FTPツールは“クライアントとサーバーの間でデータを送受信するためのツール”と捉えて実務上問題ないと僕は考えています。
Web制作では、ローカルで作ったHTML・CSS、WordPressのファイルなどをFTPツールを用いて、サーバーにアップロードし、公開します。
FTPツールの使い方に関しても、まとめた記事がありますので、ぜひご覧ください。
背景知識として知っておくべき用語
打ち合わせ時も制作時も出てこない可能性はありますが、Webに通ずるものとして覚えておいた方がよい用語です。
Google Analytics
Google Analyticsとは、Googleが無料で提供するWebサイトのアクセス解析サービスです。
役割は数えきれなほどありますが、PVやユーザー数、目標の達成数の管理などがメインです。
多くの企業はGoogleアナリティクスを見てWebサイトの改善を行っています。
使用するためには指定されたコードを<head>内に入れる必要があります。
Google Search Console
Google Search Consoleも、Googleが無料で提供するWebサイトのアクセス解析サービスです。
役割は、どのような検索でWebサイト流入しているのかを調べたり、Webサイトの掲載順位を調べたりです。
JPG／PNG
JPGもPNGも画像形式の一種です。背景を透過させたい時はPNG、そうではないときはJPGを使うとよいです。
ただし、PNGはファイルが重くなってしまうことには注意です。
ちなみに、JPGは「じぇーぺぐ」、PNGは「ぴんぐ」と読みます。
リダイレクト
サイトやページの訪問者を別サイトや別ページに転送させる技術です。サイトのURLを変えたり、ページを削除したりした際によく使われる技術です。
クッキー
クッキーとは、ブラウザに保存されている、訪問したサイトの間で発生した情報のことです。具体例は、ID・パスワード、お買い物カートなどです。
キャッシュ
キャッシュとは、ブラウザに保存されている“訪問したサイトのHTML・CSSデータ”のことです。
再訪問した時に再度HTML・CSSデータを読み込まなくて済むので、時間短縮に便利ということで使われる技術です。
先ほどお伝えしたように、コーディング時にCSSを変更してもブラウザの表示が変更されれない理由はキャッシュにあります。
CSS変更時には、キャッシュを削除するリロードであるスーパーリロードを行いましょう。
- Mac：command+shift+R
- Windows：Ctrl+F5
ペナルティ
Web業界でいう「ペナルティ」とは、Googleから受けるサイトへの悪い評価のことです。
ペナルティを受けるとSEOに悪い影響が出てしまい、検索順位が落ちる可能性があります。絶望的に落ちている人をTwitterなどで稀に見かけます。
PSD／XD
PSDもXDもデザインカンプで使用されることが多いファイル形式です。PSDはPhotoshop、XDはAdobe XDのファイル形式を指します。
クローラー
クローラーとは、GoogleがWebサイトをGoogleのデータベースに登録するために使用しているプログラムのことです。
自分のWebサイトにクローラーが回ってきてくれると、Googleに記事を認識してもらえます。この認識されることを「インデックスされる」といいます。
クローラーが回ってきたかどうかは、Chromeの検索窓で「site:URL」で検索すればOKです。
このサイトのメインコンテンツである「ロードマップの記事」の場合は「site:https://kaki-lab.org/web-production-words/」と検索窓に入力して調べます。（下の画像参照）
検索して、下のように表示されればクローラーが回ってきてくれたことがわかります。
SSL
SSLは「Secure Sockets Layer」の略で、インターネット上でデータを暗号化して送受信する仕組みです。
Web制作者は通信をSSL化する方法を覚えておくべきでしょう。
SSL化できているかどうかは、URLがhttp://からhttps://になっているか、で判断することができます。
SSL化はレンタルサーバーの管理画面で簡単にできるケースが多いので、調べてみてください。
エックスサーバーのSSL化の場合は下記の記事をご覧いただければOKです。
【参考】無料独自SSL設定 | レンタルサーバー【エックスサーバー】
まとめ
最後にまとめると、未経験のWeb制作者が覚えておくべきWeb制作用語は下の通りです。
- ワイヤーフレーム
- デザインカンプ
- ランディングページ（LP）
- ランニングコスト
- 被リンク／発リンク
- フルスクラッチ
- WordPress
- AMP対応
- ドメイン
- サーバー
- カラム
- SEO
- Google Analytics
- Google Search Console
- JPG／PNG
- リダイレクト
- クッキー
- キャッシュ
- ペナルティ
- PSD／XD
- クローラー
- CMS
- SSL
これらを押さえて、クライアント様と円滑なコミュニケーションをとり、素敵なWebサイトを制作してあげてくださいね。
最後までお読みいただきありがとうございました。
