UX/UIデザイン用語集⑥｜その他 成果物やドキュメント

この用語集は以下①〜⑧の記事で構成されています。UX/UIデザインの基本概念から設計フレーム、調査手法、UI構成要素、ドキュメント、チーム体制、開発連携に至るまで、全体を俯瞰できる用語を選定して整理しています。

様々な企業や職種が関わるプロダクト開発の現場において、UX/UIデザインへの共通理解を深め、意思決定や進行の遅れを防ぐお手伝いになれば幸いです。

＜UX/UIデザイン用語集へのリンク＞

コンポーネントライブラリ

Webやアプリで使用されるボタンや入力欄、モーダルなどのUI要素をデザインと動作を決めた状態で再利用しやすくまとめた「部品庫」。一貫性あるUI設計と開発の効率化を目的とする。

コンポーネントライブラリ

UIを標準化する再利用可能な部品集

コンポーネントライブラリは、ボタンやフォーム、ナビゲーションメニューなど共通UI要素を再利用可能なパッケージとして提供します。

これにより同じ要素を一から作る手間が省け、見た目・操作性のブレが減少します。また、詳細なドキュメントやコードスニペットなどの情報を付与することで、デザイナーと開発者が共通して「信頼できる参照先」になり、連携などもしやすくなります。

使われる場面

大規模チームによるプロジェクト開始時にボタン・入力フィールド・モーダルなどをライブラリ化したり、既存のUIキットを選定するなどして、共通コードとしてコンポーネントの追加・改修を管理します。

POINT

・ライブラリ導入後はチーム内で使用ルールや命名規則を明文化
・ベース機能を活かしつつ、必要に応じてカスタムを検討する
・既存利用は必要な機能を明確にし高品質なライブラリを選ぶ

デザインシステム

デザインシステムは、ブランドやUIの一貫性を維持・促進し、設計から実装まで効率よく行うための規範やコンポーネント群、ドキュメント化された共有基盤 。

デザインシステム

運用方針を含む設計基盤

デザインシステムは、以下を含む包括的な枠組みです。

・スタイルガイド（色、タイポ、スペーシング等）
・コンポーネントライブラリ（再利用可能なUIパーツ）
・パターンライブラリ（複数コンポーネントの組み合わせパターン）
・ドキュメント（使用ルール、アクセシビリティ基準、コードスニペット、運用・ガバナンス）

この体系により、デザイナー・開発者・プロダクトマネージャーなど複数の職種が共通の認識で協働しやすくなります。

よくある誤解

現場によりコンポーネントライブラリとの違いが曖昧な場合があります。コンポーネントライブラリは、ボタンやフォーム等のUIパーツのパーツ集。デザインシステムは「なぜ？どのように？」パーツを使うのかルールや思想、ドキュメントやガバナンスを含む運用基盤で、使用例や禁止事項、派生パーツなど体系化されている場合が多くみられます。

POINT

・コンポーネントライブラリにガイドラインや運用ルールを追加する
・ガバナンス設計（更新の承認ルートや責任者）を整備する
・権限を絞ったバリアント設計など一貫性と拡張性のバランスを取る

画面遷移図

ウェブサイトやアプリにおける各画面と、それらの間の遷移（リンクや操作）を示した図。
ユーザー導線の全体像を視覚的に把握する重要な設計資料。

画面遷移図

どこに繋がるのかの設計図

各画面をボックスで表現し、ボタンやリンクなどによる「ここからここへ」の移動を矢印で示す形式が一般的です。
作成のメリットには、必要な画面の洗い出し、導線の把握、サービス規模の見積、チーム内情報共有などがあります。UX設計やワイヤーフレーム作成の前段階として使われ、実装前にユーザー体験を俯瞰できるツールとして有用です。

よくある誤解

「サイトマップ（構造図）」と混同しやすいですが、画面遷移図は階層構造ではなく「ユーザーが実際に行き来する流れ」を描きます。また、状態遷移図（システム内部の状態変化）とは異なり、ユーザー操作や画面間の動きを中心に示すのがポイントです。

POINT

・各画面を直感的に見やすく階層構造に配置する
・ボタン名や条件分岐を記述するなど動作条件を明確にする
・1枚に収めると全体を俯瞰して構造が見やすく課題を発見しやすい

その他のUX/UIデザイン用語集へのリンク

以下の記事でもUX/UIについて紹介しています。興味を持っていただけましたらぜひご覧ください。

この用語集をPDF版として見たい方は以下よりダウンロードください。

最後に

本シリーズが、みなさまのプロジェクトにおける「共通言語づくり」の一助となれば幸いです。
UX/UIデザインを「難解な専門領域」ではなく、誰もがよりよいプロダクトづくりに参加するための「思考の土台」と捉え、気になる用語や概念があれば、ぜひ実務に照らして深掘りしてみてください。