WEBデザイン実践用語：ABC

Aの章：デザインの基礎と配慮

Accessibility (アクセシビリティ)

一言でいうと 年齢や身体的な条件に関わらず、誰もがウェブサイトを快適に利用できるかという考え方です。

なぜ大切？ 今のWEBデザインでは必須の知識です。「文字が背景色に埋もれて読みにくくないか」「ボタンは十分に押しやすいか」といった配慮が、サイトの品質と信頼性を大きく左右します。

ポイント 高齢者や障害を持つ方だけでなく、一時的に手が使えない人や、明るい屋外で画面を見ている人など、あらゆる状況のユーザーを助ける視点です。

Above the fold (アバブ・ザ・フォールド)

一言でいうと ユーザーがページを開いた時に、スクロールせずに最初に見える範囲のことです。

なぜ大切？ ユーザーはそのサイトを読み続けるかどうかを、このエリアを見て3秒以内に決めると言われています。サイトの第一印象と、その後の行動を決定づける最も重要な場所です。

ポイント 「First View（ファーストビュー）」とも呼ばれます。現場では「ユーザーは3秒で離脱を決めるので、アバブ・ザ・フォールドに最も重要なCTAを配置してください」といった形で使われます。

Accordion (アコーディオン)

一言でいうと クリックすると詳細な情報が開閉するUI（ユーザーインターフェース）のことです。

なぜ大切？ 多くの情報を整理して、ページ全体をスッキリ見せることができます。特に、画面が狭いスマートフォンサイトで「よくある質問（FAQ）」などを表示する際に非常に有効です。

ポイント 楽器のアコーディオンのように伸び縮みすることから、この名前がついています。

Accent Color (アクセントカラー)

一言でいうと サイト全体の中で、特にユーザーの注意を引きたい部分に限定して使う「強調色」です。

なぜ大切？ 「購入ボタン」や「お問い合わせ」など、サイトのゴールとなる重要な要素を目立たせる役割があります。適切に使うことで、ユーザーをスムーズに目的の行動へ導けます。

ポイント 美しい配色の黄金比として「ベースカラー60%：メインカラー30%：アクセントカラー10%」という法則があります。この中の「10%」がアクセントカラーです。

Alt text (オルト属性)

一言でいうと 画像が表示されなかった時や、音声読み上げソフトのために「どんな画像か」を説明するテキストです。

なぜ大切？ 目の不自由な方への配慮（アクセシビリティ）はもちろん、検索エンジンが画像の内容を理解するのを助けるため、SEO（検索エンジン最適化）の観点からも設定が必須です。

ポイント 正式には「代替テキスト（Alternative Text）」と言います。

Artboard (アートボード)

一言でいうと Figmaなどのデザインツール上で、デザインを作成するための作業画面（キャンバス）のことです。

なぜ大切？ PC用、スマホ用など、異なるサイズのデザインを同じファイル内で並行して作成・管理できます。プロジェクト全体を俯瞰しやすくなります。

ポイント 1つのプロジェクトファイルの中に、複数のアートボードを作成して作業を進めるのが一般的です。

Bの章：レイアウトの骨格を作る

Breakpoint (ブレイクポイント)

一言でいうと レスポンシブデザインで、PC用・スマホ用などレイアウトが切り替わる「画面幅」の数値です。

なぜ大切？ 「画面幅が768px以下になったら、スマホ用のデザインに切り替える」といった指示をエンジニアに正確に伝えるために不可欠です。この設計がレスポンシブの要となります。

ポイント これはレスポンシブデザインを実現するための「Media Query」で使われる重要な数値です。現場では「スマホのブレイクポイントで、要素が縦に並ぶように調整してください」といった会話で使われます。

Breadcrumbs (パンくずリスト)

一言でいうと ユーザーがサイト内のどの階層にいるかを視覚的に示すナビゲーションのことです。

なぜ大切？ ユーザーがサイト内で迷子になるのを防ぎます。また、検索エンジンがサイトの構造を理解するのを助けるため、SEO対策としても重要です。

ポイント 童話『ヘンゼルとグレーテル』で、主人公が道に迷わないようパンくずを置いていった話が名前の由来です。例：TOP > サービス紹介 > WEBデザイン制作

Cの章：ユーザーを導く「仕掛け」

CTA (Call To Action)

一言でいうと ユーザーに「購入」「登録」などの具体的な行動を促すためのボタンやリンクです。

なぜ大切？ サイトの目標達成に直結する最も重要なパーツです。プロはただボタンをデザインするのではなく、「ユーザーを次のアクションへ導く」という戦略的な視点で色、サイズ、文言を考えます。

ポイント 現場では「CTAの色と配置を戦略的に考えて、クリック率を上げましょう」といった会話が交わされます。「今すぐ試す」などの具体的な言葉（マイクロコピー）も重要です。

Dの章：デザインの細部とデータ

Domain (ドメイン)

一言でいうと google.com のような、インターネット上の「住所」にあたるものです。

なぜ大切？ デザイナーが直接取得する機会は少ないですが、ドメイン名がブランドイメージやサイトの信頼性に影響を与えることを理解しておく必要があります。

ポイント URL（https://...）の一部であり、サイトの顔とも言える要素です。

Density (ピクセル密度)

一言でいうと 画面のきめ細やかさを示す尺度のことです。画素密度とも言います。

なぜ大切？ iPhoneのRetinaディスプレイなど、高密度な画面では、通常の解像度で作った画像がぼやけて見えてしまいます。これを防ぐため、デザイナーは表示させたいサイズの2倍（@2x）で画像を書き出すといった対応が求められます。

ポイント 現場では「このロゴ、Retinaだとボケちゃうから、高密度（@2x）で書き出し直して」といった形で使われます。「Resolution（解像度）」とほぼ同義です。

Description (メタ・ディスクリプション)

一言でいうと Googleなどの検索結果で、サイトのタイトルの下に表示される「サイトの紹介文」です。

なぜ大切？ 検索ユーザーが「このサイトをクリックするかどうか」を決める重要な判断材料になります。魅力的な説明文は、サイトへの流入数を増やすことに直結します。

ポイント HTMLの<meta name="description" ...>に記述します。デザイナーがライティングを兼任することも多い、重要なテキストです。

Dummy Text (ダミーテキスト)

一言でいうと デザインのレイアウトを確認するために、仮で入れておく文章のことです。

なぜ大切？ まだ正式な文章がない段階でも、文字が入った時の見た目やバランスを確認できます。これにより、デザイン作業を効率的に進めることができます。

