デザイン用語集

STEP1

五十音順

 

 

アイキャッチ

その名の通りユーザーの目(アイ)を引きつける(キャッチ)するための画像のこと。
インターネットでは、Webサイトの記事やブログ本文の最初にある、閲覧者の注意を惹くために載せる画像をいう。

 

アートボード・フレーム・キャンバス

デザインを制作するときに必ず最初に設定する枠。バナーであれば指定されたバナーサイズ、WEBサイトであればPCやスマホのブラウザ幅に設定する。

 

RGB/CMYK

RGB=赤・緑・青の3色(光の三原色)を使って色を表現する方法。
パソコンのモニター、テレビ、デジタルカメラ等で使う。

CMYK=シアン・マゼンタ・黄の3色(色の三原色)を使って色を表現する方法。
印刷(プリンター)で使う。

 

HTML

HTML(HyperText Markup Language)=Webページを作るための最も基本的なマークアップ言語。
ハイパーテキストの各要素(リンク、画像、動画など)がどんな役割をしているのか(文書構造)をコンピューターに説明しているもの。
HTMLファイルはCSSや画像などの外部リソースを読み込んだ上で、ウェブ上に表示し、ユーザーはウェブサイトとして見ることができる。

 

LP(ランディングページ)

広告(バナー)の飛び先ページ(リンク先ページ)。ユーザーが広告などのリンクをクリックしたときに表示される、1枚の縦に長いWebページのこと。商品・サービスの訴求を行い、コンバージョン(成約)まで完結させることが狙い。

 

オブジェクト

テキストや図形などの物体の総称。

 

カーニング

文字を入力したままだと文字同士の間隔にバラツキがあるように見えるため、文章が読みやすく、美しくなるように文字間の余白を調整すること。「文字詰め」とも言う。

 

解像度

画像を表現する格子の細かさのこと。単位は「dpi」。
Webは72dpi、紙媒体は300〜350dpiが望ましい。

 

カスタマージャーニー

カスタマージャーニーとは、簡単にいえば、顧客が購入に至るプロセスのこと。ブランドや商品の認知から購買や登録までの、ユーザーの思考と行動を時系列に並べ可視化したものです。

 

画像圧縮

画像圧縮とは、ファイルのデータ量を最小化するために画像を圧縮させることです。

 

グラフィックデザイン

グラフィックデザインは、テキストや画像、色などを使って見た人に情報やメッセージを分かりやすく伝えることを目的としたデザインです。新聞や広告ポスター、商品パッケージなどに使われます。

 

コーポレートサイト

企業に関するさまざまな情報を伝えるホームページ。どのような企業であるか知ってもらうことが主な目的。会社の詳細、トップのメッセージ、採用ページなどへのリンクがあることが多い。

 

コントラスト

ある要素と別の要素の「対比」
強調したい要素とそうでない要素を区別するために利用する。
大きい文字と小さい文字の対比、色の対比、余白(情報量の密度)をつける等でコントラストをつけることができる。

 

座布団

テキストの視認性を高くするために、テキストのバックに敷かれた帯などのオブジェクトのこと。
「ベタ」などともいう。

 

CSS

CSS(Cascading Style Sheet)=おもにHTML文書に対する表示、およびデザイン(見た目)を指定するもの。
CSSがないと文字と画像が並んだだけのウェブサイトになってしまう。CSSがあると色、サイズ、レイアウトなどのデザインが定義される。

 

色彩心理学

色彩心理学とは、色の見え方や感じ方など、色に対しての人間の行動や反応を研究する心理学です。

 

色相

色合い。物を見たときに感じる赤、黄、青といった視感覚に対応する属性。色相をもつ色を有彩色、もたない色(白、灰、黒)を無彩色という。

 

また色相を連続的に配列し円環状に配置したものを色相環という。

 

視認性

「目で見た時の確認のしやすさ」という意味の言葉。
「可読性」「判読性」と同類の言葉ではあるが、パッと見た瞬間の文字や物などの認識しやすさを指す。

 

ジャンプ率

「大きい部分」と「小さい部分」の比率のこと。
比率が高い=ジャンプ率が高い=瞬時に情報を伝えたい時、インパクトを与えたい時に効果的
比率が低い=ジャンプ率が低い=高級感や信頼感を与えたい時に効果的

 

スクロール

スクロールとは、PCやスマートフォンなどのデバイス操作画面で、ディスプレイに映す範囲を上下または左右に移動させることを指します。

 

スプラッシュスクリーン

ユーザーがアプリやソフトを起動するときに表示される画面のことです。

 

タイポグラフィ

文字の体裁(文字のフォント・サイズ・配列・行間など)を整えることを指します。また、文字をデザイン要素として扱う手法という意味でも使われます。

 

テクスチャ

デザインに質感を加え視覚的な触感を作り出すことができる。例えばあえてザラザラしたテクスチャーを加え「紙感」や「レトロ感」を演出できる。他にもブラシで描いたような質感、インクがかすんだような質感、大理石のような模様を使った質感などもある。

 

