【完全自分用】WEBデザイン用語集

スポンサーリンク
スポンサーリンク

はじめに

※ 完全自分用の記事です

こんにちは、ランドゥです。

と、いつものように挨拶しておりますがこの記事は誰かに読まれることを想定したものではありません。現在Webデザインを個人的に勉強している僕のために作成した、完全自分用の用語集の下書きです。

情報が構造化されておらず、偏りや誤りがある可能性がございますが、本記事は僕が覚えたい項目のメモですのでご了承ください。

わざわざ公開する理由

 短期間で僕の記憶に定着させるためです。

 自分が書いたブログ記事のリライトは日課であり、未完成である本記事もルーティーンワークとして日々更新していく予定です。 公開することで自分にプレッシャーをかけながら、慣れないWebデザイン用語を出来るだけ自分の習慣の中に組み込むことを目的としています。さらに、有識者の方に誤りを指摘してもらえる可能性もあるかもしれません。

 著作権など本記事の内容に何らかの問題がある場合は、連絡先までご指摘いただけましたら幸いです。

勉強中のWEBデザイン用語 (50音順)

alt属性

画像の代わりになるテキスト情報。 HTMLのimg要素の中に記述される。

API (Application Programming Interface)

ソフトウェアの機能を共有するためのインターフェース。

Bootstrap

Twitter社が開発の CSSフレームワーク。アイコンフォントやUIパーツ(ボタン・コンポーネントなど)を活用するJavaScriptも提供する。

Canvas要素

主にJavaScriptを使って図形を描画するための要素。

class名

cssを特定の要素にのみ適用する場合に用いるhtmlの属性。

CMS (Contents Management System)

Webサイトのコンテンツ管理に使われるシステム。WordPressやMovable Typeなどが挙げられる。

Compass

SassのMixinsやFunctionsを含んだフレームワーク。

CR+LF

CSS

HTMLとは異なり、表示指定をするために用意される。各種要素の中で、どの要素の、何を、どのようにするかを記述するスタイルシート言語のこと。現在使用可能なレベルはCSS2.1、 CSS3。

CSSスタイリング

CSSで字体や文字の大きさ、色、行間を制御すること。

CSSスプライト

複数の画像を結合した1毎の画像をズラしながら表示する方法。

CSSのコメント

「/* ~ */」で囲われた画面上に表示されないメモ書き。

CSSの書式

表示指定は「何を:どのようにする」というもの。適用対象の要素を示す部分を「セレクタ」、「何を」の部分を「プロパティ」、「どのようにする」の部分を「値」と読んでおり、セレクタ{プロパティ: 値;}のように記述する。

CSSプリプロセッサー

CSSを生成するためにプログラミング可能な機能を導入したもの。Sass, Less, Stylusなどが挙げられる。

CSSポストプロセッサー

CSSの最適化などの後処理を行うツールのこと。ベンダープレフィックスを自動で付けられる。

DNS

ドメインネームシステム。ドメイン名やホスト名、対応するIPアドレスの情報を分散して管理している巨大なデータベースのこと。

DNSサーバ

IPアドレスとドメインを対応させるサーバ。

ECサイト

Webサイトの閲覧者の期待にこたえる形で、商品の詳細データを表示するサイト。

floatプロパティ

要素を空きスペースへ流し込む。

GIF (Grafics Interchange Format)

色調の変化が少ないアイコンやロゴに向くファイル形式。インデックスカラーとして24bit フルカラーの中から256色まで扱うことが出来る。

Graceful Degradation

モダンブラウザの水準に合わせて構築するが、レガシーブラウザでも一定の水準を提供しようとする考え方のこと。

HSL色空間

HSLはそれぞれ色相、彩度、輝度を表す。

HTML

