webデザイン用語集 | 名古屋のWEBプロデューサー山内翼のブログ

アクセシビリティ

年齢／身体的制約／利用環境などに関係なく、Webを利用するすべての人にとって、Webで提供されている情報やサービスが、どの程度利用可能であるかを表す言葉です。
とくに高齢者や障害者など、ハンディを持つ人にとって、どの程度利用しやすいかという意味で使われる場合が多いです。
アクセシビリティを高める例として、音声読み上げ機能への対応や色に依存しない表現などが挙げられます。

タグライン

そのサイトが"何を提供しているのか"や"競合他社との違い"を示す短い文章やフレーズのことを指します。
Webサイトのキャッチコピー、サブタイトルとも言われます。
一般的にサイトロゴのすぐ上か下、隣に配置されます。
何らかの印象や目標を伝えるのではなく、ユーザがそこで得られる便益を極端に示すことが必要です。そのため、広告で使われるキャッチコピーに比べて、より具体性が求められます。

ペーパープロトタイプ

紙(ペーパー)で作った試作モデル(プロトタイプ)のことを指します。
費用をかけず手軽に初期の段階でインターフェースをテストすることができることから、Webサービス開発の現場でよく用いられます。
また、単純な作りでありながら視覚に訴求するため、プレゼンなど大人数に理解させる必要のある現場で、とくに威力を発揮します。

仕様書

システム開発における設計書類の総称です。
顧客の要望をまとめた要件定義書に基づいて作成されます。
Webサイト設計の場合は、機能リスト／画面遷移／ユーザクラスの定義／サーバ稼動条件などの他、プロジェクトの進め方についても記されています。
すべての作業はこれに基づいて行われることから、プロジェクトにとっては重要な役割を担います。

サイトマップ

Webサイトにおいて「サイトマップ」といったときには、２つの意味があります。
１つは、Webサイトの制作過程で使う「設計図」としてこのサイトマップで、サイト構成図などと呼ばれることもあります。
もう1つは、ユーザがWebサイト上で目的の情報を探すために使う「索引」としてのサイトマップです。
Webサイト上のページやコンテンツをおもに階層構造によって示す点はどちらも共通しています。

カラースキーム

どの色をどの配分で使っていくかという計画を立てることを意味し、色彩計画とも言います。
そのサイトの使用目的や条件に沿って配色を考え、決定に導く過程を示します。
カラースキームをきちんと考えることで、統一感の取れた色合いのサイト構築が可能となります。
基本的な構成要素は、ベースカラー／アソートカラー／アクセントカラー／セーフティカラー／トリムカラー／テーマカラーまたはシンボルカラーです。

ガイドライン

ある物ごとについての大まかな指針や指標。
ルールやマナーなどの決まりごと。
Webサイトで代表的なものとして、デザインガイドラインがあります。
これは、サイト全体にわたって視覚表現を統一することにより、使い勝手やブランドの一貫性確保することを目的としています。
他に、制作ガイドライン、システムガイドライン、運用ガイドラインなどがあります。

ユーザの目線の動きを可視化することです。
これを分析することにより、ユーザがサイト上の"どこ"を"どのくらいの時間""どういった軌跡"で注視しているかを知ることができます。
Webサイトの設計意図とユーザ行動との間にギャップがないかどうかを調べるときに活用されます。
ユーザの目の動きそのものを捉えた「視線追跡」、多くのユーザの視線を平均しよく見られる箇所を特定する「視線滞留時間分析(ヒートマップ)」が代表的です。

テーマカラー

Webサイトの基調となる色を指します。
ユーザの視覚的感覚に訴求するための要素です。
"オレンジ＝元気""緑＝癒し"など、色そのものの持つ印象を利用し、「そのサイト(運営企業)をどう見せたいか」を考慮したうえで決定します。
運営方針／コンテンツの性質など、すべての要素とあわせて考え、統一感を持たせることが重要です。