ポイント 英語では「Lorem Ipsum」が有名ですが、日本語サイトをデザインする際は、日本語のダミーテキストを使わないと仕上がりのイメージが大きくズレるため注意が必要です。

Drop Shadow (ドロップシャドウ)

一言でいうと 要素に影をつけて、背景から少し浮き上がっているように見せるデザイン効果です。

なぜ大切？ ボタンやカードなどの要素に立体感を与え、クリックできることを示唆したり、情報の階層を表現したりするのに役立ちます。

ポイント 近年のデザイントレンドでは、濃すぎる影は古く見える傾向があります。ぼかしを強くし、薄く、柔らかい影を使うのが主流です。

Eの章：「何もない状態」と「動き」のデザイン

Export (書き出し)

一言でいうと デザインツールで作った画像やアイコンなどを、ウェブサイトで使えるファイル形式に変換して保存することです。

なぜ大切？ デザインは作っただけでは完成ではありません。エンジニアが実装できるよう、ロゴはSVGで、写真はWebPで、といったように、用途に合わせて最適な形式で書き出す知識がデザイナーには必須です。

ポイント ファイルサイズを軽く（最適化）することも、書き出しの際の重要な作業です。

Empty State (エンプティステート)

一言でいうと 「検索結果0件」や「カートが空」など、表示するデータが何もない状態のデザインです。

なぜ大切？ 初心者が忘れがちな部分ですが、この画面のデザインがユーザー体験（UX）を大きく左右します。ただ「ありません」と表示するのではなく、「他の商品を提案する」など、次の行動を促す工夫が求められます。

ポイント 現場では「お気に入り0件の画面をただの空白にせず、エンプティステートに『ここから探そう』というボタンを置いて」といった会話がされます。「Zero State」とも呼ばれます。

Ease-in / Ease-out (イージング)

一言でいうと アニメーションの「動きの心地よさ」を決める、速度の加減速パターンのことです。

なぜ大切？ ただ均一な速度で動くアニメーションは機械的で不自然に見えます。イージングを設定することで、物理法則に沿った自然で滑らかな動きを表現できます。

ポイント
・Ease-in: ゆっくり始まり、最後に加速する（消える動きに合う）。
・Ease-out: 速く始まり、最後にゆっくり止まる（現れる動きに合う）。

Embed (埋め込み)

一言でいうと YouTubeの動画やGoogleマップなど、外部のサービスを自分のウェブページ内に表示させることです。

なぜ大切？ サーバーに重い動画ファイルなどを置かずに、リッチなコンテンツを提供できます。サイトの表現の幅を広げるための基本的なテクニックです。

ポイント 埋め込み用のコードが各サービスで提供されており、それをHTMLに貼り付けるだけで実装できます。

Fの章：第一印象と基本ルール

Favicon (ファビコン)

一言でいうと ブラウザのタブやブックマークに表示される、サイトを象徴する小さなアイコンです。

なぜ大切？ 非常に小さいですが、サイトの信頼性やプロフェッショナル感を高める重要な要素です。多くのタブを開いているユーザーが、自分のサイトをすぐに見つけるための目印になります。

ポイント 設定し忘れると、素人っぽい印象を与えてしまうため、必ず用意しましょう。

First View (ファーストビュー)

一言でいうと ユーザーがサイトを開いて、最初に目に飛び込んでくる画面全体のエリアです。

なぜ大切？ サイトの「顔」であり、第一印象のすべてを決定づけます。ユーザーは3秒以内にそのサイトを見る価値があるか判断すると言われており、このエリアのデザインがサイトの成否を分けます。

ポイント 英語圏では「Above the fold」と呼ばれます。和製英語ですが、日本のWEB業界では非常に頻繁に使われる言葉です。

Font (Webフォント)

一言でいうと ユーザーのデバイス（PCやスマホ）にインストールされていなくても、デザイナーが意図した書体を表示できるフォントのことです。

なぜ大切？ 以前は、ユーザーの環境に依存するため、使える書体に限りがありました。Webフォントの登場により、ブランドイメージに合った美しいタイポグラフィを、どのユーザーに対しても表現できるようになりました。

ポイント 「Google Fonts」は、無料で高品質なWebフォントを提供している代表的なサービスです。

Footer (フッター)

一言でいうと 各ページの最下部に共通して表示されるエリアのことです。

なぜ大切？ 会社情報、プライバシーポリシー、サイトマップ、コピーライトなど、サイトの基本情報を掲載する場所です。ページを最後まで読んだユーザーを、他のページへ誘導する役割も担います。

ポイント ここを充実させることで、サイト全体の回遊率（ユーザーがサイト内を巡ること）を高める効果も期待できます。

F-Pattern (F型パターン)

一言でいうと ユーザーが文字の多いウェブページを見るときの、典型的な視線の動きの法則です。

なぜ大切？ ユーザーはアルファベットの「F」の字を描くように、左上から右へ、そして少し下に視線を移してまた左から右へ、と読み進める傾向があります。この法則を知ることで、重要な情報をどこに配置すべきかの判断材料になります。

ポイント Fの縦線にあたるページの左側に、重要なキーワードや見出しを配置すると効果的です。

Figma (フィグマ)

一言でいうと 現在、世界中のWEBデザイナーがメインで使っている、ブラウザベースのデザインツールです。

なぜ大切？ リアルタイムでの共同編集機能に優れており、デザイナー、ディレクター、エンジニアが同じファイル上でスムーズに連携できます。現代のWEB制作フローに欠かせないツールです。

ポイント デザインカンプやプロトタイプ作成など、WEBデザインに必要な機能のほとんどが備わっています。

Gの章：デザインを整える魔法

Grid System (グリッドシステム)

一言でいうと 画面を格子状の見えないガイド線で分割し、それに沿って要素を配置していくレイアウト手法です。

なぜ大切？ プロのデザインが整って見えるのは、このグリッドシステムに基づいているからです。情報の整理がしやすくなり、デザインに一貫性と秩序が生まれます。また、レスポンシブデザインへの対応も格段にスムーズになります。

ポイント 12カラム（12分割）グリッドがWEBデザインでは一般的によく使われます。

Global Navigation (グローバルナビゲーション)

一言でいうと サイト内のどのページにも共通して設置されている、メインのメニューのことです。

なぜ大切？ ユーザーがサイト内で迷わず目的のページにたどり着くための「地図」の役割を果たします。サイトの使いやすさ（ユーザビリティ）を左右する最も重要なナビゲーションです。

ポイント 略して「グロナビ」とも呼ばれます。通常、ページ上部のヘッダーに配置されます。

