
デザイナー用語大全集
デザイナー用語大全集
デザイン分野で頻出する用語を幅広くまとめた包括的な用語集です。グラフィックデザイン(印刷・DTPの基本用語)、UI/UXデザイン(ワイヤーフレームやプロトタイピング、アクセシビリティなど)、広告・ブランディング(ロゴやビジュアルアイデンティティ、マーケティング関連用語)、Webデザイン(レスポンシブデザイン、デザインシステム、最新のWebトレンドなど)、そして最新技術とデザイン(AIデザインツール、3Dデザイン、ジェネレーティブデザイン、NFTアート等)の領域ごとに用語を整理しています。重複を避けつつカテゴリ毎に分類し、特に重要な用語には歴史的背景や実例、活用法を交えて詳しく解説しています。プロのデザイナーにも役立つ内容となるよう心がけました。
グラフィックデザイン(印刷・DTP 含む基本用語)
グラフィックデザイン:文字や画像、色彩などの要素を用いて視覚的に情報を伝達するデザイン分野。ポスターや雑誌、パッケージなど印刷物から、デジタル広告やウェブ上のビジュアルまで幅広く含みます。優れたグラフィックデザインは、レイアウト(配置)やタイポグラフィ(後述)などの技術を駆使し、視覚的なインパクトと明確なメッセージ伝達を両立させます。
DTP(DeskTop Publishing):デスクトップパブリッシングの略。パソコン上でページレイアウトを行い印刷物を制作する手法です。1980年代以降、MacintoshとPageMakerなどのソフトの登場によって普及しました。DTPにより印刷業界が大きく変革し、従来は専門作業だった組版・版下作成がデザイナー自身で行えるようになりました。印刷用データの作成では、**トンボ(トリムマーク)や塗り足し(ブリード)**など印刷特有の設定にも留意します。
印刷用語(解像度・カラーなど):印刷物制作では専門的な用語が多く使われます。例えば 解像度 は画像の細かさを示す指標で、印刷では通常 dpi(dots per inch) 単位で指定し、高解像度(300dpi程度)が要求されます。またカラー設定も重要で、印刷では CMYK(シアン・マゼンタ・イエロー・キー/黒)の四色分解を用いるのが基本です。ディスプレイ用の RGB カラーとは変換が必要です。印刷時にインクのズレを防ぐ トラッピング や、特色指定に使われる Pantone(パントン) 色見本なども押さえておきたい用語です。
タイポグラフィ(Typography):文字組み(フォントの選択や配置)の技術および美学です。セリフ体(明朝やローマン体のように飾り線のある書体)とサンセリフ体(ゴシックやヘルベチカのように飾りのない書体)の選択、カーニング(文字間の詰め調整)やトラッキング(全体の文字間隔調整)、行間(Leading)の設定など、読みやすさとデザイン性を両立させるための要素が含まれます。タイポグラフィの歴史は活版印刷にまで遡り、デジタル時代の現在も可読性や階層構造を支える重要技術としてあらゆるデザイン分野で活用されています。
レイアウトと構図:テキストや画像をページや画面上に効果的に配置すること。基本原則としてグリッドシステム(見えない格子に沿った配置)を用いて要素を整列させ、視覚的階層を作ります。強調したい要素に視線を誘導するため視覚的ヒエラルキー(大きさや太さ、色による優先度づけ)を計画します。黄金比や三分割法など美しい比率を構図に取り入れる手法も古くから知られています。適切なレイアウトは情報をわかりやすくし、デザインの完成度を高めます。
色彩理論(カラー理論):色の仕組みや組み合わせの理論。色相環上で向かい合う色同士は補色の関係にあり、強いコントラストを生みます。一方、隣り合う色は類似色として調和を持ちます。RGB加法混色とCMYK減法混色の違い、印象を左右する色相・明度・彩度の概念など、デザインにおける色彩の基礎知識です。ブランドデザインでは特定の色が持つ心理効果(例えば青は信頼感、赤は情熱など)を踏まえてカラーパレットを決定します。
ゲシュタルト原則:視覚要素の知覚に関する心理学的法則群で、デザインの基本原理として活用されます。例えば近接の原則(近くに配置された要素はグループと認識される)、類同の原則(似た特徴を持つ要素はグループ化される)、閉合の原則(不完全な形でも人間は補完して全体像を見る)などがあります。グラフィックやUIのレイアウトで要素を意図的に配置し、人間の知覚特性を利用して直感的なデザインを作る際に、このゲシュタルト原則が指針となります。
ベクター画像とラスター画像:デジタル画像の形式に関する用語です。ベクター画像は座標や数式で形状を表現するため、拡大・縮小しても劣化しません。イラストレーターのSVGやAI形式などロゴ・イラスト制作に適しています。一方ラスター画像はピクセル(画素)の集合で表現される画像で、拡大すると荒くなります。写真画像やPhotoshopのPSD、PNG/JPEGなどが該当します。印刷物制作では用途に応じてベクター形式とラスター形式を使い分け、高解像度での出力や色の再現性を確保します。
アウトライン化:フォントなどの文字データをパス(ベクター形状)に変換すること。印刷所への入稿時、特殊な書体が正しく表示されないリスクを避けるため、文字をアウトライン(輪郭線)化しておくことが推奨されます。一度アウトライン化すると文字の可編集性は失われますが、データ互換性と表示の安定性が向上します。DTP作業では仕上げ前の重要なチェック項目の一つです。
オフセット印刷:現在一般的な商業印刷方式の一つ。版(プレート)にインクをのせ、ブランケット胴を介して紙に転写する方法で、高速かつ高品質な大量印刷が可能です。カラー印刷では通常シアン・マゼンタ・イエロー・ブラックの4版を用いる四色オフセット印刷が使われます。少部数や可変データ印刷にはレーザーやインクジェットを用いるデジタル印刷が利用されることも増えており、目的・部数によって使い分けられます。
印刷仕上げ:デザインを印刷物として完成させる際の加工用語です。ページ物では台割りに従いページを並べて面付けする面付け、印刷後に断裁する位置を示すトンボ(クロップマーク)、仕上がり位置より外側の印刷余白である塗り足し、印刷物を折る順序を示す折り方や、製本の方法(中綴じ・無線綴じ 等)など、多くの専門用語があります。これらを正しく指定・理解することで、デザインどおりの品質で印刷物が仕上がります。
ブランディング(※関連: 広告・ブランディング セクション参照):グラフィックデザインはブランディングの一環として用いられることも多いです。企業や商品のロゴデザイン、パッケージデザイン、広告ビジュアルの制作など、視覚的なブランド表現を担います(ブランディング関連の詳細は後述の「広告・ブランディング」セクションにて解説)。
UI/UXデザイン
UI(ユーザーインターフェース):ユーザーと製品(主にデジタル製品)が相互作用する接点や画面のこと。具体的にはウェブサイトやアプリの画面レイアウト、ボタンやメニューの配置、アイコンなど視覚的要素を指します。優れたUIは見た目の美しさだけでなく、操作のしやすさ(ユーザビリティ)を高め、ユーザーが直感的に使えることを目指します。UIデザイナーは一貫性のあるデザイン言語(共通の色・フォント・スタイル)を構築しつつ、ユーザーのタスクをスムーズに進めるレイアウトやコンポーネントを設計します。
UX(ユーザーエクスペリエンス):ユーザーが製品やサービスを通じて得る体験全体を指す概念です。UIが見た目や操作面の設計であるのに対し、UXは使っていて感じる満足度や価値を重視します。たとえばショッピングサイトのUXは、商品検索のしやすさから購入決済のスムーズさ、アフターサポートまで一連の体験すべてが関係します。UXデザイナーはユーザー調査にもとづきペルソナ(典型的ユーザー像)やユーザージャーニー(ユーザーが辿る道筋)を描き、課題点を洗い出して、サービス全体の体験価値をデザインします。
ワイヤーフレーム:画面レイアウトの骨組みを示す設計図。色や具体的なビジュアル要素は付けずに、配置すべきコンテンツ領域(ヘッダー、ナビゲーション、コンテンツブロック、ボタン等)をシンプルな箱や線で示します。ワイヤーフレームはロー・ファイ(Lo-Fi)プロトタイプとも呼ばれ、デザイン初期段階で情報構造や画面遷移を検討するのに用いられます。手描きのスケッチからツールを用いたデジタルワイヤーフレームまで手法はいくつかあり、詳細デザインに入る前の方向性確認として重要な工程です。
プロトタイプ:製品やインターフェースの試作品。UI/UXでは、実際に操作できる画面遷移付きのモデルを指すことが多いです。ワイヤーフレームが骨格だとすれば、プロトタイプはそこにインタラクション(動きや反応)を加えたものです。FigmaやAdobe XDなどのツールで画面間のリンクを設定し、クリック時の挙動を再現したりアニメーション効果を付けたりします。高精細なハイ・ファイ(Hi-Fi)プロトタイプを用いてユーザーテストを行い、フィードバックをデザインに反映させることで完成度を高めます。
ユーザビリティ:ユーザーにとっての使いやすさ、操作のしやすさを意味します。優れたユーザビリティを備えたUIは、ユーザーが迷わず目標を達成できる特徴を持ちます。評価基準としては学習容易性(初めてでも直感的に操作できるか)、効率性(目的達成までの手順が最小か)、エラー発生時の対処(ミスを防止・回復しやすいか)、主観的満足度などがあります。UXデザインでは、ユーザビリティテスト(ユーザーに実際に使ってもらい観察する)やヒューリスティック評価(経験則にもとづく専門家評価)によって問題点を発見し改善を行います。
アクセシビリティ:年齢や障害の有無に関わらず、できるだけ多様なユーザーが利用できるデザインを目指す考え方です。具体的には視覚障害者向けに画像に代替テキストを提供したり、色覚特性に配慮して十分なコントラスト比を確保した配色にする、キーボード操作だけでも利用可能にする、といった対応が含まれます。ウェブではWCAG(Web Content Accessibility Guidelines)という国際ガイドラインに沿ってアクセシビリティ対応が推奨されます。アクセシビリティを考慮したデザインはインクルーシブデザイン(包括的デザイン)とも呼ばれ、ユーザー層の拡大や法令順守の面からも近年ますます重視されています。
ユーザー調査:UXデザインの出発点となるリサーチ工程。ターゲットユーザーのニーズや行動パターンを理解するために、インタビューやアンケート、既存データ分析、ユーザビリティテストなどを実施します。調査結果をもとにペルソナ(架空の典型ユーザーモデル)やシナリオを作成し、デザインの方向性を決定します。十分なユーザー理解に根ざしたデザインは問題解決に直結しやすく、結果として使いやすい製品につながります。
ペルソナ:代表的なユーザー像を具体的な人物モデルとして描写したもの。年齢・職業・ライフスタイル・抱えている課題・製品に期待すること、など詳細なプロフィールを設定します。ペルソナは「この製品を使うのはどんな人か」をチーム全員で共有するのに役立ち、デザイン上の意思決定(例えば「この機能はペルソナの○○さんにとって本当に必要か?」)の判断基準となります。マーケティング分野でも活用される手法ですが、UXではユーザー中心設計をブレずに進めるための重要な手法です。
ユーザージャーニー:あるユーザーが製品やサービスに触れてから目的を達成するまでの一連の過程をマッピングしたものです。たとえばECサイトでの商品購入ジャーニーでは、「サイトに来訪」→「商品検索」→「商品詳細閲覧」→「カートに追加」→「決済完了」→「商品受取」といったステップがあり、それぞれでユーザーの行動や心情、課題を分析します。カスタマージャーニーマップとも呼ばれ、各段階でユーザーが抱える痛点(ペインポイント)や企業側の接点(タッチポイント)を可視化することで、UX改善の着眼点を探ります。
情報設計(IA: Information Architecture):情報の構造を体系立てて設計すること。ウェブサイトやアプリにおいて、情報をどのように分類・階層化し、ナビゲーションでどう辿れるようにするかを計画します。良いIAはユーザーが迷子にならず目的の情報にたどり着けるサイト構造を実現します。具体的手法としてサイトマップの作成や、カテゴリ分けの妥当性を検証するカードソーティング調査があります。IAはUIデザインの土台となる工程であり、大規模サイトや情報量の多いプロダクトほどその重要性が増します。
マイクロインタラクション:UI上の小さな対話的要素やアニメーションのこと。例えばボタンを押した際の短いアニメーション、通知アイコンの点滅、フォーム入力のリアルタイムエラーメッセージ表示など、細部の応答です。これらは一見細かいですが、適切にデザインされたマイクロインタラクションはユーザーにフィードバックを与え、操作感を向上させます。ホバー効果やスワイプアニメーションなどはユーザーに次の行動を示唆し、プロダクトに楽しさや使いやすさを付加します。UXの仕上げとして重要な要素です。
ユーザー中心設計(UCD):User-Centered Designの訳。デザインプロセス全体を通してユーザーの視点とニーズを最優先に考える設計手法です。具体的には、初期段階からユーザー調査で要件を定義し、プロトタイプをユーザーテストで検証し、反復的に改善していくアプローチを取ります。ISO規格でも人間中心設計として定義され、現代のUI/UX実務では標準的な考え方です。UCDを徹底することで、開発者やデザイナーの思い込みではなく実際の利用者にとって使いやすいプロダクトに近づけることができます。
デザイン思考(Design Thinking):イノベーションを生み出すための問題解決手法で、デザイナー的発想をビジネス課題などに応用するアプローチです。スタンフォード大学やIDEOによって広まった概念で、一般に共感→問題定義→創造(発想)→試作→テストという5つの段階を繰り返すプロセスとして説明されます。UXデザインにも取り入れられており、ユーザーへの共感(課題発見)からプロトタイピングとテストによる改善まで、人間中心の発想を体系化したものです。発想技法としてブレインストーミングやペーパープロトタイピングを活用し、多角的な解決策を探るのが特徴です。
ヒューリスティック評価:ユーザビリティ評価手法の一つで、専門家(エキスパート)がデザインをチェックリストに沿って評価するものです。Nielsenらによる10のユーザビリティ評価原則(ニールセンの10原則)が有名で、例えば「システム状況の視認性(現在何が起きているかユーザーに伝える)」「ユーザーの自由度(やり直し/やり直し取り消しが可能)」などがあります。ヒューリスティック評価は開発の初期段階でも実施しやすく、大きなUXの問題を早期に洗い出せる利点があります。ただし実際のユーザーの反応はユーザーテストで確認する必要がありますので、併用が望ましいです。
A/Bテスト:2つ以上のデザイン案を実際のユーザーにランダムに提示し、その反応や成果を比較する実験手法。WebやアプリのUI改善でよく使われ、例えばボタンの色や文言が異なるパターンAとBでクリック率(CTR)を比較し、より効果的な方を採用します。定量的データに基づいてデザインの意思決定ができるため、グロースハックの手法としても重宝されています。注意点として、一度に複数要素を変えると結果の解釈が難しくなるため、A/Bテストでは変更点を絞り込んで行うのが一般的です。
モーダル / モーダルウィンドウ:ユーザーの操作を一時的にロックし、特定の操作に集中させるためのUI要素です。画面上にポップアップするダイアログで、ユーザーがそれを閉じたり決定したりしない限り背後の画面を操作できなくなります。重要な確認(例:削除の最終確認)や情報入力(ログイン要求など)に用いられます。適切に使えばユーザーの注意を喚起できますが、頻用しすぎると煩わしく感じられるためユーザー体験とのバランスが求められます。
ダッシュボード:データや情報を一目で把握できるよう集約・可視化した画面/UIのことです。ウェブアプリや管理画面で、主要な指標(KPI)や通知、操作へのショートカットをまとめたホーム画面的な役割を果たします。デザイン上は情報の優先順位を明確にし、グラフやカードレイアウトなど視覚要素で整理された構成が求められます。ユーザーが必要な情報を素早く得て次のアクションに移れるよう、UI/UX設計のノウハウが凝縮される部分です。
広告・ブランディング
ブランディング:企業や製品に一貫したブランドイメージ(識別・共感される特徴)を築く活動全般を指します。名称やロゴ、色・書体などの視覚要素だけでなく、メッセージやトーン&マナー(表現の調子)、顧客との関係性まで含めた包括的な取り組みです。効果的なブランディングにより、顧客に対してブランドの価値や世界観を訴求し、競合との差別化やロイヤルティ向上を図ります。デザイナーは**ビジュアルアイデンティティ(VI)**の構築を通じてブランディングに寄与し、マーケティング戦略とも連携してブランドを育てます。
ビジュアルアイデンティティ(VI):ブランドを視覚的に表現する要素の総称。具体的にはロゴタイプ(企業名や製品名の字体デザイン)やシンボルマーク、ブランドカラー、コーポレートフォント、グラフィックモチーフなどが含まれます。VIはブランドガイドラインにまとめられ、広告や製品パッケージ、ウェブなどあらゆる媒体で一貫して使われます。確立されたVIにより、見る人は即座にそのブランドを認識でき、ブランドの統一感と信頼性が高まります。
ロゴデザイン:企業やブランドを象徴するロゴタイプ・シンボルを設計すること。優れたロゴはシンプルかつ記憶に残りやすく、そのブランドの価値観を体現します。たとえばマクドナルドの「ゴールデンアーチ」やNikeの「スウッシュ」のように、形状だけで認識できる強力なシンボルもあります。ロゴデザインでは用途に応じたバリエーション展開(横長版・縦長版・モノクロ版など)も考慮し、様々なサイズや媒体で視認性を確保します。歴史的には印章や紋章にルーツを持ち、現代でもブランド戦略の中心要素です。
ブランドガイドライン(ブランドマニュアル):ブランドの視覚・言語表現について定めたルールブック。ロゴの使用方法(最小サイズや余白、禁止事項)、カラーコード、フォントの指定、画像スタイル、文章トーンなどが記載されます。一貫したブランド表現を維持するため、新たに制作する広告物やウェブサイト等がこのガイドラインに従うようにします。大企業では数十ページに及ぶ詳細なガイドラインを整備しており、ブランド資産の統制・維持に役立てています。
タグライン / スローガン:ブランドやキャンペーンの印象を端的に表現する短いフレーズ。例えばAppleの "Think Different." やNikeの "Just Do It." のように、ブランドメッセージを象徴する言葉として広く使われます。記憶に残りやすいキャッチーな表現で、ブランドへの共感や認知度向上を狙います。広告キャンペーンごとに一時的に用いるコピーもあれば、企業の理念を長年にわたり表す企業スローガンもあります。
広告キャンペーン:特定のマーケティング目標のために計画・展開される一連の広告活動。新商品の発売告知キャンペーンや、季節限定プロモーションなど、テーマに沿って複数の媒体(テレビCM、雑誌広告、ウェブ広告、SNS等)で統合的に展開します。キャンペーンには統一されたキー・ビジュアル(メインとなる画像やデザイン)やキャッチコピーが設定され、期間内にターゲットに繰り返し接触することで効果を高めます。デザイナーやアートディレクターはキャンペーン全体のクリエイティブコンセプトを立案・実装し、メッセージを視覚化します。
クリエイティブブリーフ:広告やデザイン制作を開始する前にまとめる企画書・指示書。プロジェクトの背景、目的、ターゲットオーディエンス、メッセージのキーポイント、競合状況、アウトプットの要件などが簡潔に記されています。クリエイティブブリーフをクライアントやチームで共有することで、デザイナーやコピーライターは何を伝えるべきか、どんなトーンで、誰に向けて制作するかを明確にできます。プロジェクトの羅針盤となる重要文書です。
ターゲットオーディエンス:広告・デザインが想定する主要な視聴者層・顧客層のこと。例えば「20代女性・都市部在住・ファッションに関心が高い」といったように、年齢や性別、趣味嗜好、ライフスタイルなどで定義されます。ターゲット設定により、適切なビジュアル表現や媒体選定、メッセージの語調が変わってきます。広告やブランディング戦略では、このターゲット洞察に基づいてペルソナを作成したり、マーケティングチャネル(テレビ・SNS・屋外広告 等)の配分を決定します。
コピーライティング:広告文やキャッチコピーなど、文字による表現を作成すること。製品の魅力を伝える説得力のあるコピーや、心に残るタグラインなどはコピーライターの仕事です。優れたコピーはターゲットの心情に刺さり、行動(購入・問い合わせなど)を喚起します。デザインにおいて文字情報は不可欠な要素であり、コピーとビジュアルの相乗効果でメッセージを伝達します。キャッチコピー制作では言葉のリズムやインパクト、ブランドとの適合性が重視され、何十案もの検討から磨き上げられます。
アートディレクション:広告やデザイン制作における視覚表現全般の指揮・統括を指します。アートディレクター(AD)はプロジェクトのクリエイティブな方向性を定め、デザイナーやイラストレーター、フォトグラファー等のチームをリードしてアウトプットを形にします。ビジュアルコンセプトの立案から撮影やレイアウトの監修、最終成果物の品質管理まで関与し、メッセージを最も効果的に伝える表現を追求します。広告代理店やデザイン事務所ではADがクリエイティブの要であり、コピーライターと共にキャンペーンのクリエイティブコンセプトを牽引します。
トーン&マナー(トンマナ):ブランドや広告表現における一貫した調子や様式のこと。文章の語り口調(フォーマル/カジュアル、ユーモラス/真面目など)や、ビジュアルの雰囲気(明るい/落ち着いた、モダン/クラシックなど)全般に現れます。トーン&マナーを統一することで、コミュニケーション全体に統一感が生まれ、受け手に与える印象がブレなくなります。ブランドガイドラインにはトンマナに関する記述も含まれることが多く、デザイナーやライターはそれを踏まえて表現を作り込みます。
リブランディング:既存のブランドイメージを刷新・再構築すること。企業の方向転換や老朽化した印象の払拭、新規顧客層の獲得などを目的に行われます。具体的にはロゴやVIの変更、製品ラインナップの見直し、コミュニケーション戦略の再策定などが含まれ、大掛かりなプロジェクトになることもあります。成功すればブランドの価値向上や売上増につながりますが、失敗すると既存顧客の混乱やブランドロイヤリティ低下を招くリスクもあるため、慎重な計画と実行が必要です。
CI(コーポレートアイデンティティ):企業の理念や文化、ビジョンといった本質的なアイデンティティを指します。VI(視覚的アイデンティティ)やBI(行動的アイデンティティ)などの要素を総合し、企業らしさを内外に示す概念です。日本では1980年代にCIブームが起こり、多くの企業が理念策定やロゴ刷新などCI戦略に取り組みました。CIは単なるデザインに留まらず、企業の存在意義や価値観を明確化して経営戦略に活かすものであり、ロゴやスローガンはその象徴として機能します。
マーケティング用語(CTA・KPIなど):デザイナーが知っておくと良いマーケティング関連の用語も存在します。**CTA(Call To Action)**はユーザーに取ってもらいたい行動喚起(例:「今すぐ購入」のボタン文言など)を指し、デザインでも目立つ配置やカラーで表現します。**KPI(重要業績評価指標)はキャンペーンやサイトの成果を測る指標で、クリック率・コンバージョン率・PV数などが設定され、デザインの効果検証にも使われます。またROI(投資対効果)**なども広告では考慮され、クリエイティブがビジネス成果にどう貢献するかを示す際に用いられます。デザインとマーケティングは協働関係にあり、両方の視点を持つことで効果的なコミュニケーションが可能となります。
Webデザイン
Webデザイン:ウェブサイトのデザイン全般を指す用語で、レイアウト、タイポグラフィ、色使いからナビゲーションの構造、インタラクション演出まで幅広い要素を含みます。Webデザインはグラフィックデザインの原則を継承しつつ、HTML/CSSやブラウザ仕様といった技術要件も考慮する必要があります。近年では多様なデバイスに対応するレスポンシブデザイン(後述)が標準となり、デザインガイドラインやコンポーネントを体系化したデザインシステムを用いるケースも増えています。
レスポンシブデザイン:アクセスするデバイス(PC・タブレット・スマホ等)の画面サイズに応じてレイアウトを柔軟に変化させるWebデザイン手法です。画面の横幅に合わせてカラム数を変えたり、画像サイズを最適化したり、あるいはナビゲーションメニューの形態を切り替えたりします。メディアクエリ(CSSの条件指定)を用いて実装され、2010年にEthan Marcotte氏が提唱した概念が広まりました
モバイルファースト:Webデザインや開発において、最初にモバイル(スマートフォン)向けのデザインを作成し、その後大きなスクリーン向けに拡張していく手法です。従来はPCサイトを先に作りモバイル対応する流れが一般的でしたが、スマホ主流の現代では設計の出発点を小画面に置く「モバイルファースト」が推奨されます。これにより限られた画面で重要な要素に絞り込む思考が促され、情報の優先順位が明確になります。その後タブレットやPC向けに**強化(プログレッシブエンハンスメント)**していくことで、全デバイスで最適な体験を提供します。
デザインシステム:一貫したUIを効率よく作るための再利用可能なコンポーネントとガイドラインの集合体。ボタンやフォーム、ナビゲーションなどのパターンを体系化し、色・タイポグラフィ・余白などスタイル規定と合わせてドキュメント化したものです。デザインシステムを導入することで、大規模サイトでも画面間の整合性が保ちやすくなり、デザイナー・開発者間で共通認識を持って作業できます。有名な例としてGoogleのMaterial DesignやIBMのCarbon Design Systemなどがあり、多くの企業で独自のデザインシステム(Style GuideやUI Kit)を構築しています。
Atomic Design(アトミックデザイン):Brad Frost氏が提唱したデザインシステム構築の手法で、UIを原子レベルのパーツから段階的に組み上げていく考え方です
ユーザビリティとアクセシビリティ(Web):Webデザインでも前述のユーザビリティ(使いやすさ)とアクセシビリティ(利用のしやすさ)は重要な評価軸です。特に公共性の高いサイトではJIS X 8341-3などアクセシビリティ規格への適合が求められ、具体例として画像にaltテキストを付与する、フォーム要素に適切なラベルを付ける、キーボードだけで操作可能にするといった配慮が必須です。またページ表示速度やモバイルでの閲覧快適性など、技術的なユーザビリティ指標(Core Web Vitals等)もデザイン段階から念頭に置かれます。Webデザイナーは美しさと共にこうした見えない品質にも責任を持ちます。
フロントエンド開発との協業:Webデザインは実装(コーディング)と切り離せません。デザイナーはHTMLの構造を意識したデザインや、CSSで再現しやすい効果(グラデーションやアニメーション)を考慮します。近年ではデザイナー自身が簡単なコーディングを行ったり、逆に開発者がデザインツールに参加したりといった協業が一般化しています。デザインカンプ(完成見本画像)と実装のズレを減らすため、早い段階から実装を見据えたプロトタイピングや、デザインツールとコードの連携(例:CSSフレームワークに沿ったデザイン)も活用されています。
ランディングページ(LP):特定の目的(商品の購入や会員登録など)のために設計された縦長のWebページ。広告や検索から訪れたユーザーを想定し、余計なナビゲーションを省いて一つのテーマ・コンテンツに集中させるのが特徴です。LPデザインでは冒頭にファーストビュー(Above the fold)でユーザーの関心を引き、そのままスクロールして詳細情報→口コミや実績→CTAボタンへと誘導する流れを作ります。視線誘導のための効果的なビジュアルや明確なコピーライティングが求められ、コンバージョン最適化(CRO)の観点からA/Bテストなどでブラッシュアップされます。
パララックススクロール:Webページのスクロール時に背景と前景の要素を異なる速度で動かす視差効果のデザイン手法です。これにより奥行きや動的な演出が生まれ、ユーザーに印象的な体験を提供できます。2010年代前半に流行し、特に製品紹介のシングルページサイトなどで多用されました。現在では使いすぎると読み込み速度への影響やユーザビリティ低下も懸念されるため、効果的な場面に限定して用いられます。視差効果はCSSやJavaScriptで実装され、クリエイティブなストーリーテリング手法の一つとなっています。
フラットデザイン:質感や立体感を排した平面的でシンプルなデザインスタイル。スキューモーフィズム(現実の質感を模倣したデザイン)への反動として2010年代に広く採用されました。例えばAppleがiOS7でスキューモーフィックなアイコンを廃しフラットデザインへ移行したのは象徴的です。フラットデザインではミニマルなアイコンや鮮やかな単色、余白を活かしたレイアウトが用いられ、情報を整理された印象で伝えることができます。一方で視覚的な手掛かりが減るため、必要に応じて色調差やシンプルなシャドウで操作可能な要素を示す工夫も行われます。
スキューモーフィズム:現実世界の質感やオブジェクトを模したインターフェースデザイン手法。例えばメモアプリの背景を紙の質感にしたり、ボタンを物理ボタンのように立体的に描くといった具合です。スマートフォン初期のUIや一昔前のWebデザインで多用され、ユーザーに親しみやすさや直感的理解を与える役割を果たしました。しかしデザインの装飾過多にもつながりやすく、現在はよりシンプルなフラットデザインやその発展形であるニューモーフィズム(新しいスキューモーフ的表現)が注目されています。
Material Design:Googleが2014年に発表したデザインガイドラインで、フラットデザインに現実世界の紙のメタファーを取り入れたスタイルが特徴です。統一されたマテリアル(質感)概念に基づき、要素には厚み(Z軸)とシャドウ表現が与えられ階層関係が示されます。決められたカラーパレットやタイポグラフィ尺度、コンポーネントが提供され、AndroidアプリやGoogleの各種サービスで広く採用されています。Material Designは一種のデザインシステムとして、多くの開発者・デザイナーに参照されており、マテリアルコンポーネントはWebやiOS向けにも展開されています。
ニューモーフィズム(Neumorphism):フラットデザインのミニマルさを保ちつつ、ごく浅い光と影の効果で立体感を演出する最新のデザイントレンドです
グラスモーフィズム(Glassmorphism):半透明のガラスのような質感とブラー(ぼかし)効果を用いたデザインスタイル。背景が透けて見えるカードやウィンドウを白っぽく霞ませて表示し、上品な立体感と透明感を両立します。AppleのiOS7以降のデザインやWindows Aero(さらに遡れば)にも似た要素があり、2020年頃に再びトレンドとして脚光を浴びました。グラスモーフィズムは視覚的に洗練された印象を与えますが、多用しすぎると可読性が下がるため、ハイライト部分に限定して使われます。背景の抽象的なぼかし画像と組み合わせてモダンなUIを演出するテクニックです。
ダークモード:明るい背景に濃色文字の通常配色(ライトモード)に対し、暗い背景に淡色文字を用いる表示モードのこと。目の疲れ軽減やバッテリー消費抑制(有機EL画面の場合)などの理由から近年OSやアプリで公式サポートされるようになりました。デザイナーはダークモード用に専用の配色やグラフィックを調整する必要があります。コントラストや色の見え方がライトモードとは異なるため、例えばブランドカラーのトーンを変える、不要なシャドウ効果を省くなどの工夫が求められます。ユーザーの好みに応じてモードを切り替えられること自体がUX向上につながります。
SVG:Scalable Vector Graphicsの略で、XMLベースのベクター画像フォーマット。イラストやアイコンを高解像度でも劣化なく表示でき、Webではロゴや図表などによく使われます。SVGはコードとして扱えるため、CSSやJavaScriptで色を変えたりアニメーションさせたりと動的な表現も可能です。HTTPリクエストの削減やファイルサイズ圧縮の観点から、アイコンフォントに代わるWebアイコン実装手段としても一般化しています。Webデザイナーはラスター画像(PNG/JPEG)だけでなくSVGを適材適所で使い分け、表示品質とパフォーマンスの最適化を図ります。
Webタイポグラフィ:ウェブ上でのタイポグラフィ表現に関する用語です。印刷とは異なり、画面上の文字サイズは相対単位(emやrem)を用いて柔軟に拡大縮小できるよう設計します。近年はウェブフォントサービス(Google Fonts等)により多様な書体が使用可能になり、ブランドにあわせたフォント選定も行われます。行間や文字間隔はCSSで調整し、可読性を高めます。さらにレスポンシブタイポグラフィとしてデバイスに応じた最適な文字組みを適用したり、縦書きWebや多言語組版への対応など、Web特有のタイポグラフィ課題に取り組むケースもあります。
SEO(検索エンジン最適化):Search Engine Optimizationの略で、Google等の検索結果でより上位に表示されるようサイト構造やコンテンツを調整すること。厳密にはマーケティング・技術寄りの領域ですが、Webデザインとも深く関係します。例えばモバイルフレンドリーなデザインや高速表示はSEO評価に影響し、またHTMLの構造化(見出しタグの正しい使い方、リッチスニペット対応)も検索エンジンに内容を伝えやすくするため重要です。デザイナーは美観とユーザビリティだけでなく、サイトが適切に評価される設計になっているかにも注意を払います。
最新技術関連のデザイン
AIデザインツール:人工知能(AI)を活用した新世代のデザイン支援ツール群です。例えば自動レイアウト生成やデザインの自動補完を行うもの、文章や音声からデザインコンセプトを提案するもの、画像生成AIを用いてバナーやイラストの候補を作るものなどがあります。近年登場した例として、手描きスケッチからワイヤーフレームを起こすUizardや、テキストプロンプトからUIをデザインするGalileo AI、画像生成のMidjourneyやStable Diffusion(ビジュアルアイデア出しに利用)など多彩です。AIツールは定型作業の効率化や発想支援に有用で、デザイナーはこれらをコパイロット(共同操作者)的に使いこなすことが求められてきています。
ジェネレーティブデザイン:AIやアルゴリズムを用いて、人間が設定した制約条件内で多様なデザイン案を自動生成する手法です。元々は建築や工業製品の設計分野で、目標とする強度や素材条件を与えるとソフトウェアが無数の設計パターンを提示し、人間がその中から選定・改良するという形で発展しました
ジェネレーティブアート:上記ジェネレーティブ手法をアート(芸術作品)に応用したもの。プログラミングやアルゴリズムを駆使して自律的・ランダム的にビジュアルを生み出す表現手法で、プロセッシング(Processing)やOpenFrameworksといったツールキットがよく使われます。生成されるアートはプログラムにより無限のバリエーションを持つ場合もあり、鑑賞者とのリアルタイムな相互作用を組み込むことも可能です。近年はジェネレーティブアート作品をNFTとして販売する動きもあり、アートとテクノロジーの融合という観点からも注目を集めています。
3Dデザイン:コンピュータグラフィックスによる立体物のデザイン全般を指します。製品デザインや建築パース、キャラクターモデリング、モーショングラフィックスまで応用範囲は広大です。基本工程としてモデリング(形状の制作)、テクスチャリング(質感付け)、ライティング(照明設定)、レンダリング(画像/動画として描き出す)などがあります。主要ソフトウェアに3ds Max、Maya、Blender、Cinema 4Dなどがあり、近年はリアルタイム3Dエンジン(Unreal EngineやUnity)もデザインプロトタイピングに活用されます。UI/UXデザイナーでも簡易な3D要素(アイコンの3D化やAR用オブジェクト)を扱う機会が増えており、2Dと3Dの垣根が低くなっています。
VRデザイン(仮想現実デザイン):VR(Virtual Reality)向けのコンテンツやアプリケーションのデザインです。ヘッドマウントディスプレイ(HMD)を通じてユーザーが360度の仮想空間に没入するため、UIも2D画面とは異なるアプローチが必要です。例えばメニューや情報表示は空間上に浮かぶパネルとして配置したり、ユーザーの視線やコントローラー操作による選択を考慮して設計します。VRデザインでは酔いを防ぐための動作制限や、現実世界との境界(セーフティガイド)などHCI面での配慮も重要です。ゲームのみならず、仮想ショールームや遠隔協業ツールなどVR活用が広がる中、空間デザインや3DUIの知見が求められます。
ARデザイン(拡張現実デザイン):AR(Augmented Reality)は現実の風景にデジタル情報を重ねて表示する技術で、その体験を設計するのがARデザインです。スマホやARグラス越しに、現実空間にCGオブジェクトやテキストが配置されます。デザイナーは現実環境との調和や、ユーザーの移動・角度による見え方の変化を踏まえてUI要素を設計します。例えばポケモンGOのように現実の地面にキャラクターが立つ演出や、家具配置アプリで実物大の3D家具を部屋に表示するなど、位置・スケール感のデザインが肝となります。AR特有の課題として、背景とのコントラストや照明環境への適応、操作チュートリアル(慣れない3Dジェスチャー等)の設計などが挙げられます。
XR(クロスリアリティ / Extended Reality):VR、AR、MR(複合現実)など実空間と仮想空間を融合する技術の総称。デザイナーにとってXRは新たな表現領域であり、UI要素を2Dスクリーン外の現実空間に配置したり、物理的な動作をインタラクションに組み込む必要があります。Spatial Design(空間デザイン)とも関連し、人間の知覚を踏まえた空間的UI/UXの原則が模索されています。例えば文字情報は遠方では読みにくいためサイズや配置に工夫が要る、音響も3Dサウンドで設計する、など従来と異なるデザイン要件があります。XRは技術進化中の分野であり、UIガイドラインも各社(MicrosoftのMRガイドライン等)から提唱されています。
NFTアート:ブロックチェーン上で発行されるNFT(Non-Fungible Token、非代替性トークン)によって資産価値が証明されたデジタルアート作品のことです。NFTは唯一無二のデジタル所有権を示すため、画像や動画などのデジタルデータに真贋の証明と希少性を持たせることができます
メタバース:インターネット上に構築された三次元の仮想空間やその集合体を指す流行語的な概念です。ユーザーはアバターとして参加し、コミュニケーションや経済活動を行うことができます。デザインの観点では、メタバース内の空間デザイン(都市や会場のデザイン)、アバターやデジタルファッションのデザイン、UIやアイコンの設計(例えば仮想世界内のメニュー表示)など、新しい領域が広がっています。既存のゲーム開発や3Dデザイン、UI/UXの知識が交差する分野であり、Facebookが社名をMetaに変えるなど注目度が高まりました。メタバース関連デザインは、現実世界の制約を超えつつもユーザーに受け入れられる体験を作るという点でクリエイターに大きな挑戦をもたらしています。
デザインとプログラミングの融合:最新の動向として、デザイナーがプログラミングに触れたり、エンジニアがデザインに参加したりするケースが増えています。クリエイティブコーディングと呼ばれる分野では、デザイン目的でコードを書く(例:JavaScriptでインタラクティブなアニメーション制作)ことが一般化しつつあります。また、デザインツールにプラグインを自作して効率化したり、逆に開発環境でデザイン変数を調整するライブコーディング的手法もあります。これらは厳密な用語ではありませんが、プロのデザイナーに求められるスキルセットの変化として押さえておくべき潮流です。現代のデザインはツールや技術と切り離せず、幅広い知見を持つことでより創造的な表現と問題解決が可能になります。
以上、グラフィックから最先端テクノロジーまで網羅したデザイン用語集でした。各項目を押さえることで、デザインに関する専門知識の再確認や、新たなトレンドの理解に役立てていただければ幸いです。