Webデザイナーを目指す初心者さんが知っておきたい専門用語
WebデザイナーとしてWeb業界で活躍したいという初心者さんが、最初につまづきやすいのが、その専門用語の多さ。Webデザインの入門書をパラパラッとめくってみても、見慣れない単語に圧倒されてしまう人も多いのではないでしょうか？そこで今回はWebデザイナーなら知っておきたい単語をいくつかまとめてみました。Webデザインのお勉強中に「これなんだ？」という単語に出くわした時に参考にしてみてください！
目次
あ行
アクセシビリティ
Web アクセシビリティとも呼ばれます。アクセスのしやすさを表し、実生活上ではバリアフリーとも知られています。Web のアクセシビリティにおいては、音声によって Web ページを読み上げたり、動画に字幕をつけるなどの工夫をして、身体の不自由な方でも Web サイトを利用可能な状態にすることがポイントです。
アクセシビリティについては過去にも記事にしているので、ぜひ読んでみてください。
Adobe
Adobe（アドビ）はソフトウェアの会社名。Web のみならず、グラフィックや動画などの作成ツールを多く手がけています。以下のソフトウェアはすべて Adobe が販売しているもの。Web デザイナーを目指す人は要チェック！お値段もそれなりにしますが、今のところ Web 業界では必須ツールとなっています。
- Photoshop…写真の加工、編集。Web サイトのデザインにも使われます。
- Illustrator…イラストの描画。Web サイトのデザインにも使われます。
- Dreamweaver…Web ページの作成。コードを書いていきます。
Web フォント
Web サイト上でフォントを表示するための技術。これまでは Web サイト上で任意のフォントを指定しても、閲覧者側がそのフォントをインストールしていない場合はうまく表示されませんでした。そこでこの技術を使ってフォントファイルを Web サーバー上に置き、フォントデータを読み込むことで、どのユーザーでも指定したフォントを表示できるようになりました。
Web フォントのサービスでは、無料で様々な種類の英数字フォントを提供しているGoogle Fontsが人気。
HTML
HyperText Markup Language の略。Web ページを作るためのマークアップ言語。Web ページに表示したい文章や画像に印をつけ（マークアップ）、コンテンツを作っていきます。各印には様々な意味や記述方法があり、この印のことを「タグ」と呼びます。HTML を書くために特別なソフトは必要なく、Mac にプリインストールされている TextEdit や Windows にプリインストールされているメモ帳を使って、HTML を使ったファイル（Web ページ）を作成することができます。
HTML についての基本的なお話は、過去記事「超初心者さんへ！TextEdit（メモ帳）と Dropbox で Web ページを作ろう」をご覧ください。
HTTP
HyperText Transfer Protocol の略。Web ブラウザーと Web サーバーの間で、HTML ファイルや画像等のデータ通信を行うための約束ごとのこと。Web サイトのアドレスの冒頭には http:// とついていますね。
SEO
Search Engine Optimization の略。日本語では「検索エンジン最適化」と訳されています。その名の通り、Google などの検索エンジンにおいて、特定のキーワードで検索された際に、検索結果ページで上位に表示されるように工夫すること。自分の Web サイトに検索エンジンからの流入を増やすため、重要視されているマーケティング手法のひとつ。
SNS
Social Networking Service の略。会員制でユーザー同士のコミュニティ型 Web サービスの総称です。FacebookやTwitterなどが有名で、SNS を使ったオンライン・マーケティングをいかに利用していくかが、情報発信の鍵。
SVG
Scalable Vector Graphics の略。Web ページ上で拡大縮小しても画質が劣化しない「ベクター画像」を表示する技術。Apple がレティナディスプレイを発表して以来、デザイナー達は画像をどのように高解像度ディスプレイに対応させるか、頭を悩ませてきました。SVG はその解決策となり得るでしょう。
SVG の基本的な情報は「アイコンフォントから SVG へ！より手軽にベクター画像を表示しよう」で紹介しています。
FTP
File Transfer Protocol の略。日本語では「ファイル転送プロトコル」と訳されています。自分のコンピューター内にあるファイルを、他の人も閲覧できるように Web サーバーにアップロードするための仕組みです。しかし最近では SSH によって暗号化して安全にファイルの転送をする「SFTP（SSH File Transfer Protocol）」が推奨されています。
か行
クラウド
クラウド・コンピューティングの略。ファイルを自分のコンピューターではなく、インターネット上に保存する使い方やサービスのこと。インターネットにさえ繋ぐことができれば、自宅や会社はもちろん、外出先などさまざまな環境でデータを閲覧、編集可能。テキストベースのメモをクラウド上に保存できるEvernoteや、様々な形式のファイルを保存できるDropboxが有名。
コーディング
プログラミング言語を使って、ソースコードを作成すること。Web デザイナーが用いる「コーディング」は、Web ページを作成する際、HTML や CSS 等を使って、デザインを Web ぺージへ変換する作業のことを言います。
コンバージョン
商品購入、問い合わせ、資料請求、会員登録など、その Web サイトにおいて獲得できる最終成果のこと。Web サイトへのアクセス数に対し、コンバージョンに結びついた件数の割合をコンバージョン率と呼びます。あらかじめコンバージョンを設定し、コンバージョン数やコンバージョン率を計測することで、Web サイトの課題や改善点を発見できます。
さ行
サーバー
Web サーバーとも呼びます。HTML ファイルをはじめとする、Web サイトを表示するために必要なデータを Web ブラウザーに送ってくれるシステムのこと。大きくわけて、共有サーバー、専用サーバー、仮装専用サーバー（VPS）にわけられます。
サイトマップ
Web サイトの構成図。どのページがどこへリンクするのか、ページの重要度など、Web サイトの構成を図にまとめたもので、あらかじめサイトマップを作っておくことで、Web サイトの制作途中で変更があった場合でも情報を整理しやすくなります。詳しくは過去記事「Web サイトの構成図を簡単に作れる便利ツール」をご覧ください。
CSS
Cascading Style Sheet の略。スタイルシートとも呼ばれます。Web ページのデザインやレイアウトなど、見栄えを指定するための言語です。HTML と並び、Web デザイナーがマスターしておくべきスキルのひとつ。
CMS
Contents Management System の略。名前のとおり、コンテンツを管理するためのシステムで、HTML やプログラミングの知識がなくても、文章や画像を指定するだけで、あらかじめ用意されたテンプレートをベースにした Web サイトを作成できます。ブログのようなサイトに多く用いられており、無料のものから有料のものまで、様々なサービスがあります。世界的に愛されている CMS、WordPressが有名。
JavaScript
HTML や CSS と組み合わせて、Web ページに動きを与えることができる言語。スクロールに合わせてアニメーションを加えたり、クリックするとボタンが動いたりと、アイデア次第で様々な効果をプラスできます。名前は似ていますが、「Java」とはまったく違うものです。
jQuery
JavaScript をより簡単に使えるように設計されたライブラリー（複数のプログラムを再利用可能な形でひとまとまりにしたもの）。jQuery の Web サイトからダウンロードできます。複雑なのコードを書かなくても、簡単なコードで JavaScript を実行できると人気。jQuery の基本や、簡単かつ汎用性のあるコードは「少しのコードで実装可能な 20 の jQuery 小技集」で紹介しています。 jQuery 単体を利用する他、様々な「プラグイン」と呼ばれる拡張機能と一緒に利用することで、より手軽に機能を追加できます。
スライス
デザインをパーツごとに分割し、切り取って画像を保存すること。印刷物のデザインではそのまま印刷すればいいのですが、Web サイトの場合は出来上がったデザインをパーツごとに画像をスライスし、HTML と CSS で組立てて Web サイト上に表示します。
Photoshop を使ったスライス方法は「Photoshop でスライスし、パーツ画像を作成するコツと方法」という記事で紹介しています。
た行
テキストエディター
テキストファイルを作成、編集するためのツール。Windows に最初からインストールされているメモ帳や、Mac にある TextEdit のような、必要最小限の機能を備えたものもありますが、プログラム作成に便利な機能を備えたテキストエディターが Web 界隈では人気。Adobe 社では Web ページ作成用テキストエディター「Dreamweaver」を提供しています。
ドメイン
ドメインとは、webcreatorbox.com といったインターネット上の住所のこと。ドメインは世界にひとつだけ。他に誰も取得していないものであれば、あなたのオリジナルドメインを取得することができます。つまりドメインの取得は早い者勝ち！欲しいと思ったドメイン名は早めにとっておきましょう。多くのレンタルサーバー会社では申込時にドメインも同時に取得できる場合が多いので、利用してみるといいでしょう。
は行
バックエンド
ユーザーや他のシステムから見えないところでデータの処理や保存などを行う要素のこと。エンジニアやデベロッパーと呼ばれる人の活躍の場。Perl、PHP、Ruby、Java、Python 等のプログラミング言語が用いられます。データベースの管理システム等がこれにあたります。逆にユーザー等と直接やり取りをする要素のことを「フロントエンド」と呼びます。
バナー
元々は垂れ幕を意味し、Web サイト上に表示される広告画像のこと。駆け出し Web デザイナーはこのバナー画像制作の仕事を任せられることが多いとか。バナーのサイズは様々ですが、Google Adsense の推奨するサイズにあわせるのが一般的。
パンくずリスト
Web サイト内でユーザーが現在どの位置にいるかをわかりやすくするため、上位階層へのリンクを並べたリストのこと。「ホーム ＞ 関東地方 ＞ 東京 ＞ 新宿」というように、「＞」や三角などの印で区切られます。童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていったというお話から名付けられたようです。
ファーストビュー
Web ページを開いた際に最初に表示される表示領域のこと。スクロールをしなくても表示される範囲なので、重要なコンテンツを配置するとよいとされています。モバイルデバイスが普及した現在、ファーストビューのサイズはデバイスによっても様々で、すべてのデバイスに対応するには工夫が必要です。ちなみにファーストビューは和製英語で、英語では「Above the fold」と呼ばれます。
フラットデザイン
影や質感などを排除し、シンプルで平面的な見た目にするデザイン手法のひとつ。単色・ベタ塗りで、鮮やかな色彩を用いることが多いです。昨今の Web サイトやモバイル OS、アプリ等で見かける機会が増えてきました。少ない画像で表現可能なので、ページの読み込み時間を削減できたり、デザインの時間短縮も期待できます。反面、シンプルすぎてアイコンの意味が理解できなかったり、ボタンがクリックできるのかわからなかったりなど、安易にフラットデザインを採用するとユーザーを混乱させがちなので注意が必要。
フロントエンド
ユーザーや他のシステムなどと直接データなどのやり取りを行う要素のこと。Web デザイナー、コーダーと呼ばれる人の活躍の場。HTML、CSS、JavaScript 等が用いられます。フロントエンドからのデータ入力や指示などを受けて、ユーザーから直接見えないところでデータの処理や保存、処理結果の出力などを行う要素は「バックエンド」と呼びます。
ブラウザー
Web ページを閲覧するためのツール。Web ブラウザーとも呼ばれます。今このページも Web ブラウザーによって表示されています。代表的なブラウザーはInternet Explorer、Google Chrome、Firefox、Safari等。Web サイトを制作する上では、これらの Web ブラウザーでうまく表示できているかを確認する必要があるので、表示テストのためにもインストールしておくとよいでしょう。
ポートフォリオ
自分の作った過去の作品を集めた Web サイト。「オンラインポートフォリオ」や「ポートフォリオサイト」とも。Web デザイナーとして就職活動をするにあたって、必須となる Web サイトなので、就活の際は必ず用意しておきましょう。
ま行
ミニマルデザイン
デザイン手法のひとつ。見せたいものや伝えたいことの中から引き算をしていき、最小限度におさえたデザインをミニマルデザインと呼んでいます。余分なものをそぎ落とすことで、ユーザーにより明確にメッセージを伝えることが可能です。何を目立たせるかを明確にし、余白をうまく使ってメリハリをつけることが大切。詳しくは「効果的なミニマルデザインと退屈なデザインの境界線」で紹介しています。
や行
ユーザビリティ
Web サイトの使いやすさのこと。説明なしで機能を使える、簡単な操作でアクセスできるといった、ユーザーにストレスを与えることなく利用できる Web サイトを制作するため、あらかじめユーザビリティの面を考慮して設計していく必要があります。具体的には、リンクじゃないのにリンクのように見える、クリックしても何も変化がないように見えるといったページは、ユーザビリティに問題があると言えます。
ら行
レスポンシブデザイン
様々なデバイスや画面サイズに、ひとつのファイルで対応させる Web デザインの手法のひとつ。例えば PC や Mac でこの記事を読んでいる方は、ブラウザーの横幅のサイズを変更してみてください。横幅によってデザインが変化します。デバイスごとに異なるファイルを用意する必要がないので、管理が楽になり、更新漏れなどを防止できます。逆にデバイスごとに細かい変更を指定するのが難しく、制作のはじめの段階で入念な計画・設計が求められます。
わ行
WordPress
WordPressは世界中で愛されている CMS。個人的なブログサイトはもちろん、企業ページやオンラインショップもこの WordPress で作成できます。無料で利用できる、豊富なテーマ（デザインテンプレート）が用意されている、プラグイン（拡張機能）を使って様々な機能を追加できる等、WordPress を利用するメリットは数多くあります。もちろんこのブログも WordPress を利用しています。
ワイヤーフレーム
ワイヤーフレームはお部屋の間取図のようなもので、Web ページ内で「何を」「どこに」「どのように」表示させるかをまとめたものです。Web サイトのデザインを始める前に、このワイヤーフレームの段階で骨組みを固めておくと、その後の作業がスムーズにすすみます。
ワイヤーフレームの実例や制作方法は「Web サイト設計図 – ワイヤーフレームの作り方」を参考にしてみてください。
その他、「この単語はよく目にするけど、意味がわからない！」「こんな単語も追加して！」等あれば、お気軽にコメントくださいね！