Gradient (グラデーション)

一言でいうと ある色から別の色へ、または色の濃淡が滑らかに変化する表現のことです。

なぜ大切？ 単色のデザインに深みや奥行きを与え、モダンで洗練された印象を演出できます。背景やボタンに少し加えるだけで、デザインの質をぐっと高めることができます。

ポイント 最近のトレンドでは、複数の色が複雑に混ざり合う「メッシュグラデーション」なども人気です。

Ghost Button (ゴーストボタン)

一言でいうと 背景が透明で、枠線だけで構成されたボタンのことです。

なぜ大切？ 背景の画像や色を活かしつつ、主張しすぎないクリーンな印象を与えたい時に有効です。メインのCTAボタンとは別に、サブ的なアクションを示したい場合などにも使われます。

ポイント 背景が透けて見える様子から「幽霊（ゴースト）」と呼ばれています。

Gutter (ガター)

一言でいうと グリッドシステムにおける、カラム（列）とカラムの間の「余白」や「溝」のことです。

なぜ大切？ この余白が、コンテンツ同士がくっつきすぎるのを防ぎ、情報をグループとして認識しやすくします。ガターの幅を適切に設定することが、見やすいレイアウトの鍵となります。

ポイント 「溝」や「側溝」を意味する英単語です。

Hの章：サイトの顔と情報の整理

Hero Image (ヒーローイメージ)

一言でいうと サイトのトップページ、ファーストビューに配置される、大きくて印象的なメインビジュアルです。

なぜ大切？ サイトの「顔」であり、訪問者の心を掴むための最も強力な視覚要素です。ユーザーがそのサイトに興味を持つか、1秒で離脱するかを左右します。ここにどんな写真やキャッチコピーを置くかが、デザイナーの腕の見せ所です。

ポイント 「キービジュアル」とほぼ同じ意味で使われます。現場では「ヒーローイメージに動画を使って、没入感を出しましょう」といった提案もされます。

Heading (見出し / hタグ)

一言でいうと 文章の章や節のタイトルを示す要素です。HTMLでは<h1>から<h6>までのタグで表現されます。

なぜ大切？ デザイン上は文字の大きさとして捉えがちですが、WEBでは「情報の階層構造」を示すという重要な役割があります。<h1>（大見出し）、<h2>（中見出し）…と正しく使うことで、ユーザーと検索エンジンの両方に、文章の構造を分かりやすく伝えられます。

ポイント 現場では「H2のフォントサイズが小さすぎるので、もう少し強調してください」といった形で、情報の優先順位を調整します。

Hamburger Menu (ハンバーガーメニュー)

一言でいうと 三本線「≡」の形をした、クリックするとナビゲーションメニューが開くUIアイコンです。

なぜ大切？ 画面スペースが限られるスマートフォンサイトにおいて、多くのメニュー項目をすっきりと格納するための定番デザインです。

ポイント 現場では「スマホ版では、メニューをハンバーガーメニューの中に格納してスッキリさせます」といった会話がされます。閉じる時に「×」印に変化するアニメーションも一般的です。

Header (ヘッダー)

一言でいうと ウェブサイトの各ページの最上部に共通して表示されるエリアのことです。

なぜ大切？ サイトのロゴやグローバルナビゲーションが配置される、いわば「看板」のような場所です。ユーザーはここを見ることで、今どのサイトにいるのかを常に認識できます。

ポイント スクロールしても画面上部に固定表示されるヘッダー（Fixed Header）もよく使われます。

Hover (ホバー)

一言でいうと PCで、マウスカーソルをボタンやリンクなどの要素の上に重ねる（乗せる）動作のことです。

なぜ大切？ 「この要素はクリックできますよ」ということをユーザーに視覚的に伝えるために、ホバー時に色を変えたり、下線を表示したりするデザインが一般的です。ユーザーに操作のヒントを与える重要なインタラクションです。

ポイント スマホにはカーソルがないため、「ホバー」という概念が存在しません。そのため、PCでホバー時に表示する情報は、スマホでは別の見せ方を考える必要があります。

Iの章：見た目の前の「情報設計」

IA (Information Architecture / 情報設計)

一言でいうと デザインの見た目を作る前に、「どの情報を、どこに、どのように配置すればユーザーに伝わるか」を設計する工程です。

なぜ大切？ 家を建てる前の設計図と同じで、このIAがしっかりしていないと、どんなに美しいデザインでも「使いにくい」「情報が見つからない」サイトになってしまいます。優れたユーザー体験（UX）の土台となる、非常に重要なプロセスです。

ポイント 現場では「IAを見直して、ユーザーが3クリック以内に目的のページに辿り着けるようにしましょう」といった目標設定が行われます。

Interaction (インタラクション)

一言でいうと ユーザーの操作に対する、システムからの「反応」や「対話」をデザインすることです。

なぜ大切？ ボタンをクリックした時に少しへこむ、読み込み中にアニメーションが表示されるといった反応は、ユーザーに「今、操作がちゃんと受け付けられた」という安心感を与えます。心地よいインタラクションは、サイトの使いやすさと満足度を高めます。

ポイント 現場では「このボタンのインタラクションが重いので、もっとキビキビ動かしましょう」といった形で、動きの質を議論します。

Icon (アイコン)

一言でいうと 言葉の代わりに、機能や意味を直感的に伝えるための小さな図記号です。

なぜ大切？ ユーザーは文字を読むよりも速くアイコンの意味を理解できます。メニュー（≡）、検索（虫眼鏡マーク）など、共通認識のあるアイコンを効果的に使うことで、言語の壁を越えて直感的な操作を可能にします。

ポイント 最近のデザインでは、どれだけ拡大しても画質が劣化しない「SVG」という形式でアイコンを作成・使用するのが主流です。

Jの章：サイトに動きをつける技術

JavaScript (JS)

一言でいうと ウェブサイトにアニメーションやインタラクティブな機能などの「動き」をつけるためのプログラミング言語です。

なぜ大切？ HTMLとCSSだけでは作れない、動的な表現を実現するために必須です。モーダルウィンドウを開いたり、スクロールに合わせて要素をふわっと表示させたりするのは、すべてJavaScriptの役割です。

ポイント デザイナーが直接書くことは少なくても、どのような動きが実現可能かを知っておくことで、デザインの提案の幅が広がります。

jQuery (ジェイクエリー)

一言でいうと JavaScriptをより少ないコードで簡単に書けるようにした「ライブラリ（便利な道具セット）」です。