デザインガイドライン

デザインで守るべきルールを定めた指針です。

 

トリミング

上下左右を編集して写真の不要な部分を削除したり、写真に含まれる情報を整理する作業。

 

トンマナ

「トーン&マナー(tone&manner)」の略で、広告や文章表現に置いてデザインやトーンを統一させるためのルールを指します。

 

ナビゲーションメニュー

ナビゲーションメニューとは、サイトの上部やサイドバーに並んでいるリンクです。また、どのページを開いても定位置に表示されるものを「グローバルナビゲーション」とも呼びます。

入力フィールド

Webサイト上でユーザーが情報を入力するための入力欄のことを指します。

 

バナー

ウェブサイト上にあるリンク付き画像のこと。
広告として、またはアイキャッチとして、他のウェブページやウェブサイトにアクセスを誘導するのを主目的として使われます。

 

パディング/マージン

オブジェクトの内側につける余白。

オブジェクトの外側につける余白を「マージン」という。

 

ハレーション

彩度が高い色同士を組み合わせて目がチカチカして見づらい現象。
なるべく避けるような配色を心がけたいがどうしても使う場合は色と色の間に黒や白のセパレーションカラーを使うと良い。

 

ハンパーガーメニュー

ヘッダーのメニュー項目を表示させる3本線のアイコン。メニューをアイコンの中に格納することでスペースが足りないデザインに対応できる。
スペースの問題から主にスマホ表示の時に使用することが多い。

 

 

PSD(ピー・エス・ディー)

「Photoshop Data」を略したもので、「Adobe Photoshop」と呼ばれる画像編集ソフトで主に利用されるファイル形式のことです。

 

フォント

一定のルールに沿って規定された文字スタイルです。近年は「書体」と同じ意味で使われます。

 

フォントウェイト

書体の太さのこと。

 

フォントファミリー

同一フォントの中でも、「太さ(bold, thin)や傾き(Italic, oblique)、細さ(Condensed, Extended)」など複数のバリエーションが用意されているが、そのバリエーション全てをまとめたグループのこと。

 

フッター

ホームページの最下部に表示されるパーツです。ユーザーがホームページを閲覧する際、スクロールをし切って最後に辿るつくのがフッターです。

 

フレームワーク

UIデザインをするときに使われる設計基準やテンプレート、UIコンポーネントの総称です。

 

ヘッダー

ホームページの上部に表示されるパーツです。ユーザーがホームページを開いたとき、トップビジュアルとともに最初に目にする重要なパーツです。

 

ポップアップ

web上で突然に表示されるウインドウ。ウインドウに広告バナーなどが表示され、ユーザーに注意を引きたい時に使用される。

 

ホバーアニメーション

webサイト上において、ボタンやリンク、画像などにマウスのカーソルを合わせたときに、クリックする前に自動的に始まるアニメーションのことです。

 

ポートフォリオ

クリエイターが「実績や力量をアピールするための作品集」のこと。
企業に提出をしたり営業活動に使用する。

 

モーダルウィンドウ

ウィンドウ内で指定された操作を完了するかキャンセルするまで、ほかのウィンドウを開くことができないウィンドウのことです。

 

モックアップ

英語で「模型」を意味し、Webサイトやソフトウェアなどの試作品を指します。

 

ユーザビリティ

一般的に「使いやすさ」を意味し、UIデザインの指標のひとつです。

 

UI/UX(ユーアイ/ユーエックス)

UI(User Interface)とUX(User Experience)を組み合わせた言葉です。

 

UX(ユーエックス)デザイナー

「User Experience」と呼ばれる「ユーザーが商品やサービスに触れたときに得られる体験」の質を追求したデザインを作る人を指します。

 

ラインハイト

ライン ハイトと読み、文字の行間のこと。
1.5~2くらいが望ましい。

 

レイアウト

情報を視覚化する作業です。テキストや画像、動画などのサイトを構成する様々な構成要素に視覚的な表現を取り入れることを意味します。

 

レイヤー

文字や図形などのデザインの元となる要素の総称。
レイヤーを重ねていくことでデザインが作られていく。

 

レスポンシブデザイン

閲覧ユーザーの画面サイズに合わせてページレイアウトを最適化するデザインのことを指します。

 

ロゴ

「ロゴマーク」の略称。会社や商品、サービスを象徴するもので、デザインされたアイコンや文字です。対象の思想や特徴を伝達するコミュニケーションツールとして機能します。

 

ワードプレス(WordPress)

ワードプレス。サイトの作成やブログの作成などができるCMS(コンテンツ管理システム)の1つ。世界中のサイトのおよそ4分の1はWordPressで構築されていると言われている。

 

ワイヤーフレーム

webサイトのレイアウトを定める設計図です。どのようなコンテンツを画面上のどこに、どのように配置するかを決めるものであり、Webサイトの制作やアプリ開発に欠かせません。

 

 

 

コメント