ユーザにWebサイトの構造を認識させ、目的のページに導くために用いられる方法です。
ユーザがサイト内を回遊する際に案内板としての役目を持ち、サイトの閲覧作業を助けます。
なお、ナビゲーションの基本は"どのページにいてもトップページに戻れること"です。
ナビゲーションを確立させるためには、ユーザの導線設計を考慮したサイト制作が必須となります。

トーン＆マナー

広告用語の一種です。
広告表現の核となるコミュニケーションメッセージやデザインに一貫性を持たせ、これに基づいて表現を展開すること、もしくは、展開された表現からかもし出される雰囲気のことを指します。
競合他社との差別化／ブランドマーケティングの志向においては、独自のトーン＆マナーを作り上げることが重要となります。
トーン＆マナーを構成する要素として、文体／表記などが挙げられます。

テンプレート

制作物のもととなる定型的なデータやフォーマットのことを指します。
変更箇所など、必要な情報のみ埋め込んだり書き換えたりするだけで制作物の完成が行えるため、頻繁に使うパターンをテンプレートとしてあらかじめ用意しておき、生産性を上げるという手法がよくとられます。
繰り返し使われるメッセージの複数ページへの挿入、ナビゲーションボックスの作成、テキストの言語間共有を容易にするために使用されます。

ペルソナ

企業が提供する製品・サービスにとって、象徴的なターゲットユーザ像のことを指します。
年齢・職業・年収・趣味嗜好・行動シナリオなどが詳細に設定されています。
これを用いることで、ターゲットユーザのニーズを的確におさえたマーケティングの展開やデザインの生成が可能となります。
ユーザにフォーカスするためのツールの一種です。

ユーザビリティー

Webサイトやソフトウェアの使い勝手の良さのことです。
いかにストレスを感じず使用できたかどうか、目的達成までの労力がいかに少なかったか、などが優れたユーザビリティにつながります。
代表的な評価手法としては、専門家が経験則に基づいて行うヒューリスティック評価や、実際にユーザに使用してもらってその状況を観察するユーザテストがあります。

ユーザエクスペリエンス

ユーザが、製品やサービスの使用を通じて得られる経験や満足など、すべてのことを指します。
その製品やサービスを認識したときのことや、実物を見たときのこと、触ったこと、購入に悩んだこと、さらにそれらの体験が有意義だったかどうかなども含まれます。
サイト制作において、ユーザエクスペリエンスを考えることで、サイトの満足度が高まると考えられています。

ユーザ調査

ユーザ中心設計の出発点となるもので、おもにWebサイトの企画や設計の段階で行います。
手法としては、アンケートやインタビュー、行動観察などがあります。
とくに、ユーザの(意見ではなく)行動に着目することにとよって、より深い動機やニーズを探り出すことができます。
また、こうした調査結果に基づいて、ペルソナを作成します。

ユーザセンタードデザイン

UCDと略され、ユーザ中心設計と訳されることもあります。
ユーザ中心において設計を行うという考え方やそのための手法を指し、Webサイトにおいても徐々に普及しています。
ユーザがWebサイトを利用する動機や状況を理解し、それを支援するように画面や遷移を構成していきます。
その結果として、ユーザエクスペリエンスを高めることができます。

ユーザインターフェース

コンピュータシステムとユーザが情報をやり取りするときの境界面のこと。
UIとも略されます。
古くはCUI(キャラクターまたはコマンドラインインターフェース)が中心でしたが、Mac　OSやWindowsの普及以降はGUI（グラフィカルユーザインターフェース）が一般的になり、Webサイトもこの流れの中にあります。
ただし、OSに比べて表現力や操作法には多くの制約があり、それを打ち破ると期待されているのがAjaxやFlash、Silverlightといった技術です。

マークアップ

文章中の各要素に、"タグ"（本当は要素とか属性とか属性値とか。話長くなるので、あえて"タグ"と表現してます。）と呼ばれる文字列を付けて、文章の構造や書体の変更・デザインなどを指定することです。
この作業によって文章はテキストファイル化され、コンピュータへの認識／処理が可能となります。
このとき記述に用いられる言語を"マークアップ言語"と呼び、代表的なマークアップ言語としてはHTMLが挙げられます。