なぜ大切？ かつてはWEB制作の主流でしたが、最近は素のJavaScript（Vanilla JS）や新しい技術が人気です。しかし、既存の多くのサイトやプラグイン（スライダーなど）で今も使われているため、知識として知っておくと役立ちます。

ポイント 現場では「そのアニメーション、jQueryのプラグインでサクッと実装できますか？」といった会話で登場することがあります。

JPEG (JPG)

一言でいうと 写真のように、たくさんの色が使われている画像の保存に適したファイル形式です。

なぜ大切？ デザイナーが画像を書き出す際に最も一般的に使われる形式の一つです。ファイルサイズを比較的軽く保ちながら、フルカラーの画像を表現できます。

ポイント 背景を透明にすることはできません。現場では「バナー画像、JPEGだと文字がボケるので、PNGでも試してみましょう」というように、用途に応じて形式を使い分けます。

Kの章：プロの差がつく微調整

Kerning (カーニング)

一言でいうと 「A」と「V」のように、特定の文字と文字の間の間隔を個別に調整する作業です。

なぜ大切？ プロとアマチュアの差が最も出やすい部分の一つです。機械的に並べただけでは不自然に見える文字間を、視覚的に心地よいリズムになるよう手動で調整することで、タイポグラフィ全体の質が劇的に向上します。

ポイント 現場では「ロゴの『A』と『V』の間のカーニングをもう少し詰めてください」といった、ミリ単位の繊細な指示で使われます。

Keyframe (キーフレーム)

一言でいうと CSSアニメーションを作る際の、動きの「節目」となるポイントのことです。

なぜ大切？ 「0%の時点ではここにいて、50%でここまで移動し、100%で消える」というように、変化の始点・中間点・終点を定義することで、複雑なアニメーションを制御します。

ポイント エンジニアには「アニメーションのキーフレームを増やして、もっと滑らかな動きにしましょう」といった形で、動きの質を具体的に伝えます。

Kicker (キッカー)

一言でいうと ニュースサイトなどで、メインの見出しの上に小さく配置される、カテゴリー名や短い補足フレーズのことです。

なぜ大切？ ユーザーがメインの見出しを読む前に、「【新商品】」や「インタビュー」といった記事の種別を瞬時に把握する手助けをします。情報の伝達効率を高めるテクニックです。

ポイント ユーザーの視線を引きつけ、本文を読むきっかけを作る役割もあります。

Key Visual (キービジュアル)

一言でいうと サイトやキャンペーンのコンセプトを象徴する、最も中心的な画像やデザインのことです。

なぜ大切？ ユーザーにブランドの世界観を伝え、強い印象を残すための「顔」となるビジュアルです。このクオリティが、プロジェクト全体の成功を左右することもあります。

ポイント 「Hero Image（ヒーローイメージ）」や「Main Visual（メインビジュアル）」とほぼ同じ意味で使われます。

Lの章：特定のページとUI

Lightbox (ライトボックス)

一言でいうと 画像をクリックした際に、現在のページの上に重なる形で、背景を暗くして画像を拡大表示するUIです。

なぜ大切？ ユーザーを別のページに移動させることなく、画像の詳細をスムーズに見せることができます。特に、写真ギャラリーや商品画像を見せる際に優れたユーザー体験を提供します。

ポイント これは「Modal（モーダル）」の一種ですが、現場では「ギャラリーの画像はライトボックスで拡大できるように実装しましょう」というように、画像に特化したモーダルとして区別されます。

Line-height (ラインハイト / 行間)

一言でいうと 文章の行と行の間のスペース（高さ）のことです。

なぜ大切？ 行間が狭すぎると文字が詰まって見え、読みにくさからユーザーにストレスを与えてしまいます。適切な行間を確保することは、長文をストレスなく読んでもらうための最も基本的な配慮です。

ポイント WEBデザインでは、文字の大きさの1.5〜1.8倍程度に設定するのが読みやすいとされています。実務では「このテキスト、ラインハイトをもう少し広げて読みやすくしてください」といった形で微調整します。

Landing Page (LP)

一言でいうと 広告などをクリックしたユーザーが最初に訪れる、商品購入や資料請求といった特定の目的達成に特化した一枚の長いページです。

なぜ大切？ 通常のウェブサイトとは異なり、ユーザーをコンバージョン（成果）へと導くためのストーリーテリングや説得の技術が求められます。WEBデザイナーにとって非常に重要な仕事の一つです。

ポイント 現場では「今回のLPは、スマホファーストでレイアウトを組みましょう」というように、戦略的にデザインを進めます。

Layout (レイアウト)

一言でいうと ページ上の文字や画像、ボタンなどの要素を、目的（見やすさ、使いやすさなど）に合わせて効果的に配置することです。

なぜ大切？ 優れたレイアウトは、情報を整理し、ユーザーの視線を自然に誘導し、サイトのメッセージを効果的に伝えます。デザインの骨格を決める fundamental な作業です。

ポイント グリッドシステムや余白（ホワイトスペース）の活用が、美しいレイアウトを作る鍵となります。

Mの章：余白と完成イメージの共有

Modal (モーダル)

一言でいうと ユーザーの操作を一時的に中断させ、ウェブページの一番手前に表示されるウィンドウのことです。

なぜ大切？ ログインフォームや重要な確認メッセージなど、ユーザーに確実に注目してもらいたい情報を表示する際に使われます。他の操作をさせないことで、ユーザーの意識を一つのタスクに集中させることができます。

ポイント 使いすぎるとユーザーの操作を妨げ、ストレスの原因になります。「閉じる」まで元のページには戻れない「モード」になることから、この名前がついています。

Margin (マージン)

一言でいうと 要素の「外側」に設定する余白のことです。

なぜ大切？ ウェブデザインのレイアウトにおける基本中の基本です。要素と要素の間の距離を調整するために使います。

ポイント 現場では「ここのボタン同士が近すぎるから、マージンを20px空けて」といった形で使われます。「Padding（内側の余白）」との使い分けは必須です。

Mockup (モックアップ)

一言でいうと 制作物の完成イメージを、より具体的に伝えるために作られる「実物大の模型」です。

なぜ大切？ クライアントやチームメンバーに、デザインが実際のデバイスでどのように見えるかを視覚的に伝えることができます。これにより、完成後のイメージのズレを防ぎ、スムーズな意思決定を助けます。

ポイント デザインカンプとほぼ同義ですが、最近では「デザインをPCやスマホの画面にはめ込んだ合成画像」を指してモックアップと呼ぶことも多いです。