ハイパー・テキスト・マークアップ・ランゲージ。SGMLに準拠して作成されたマークアップ言語。テキストファイル。Webサイトを構成するWebページを作る。コンテンツを構成している各部分にタグと呼ばれるテキストのしるしをつけて、その部分が何であるかを示すもの。HTML4.01, HTML1.0, HTML5 のバージョンがある。

HTMLの属性

要素に対して様々な補足情報を追加するもの。開始タグの後に書き込むことがある。

HTMLの大枠構造

ページ全体を示すために文書の先頭に書く文書型宣言。

HTMLの要素

<>と</>で囲った範囲のこと。

HTTP (Hypertext Transfer Protocol)

URLの「http:」はこのプロトコルを用いてブラウザとWebサーバがやり取りすることを表す。

HTTPリクエスト

Webブラウザからサーバへ必要なファイルを要求すること。

HTTPレスポンス

リクエストされたファイルを見つけてサーバがWebブラウザへ送ること。

IA

情報アーキテクチャ。ユーザーへ情報を分かりやすく伝えるための技術全般。

IAサイトマップ

ツリー型、リニア型、マトリクス型、フォークソノミー型などがある。

IPアドレス

インターネット上に接続してある機器に識別用の番号を振り当てているもの。32ビットのデジタルデータ。

Java Script

ブラウザで動くプログラミング言語。Webページに動きをつけるためのもの。カルーセルやスライドショー、アクセス解析などに用いられている。

JPEG

多階調の写真に向くファイル形式。非可逆圧縮で高い圧縮率。

jQuery

一番普及しているJavaScriptのライブラリ。セレクタ選択の仕方がCSSに近い。

jQueryの書式

「$(変更を加えたいもの).行いたいこと();」が基本となる。「変更を加えたいもの」を「セレクタ」、「行うたいこと」を「メソッド」と呼ぶ。

KGI (Key Goal Indicator)

Webサイトの目標の多制度愛を表す指標。

KPI (Key Performance Indicator)

目標を達成するための中間指標。

Mixins

Sassの機能。

Multi-column module

段組みを簡単に実現することができるプロパティ。

MVCパターン

Model, View, Controller のパターンのこと。ライブラリはこれやMVVM(Model-View-ViewModel)パターンを基本としたフレームワーク。

Node.js

サーバサイドのJavaScript環境。

Page Speed Insights

Googleが提供するページ表示速度評価ツール。

PNG (Portable Network Graphics)

ネットワーク上でのやり取りを想定して策定されたファイル形式。

Polyfill

レガシーブラウザの独自仕様に対してJavaScriptや拡張機能を用いて、モダンブラウザ同様の表現・機能を提供する考え方のこと。

positionプロパティ

意図した位置に自由に配置できる。

Progresive Enhancement

プログレッシブ・エンハンスメント 。レガシーブラウウザを基準としながらも、モダンブラウザではよりリッチな表現・機能を用いる考え方のこと。

PV (Page View)

そのページがどれだけリクエストされたかを表す指標のこと。

RWD

レスポンシブWebデザイン。 小さい画面から考えて 利用シーンに合わせた情報提供をする。

Sass

最も人気の高いCSSプリプロセッサー。

SGML

文書データからレイアウト情報を取り除いた国際基準規格の言語。異なるアプリケーション間で文書ファイルに互換性を持たせることが目的。

SPA

1ページアプリケーション。

SSL(Secure Sockets Layer)

WebブラウザとWebサーバの間のやり取りを暗号化する技術のこと。

Subline Text

画面分割やテキストの複数選択などの編集機能を持つエディタ。

SVG (Scalable Vector Graphics)

ベクターグラフィックを扱うことができるファイル形式。

UI(ユーザーインターフェイス)

Webページでユーザーの目に触れる部分のこと。

UTF-8

文字コードのひとつ。文字を符号化するための方式。

UX(ユーザーエクスペリエンス)

製品やサービスを利用することでユーザーが得られる経験。

W3C (World WideWeb Consortium)

 HTMLやCSSの技術の策定。

