Webデザイナーを目指す初心者さんが知っておきたい専門用語
WebデザイナーとしてWeb業界で活躍したいという初心者さんが、最初につまづきやすいのが、その専門用語の多さ。Webデザインの入門書をパラパラッとめくってみても、見慣れない単語に圧倒されてしまう人も多いのではないでしょうか？そこで今回はWebデザイナーなら知っておきたい単語をいくつかまとめてみました。Webデザインのお勉強中に「これなんだ？」という単語に出くわした時に参考にしてみてください！
↑私が10年以上利用している会計ソフト！
目次
あ行
アクセシビリティ
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デザイナーがマスターしておくべきスキルのひとつ。
オンライン学習サイトのドットインストールでは、動画でCSSの基礎が学べます！
CMS
Contents Management Systemの略。名前のとおり、コンテンツを管理するためのシステムで、HTMLやプログラミングの知識がなくても、文章や画像を指定するだけで、あらかじめ用意されたテンプレートをベースにしたWebサイトを作成できます。ブログのようなサイトに多く用いられており、無料のものから有料のものまで、様々なサービスがあります。世界的に愛されているCMS、WordPressが有名。
JavaScript
HTMLやCSSと組み合わせて、Webページに動きを与えることができる言語。スクロールに合わせてアニメーションを加えたり、クリックするとボタンが動いたりと、アイデア次第で様々な効果をプラスできます。名前は似ていますが、「Java」とはまったく違うものです。
オンライン学習サイトのドットインストールでは、JavaScriptの基礎を動画で学べます！
jQuery
JavaScriptをより簡単に使えるように設計されたライブラリー（複数のプログラムを再利用可能な形でひとまとまりにしたもの）。jQueryのWebサイトからダウンロードできます。複雑なのコードを書かなくても、簡単なコードでJavaScriptを実行できると人気。jQueryの基本や、簡単かつ汎用性のあるコードは「少しのコードで実装可能な20のjQuery小技集」で紹介しています。
jQuery単体を利用する他、様々な「プラグイン」と呼ばれる拡張機能と一緒に利用することで、より手軽に機能を追加できます。
スライス
デザインをパーツごとに分割し、切り取って画像を保存すること。印刷物のデザインではそのまま印刷すればいいのですが、Webサイトの場合は出来上がったデザインをパーツごとに画像をスライスし、HTMLとCSSで組立ててWebサイト上に表示します。
Photoshopを使ったスライス方法は「Photoshopでスライスし、パーツ画像を作成するコツと方法」という記事で紹介しています。
た行
テキストエディター
テキストファイルを作成、編集するためのツール。Windowsに最初からインストールされているメモ帳や、MacにあるTextEditのような、必要最小限の機能を備えたものもありますが、プログラム作成に便利な機能を備えたテキストエディターがWeb界隈では人気。Adobe社ではWebページ作成用テキストエディター「Dreamweaver」を提供しています。ちなみに私はCoda愛用中。
ドメイン
ドメインとは、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サイトの使いやすさのこと。説明なしで機能を使える、簡単な操作でアクセスできるといった、ユーザーにストレスを与えることなく利用できるWebサイトを制作するため、あらかじめユーザビリティの面を考慮して設計していく必要があります。具体的には、リンクじゃないのにリンクのように見える、クリックしても何も変化がないように見えるといったページは、ユーザビリティに問題があると言えます。
ら行
レスポンシブデザイン
様々なデバイスや画面サイズに、ひとつのファイルで対応させるWebデザインの手法のひとつ。例えばPCやMacでこの記事を読んでいる方は、ブラウザーの横幅のサイズを変更してみてください。横幅によってデザインが変化します。デバイスごとに異なるファイルを用意する必要がないので、管理が楽になり、更新漏れなどを防止できます。逆にデバイスごとに細かい変更を指定するのが難しく、制作のはじめの段階で入念な計画・設計が求められます。
わ行
WordPress
WordPressは世界中で愛されているCMS。個人的なブログサイトはもちろん、企業ページやオンラインショップもこのWordPressで作成できます。無料で利用できる、豊富なテーマ（デザインテンプレート）が用意されている、プラグイン（拡張機能）を使って様々な機能を追加できる等、WordPressを利用するメリットは数多くあります。もちろんこのブログもWordPressを利用しています。
ワイヤーフレーム
ワイヤーフレームはお部屋の間取図のようなもので、Webページ内で「何を」「どこに」「どのように」表示させるかをまとめたものです。Webサイトのデザインを始める前に、このワイヤーフレームの段階で骨組みを固めておくと、その後の作業がスムーズにすすみます。
ワイヤーフレームの実例や制作方法は「Webサイト設計図 – ワイヤーフレームの作り方」を参考にしてみてください。
その他、「この単語はよく目にするけど、意味がわからない！」「こんな単語も追加して！」等あれば、お気軽にコメントくださいね！
