デザイナーの言うカタカナ語が意味不明・・・

断っておきますが、デザイナーは専門用語を多用しすぎるべきでは無いと思います。専門用語を使わなくてもちゃんと理解できるような言葉に置き換えて説明するのが、優しさだと思います。

しかし、世の中では以下のようなやり取りが常に行われています。

依頼者「上のところの色を明るくして欲しいんですけど…」
デザイナー「ああ、ヘッダーの色ですか？」
依頼者「へ、ヘッダー…？？」

カタカナ語を使われると何となく凄そうな感じがするし、いちいち意味を聞き返すのも恥ずかしい

「プロが言うことだし…」と遠慮していると、イメージと違ったデザインになってしまう恐れもあります。
せっかくコストをかけて外注するのだから、納得のいくデザインに仕上げたいものです。
そこで、今回はサイト制作を外注する時に最低限覚えておきたいデザイン用語をご紹介したいと思います。

◆WEBサイト・ページの構成

WEBサイトには様々なデザインがありますが、実は構成自体はシンプルです。
この項目ではWEBサイトの基本となる構成を紹介したいと思います。

WEBサイトの構成

WEBサイトは基本的に上のような階層構造になっています。
ユーザーのことを考えるとシンプルな方が望ましく、トップページを最上位と考えれば、理想は2階層(トップページ→各ページ)、出来る限り3階層(トップページ→各コンテンツページ→詳細ページ)以内と言われています。上図のようなサイト構成を図にしたものをサイトマップといいます。

WEBページの構成

①ヘッダー

ページの最上部にある、ロゴマークやキャッチコピー、連絡先などの画像が入っている部分です。

②ナビゲーション

ホームページのメニューです。
ここからそれぞれのページへ移動することができます。

・グローバルナビゲーション
WEBサイトで全てのページに共通して設置されるナビゲーションです。
主要なコンテンツが表示されています。

・ローカルナビゲーション
グローバルナビゲーションに表示されている主要コンテンツ内にどんな内容があるのか示すナビゲーションです。

例)
グローバルナビゲーション：製品情報
ローカルナビゲーション：すいか、ぶどう、りんご

③メインビジュアル

サイトの「顔」となる画像です。WEBサイトを開いた時に最初に目に入る画像と言えます。

④サイドバー

画面の右側または左側に表示されている縦長の部分です。
バナーやナビゲーションが設置されることが多いです。

⑤コンテンツ

主な情報が掲載される部分です。
トップページではコンセプトや新着情報、。それぞれのページへの誘導バナー、テキストなどが表示されます。

⑥フッター

ページの最下部にあたります。
コピーライトの画像が配置されることが多いです。

おおむねメインビジュアルはトップページのみで、ヘッダー、ナビゲーション、サイドバー、フッターは全ページ共通の要素です。
コンテンツ部分はページにより変化します。
サイトによってはグローバルナビゲーションがヘッダーに配置されていたり、シンプルなサイトならサイドバーが無かったりすることもあります。

次はデザインの要素を紹介したいと思います。

◆WEBデザインの基本要素

WEBデザインによく使われるパーツ、仕掛けについて解説します。

【バナー】

他のサイトやページにリンクする画像のことです。

【ラジオボタン】

複数の選択ボタンから一つだけ選ぶ設定ボタンです。
選択することで他の選択肢はOFFとして認識されます。

【チェックボックス】

チェックを入れることで「はい」、チェックしないことで「いいえ」を意味する設定ボタンです。
ラジオボタンと違い、複数選択できます。

【セレクトボックス】

▽の部分を押すことで選択肢が表れます。
選択肢から一つを選ぶ時に使われます。
ラジオボタンとの違いは選択肢がリストの形で表示される点です。

【アコーディオンメニュー(プルダウンメニュー、ドロップダウンメニュー)】

クリックやマウスオンによって開くメニューのことです。

【CTAボタン】

「お問い合わせ」、「購入はこちら」などユーザーにとってもらいたい行動につなげるボタンです。

【ホワイトスペース】

ページ内の空白部分を指します。
ホワイトスペースを上手く作ることで画像やテキストが引き立ち、見やすいデザインになります。

【マージン・パディング】

