基本デザイン

基本デザイン一覧

• カラー

  デザインシステムのカラーは、個々のウェブサイトで使用されるスタイルガイドに必要なカラースキームの構築を目的としたシステムです。

• タイポグラフィ

  タイポグラフィの定義は、一貫性のあるユーザー体験を作り上げる上で極めて重要な役割を果たし、ウェブサイトの全体的な視覚的アイデンティティ、読みやすさ、ユーザー体験等に大きな影響を与えます。

• アイコン

  デジタル庁デザインシステムでは、文書構造中でアイコンが使われる位置ごとに、4つのアイコン仕様を定義しています。

• レイアウト

  ページのレイアウトは伝えたい情報を視覚的に明確に伝えるためのものです。明確な伝達を実現するためには、コンテンツである情報構造を明確化し、情報の意味や目的に応じて明確な一貫したレイアウトで表現することが必要となります。

• リンクテキスト

  「リンクテキスト」は通常、色や下線などの視覚的な表現で通常のテキストと区別され、リンクを持つテキスト要素です。

• 余白

  デザインにおける余白とは、レイアウト内の要素間の空き領域やギャップを情報伝達を明確にするため、意図的に使用することを指します。

• 角の形状

  角の形状は、ボタンやカードなどのコンポーネントに適用する事によって画面の中で視覚的な抑揚を生み出し、コンポーネントの機能理解を促進したり任意のコンテンツを認知しやすくさせる事が出来ます。

• エレベーション

  エレベーションは、ブラウザ上で表示されるコンポーネントの高さの度合いを示します。

バッジについて

基本デザインの各ページにおいて、JIS X 8341-3:2016およびWCAG 2.1ならびにWCAG 2.2の達成基準を掲示している箇所では、参照元のドキュメントを略称で記載しています。
また、ガイドラインや解説書へリンクする場合に、WAIC（ウェブアクセシビリティ基盤委員会）による日本語訳があるものについては日本語訳版へリンクしています。日本語訳版が無いものはW3C（World Wide Web Consortium）による英語の原文へのリンクとなります。

• JIS2016 ： このバッジが付与されている達成基準は、JIS X 8341-3:2016に含まれています。なお、JIS X 8341-3:2016はWCAG 2.0と同一内容の規格です。
• WCAG2.1 ： このバッジが付与されている達成基準は、WCAG 2.1に含まれています。
• WCAG2.2 ： このバッジが付与されている達成基準は、WCAG 2.2に含まれています。