【あ行】
アイコン
情報を視覚的に表現する小さな図形やシンボルのこと。
例：ハンバーガーメニューの三本線(≡)、検索の虫眼鏡マーク、ホームアイコン、検索アイコン
アートボード
Photoshop・Illustrator・Figmaなどのデザインツールで、デザインを作成する作業領域のこと。WEBデザインの制作ではアートボード作成後、アートボード上にデザインを制作する。
アクセシビリティ
障害の有無や年齢に関わらず、すべての人がウェブサイトやアプリケーションを利用できるようにするための設計のこと。
例：音声読み上げ対応、キーボード操作対応、十分な色のコントラストなど
アコーディオン
クリックすると開閉するコンテンツのこと。よくある質問セクションやメニューでよく使用され、縦方向に展開するため限られたスペースに多くの情報を格納することができる。
あしらい
装飾のこと。強調させたい部分に使用する強調線や下線、吹き出しなどが該当する。
アスペクト比
画像や動画の横と縦の比率のこと。
例：16:9、4:3、1:1など
アニメーション
Webページ上で要素を動かしたり変化させたりする視覚効果のこと。
（例）
- フェードイン/アウト：要素が徐々に現れたり消えたりする動きのこと
- スライド：要素が横や縦に移動すること
- ホバーエフェクト：マウスを乗せたときの変化のこと（色が変わる、半透明になる、大きくなるなど）
- スクロールアニメーション：スクロールに合わせて要素が動くこと
- ローディングアニメーション：読み込み中を示すスピナーなど
※スピナーとは、処理が進行中であることを示す回転するアイコンやマークのことです。
アフォーダンス
説明をしなくてもユーザーが迷わず直感的に使えるようようなデザインのこと。
例：ボタンの下に影が付いている、メニュー項目の上にカーソルを当てると色が変化する
RGB
モニターやディスプレイで使われる色の表現法を指し、赤（R）、緑（G）、青（B）を組み合わせて色を作ること。Webデザインでは一般的にRGBを利用して制作を行う。
アンカーリンク
同じページ内の特定の場所へ移動するリンクのこと。
例：ページトップへ戻るボタン、クリックをすると該当セクションへジャンプするボタンなど
インタラクション
ユーザーの操作に対する反応や動きのこと。
例：ボタンを押したときの色の変化、スクロールに応じた要素の表示など
インフォグラフィックデザイン
データや情報を視覚的に分かりやすく表現したデザインのこと。
例：折れ線グラフ、円グラフ
ウェイト（フォントウェイト）
文字の太さのこと。
例：Light（細い）、Bold(太い)
エンベッド(埋め込み)
YouTubeの動画やGoogleマップといった外部のコンテンツをサイト内に表示させること。
例：YouTube動画、Googleマップ、Instagram投稿などをページ内に表示する
オーバーレイ
コンテンツの上に重ねて表示される要素のこと。
オブジェクト
画像、テキストボックス、図形のようなデザインを構成している各パーツのこと。
【か行】
可読性
テキスト情報を正しく読み取ることができるかという読みやすさのこと。
カード型デザイン
情報をカードのような四角形で区切って配置するレイアウト手法のこと。Pinterest、Instagram、ECサイトの商品一覧などが該当する。
カーニング
文字と文字の間隔を狭くしたり広くしたり調整すること。
カラースキーム(配色)
サイト全体で使用する色の組み合わせのこと。ベースカラー、メインカラー、アクセントカラーから構成される。
カラーピッカー
色を選択するツールのこと。
カラム
レイアウトを分割する縦の区切りのこと。2カラム、3カラムなど、ページ構成を考える際の基本単位。
カルーセル
複数の画像やバナーをスライドさせ、次々と表示させる仕組みのこと。スライドショーが代表例。
グリッドシステム
ガイドラインに沿って画像やテキストを配置するレイアウト手法のこと。
グローバルナビゲーション
サイト上部に表示させるメニュー項目のこと。
例：ヘッダーの「ホーム」「サービス」「お問い合わせ」など
コントラスト
色の明暗差や濃淡の差のこと。コントラストが高いと視認性が高くなりやすく、低いと優しい印象を与えやすくなる。
コンテンツ
テキスト、画像、動画、記事といったサイト上の情報や素材のこと。
【さ行】
サイトマップ
サイト全体の構造を図式化したものや、ページ一覧を示したもの。
サムネイル(サムネ)
動画や記事の一覧に表示される小さな画像のこと。
CSS(カスケーディング・スタイル・シート)
色、レイアウト、フォントの大きさといったWEBページの見た目を調整することができる言語。
CMS(コンテンツ・マネジメント・システム)
サイトを簡単に更新できるシステムのこと。
例：WordPress、Wix、Shopifyなど。
CMYK
印刷物で使われる色のモデルのこと。シアン、マゼンタ、イエロー、キー（黒）を組み合わせて色を表現する。
仕様書（指示書・スタイルガイド）
デザインの統一ルールをまとめたドキュメントのこと。フォント、色、余白、ボタンのデザインなどの仕様を記載する。
視認性
どれだけ見やすいかを示す度合いのこと。フォントサイズ、行間、配色などが大きく影響する。
JavaScript(ジャバスクリプト)
ページに動きや機能を加えることができるプログラミング言語のこと。スライドショー、アニメーションなどに使われる。
スクロールエフェクト
スクロールすることによって要素が動いたり表示されたりする演出のこと。
スプラッシュページ
サイトに入る前に表示される導入ページのこと。ブランドロゴや年齢確認などで使われるが、UXの観点から避けられる傾向にある。
スペーシング(余白)
要素と要素の間の空間のこと。
スマホファースト（スマートフォンファースト）
スマートフォンでの見た目を優先してデザインする手法。
セクション
ページ内の大きなまとまりのこと。
例：最新情報、会社概要、お客様の声など
静的ページ
誰がいつどこでアクセスしても同じ内容で表示されるページのこと。
セマンティックHTML
HTMLタグを意味に沿って正しく使うこと。SEO対策やアクセシビリティに重要。
例：見出しには<h1>タグ、段落には<p>タグを使用する。
【た行】
タイポグラフィ
文字のデザインや配置に関する技術のこと。フォント、行間、文字間、文字サイズなどを含む。
ダミー画像・ダミーテキスト
デザイン制作時に一時的に使用する仮の画像や文章のこと。
例：「テキストテキスト」、「ここにテキストが入ります」、「Lorem ipsum」
テクスチャ
背景などに使う質感のこと。
例：紙、布、木目など
ドメイン
「〜.com」、「〜.jp」のような文字列からなるインターネット上の住所のこと。ドメインはお名前.comやムームードメインのようなドメイン販売サイトで購入できる。
ドロップダウンメニュー
カーソルを合わせたりクリックしたりすると下にメニュー項目が開くような形のメニューのこと。
動的ページ
アクセスするユーザーごとに表示される内容が変わるページのこと。
例：ログイン後のマイページ、検索結果ページなど
トーン&マナー（トンマナ）
デザイン全体の雰囲気や世界観のこと。
ドロップシャドウ
要素に影をつける効果（加工）のこと。
【な行】
ナビゲーション
サイト内を移動するためのメニューやリンクのこと。
例：グローバルナビゲーション、パンくずリスト
ノーコードツール
コードの編集をしなくともサイトを作ることができるツールのこと。
例：Wix、Studio、など。
【は行】
パーマリンク
ページごとの固定URLのこと。
ハンバーガーメニュー
スマートフォンでよく見られる三本線(「≡」のような形)のアイコン。タップするとメニューが開く。
※三本線だけではなく、二本線や他の形のハンバーガーメニューを作ることも可能です。
パンくずリスト
現在見ているページがサイト内のどこにあるかを示すナビゲーションのこと。
例：ホーム > 商品一覧 > 商品名
ヒートマップツール
ウェブページ上でユーザーがどの部分をよく見ているのか、クリックしているのかを視覚的に示すツールのこと。
ヒーロー画像
トップページの最上部に配置されるメイン画像のこと。キービジュアルやメインビジュアルとも呼ぶ。
ファビコン
ブラウザのタブに表示される小さなアイコンのこと。ブランド認識を高める。
ファーストビュー(FV)
サイトにアクセス後、スクロールせずに最初に見える画面部分のこと。メインビュー(MV)は上部の画像や動画を指すため、メインビューとは異なる。
ファビコン
ブラウザのタブやブックマーク、検索結果ページに表示される小さなアイコンのこと。
フッター
ページの最下部に配置される領域のこと。ヘッダー上に掲載できなかった別ページへのリンクや、SNSへのリンク、コピーライトなどを掲載し、基本的に各ページ同じデザインにする。
ブレイクポイント
レスポンシブデザインにおいて、ページのレイアウトが切り替わる画面幅のこと。
プロトタイプ
実際に動作する試作版のこと。デザインの段階でクリックやスクロールの動きを確認できる。
ヘッダー
ページの最上部に配置される領域のこと。ロゴやサイトタイトル、メニューを掲載する。
ペルソナ
商品やサービスを利用すると考えられる架空の顧客像のこと。
ホバー(ホバーエフェクト)
サイト上でマウスカーソルをボタンやリンクといった特定の要素の上に乗せたときに起こる変化のこと。
例：色が変わる、拡大する、浮き上がって影が表示される
ポップアップ
画面上に重ねて表示されるウィンドウのこと。期間限定のキャンペーン情報やクーポン情報をユーザーに知らせたいときに使用する。
【ま行】
マイクロコピー
ボタン上のテキストやエラーメッセージなどの、短いテキストのこと。ユーザーの行動を促す効果がある。
例：無料で資料を受け取る、今すぐ体験する
マージン
要素の外側の余白のこと。
マスク
画像や要素の一部を切り抜いたり隠したりするFigmaやPhotoshopで使える加工のこと。画像を円や特定の形に切り抜きたい場合に使用する。
ミニマルデザイン
装飾を最小限に抑えたシンプルなデザインのこと。
メインビジュアル
ページの最も上部にある大きな画像やバナー、動画のこと。
モックアップ
実際のデザインに近い見た目のサンプルのこと。
【や行】
ユーザビリティ
使いやすさのこと。ユーザーが迷わず操作できるかどうかの指標のことで、Webデザイン制作時に意識する必要がある。
UI(ユーザーインターフェース)
ユーザーとサービスが接する接点のこと。優れているUIとは操作性や見た目の使いやすさを指し、ボタン、メニュー、フォームなどの要素とその配置を含む。
UX(ユーザーエクスペリエンス)
サイトやアプリを使った際の体験全体のことを指し、ユーザーの感情や満足度を含む。サイトの使いやすさだけでなく、問い合わせ対応や購入後の体験も含まれる。
ユーザビリティ
使いやすさのこと。ユーザーが迷わず操作できるかどうかで、Webデザイン制作時に意識する必要がある。
ユニバーサルデザイン
アクセシビリティと近い概念で、年齢、性別、障害の有無に関わらず、できるだけ多くの人にとって使いやすいデザインを指す。
要素
HTML上の個々のパーツのこと。見出し、段落、画像、ボタンなどを指す。
404エラー
ページが存在しないときに表示されるエラーのこと。404エラーが表示されるページは404エラーページといい、案件によってはデザインを制作する場合もある。
【ら行】
ライトボックス
画像をクリックするとクリックした画像が拡大表示される機能のこと。主にギャラリーサイトで使用される。
ランディングページ(LP)
縦に長い1ページ型のサイトを指し、広告や検索から流入した人が最初に訪問するページのこと。申込みや購入につなげることが目的。
リキッドレイアウト
画面サイズに応じて要素の幅が可変するレイアウトのこと。
リンク
別のページや別のサイトへ移動するための要素のこと。
離脱
ユーザーがサイトを去ること。直帰は1ページ目だけ見て去ることを指すのに対し、離脱は複数ページを見た後に去る場合も含む。
レイアウト
ページ上の要素の配置や構成のこと。1カラム、2カラム、グリッドレイアウトなど様々な形式がある。
レスポンシブデザイン（レスポンシブ対応）
PC、タブレット、スマートフォンなど、どのような端末で見ても綺麗に表示させる手法のこと。
ローディング
ページが読み込まれるまでの待機状態のこと。
ロゴ
企業やサービスを象徴する図形や文字のデザインのこと。
【わ行】
ワイヤーフレーム（ワイヤー・ラフ）
サイトのページ構成や情報を整理するための設計図のこと。デザインカンプの制作前に作り、何をどこに配置するか要素の配置や導線を確認する目的で使われる。着色装飾は行わず、主に白、黒、グレーで制作をする。
ワンカラム（ワンカラムレイアウト）
1列のレイアウトのこと。スマートフォンやLPでよく使われる。