余白のことです。
コンテンツとコンテンツを分ける見えない境界線の余白を「マージン」、コンテンツ内の文字や写真の間の余白を「パディング」と言います。
マージンやパディングを適度に入れることで文字や写真が見やすくなります。

続いてデザイン制作の過程で使われる用語について紹介したいと思います。

◆WEBデザイン制作で使う用語

WEBデザイン制作の際によく使う言葉です。
デザイナーとやり取りをする際に目にしたり、耳にしたりすることがあると思いますので、しっかり覚えておきましょう。

「ワイヤーフレーム(ワイヤー)」

WEBサイトのレイアウトをおおまかに書き出したものです。
どこに画像やテキストを配置するか、バナーをどこに置くかなどが記されます。
具体的なイメージを持ってもらい、より踏み込んだ要望を出してもらうために作成します。

「デザインカンプ」

実際にデザイン制作に着手する前に提出するデザイン案です。
制作後の修正は手間も時間も掛かるため、デザインカンプであらかじめ認識を共有します。

「ファーストビュー」

Webページを訪れたユーザーがまず目にする部分を言います。
スクロールしないと見られない部分はファーストビューに含みません。
メインビジュアルが中心となります。

「ユーザービリティ」

ユーザーの使い勝手の良さのことです。
サイトを訪れたユーザーがストレスを感じることなく、目的を達成してもらえるのが優れたユーザビリティです。
例えば「購入を増やすためにはどこに購入ボタンを設置したらよいか？」といったことがユーザビリティの課題となります。

「UI（ユーザーインターフェース）」

コンピューターとユーザーの接点を指します。
ユーザーインターフェースが意味することは幅広く、ユーザーの目にする部分は全てUIと言えます。
その中でも特に重視されるのは操作感です。ユーザーが快適にサイトを閲覧できるようなデザイン、フォントにすることがWEBデザインでは重要です。

続いて代表的なWEBデザインやレイアウトについてお知らせします。

◆代表的なレイアウト・デザイン

カラムレイアウト

「カラム」とは、ページ垂直方向の区切りの事を指します。
この区切りに合わせて各要素を配置します。

●1カラムレイアウトの例

●2カラムレイアウトの例

●3カラムレイアウトの例

グリッドレイアウト

ページを縦横に分断する直線で格子状に分割し、コンテンツを配置していくレイアウトの手法です。
画像やテキストなどの構成要素を、グリッドに合わせて配置することで、各要素の大きさが違っても整理されている印象を与えることができます。

●グリッドレイアウトの例

レスポンシブデザイン

画面のサイズに合わせてホームページを拡大、縮小するデザイン手法のことです。
HTMLファイルをCSSでコントロールして、画面サイズに合ったページレイアウトに調整します。

リキッドレイアウト

ブラウザの表示領域に合わせてコンテンツの幅・位置を可変で表示させるレイアウトです。

エラスティックレイアウト

フォントの大きさを変えるごとにデザインを変化させるレイアウトのことです。
em(s)という1文字分の幅を基準としてサイズを指定します。

フレキシブルレイアウト

外枠の最小幅と最大幅を指定して、サイトの各要素(画像、テキストなど)を相対的もしくは可変的に調整するレイアウトのことです。レイアウト崩れをカバーする特徴があります。

フラットデザイン(ミニマルデザイン)

シャドウ、傾斜、立体感、質感などの装飾要素を最小限に抑えることで画像やテキストにフォーカスを当てるデザインのことです。
スタイリッシュな印象を与えることができます。

パララックスデザイン

スクロールなどの動作によって、複数のレイヤー（層）にある要素を異なるスピードで動かし、奥行きを表現するデザイン手法です。

マテリアルデザイン

影や奥行き感などをリアルにすることで物質的な見せ方をしているデザインです。
重なっている紙のドキュメントを読んでいるような感覚で読み進めることができます。

まとめ

今回はWEBデザイン用語について解説しました。
概要は分かったけれど、実際に見てみないと分からないという方もいらっしゃると思います。
WEB上には数多くのWEBデザインサイトがあります。時間がある時に覗いてみると理解が深まるはずです。
自分のイメージに近いサイトを見つけておくと、いざWEB制作をする時にスムーズに進められますよ。