WCAG

アクセシビリティのガイドライン

Webサーバ

リクエストメッセージを受け取ったら内容を確認して、データを処理して、レスポンスメッセージを作成してデータを返すのが役割。

Webフォント

画像と同じように配信するフォントデータ。CSSで任意にフォントを定義できる。サービスが指定するCSSやJavaScriptをHTMLへ記述して利用する。

XML(Extensible Markup Language) 

マークアップ言語。文書中にあるデータや要素、属性を分かりやすくする点で優れている。

アクセシビリティ

Web制作側が遵守していくべき基準 。4大原則は、知覚できること、操作できること、理解できること、堅牢であること。

アジャイル型

小さな機能単位(要件定義→設計→実装→検証)でワークフローを回す

インブラウザデザイン

ブラウザで確認しつつWebをデザインすること。

エンドユーザー

一般の利用者。末端にいる利用者。

オブジェクトコード

コンピュータが実行可能な機械語。

カード型レイアウト

パッケージを並べるレイアウト。

カスタムデータ属性

HTML5における任意の要素に追加できる独自の属性。「data-」の書式。

ガター

余白。

カラム型レイアウト

カラム(段組み)で構成するレイアウト。

カルーセル

Webサイト上の自動のギャラリー。

キーカラー

配色の核となる色。印象を左右する。

クライアントサイド

WebページやWebアプリケーションにおいて、ユーザーから見える部分。

グローバルナビゲーション

 サイトのメインメニュー。サイト内の全てのページで表示される。

グローバル属性

HTML5で指定されているどの要素にも共通して指定できる属性。

コーディング

ソースコードを記述する作業のこと。

コンパイル

ソースコードをオブジェクトコードに変換すること。

サーバサイド

WebページやWebアプリケーションにおいて、ユーザーから見えない部分。主にCMSやECサイトで必要になる。

サイトマップ

Webサイト全体の構造・階層を表したもの。全体像を把握してユーザーの動線を設計する。

シンタックス

構造化データの記述フォーマットのこと。

シンボルフォント

シンボルを文字としてマッピングする者。

セッション

Webサイトへ訪問してから離脱するまでの一連の行動を表す単位のこと。

セパレートカラー

配色を分離する効果を持つ色。

ソースコード

ソフトやアプリケーション開発の際にその動作を記述したもの。

タイプセレクタ

適用対象を「要素名」で示すセレクタ。

タグ

コンテンツを構成している部分につけるテキストの印。例えば開始タグは<p>、終了タグは</p>と表す。

タスクランナー

タスクを自動化するツールのこと。構文のチェックやファイルの結合を行う。

ディレクトリ

フォルダと同義。ファイルやディレクトリを記録できる部分のこと。

データベースサーバ

Webサーバが処理した情報を基にデータの検索・抽出などを行ってその結果を返すのが役割。

デザインカンプ

ワイヤーフレームを用いて作成したWebサイトの完成イメージがわかるもの。

デザイン仕様書

コンセプトやカラー、フォントをあらかじめ決める仕様書。

ドメイン

サーバの所在を示すもの。リクエストメッセージにサーバの所在を記述する際はIPアドレスへ変換する。

ハイレベルサイトマップ

Webサイトの構造・概念を大まかに描く設計図。

パララックス

視差効果。コンテンツに奥行きを持たせる動的な表現。

ビットマップ画像

点の集合として表現する画像。最小単位はPx(ピクセル)。

ブラウザキャッシュ

表示したWebページの情報をコンピュータ上に保存しておく機能。

ブレークポイント

CSSを切り替える画面幅の指定のこと。

フレームワーク

Webサイトを素早く柔軟に制作するための手法。

フレキシブルボックス

要素の配置方向や順序を自由に決められるプロパティ。

プロトコル

コンピューター間の通信における決まりごと。

ページパフォーマンス

ページの読み込みスピードのこと。サイトの収益に直接影響する。

