よく出てくるWebデザインに関する用語集

記事3のサムネイル

Webの勉強をしているとよく出てくる用語がたくさんあるのですが、ここでは基本的なものを紹介したいと思います。

HTML

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略です。
Webサイトの構造を記述するために使用します。

CSS

Cascading Style Sheets(カスケーディング・スタイル・シート)の略です。
Webサイトの見た目(レイアウトや色など)を記述するために使用します。

JavaScript

Webサイト制作では主にクライアントサイド(ブラウザ側)で使用するプログラミング言語です。
サイトの用途によってはNode.jsなどサーバーサイドで使用することもあります。

jQuery

JavaScriptのライブラリです。
アニメーションやエフェクトを導入する際に、JavaScriptで記述すれば長く複雑になってしまうソースコードもjQueryで記述すれば、比較的短く記述できます。またプラグイン(機能を拡張するプログラム)が豊富で、複雑なアニメーションやエフェクトも簡単に導入することができます。

PHP

サーバーサイドで使用するプログラミング言語です。Webサイトでは例えば、お問い合わせフォームやカレンダーなどの機能に使用されています。また、動的なページの制作(ブログサイトやECサイトなど)にも使用されています。

CMS

Contents Management System(コンテンツ マネジメント システム)の略です。
CMSを導入しているWebサイトでは技術的な知識がなくてもコンテンツの追加や編集などを行うことができます。CMSはたくさん種類がありますが、よく使われているのはWordPress、Movable Type、EC-CUBEなどがあります。

WordPress

オープンソースのブログソフトウェアで一部有料のプラグインもありますが、基本的に無料で使用することができます。世界的にも非常に人気があり、ブログだけでなくCMSとしても利用されることが多く、Webの知識があまりない人でもコンテンツの追加や編集などが簡単にできるので、WordPressを使ったWebサイト構築の需要は多いです。

ラフ

Webサイトの設計図を簡単に手描きしたものです。
大雑把にサイトの構成、コンテンツ、レイアウトを描いていきます。

ワイヤーフレーム

Webサイトの設計図で、サイトの構成、コンテンツ、レイアウトの確認のために作成するものです。ラフよりきれいに整えますが、基本的に画像を入れたり色をつけたりせずモノクロで作成します。

デザインカンプ / モックアップ

Webサイトの完成図を一枚の絵で表したものです。
呼び方は人によって異なります。この完成図に沿ってコーディングしていきます。

RGB

色の表現方法の1つで、RはRed(赤)、GはGreen(緑)、BはBlue(青)のことです。

JPEG / GIF / PNG

Webサイト制作でよく使用する画像形式で、用途や画像サイズを考慮して使い分けられています。私の場合は、JPEGは写真やグラデーションの画像などに、GIFはべた塗りの画像や線画などに、PNGは透過部分がある写真や画像に使用しています。

ユーザビリティ / UI / UX

ユーザビリティは使いやすさのことで、ユーザビリティが高いサイトというのは優れたUI / UXでユーザーにとって利便性が高いサイトのことです。

UIとはユーザーインターフェースのことで、優れたUIのサイトというのは簡単にいうと、例えば各ボタンの大きさや余白が適切で押しやすい、どこに何があるかのナビゲーションがわかりやすくて見やすいなど、操作感が良いサイトということです。

UXとはユーザーエクスペリエンスのことで、優れたUXのサイトというのは簡単にいうと、サイトのコンテンツを見たり、サービスを利用して得られる体験や満足の度合いが高いサイトということです。

API

アプリケーションプログラミングインターフェースのことで、Web APIを使用すれば、短いコードで外部の機能をサイトに取り入れることができます。例えばYouTubeのAPIを使用して自分のサイトで動画の再生やアップロードができるようにする機能を取り入れることなどが比較的簡単にできます。

ライブラリ

汎用性の高い関数・クラスなどを再利用可能な形でまとめたもので、特定のソフトウェアを対象とせず、JavaScriptやPHP、その他様々なプログラミング言語のライブラリがあります。ライブラリを使えば、自分で1からコードを書くより遥かに短いコード量で様々な機能を実現できます。

JavaScriptライブラリ

jQueryなど

PHPライブラリ

GDなど

フレームワーク

汎用性の高い機能をまとめた枠組みのことで、各フレームワークの規則に従ってコードを書いていくことで、効率的にWebサイトやシステムをつくっていくことができます。

HTML / CSSフレームワーク

Bootstrap、Foundation、Skeletonなど

JavaScriptフレームワーク

AngularJS、Backbone.jsなど

PHPフレームワーク

CakePHP、Symfonyなど

プラグイン

特定のソフトウェア、ライブラリの機能を拡張するもので、例えばjQueryやWordPressには非常にたくさんの便利なプラグインがあり、プラグインを導入して簡単な設定をするだけで、様々な機能や効果を実現できます。

SEO

検索エンジン最適化のことで、GoogleやYahooなどの検索結果で上位に現れるように工夫することです。よく言われている適切な見出しタグやキーワードを使うことも重要ですが、サイトの更新頻度やユーザーにとって有益なコンテンツを提供しているかも重要です。

LINEで送る
Pocket

ページトップへ