Micro-interaction (マイクロインタラクション)

一言でいうと ユーザーの小さな操作に対して返される、細やかで気の利いた「反応（アニメーション）」のことです。

なぜ大切？ 例えば、「いいね」ボタンを押した時にハートが弾ける、フォームの入力が成功した時にチェックマークが出る、といった演出です。これらはユーザーに操作の手応えを与え、サービスに愛着を感じさせる効果があります。

ポイント 小さな工夫ですが、ユーザー体験（UX）を大きく向上させる力を持っています。

Mobile First (モバイルファースト)

一言でいうと ウェブサイトをデザインする際に、PC版からではなく、まずスマートフォン版のデザインから先に考える設計手法です。

なぜ大切？ 今や多くのサイトで、PCよりもスマートフォンからのアクセスが上回っています。限られた画面スペースの中で、本当に重要な要素は何かを優先的に考えることで、より洗練された使いやすいサイトを作ることができます。

ポイント PC版は、モバイル版の要素を元に、より広い画面に合わせて情報を追加・再配置していく形でデザインします。

Nの章：ユーザーを迷わせない道しるべ

Navigation (ナビゲーション)

一言でいうと ユーザーを目的のページへ導くための、メニューやリンクなどの案内システムの総称です。

なぜ大切？ サイトの「地図」や「道標」の役割を果たします。どんなに良いコンテンツがあっても、ナビゲーションが分かりにくければ、ユーザーは情報を見つけられずにサイトから離れてしまいます。ユーザビリティ（使いやすさ）の根幹をなす要素です。

ポイント 現場では「スマホ版のナビゲーションは、右上のアイコンに格納しましょう」といったように、デバイスごとの最適な形を考えます。

Negative Space (ネガティブスペース)

一言でいうと デザインの中で、要素が配置されていない「意図的に作られた何もない空間（余白）」のことです。

なぜ大切？ 情報を詰め込みすぎず、あえて余白を作ることで、本当に伝えたい要素を際立たせ、高級感や洗練された印象を与えます。

ポイント 「White Space（ホワイトスペース）」とほぼ同義で使われます。現場では「ネガティブスペースを広めにとって、ゆったりとした印象のデザインにしてください」という指示が出されます。

Native App (ネイティブアプリ)

一言でいうと App StoreやGoogle Playなどから、スマートフォンにインストールして使用するアプリケーションのことです。

なぜ大切？ WEBデザイナーがアプリのデザインを手がける際に、ブラウザで見るウェブサイトとの違いを意識する必要があります。OS（iOS/Android）ごとにデザインのルールや操作感が異なるため、それぞれのプラットフォームに最適化された設計知識が求められます。

ポイント ウェブサイトをアプリのように見せる「Web App」と対比して使われる言葉です。

Oの章：デザインに深みを出す重ね塗り

Opacity (オパシティ / 不透明度)

一言でいうと 色や画像の「透け具合」のことです。100%（CSSでは1.0）で完全に不透明、0%（0.0）で完全に透明になります。

なぜ大切？ デザインに奥行きや深みを出すために欠かせないテクニックです。例えば、美しい背景写真の上に文字を置く際、写真と文字の間に半透明の黒いレイヤーを重ねるだけで、文字の読みやすさが劇的に向上します。

ポイント 現場では「バナーのリンク、Opacityを0.7くらいにしてホバーの反応を出してください」というように、インタラクションの実装でも使われます。

Onboarding (オンボーディング)

一言でいうと 初めてサービスを利用するユーザーに対して、使い方を分かりやすくガイドし、サービスに慣れてもらうための一連のプロセスのことです。

なぜ大切？ 多くのユーザーは「使い方が分からない」と感じると、すぐにサービスから離れてしまいます。最初の体験でつまずかせないよう、チュートリアルや機能紹介でスムーズな利用開始をサポートすることは、ユーザーの定着率を高める上で非常に重要です。

ポイント 船や飛行機に新しく乗り込んだ乗組員をサポートすることから、この名前がついています。

Overlay (オーバーレイ)

一言でいうと 画像や背景の上に、半透明の色や別の要素を「重ねて」表示するデザイン手法です。

なぜ大切？ 特定の要素にユーザーの注意を集中させたり、デザインに奥行きを出したりする効果があります。モーダルウィンドウを表示する際に、背景のメイン画面を暗くする半透明の黒い層もオーバーレイの一種です。

ポイント 現場では「写真の主張が強いので、上に白のオーバーレイを重ねて文字を見えやすくしましょう」といった形で使われます。

OGP (オープングラフ)

一言でいうと ウェブページのURLがSNS（FacebookやXなど）でシェアされた際に、そのページのタイトル、説明文、画像などを意図通りに表示させるための仕組みです。

なぜ大切？ OGPを正しく設定しておくことで、SNS上での見栄えが良くなり、クリックされやすくなります。魅力的な画像やキャッチーなタイトルが表示されることで、情報の拡散力が大きく変わります。

ポイント 「Open Graph Protocol」の略です。「SNSでシェアされた時のために、OGP画像もしっかりデザインしておきましょう」と、デザイナーの重要な仕事の一つになっています。

Pの章：ユーザー視点と演出

Padding (パディング)

一言でいうと 要素の枠線（Border）より「内側」に設定する余白のことです。

なぜ大切？ ボタンのデザインで、文字の周りに適切なパディングがないと、窮屈で非常に安っぽい印象になってしまいます。要素の中身と枠線との間にゆとりを持たせることで、デザインの安定感と見やすさを向上させます。

ポイント 「Margin（外側の余白）」との使い分けは、レイアウトを組む上での必須スキルです。

Persona (ペルソナ)

一言でいうと デザインするサイトやサービスの、ターゲットとなるユーザーを具体的にイメージした「架空の人物像」のことです。

なぜ大切？ 「誰のためにデザインするのか」を明確にすることで、デザインの方向性がブレなくなります。「30代女性」といった曖昧なターゲットではなく、「佐藤さん（32歳）、仕事が忙しく、スマホで手軽に情報を得たい」のように具体化することで、フォントや色の選択に一貫した判断基準が生まれます。

ポイント 古典演劇で役者がつけていた「仮面」が語源です。

Parallax (パララックス)

一言でいうと ユーザーがページをスクロールする際に、手前のコンテンツと背景の画像などを異なる速度で動かすことで、画面に奥行きや立体感を出す視覚効果です。

なぜ大切？ 特にLP（ランディングページ）のような一枚の長いページで、ユーザーを飽きさせずにストーリーに引き込むための演出として効果的です。リッチで没入感のあるユーザー体験を提供できます。