ペーパープロトタイピング

紙に書いたモックアップ。

ベクター画像

色や線を計算式で表現する画像。

ベンダープレフィックス

CSS機能を動作させるためにプロパティや値の先頭に付けるもの。

ボキャブラリ

シンタックスに意味を持たせる定義のこと。

マークアップ

コーディング作業の一つ。文章を構造化すること。

メインコンテンツ

Webページのメインの内容。

メディアクエリ

CSS2からあるメディアタイプが拡張されたもの。@mediaでメディアタイプとメディア特性を指定することにより出力デバイスの種類を判別してスタイルを適用できる。

モダンブラウザ

現在のWeb基準(W3Cなど)をサポートでしきれているブラウザのこと。

モックアップ

静的なデザインカンプだけでは分からないWebデザインを実際のデバイスで触ったり動かしたりして伝えられるもの。

ユーザビリティ

特定のユーザーが特定のインターフェースを利用した時の使いやすさ。

ユーティリティナビゲーション

サイトマップなど必要な時にすぐに見つけられるメニューをまとめたもの。

ユニークユーザー

一定期間内にサイトへ訪れた独自のユーザーのこと。

ユニバーサルセレクタ

適用対象が全ての要素であることを「*」で示すセレクタ。

ライブラリ

多くの便利なプログラムがまとまって入っているもの。

リキッドレイアウト

要素を%で指定するレイアウト。

リクエスト

クライアントがサーバへ送信するデータや処理を要求するメッセージのこと。

リッチスニペット

検索結果にタイトル等と同時に表示されるユーザー向けの説明文のこと。ページ上の関連したデータを検索結果でいち早く見せることが目的。

レガシーブラウザ

現在のWeb基準(W3Cなど)をサポートでしきれていないブラウザのこと。

レンダリングエンジン

HTML等のデータを処理してWebページの表示形式へ変換するプログラムのこと。

ローカルナビゲーション

 グローバルナビゲーションの補助的な役割を果たす、第2階層以下のページ間へのリンク。

ワイヤーフレーム

必要要素を洗い出してコンテンツの優先順位を決め、どんな要素が必要でどれが重要かを形にしたもの。 設計した内容を落とし込むもの 。

加法混色・減法混色

色を重ねて明るく、または暗くすること。

可変グリッドレイアウト

グリッドとリキッドの組み合わせで、ウィンドウの幅によってグリッドの幅が変わるレイアウト。

解像度

ディスプレイの密度。

技術仕様書

サーバ、開発言語、開発環境などの技術的な要件をを設計段階で定義しておくもの。

疑似クラス

特定の状態にある要素に対してCSSを適用させたい場合に使用するもの。

疑似要素

要素では無い部分を適用先とする場合に使用する。

構造化データ

HTMLにより詳細な意味づけを行う技術。

詳細サイトマップ

ハイレベルサイトマップの全体像を元に、ページ単位で細かく分割したもの。

色の三属性

色相・明度・彩度。

色光の3原色

RGB。

色指定

基本的にRGBは16進数(00~FF) で行われる。CSSには10進数で指定する方法もある。

色料の三原色

CMYK。

進出色・後退色

色が持つ遠近感。

対比効果・同化効果

 対比効果は背景の色と反対の方向に色の見えが変わること。同化効果は隣り合う2色の色相・明度・彩度が近づいたように見えること。

直帰率

セッションに対して1ページだけ見てサイトから離脱する割合。

透明度

RGBやHSLが”rgba” “hsla” のように表示して調節する。0~1の間で透明度を指定。

保守

サーバやシステム、ドメインで行う必要がある。

おわりに

 これまでこれらの用語の正確な意味を調べずに、ブログを運営していたという事実が恐ろしいですね。順次更新しながら勉強していきますよ~🙃。

(文責・ランドゥ)

コメント

タイトルとURLをコピーしました