WEBデザインの専門用語

お知らせ

news

トップ > お知らせ > LABO（研究） > WEBデザインの専門用語

2019.7.1

Yoriyork デザインチームです。

デザインには紙面などのDTPデザインやWEBデザインなど、用途によって様々なものがあります。よく見かけるけど名前の知らないパーツや、聞いたことがあるけどイマイチよくわかっていない用語などはありませんか？

今回はWEBデザインで使用される専門用語を「概念・考え方」「レイアウト」「デザインパーツ」「構築」のジャンル別に見ていきましょう。

概念・考え方

UI

ユーザーインターフェース（User Interface）の略称です。インターフェースは「接点」・「境界面」を示す言葉であり、ユーザーがコンピュータなどのデジタル機器・システムと情報のやりとりをするための仕組みや操作感のことです。

UX

ユーザーエクスペリエンス（User Experience）の略称です。ユーザーが製品・サービスを通じて得られる体験を意味します。また、その体験によってユーザーがいだいた感情も含まれます。

モバイルファースト

従来のサイトデザインはPC→モバイルの順での作成でした。それに対してモバイルファーストとは、モバイル版のデザインから制作を行うことです。
これはただスマートフォンの普及率増加に伴って、携帯端末での表示を重視するという意味ではありません。通信量や画面サイズに制約があるモバイル版を先に制作することで、コンテンツをシンプルにまとめることが出来ます。

レイアウト

ワイヤーフレーム

WEBサイトのレイアウトを定める設計図のことです。サイトの構成やコンテンツを決めていきます。実際にデザインを起こす際には、このワイヤーフレームを元に制作するため、重要な工程となります。

デザインカンプ

「デザインの完成見本図」のことです。ワイヤーフレームの構成を元に肉付けし、作成します。クライアントと制作者との間で、色やフォント、コンセプトなどのイメージをすり合わせるために作成されます。

レスポンシブデザイン

デバイスの画面サイズに依存しないWEBサイトを構築するレイアウトです。
WEBを閲覧できる端末が増えた昨今、モニターに合わせてサイトが閲覧できることが重要視されています。アクセスしたデバイスのウィンドウ幅に合わせて、レイアウトが最適化されたレスポンシブデザインでの製作は、ほぼ必須といってもいいでしょう。

カラム

カラムとは「段組み」を表す言葉です。
サイトデザインにおいては、１列のみの段組みの場合は「シングルカラム」。ブログなどのようにメインコンテンツとサブコンテンツの２段・３段組みのデザインは「２カラム」「３カラム」と呼びます。

デザインパーツ

ナビゲーションは、サイトを訪れるユーザーに対しての案内です。各ページに共通するデザインのボタンを設置するなどの工夫を行ないます。ナビゲーションをわかりやすくすることで、ユーザーはストレスなくサイトを閲覧することができます。

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

WEBサイトやアプリを使う際に、もっともよく使われるのが、グローバルナビゲーションです。主要なコンテンツへのリンク集となっており、通常は画面のどこかに常設されています。これは各ページに共通して、決まった場所に決まった並びで、必ず表示されます。

ハンバーガーメニュー

主にスマートフォンサイトやダブレットで採用されている、三本線のナビゲーションメニューのことです。名前の通り「ハンバーガー」に見えるためこの名称になっています。少ないスペースで表示できるメニューで、様々なデザインに馴染ませることができます。

ファーストビュー

WEBサイトを表示した際に、最初に表示され、ユーザーの目に入る画面の領域のことです。WEBページにアクセスした際に、興味のないユーザーは数秒でサイトを離脱します。そのためにファーストビューでいかにユーザーの関心を引くかが重要な要素になります。

パンくずリスト

ユーザーがWEBサイト内のどの位置にいるのかを分かりやすくするため、ページの階層順にリンクを設置したリストのことを指します。主にコンテンツの最上部に「○○＞○○＞○○」といった形で「＞」や「/」で区切られて記載されます。童話「ヘンゼルとグレーテル」で出てくる、道順を忘れないための「パンくず」のエピソードからその名がついたようです。

ファビコン

WEBブラウザでページを開いた際に、アドレスバーやタブ部分に表示される小さいアイコンのことです。複数タブを展開している際に、オリジナルのファビコンが設定されていると、目印となるので戻りやすくなります。

バナー

WEB上で他のサイトを紹介する役割をもつ画像のことです。主に広告や宣伝用に作成されるため、WEBサイトへのリンク用に使用されることが多いです。

構築

コーディング

コーディングとは、PCに対する処理をプログラミング言語で記述することです。WEBサイトを構築する際は、主に「HTML」と「CSS」という言語を使用します。

HTML

HTML（HyperText Markup Language）は、WEBページを作成するために開発された言語です。現在、インターネット上で公開されてるWEBページのほとんどはHTMLで作成されています。タグで要素をくくることで、情報を正しくコンピューターに認識させることが出来ます。

CSS

CSS（Cascading Style Sheets）とは、WEBページ配置や、フォント、色など、見た目の装飾を行う言語です。HTMLとセットで扱います。

WEBフォント

通常、WEB上のフォントは各デバイスにインストールされたフォントを使用しています。そのためデバイスによっては、製作者の意図するフォントを再現することが出来ませんでした。WEBフォントはWEBページの読み込みと同時に、ネットワーク上にあるフォントデータのダウンロードを行ない、どのデバイスで見ても制作サイドが意図したフォントで表示することが可能になります。

ジャンル別に専門用語の確認を行ってきましたが、いかがだったでしょうか。
一見分かりづらい専門用語も、関連する用語と一緒に確認することで理解を深めることが出来ると思います。
知っている用語を増やすことで、WEB製作の工程をスムーズに行うことが出来ます。更に、用語の意味を理解し、より良い製作を行ないましょう。

Author:admin｜Category:LABO（研究）