ポイント 日本語では「視差効果」と呼ばれます。

Prototype (プロトタイプ)

一言でいうと 実際のウェブサイトのように、ボタンをクリックすると画面が遷移するなど、動きや操作感を試すことができる「動く試作品」です。

なぜ大切？ 静的なデザインカンプだけでは分からない、実際の使い勝手（ユーザビリティ）や画面遷移の流れを、開発前に検証することができます。これにより、大きな手戻りを防ぎ、プロジェクト全体の効率を高めます。

ポイント Figmaなどのデザインツールには、手軽にプロトタイプを作成できる機能が備わっています。

Primary Color (プライマリーカラー)

一言でいうと サイトのブランドイメージを象徴する、中心的な「メインカラー」のことです。

なぜ大切？ サイト全体に一貫した印象を与え、ユーザーにブランドを記憶してもらうための重要な色です。多くの場合、企業のロゴに使われている色が選ばれます。

ポイント 配色の黄金比「60-30-10の法則」では、約30%を占める色とされています。

Qの章：実装と品質保証

Media Query (メディアクエリ)

一言でいうと レスポンシブデザインを実現するための、CSSの核となる機能です。

なぜ大切？ 「画面幅が768px以下の場合に、このCSSを適用する」といった条件分岐を記述することで、PC、タブレット、スマホなど、閲覧しているデバイスの画面サイズに応じて最適なスタイルを切り替えることができます。

ポイント Bの章で出てきた「Breakpoint」は、このメディアクエリで指定する数値のことです。現場では「スマホ用の表示切り替えは、メディアクエリで調整しておいてください」と指示されます。

QA (品質保証)

一言でいうと デザインが完成し、エンジニアによる実装が終わった後に行う「最終チェック」の工程です。

なぜ大切？ 「スマホで見ると文字がはみ出している」「特定のブラウザでボタンの色が違う」といった不具合（バグ）を、サイトが公開される前に見つけ出し、修正するための非常に重要なプロセスです。ここを疎かにすると、サイトの信頼性を大きく損ないます。

ポイント 「Quality Assurance」の略です。現場では「来週からサイト公開前のQAに入るので、チェックリストを作成しましょう」といった形で進められます。

Quotation (クォーテーション)

一言でいうと 他のサイトや書籍などから文章を「引用」する際に使用するデザイン要素です。

なぜ大切？ 引用部分を地の文と明確に区別することで、どこからどこまでが引用であるかを読者に分かりやすく示します。これにより、文章の信頼性を高めると同時に、著作権上のルールを守ることにも繋がります。

ポイント 現場では「引用部分は、背景色を変えて他の文章と区別がつくようにデザインしました」というように、デザイン意図を説明する際に使われます。

Rの章：現代のWEBデザイン必須知識

Responsive Design (レスポンシブデザイン)

一言でいうと PC、タブレット、スマホなど、ユーザーが見ているデバイスの画面サイズに応じて、レイアウトやデザインが自動で最適化される設計手法のことです。

なぜ大切？ 今や「レスポンシブではないサイト」を探すのが難しいほど、現代のWEB制作における標準となっています。どんな環境のユーザーにも、快適な閲覧体験を提供するために必須の技術です。

ポイント 現場では「このサイトはレスポンシブ対応が必須なので、スマホ版の構成も早めに作りましょう」と、制作の初期段階で要件として確認されます。

Resolution (解像度)

一言でいうと 画面や画像のきめ細やかさを示す尺度で、画素の密度のことです。

なぜ大切？ iPhoneのRetinaディスプレイに代表される高解像度な画面では、通常の画像がぼやけて見えることがあります。デザイナーは、これを防ぐために、実際の表示サイズの2倍（@2x）以上の解像度で画像を書き出すといった配慮が求められます。

ポイント 「Density（ピクセル密度）」とほぼ同じ意味です。実務では「画像の解像度が低くて荒れているので、高画質なものに差し替えてください」といった指示で使われます。

Radius (ラディウス / 角丸)

一言でいうと ボタンやカード型デザインなどの「角の丸み」のことです。CSSではborder-radiusで指定します。

なぜ大切？ 角の丸みの度合いによって、サイト全体の印象をコントロールできます。例えば、角が丸いと親しみやすく柔らかい印象に、直角に近いと誠実で先進的な印象を与えることができます。

ポイント 現場では「ボタンのラディウスをもう少し大きくして、親しみやすいデザインにしましょう」というように、デザインの印象を調整する際に使われます。

Radio Button (ラジオボタン)

一言でいうと 複数の選択肢の中から「1つだけ」を選ばせる形式の入力ボタンです。

なぜ大切？ アンケートフォームなどで、「はい／いいえ」や「男性／女性」のように、排他的な選択をユーザーに求める際に使用します。複数選択が可能な「チェックボックス」との使い分けが重要です。

ポイント 昔のカーラジオの選局ボタンが、1つを押すと他のボタンが解除される仕組みだったことから、この名前が付きました。

Sの章：画像の最適化と設計図

SVG (Scalable Vector Graphics)

一言でいうと どれだけ拡大・縮小しても、画質が劣化しない「ベクター形式」の画像ファイルです。

なぜ大切？ ロゴやアイコンに最適な形式です。写真（ビットマップ画像）と違い、計算式で形を記憶しているため、スマホでも4Kモニターでも常にクッキリと美しく表示されます。また、ファイルサイズが非常に軽いのも大きなメリットです。

ポイント エンジニアには「ロゴは拡大しても綺麗なように、SVG形式で書き出しておいて」と依頼するのが一般的です。

Sitemap (サイトマップ)

一言でいうと 家づくりでいう「設計図」や「間取り図」にあたる、サイト全体のページ構成を一覧にした図のことです。

なぜ大切？ 制作の初期段階でこれを作成することで、必要なページに抜け漏れがないかを確認し、プロジェクト全体の規模感を把握できます。クライアントやチーム内での認識合わせにも不可欠です。

ポイント 現場では「サイトマップを確認して、ナビゲーションの項目に漏れがないかチェックしましょう」というように、プロジェクト管理で使われます。

Section (セクション)

一言でいうと 1枚のウェブページを、「サービス紹介」「お客様の声」「会社概要」といった意味のある内容のまとまりごとに区切った単位（章）のことです。

なぜ大切？ 長いページでも、セクションごとに区切ることで情報が整理され、ユーザーが内容を理解しやすくなります。デザイナーは、セクションごとに背景色を変えたり、十分な余白を設けたりして、話題の区切りを視覚的に伝えます。

