こんにちは。
OUT A TIMES編集部の大樹です。
WEB制作の道に進んでからあっという間に10年以上が経過しました。
企業に所属していると、「来月から別の仕事をやってほしい」とか「〇〇の担当になってみないか？」とか「明日からうちのWebサイト担当だ！」なんて言われることもあるかもしれません。
そんな突然Web制作・運営業務を任されてしまったあなたに、Web関連用語を簡潔にご紹介します。
Adobe
読み方：アドビ
デザインには欠かせないPhotoshopやIllustratorを開発・提供している会社です。仕事で「Adobe」と使う場合、製品のセットのことを指します。
Bootstrap
読み方：ブートストラップ
Webフレームワークであり、ナビゲーション、ボタン等のデザインテンプレートが入っています。クラスをつけるだけでスピーディにWeb開発ができるので、初心者にとって便利なツールです。ただし、クラスをたくさんつけすぎてコードが読みづらくなってしまわないよう、注意が必要です。
CMS
読み方：シー・エム・エス
Contents Management Systemの略で、ブログのようにWebサイトを開発・編集できる非常に便利なツールです。Wordpressのようなオープンソースのものもあれば、様々な会社が提供する独自のサービスもあります。かなり高機能なものから基礎的な機能のものまで、使いやすいシステムからそうでないものまで。おおよそ金額によって機能や使いやすさは比例すると思います。
中には今もなおXTHML/CSS2.1までしか対応していなかったり、レイアウトやデザインがかなり制限されていたり、ダイヤルアップ接続かと思うほど重すぎるシステムもある等、「契約して使い始めるまでわからない」ということもあるので、できる限り契約前に確認しておきましょう。
CMYK
読み方：シー・エム・ワイ・ケー
主にカラー印刷用の色の組み合わせであり、Cyan（シアン）、Magenta（マゼンタ）、Yellow（イエロー）、Key plate（キープレート = 黒）の略です。
IllustratorではデフォルトでCMYKが選択されています。チラシやパンフレットを作成する際にはCMYKを使うようにしましょう。
CSS
読み方：シー・エス・エス
Cascading Style Sheet（カスケーディング・スタイル・シート）の略であり、HTMLの様々な装飾を司ります。HTML内に直接記述することも可能ですが、管理が煩雑になってしまったり、多数のHTML間で同じ装飾を共有するために別ファイルとして作成するケースがほとんどです。
DreamWeaver
読み方：ドリームウィーバー
Adobe社が提供するテキストエディタ。多数の便利機能がついており、初心者にとってはブログを作るようにWebサイト編集が可能です。
Flexbox
読み方：フレックスボックス
複数カラムのレイアウトを簡単に作れるレスポンシブの神様のような機能です。細かい機能はたくさんありますが、使いこなせれば自由自在にいろんなレイアウトが作れます。初心者には難しいかもしれませんが、頑張って習得しましょう。
GIF
読み方：ジフ
画像のファイル拡張子の一つですが、256色までしか表現できないため、ロゴやアイコンの用に色の数が少ないものに使います。JPEGと比べてファイルサイズを軽くすることができるので、GIFにできるものはGIFで作りましょう。GIFアニメーション等も作ることができる便利なファイル形式です。
HTML
読み方：エイチ・ティー・エム・エル
Webサイトを作るために一番必要なファイルで、これが無いと何も表示させることができません。（PHP内に各書くHTMLを含める）
2019年11月時点の最新バージョンはHTML5であり、タグの機能や種類も千差万別ですが、とにかく1行でも多くのコード、多くのパターンを書いて、指で覚えましょう。
ID
読み方：アイ・ディー
HTMLでタグにIDを指定することで、装飾を施したり、ページ内リンクのジャンプ先として指定することができます。クラスと似ていますが、同じIDは1ページ内で1回しか使うことができません。その代わり、IDはクラスよりも優先されます。CSSを使う上で、IDとクラスはまず最初に覚えなければなりません。
Illustrator
読み方：イラストレーター（通称：イラレ）
ベクター（線）でデザインするAdobeソフトで、雑誌や映画に出てくるようなキャラクターや絵画と見間違うような作品を作ることもできます。Webデザインにおいてはロゴやアイコン、カンプデータを作るときに使用することが多いです。
IPアドレス
読み方：アイ・ピー・アドレス
サーバのアドレスであり、0～255のうちの数字4つを組み合わせたものです。
例：192.168.0.1
現実世界のあらゆる地点を示す緯度・経度のようなもので、各Webサイトにはそれぞれ固有のIPが存在します。IPを覚えやすいものではないため、ドメイン（例：outatimes.com）を使う場合がほとんどです。
Javascript/JS
読み方：ジャバスクリプト/ジェイ・エス
Webサイトの要素をユーザ側で動的に動かすことです。
代表的なものとして、スライドショーがあります。その他にもボタンで表示・非表示を切り替えるものやサイトをリッチなコンテンツとして見せるもの等、多数のバリエーションがあります。
また、たまに勘違いしている人がいますが、JAVAは別のプログラミング言語であり、Javascriptとは異なります。
もちろん、某宇宙戦争映画の悪役ジャバ・ザ・ハットとの関係性もありませんが、初心者のうちはJavascriptのエラーにハマってしまうとなかなか抜け出れないという厄介ものであり、そういう意味ではジャバ・ザ・ハットに似ているところはあります。
JPG/JPEG
読み方：ジェイペグ
開発者である、Joint Photographic Experts Groupの略です。
画像のファイル拡張子のことで、デジカメで撮った写真はほとんどの場合JPEGで保存されています。多少劣化しますが、高い圧縮率でファイルを圧縮できるため、フルカラーの画像に向いています。
JQuery
読み方：ジェイクエリ
様々なJavascriptを簡単に実装するためのライブラリであり、JQueryを使うことでスライドショーやちょっとした表示の切り替えが簡単にできてしまう魔法のJSです。定期的にバージョンアップするため、導入する際には最新のバージョンを入れる方が無難です。（バージョンアップで使えなくなってしまう機能もあるため、検証は必要です）
LP
読み方：エル・ピー
Landing Page（ランディングページ）の略で、主に営業用や製品紹介用の縦長の1枚ページであることが多いです。
Photoshop
読み方：フォトショップ（通称：フォトショ）
Webデザインには欠かせないAdobeソフトです。ちょっとした画像加工からSF映画のワンシーンのようなスゴ技までいろんなことができてしまいます。Webデザインでは使用する画像を綺麗に整えたり、カンプデータを作るときに使用します。
もちろん、Photoshopはボタン1つで一瞬で何でもできてしまう魔法のツールではありません。書籍を参考にしたり、Webで紹介されているチュートリアルを参考にして、しっかり技術を身につけましょう。また、Photoshopを持っているからと言って、デザイナーに無茶苦茶な要求をするのは止めましょう。
PHP
HTMLと一緒に利用してサーバ側で動かすプログラム言語です。例えば、複数ページで共通のファイルを読み込んだり、日付や時間によってWebサイトの情報を変更したり、作業の効率化や様々なことを実現するには欠かせない技術です。初心者には難しいですが、1つ1つしっかり覚えましょう。
PNG
読み方：ピング/ピー・エヌ・ジー
GIFやJPGと同じように画像のファイル拡張子の1つで、一番の特徴は透過させることができることです。PNG-8とPNG-24の2種類がありますが、PNG-8はGIFと同じように色の数が少ない（256色 以下の）画像向けであり、GIFよりもファイルサイズを小さくすることができます。透過させたいときはPNG-24を使いましょう。
※どちらを使っても拡張子は.pngです。
RGB
読み方：アール・ジー・ビー
CMYKと同じように色の組み合わせですが、こちらはWeb用。Red（赤）、Blue（青）、Green（緑）の略です。コーディングの際はRGBをそのまま指定もできますし、16進数のカラーコード（例：#60c1c3 / #47474b / #d43131）を使います。
SSL証明書
読み方：エス・エス・エルしょうめいしょ
単に「証明書」とだけ言う時もあります。フォームで情報を送信する際、暗号化する機能です。現実世界に置き換えると、ハガキで手紙を出すと、表も裏も書いている情報は丸見えですよね？郵便局員さんは読まないと思いますが、見ようと思えば内容は丸裸です。内容を隠したい場合は個人情報保護シールを貼ったり、封筒に入れたりすれば守れます。証明書はそんな感じで送信者の情報を保護してくれます。
SVG
読み方：エス・ブイ・ジー
これも画像のファイル拡張子の1つですが、Illustratorのようなベクター形式であるため、一番の特徴は拡大しても劣化することがありません。そのため、ロゴやアイコンで使用されていることがあります。また、SVGを使ってちょっとしたアニメーションも作ることができ、使いこなせればアッと驚かせるサイトを作ることができます。
Viewport
読み方：ビューポート
タブレットやスマートフォンと共に登場した機能です。「デバイスに応じてどんなレイアウトをユーザ側に見せたいか」をこちら側で指定することができます。基本的な書き方は以下の通りで良いと思いますが、詳しくは書籍やWebで公開されているチュートリアルを参考にしてください。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no">カンプ
IllustratorやPhotoshopで作る試作デザインデータ（完成イメージ）です。いきなりコーディングをするのではなく、カンプを作って全体のデザインを確認し、GOサインが出てからコーディング作業に移ります。
クラス
HTMLでタグにクラスを指定することで、装飾を施したり、ページ内リンクのジャンプ先として指定することができます。IDと似ていますが、1ページ内に同じクラスを何度でも使うことができます。CSSを使う上で、IDとクラスはまず最初に覚えなければなりません。
コード
HTMLやCSSの中身のことを「コード」と呼びます。
WEB制作のことを全くわからない人はPC画面を見たときに「難しそうなことをやってますね」とか「私にはさっぱりわからない」という感想を言われることが多くなるでしょう。
コードは基本的に英語が使われるので、覚えやすいです。すらすら書けるようにならなければ立派なWEB制作者とは言えないので、英語が苦手な方はこの機会に頑張って吸収しましょう！
コーダー
リコーダーではありません。「コーダー」です。「コード」を書く人です。
一般的に、デザインはせずにコードを書く専門職のようなものですね。
コーディング
コードを書く作業のことです。
サーバ
某有名掲示板では「鯖」なんて書かれたりしますが、もちろん食べられません。
あなたの作ったWEBサイトの情報を世界中に公開するために保存しておく格納庫です。
自宅のマシンをサーバにしている人もいますが、レンタルサーバを使っている人が圧倒的多数です。
レンタルサーバにも「専用サーバ」と「共有サーバ」があり、「共有サーバ」の方が格安です。
2つの違いを住宅に例えると、「専用サーバ」は一戸建て、「共有サーバ」は賃貸アパートのようなものだと思ってください。
サーバに置いてある情報は基本的に世界の誰からもアクセスできるため、必要なないものは入れないようにしましょう。古くなって非表示にするファイルは基本的にサーバからも消しておくのが無難です。
スライス
IllustratorやPhotoshopで作ったカンプデータをパーツ毎に書き出す（切り出す）ことです。適当なファイル名をつけると運用するときに困るので、ファイル名を命名するルールを最初に決めておきましょう。
ソース
とんかつソースではありません。WebのソースはWebサイトを構成するファイル（主にコード）のことでブラウザがWebを表示するための大事なものです。「このページはどう書かれているんだろう？」と思ったら、マウスの右クリック「ソースを表示する」でそのページHTMLファイルが開かれ、CSSやJSを確認することができます。（PHPはユーザ側で見ることができません）
テキストエディタ
あなたのWEBサイトのHTMLやCSSファイルを編集するソフトです。
「ソフト」と聞くと有料で高機能な印象があるかもしれませんが、PCに最初から入っている「メモ帳」や「Notepad」もテキストエディタです。
ただし、「メモ帳」等を使うコーダーはほとんどおらず、みんな何かしらお気に入りのテキストエディタを使っています。もちろん有料のものもあれば、無料で高機能のものもあります。いろいろ使ってみて自分に合うものを見つければ良いでしょう。
トップページ
あなたのWEBサイトの顔ともいうべき、表玄関のようなページです。
別名：ホームページ、インデックスページ
「〇〇〇〇.com」「〇〇〇〇.jp」と入力して表示されるページがそうです。
ドメイン
あなたの作ったWEBサイトを公開するための住所のようなものです。
「〇〇〇〇.com」「〇〇〇〇.jp」がそうです。
「『IPアドレス』は緯度・経度のようなものである」とご紹介しましたが、ドメインは「〇〇県〇〇市〇〇町〇番地〇号」のように、IPアドレス以外の方法であなたのWEBサイトを見つけてもらうための文字列です。
他の人に覚えてもらいやすいドメインを取得できるとベストです。
「faejiodkiueakeit.com」のようなドメインだと覚える気すら無くなってしまいます。
「zooooooooooooooooooooooom.com」のようなドメインはシンプルで面白いですが、oがいくつあるのか数えるのが大変で、覚えるのも入力も面倒になってしまいますね。
ドメインは基本的に早いもの順！良質な（簡単な英単語のように短くて覚えやすい）ドメインはほとんど世界の誰かに取られてしまっていますが、オークション形式等で購入することも可能です。（ただし、かなり高額になります）
もし良いドメインを思いつき、それが取得可能であれば、早めに抑えた方が良いでしょう。
ドメインは「お名前.com」のようなサイトで誰でも購入できます。
バックアップ
ファイルの予備データです。コードを編集する際には必ずファイルを複製し、バックアップを取るようにしましょう。コーディングに慣れていなかったり、JavascriptやPHP等の難しいコードを編集する際に、間違った編集をしてしまい、「きちんと動かなくなった」「元に戻せなくなった」というのはマズいので、作業前にバックアップを取るということは非常に重要です。
パララックス
Webサイト自体がレイヤーが重なっているようになり、スクロールする際に前面と背面で動くスピードが違ったり、スクロールに合わせて要素の表示が切り替わったりする機能のことです。主にLPでよく見かけます。
ホームページ
Webサイト全体のことだと勘違いしている人が多いですが、残念ながら間違いです。
本来の意味は、Webサイトのトップページのことです。Web担当がサイト全体のことを「ホームページ」と呼ぶのは「この人に任せて本当に大丈夫？」と思われるかもしれないので、「Webサイト」や「コーポレートサイト」（企業サイトの場合） と言うようにしましょう。
ただし、Webリテラシーの低い方（「Webサイト」という言葉を 理解してもらえなさそうな方）と会話する際には「ホームページ」と言ってしまう方が良いこともあります。
レイヤー
アニメのセル画のように何枚も絵が重なっていること。PhotoshopやIllustratorでは、例えばテキスト、イラスト、画像のそれぞれのレイヤーを上手く重ねて1つの絵を作ります。
レスポンシブ
PC画面用のレイアウトやタブレット、スマートフォン画面でそれぞれレイアウトを変えて表示するように最適化（調整）されていることです。
コメント