ワイヤーフレーム

Webページの大まかなコンテンツやレイアウト、ナビゲーションなどを示した簡易的なプロトタイプ(試作モデル)、いわゆる"Webサイトの骨組み"のことを指します。
ワイヤーフレームを作成することで、方向性やアクセシビリティ／ユーザビリティなどサイトの全体像が捉えやすくなります。
詳細などビジュアルデザインの作成は、このワイヤーフレームが決定した後に行います。

Web標準（ウェブヒョウジュン）

W3Cが勧告しているWWW関連の国際基準、とくにWebサイト制作に関わるHTMLやCSS、DOMなどの記述方法を指します。
Webブラウザはこの規格に基づいて開発が行われています。
これに準拠したサイト制作を行うことで、状況や環境に左右されないアクセビリティが誰にでも等価に与えられる他、SEO対策や効率化が実現されるなど、制作者側にもメリットがあります。

ロゴ

企業や商品・サービス名を、図案化した文字などの組み合わせにより表現したもの。
VNの核であり、ブランド構成要素の１つともなります。
企業や商品のWebサイトであれば既存のロゴを使用し、サイト全体もそれに沿ったデザインが求められます。
一方、新たなWebサービスであれば、ロゴも当然、新たに作ります。
google、mixi、Twitter・・・・・。
すぐにそのロゴが頭に浮かぶようになれば、そのサービスは大成功といえるでしょう。

RFP（アールエフピー）

Request For Proposalの略称で、日本語では提案依頼書と訳されます。
企業が情報システムやＩＴサービスを導入する際、発注先となる製品メーカ／販売代理店に、導入システムの概要や調達条件など具体的なシステム提案を行うように要求することを指します。
もしくは、それら取りまとめたシステム仕様書そのもののことを示す場合もあります。
Webサイト制作においても、クライアント企業がWeb制作会社に対してRFPを提示することが広まりつつあります。

IA（アイエー）

Information Architectureの略称で、日本語では情報アーキテクチャと訳されます。
ユーザにとって"情報をわかりやすく伝え"かつ"受け手が情報を探しやすく"するための表現技術です。
この考え方をもとに、効果的にわかりやすく目的の情報に到達できるようにWebサイトを構築することを、情報設計と言います。
また、この作業を行う人を情報アーキテクト（Information Architect）と呼び、これもIAと略します。

HTML（エイチティーエムエル）

Hyper Text Markup Languageの略称です。
通称"タグ"と呼ばれる文字列で文章を構成する、マークアップ言語の一種です。
Web上のドキュメントを記述するために用いられます。
文章中に音声や画像／動画／他のドキュメントへのリンクを埋め込むことができ、Web制作の基幹的役割を担います。
HTMLをXMLに準拠するように改良したものがXHTMLであり、HTMLの後継規格としてＷ３Ｃ勧告となっています。

→HTML（エイチティーエムエル）の続きを読む

Flash（フラッシュ）

Macromedia（現Adobe）社が開発した、web上で配信可能なアニメーションなどのリッチコンテンツを作成するためのソフト、または同ソフトによって作成されたコンテンツを指します。
閲覧には、無償で配布されているプログイン『Flash Player』をwebブラウザに組み込む必要があります。
ファイルの容量が小さく、サイズ変更に伴う画質の劣化が少なく、さらにインタラクティブ性を持たせることも可能なため、インターネットや広告やリッチアプリなどに活用されます。

CI（シーアイ）

Corporate Identityの略称です。
企業が、自社の持つ特徴や個性を提示することで、顧客に与えるイメージを統一させるマーケティング手法の一種です。
または、顧客から見てその企業を識別できるもの自体を指します。
社名／ブランド名称／コーポレートカラー／キャッチコピー／スローガンなどの要素によって構成されます。
なお、この内マークなど見た目に限定される要素をVI（Visual Identity）と言います。