ポイント 「このセクションの背景には薄いグレーを敷いて、前後の内容と差別化しましょう」といった形でデザインの意図を伝えます。

Slider (スライダー)

一言でいうと 複数の画像やコンテンツが、左右にスライドして切り替わるUIのことです。

なぜ大切？ 限られたスペースの中で、多くの情報をコンパクトに見せることができます。トップページのメインビジュアルや、商品・実績紹介などでよく使われます。

ポイント 「カルーセル」とも呼ばれます。自動で切り替えるか、ユーザーが操作するかなど、様々な設定が可能です。

Sans-serif (サンセリフ)

一言でいうと 日本語の「ゴシック体」のように、文字の端に「セリフ」と呼ばれる飾りがない、シンプルな書体の総称です。

なぜ大切？ 一般的に、モニター上ではサンセリフ体の方が見やすく、可読性が高いとされています。そのため、ウェブサイトの本文にはサンセリフ体のフォントが使われることが非常に多いです。

ポイント 「Sans」はフランス語で「〜のない」という意味です。反対に、明朝体のような飾りがある書体を「セリフ体」と呼びます。

Tの章：文字のデザインとUIパーツ

Typography (タイポグラフィ)

一言でいうと フォントの選定、文字のサイズ、行間、配置などを調整し、情報を美しく、かつ読みやすく伝えるためのデザイン技術全般のことです。

なぜ大切？ ウェブサイトのコンテンツの約8割は文字と言っても過言ではありません。優れたタイポグラフィは、サイトの世界観を演出し、ユーザーにストレスなく情報を届け、信頼性を高める力を持っています。

ポイント 現場では「もっと高級感を出したいので、タイポグラフィを意識して余白とフォントを見直しましょう」といった指示で、デザインの質を向上させます。

Thumbnail (サムネイル)

一言でいうと ブログ記事一覧やYouTubeなどで、コンテンツの中身を伝えるために表示される、縮小された見本画像のことです。

なぜ大切？ ユーザーが「この記事を読みたい！」「この動画を見たい！」と思うかどうかは、サムネイルのデザインに大きく左右されます。クリック率を上げるための非常に重要なビジュアル要素です。

ポイント 親指の爪（thumbnail）のように小さいことから、この名前が付きました。「一覧画面のサムネイル画像、マウスを乗せた時に少し拡大するようにして」といったインタラクションの指示もよくあります。

Toggle (トグル)

一言でいうと 1つのボタンやスイッチで、「ON/OFF」や「表示/非表示」のように2つの状態を切り替えるUIのことです。

なぜ大切？ スマートフォンの設定画面などでよく見られます。限られた画面スペースの中で、情報を整理したり、設定を切り替えたりする際に直感的で分かりやすい操作を提供します。

ポイント 「よくある質問（FAQ）は、トグル形式にしてクリックで回答が開くようにしましょう」というように、アコーディオンと似た使われ方をします。

Touch Target (タッチターゲット)

一言でいうと スマートフォンなどで、ユーザーが指でタップするためのボタンやリンクの有効範囲のことです。

なぜ大切？ タッチターゲットが小さすぎると、押し間違い（誤タップ）の原因となり、ユーザーに大きなストレスを与えてしまいます。指の腹で確実に操作できるだけの十分な大きさと間隔を確保することは、モバイルデザインの基本です。

ポイント Appleは、最低でも44×44ピクセルのタッチターゲットを推奨しています。

Thumb Zone (サムゾーン)

一言でいうと スマートフォンを片手で持った時に、親指が自然に届き、操作しやすい範囲のことです。

なぜ大切？ 使用頻度の高い重要なボタン（メニューやCTAなど）をこのサムゾーン内に配置することで、ユーザーは無理なく片手で快適に操作できます。モバイルのユーザビリティを向上させるための重要な考え方です。

ポイント 現場では「重要なCTAは、親指が届きやすいサムゾーン内に配置するのが理想的です」と、配置の根拠として語られます。

Uの章：最も大切な「ユーザー体験」

UI (User Interface)

一言でいうと ユーザーが製品やサービスと接する「接点」のことです。ウェブサイトで言えば、ボタンの形、色、フォント、レイアウトなど、ユーザーの目に触れて操作する部分すべてを指します。

なぜ大切？ UIの良し悪しが、サイトの使いやすさ（ユーザビリティ）に直結します。「どこをクリックすればいいか一目でわかる」「情報が見やすい」といった優れたUIは、ユーザーが目的を達成するための手助けをします。

ポイント 美しいだけでなく、機能的で分かりやすいことが求められます。

UX (User Experience)

一言でいうと ユーザーが製品やサービスを通じて得られる、すべての「体験」や「感情」のことです。

なぜ大切？ 「このサイトは使いやすくて楽しかった」「スムーズに商品が買えて満足した」といったポジティブな体験は、ユーザーが再びそのサービスを利用する動機になります。デザイナーは、優れたUIを設計することを通じて、最高のUXを提供することを目指します。

ポイント UXはUIを含む、より広範囲な概念です。「サイトが重くてイライラした」というのもネガティブなUXの一つです。

User Flow (ユーザーフロー)

一言でいうと ある目的を持ったユーザーが、サイトを訪れてから目標を達成するまでの一連の行動や画面遷移の流れを図にしたものです。

なぜ大切？ デザインを始める前にユーザーフローを整理することで、「どのページで、どんなボタンが必要か」「どこでユーザーが迷いそうか」といった点を洗い出すことができます。これにより、ページの抜け漏れを防ぎ、スムーズな体験を設計できます。

ポイント 現場では「購入完了までのユーザーフローをシンプルにして、UXを向上させましょう」というように、体験改善の文脈で使われます。

Usability (ユーザビリティ)

一言でいうと その製品やサービスが、特定のユーザーにとってどれだけ「使いやすいか」という度合いを示す言葉です。

なぜ大切？ 高いユーザビリティを持つサイトは、ユーザーがストレスなく、効率的に目的を達成できるサイトです。UIデザインを評価する上での重要な指標となります。

ポイント 現場では「このボタンの配置は、UIとしては綺麗だけど、ユーザビリティが低いので見直しましょう」といった議論が行われます。

Vの章：視線の誘導とデータ形式

Visual Hierarchy (視覚的階層)

一言でいうと ページ内の情報に、デザイン（文字の大きさ、色、太さ、余白など）で優先順位をつけ、ユーザーの視線を意図通りに導く技術のことです。

