基本デザイン

基本デザイン一覧

• カラー

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

• タイポグラフィ

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

• アイコン

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

• レイアウト

  ページのレイアウトは文書構造上の要素を画面内のどこにどのように配置するかという設計のことです。ブラウザや表示デバイスに依存した制約の中で情報を視覚的に伝達するための技術であり、明確な情報伝達を実現するものです。

• リンクテキスト

  リンクテキストは通常、色や下線などの視覚的な表現で通常のテキストと区別され、URLと関連づけられたテキスト文字列です。

• 余白

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

• 角の形状

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

• エレベーション

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

バッジについて

基本デザインの各ページにおいて、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に含まれています。