なぜ大切？ 「全部を目立たせることは、何も目立たせないことと同じ」です。視覚的階層がしっかりしたデザインは、ユーザーがパッと見ただけで「何が一番重要で、次に何を見ればいいか」を直感的に理解できます。

ポイント 現場では「情報の視覚的階層がバラバラなので、見出しをもっと強調しましょう」といった形でデザインを改善します。

Viewport (ビューポート)

一言でいうと PCやスマートフォンなどのデバイス上で、ウェブページが実際に表示される領域（ブラウザのウィンドウ）のことです。

なぜ大切？ レスポンシブデザインを実装する上で、このビューポートのサイズが基準となります。CSSで「画面幅いっぱいに表示する」という指示を100vw (100 viewport width) のように記述するなど、コーディングで頻出する基本単位です。

ポイント 現場では「スマホのビューポートで見ると、この画像がはみ出しているので修正してください」といった不具合の報告で使われます。

Vector (ベクター)

一言でいうと 画像を、色のついた点（ピクセル）の集まりではなく、座標と計算式に基づいた点と線で記録するデータ形式です。

なぜ大切？ この形式で作られた画像（ロゴやアイコンなど）は、どれだけ拡大・縮小しても、画質が全く劣化しません。あらゆるデバイスや解像度に対応する必要があるウェブデザインにおいて、非常に重要なデータの仕組みです。

ポイント Sの章で出てきた「SVG」は、このベクター形式の代表的なファイルフォーマットです。

Video background (ビデオ背景)

一言でいうと ウェブサイトの背景に、画像ではなく動画（ビデオ）を再生させるデザイン手法です。

なぜ大切？ サイトのヒーローエリアなどで使用することで、静的な画像よりもダイナミックにブランドの世界観やサービスの魅力を伝えることができます。ユーザーに強いインパクトを与え、没入感を高める効果があります。

ポイント 現場では「背景をビデオにして、ブランドの世界観をダイナミックに伝えましょう」と提案されますが、サイトの表示速度への配慮も必要です。

Wの章：デザインの土台と余白の価値

Wireframe (ワイヤーフレーム)

一言でいうと 色や装飾を一切省き、「どこに、何を配置するか」という情報構造とレイアウトの骨組みだけを示した、ウェブページの「設計図」です。

なぜ大切？ 本格的なデザイン作業に入る前にワイヤーフレームを作成することで、まず情報の優先順位や機能の配置に集中できます。これを先に固めておくことで、後の工程での大きな手戻りを防ぎ、プロジェクトを効率的に進めることができます。

ポイント 現場では「まずはワイヤーフレームで要素の優先順位を固めましょう」と、制作の最初のステップとして位置づけられます。

White Space (ホワイトスペース)

一言でいうと デザインにおける「余白」のことです。要素と要素の間にある、意図的に設けられた何もない空間を指します。

なぜ大切？ 余白は単なる「空き地」ではなく、デザインの重要な構成要素です。適切なホワイトスペースは、コンテンツを読みやすくし、情報のグループを明確にし、視線をスムーズに誘導します。

ポイント 「Negative Space」とほぼ同じ意味です。実務では「ホワイトスペースを贅沢に使って、高級感のあるレイアウトに仕上げてください」といった指示で使われます。

WebP (ウェッピー)

一言でいうと Googleが開発した、高画質を保ちながらファイルサイズを非常に軽くできる、次世代の画像フォーマットです。

なぜ大切？ 画像ファイルが軽いほど、ウェブサイトの表示速度は速くなります。サイトの表示速度は、ユーザー体験（UX）とSEO（検索エンジン最適化）の両方において非常に重要な要素です。

ポイント 現場では「画像が重くて表示が遅いので、すべてWebPに変換して最適化しましょう」といった会話が日常的に交わされます。

Web Fonts (ウェブフォント)

一言でいうと ユーザーのPCやスマホにインストールされていないフォントでも、サーバーから読み込んで表示させる技術のことです。

なぜ大切？ この技術のおかげで、デザイナーはデバイス環境を気にすることなく、ブランドイメージに合った多種多様な書体を自由に使えるようになりました。サイト全体のデザイン性と表現力を飛躍的に向上させます。

ポイント Fの章で出てきた「Font」は、このWebフォントを指すことが多いです。「Google Fonts」が代表的なサービスです。

X, Y, Zの章：座標・重なり順・視線誘導

X-axis / Y-axis (X軸 / Y軸)

一言でいうと デザインツールやブラウザ上で、要素の位置を決めるための座標軸です。X軸が「水平（横）方向」、Y軸が「垂直（縦）方向」を示します。

なぜ大切？ 要素の正確な位置を数値で管理・指定するために不可欠です。「X座標を0にする」と要素が左端に揃うなど、レイアウトをピクセル単位で精密に制御できます。

ポイント 現場では「このロゴのY軸をあと5px下げて、中央に揃えてください」といった具体的な指示で使われます。

X-Height (エックスハイト)

一言でいうと フォントにおける、アルファベットの小文字「x」の高さを基準とした指標です。

なぜ大切？ 同じフォントサイズでも、このエックスハイトが高いフォントは、小文字部分が大きく見えるため、一般的に可読性が高い（読みやすい）とされています。フォントを選ぶ際にプロが注目する、隠れたポイントの一つです。

ポイント 逆にエックスハイトが低いフォントは、エレガントでクラシックな印象を与えることがあります。

Z-index (重なり順)

一言でいうと 複数の要素が重なっている場合に、どちらを上（手前）に表示するかを指定するためのCSSプロパティです。

なぜ大切？ モーダルウィンドウが他のすべてのコンテンツより手前に表示されるのは、このZ-indexの数値が非常に高く設定されているからです。意図しない要素の下にボタンが隠れてしまう、といった問題を解決するために使います。

ポイント 現場では「ヘッダーがモーダルの下に隠れちゃってるから、Z-indexを調整して手前に出して！」といった形で、要素の重なり順を修正する際に使われます。

Z-Pattern (Z型パターン)

一言でいうと ユーザーが情報量の少ないウェブページ（トップページやLPなど）を見るときの、典型的な視線の動きの法則です。

なぜ大切？ ユーザーの視線は、「左上 → 右上 → 左下 → 右下」と、アルファベットの「Z」の字を描くように動く傾向があります。この法則を活用し、Zの軌道の始点と終点にロゴやCTAボタンなどの重要な情報を配置することで、ユーザーに効果的にメッセージを伝えることができます。

ポイント 文字の多いページでみられる「F型パターン」とは、対象となるページの種類が異なります。