はじめに
- はじめて本ウェブサイトを見る方へ
- 利用上の注意事項
ガイダンス
基本デザイン
コンポーネント
リソース

レイアウト

2024年7月31日更新

概要

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

ウェブサイトのデザインにおいては、サイト全体の情報構造から文書構造のパターンを抽出してレイアウトをテンプレート化したり、定義済みのテンプレートに情報を格納することでページを量産したりすることがあります。

一貫性のあるレイアウトは、学習効率を高め、ページの閲覧やサイト内の回遊を促進し、ユーザー体験を向上させます。

グリッドシステム

グリッドを基準としたレイアウトは、視覚要素を配置するための一貫性を持った基本的なレイアウトのフレームワークとなります。このグリッドの仕組みのことをグリッドシステムと呼び、これを利用することでレイアウト設計が効率的に行えるようになります。

グリッドシステムの基本的な構成要素であるマージン、カラム、ガターなどでレイアウトの基準となるスペースを定義し、さまざまな画面サイズに対応したグリッドシステムを設計します。

基本的なグリッドシステム

1カラム

12カラム

左メニュー配置に12カラム

スクリーンショット：左メニューと12カラムを配置したレイアウトのイメージ。構成要素にはそれぞれ番号が振られている。1:マージン、2:カラム、3:ガター、4:メニュー。一番左に黒背景のメニュー（4）が配置されていて、右側にはグレー背景の12つのカラム（2）がガター（3）を挟んで配置されている。12カラムの両サイドにはマージン（1）が配置されている。

図中の項番

(1) マージン
(2) カラム
(3) ガター
(4) メニューやナビゲーションなど

マージン

カラム全体とページの余白を設定し、グリッドシステムの配置を決定します。ページ幅が狭くなった場合も想定し、マージンの余白を確保します。

カラム

カラムはページ内のコンテンツエリアを形成する 1 つ以上の列で構成され、その幅は本文の文字サイズの整数倍となります。複数のカラムとガターを統合してページ上のコンテンツのカラム割りを構成します。

12列のフレームワークは、その柔軟性と分割・結合の容易さから一般的です。レイアウトのカラム割りや画面サイズに基づいて容易に変更ができます。

ガター

カラム間の余白スペースです。程よい幅のガターを与えることで、レイアウト全体の読みやすさや視覚的な明確さを維持します。

ガターが狭すぎると、カラム上に配置されたテキストなどの右端と、その隣のカラムの左端が接近しすぎて誤読の可能性を増してしまうため、原則として本文の文字サイズの2倍を確保します。

メニューやナビゲーション

主にシステムなどを構築する上で左サイドにメニューやナビゲーションを配置する必要性があり、その領域を確保します。領域は固定幅、又は可変幅を持つ場合があります。メニューやナビゲーションの右端からマージンを設定し、グリッドを形成します。

ブレークポイント

レスポンシブデザインにおいて、レイアウトが切り替わるトリガーとなる画面幅の値をブレークポイントといいます。

ブレークポイントを設定することで、ウェブページ単体でデバイスやブラウザのビューポート幅に合わせてレイアウトの構造を変化させることができます。たとえば、デスクトップのブラウザに最適なレイアウトから、モバイルデバイスでの表示に最適なレイアウトへ切り替わるようなつくりにすることができます。

デジタル庁デザインシステムでは、ブレークポイントを1つ設定する想定で、作例などにおいてデスクトップ向けと、モバイルデバイス等のそれ以外の環境向けの、ふたつのレイアウトを提供しています。一般には、くわえてタブレット向けや、あるいはより大きなデスクトップ向け、多様なスマートフォンの各画角に応じてレイアウトのパターンを増やす場合など、ブレークポイントを2つ以上設定することがあります。

ブレークポイントの設定例

デバイス	ビューポートの範囲
モバイル・タブレット	768px未満
デスクトップ	768px以上

グリッドを基本としたレイアウト

グリッドレイアウトをもとにそれぞれのカラム割りを設定します。目的や用途に応じた最適なカラムレイアウトを選択してください。

1カラムレイアウト

2カラムレイアウト

3カラムレイアウト

4カラムレイアウト

カラムオフセット

記事や読み物など、ページコンテンツの種類によってカラムオフセットを使用することで、伝えたいコンテンツや情報をよりフォーカスした形でユーザーに提供できます。

タイポグラフィ: 概要レイアウト: アクセシビリティ

アクセシビリティ

レイアウトにおけるアクセシビリティ観点での留意点について説明します。

リキッドレイアウトを採用する

要素の横幅が画角に合わせて可変となるレイアウトをリキッドレイアウト（可変レイアウト）といい、画角に関わらず固定幅でレイアウトするものをソリッドレイアウト（固定レイアウト）といいます。

レスポンシブデザインで設計する各レイアウトのパターンを、リキッドレイアウトで実現することで、ユーザーは自由な環境でウェブサイトを閲覧することができるようになります。

グリッドシステムで設計されたレイアウトの場合、カラムまたはガターのどちらかを可変幅とし、もう一方を固定幅とすることで、コンテンツの視認性や可読性を維持しながらリキッドレイアウトを実現します。

なお、ブラウザの幅を極端に狭くして表示するか、あるいはコンテンツ特有の制約により固定の大きさで表示しなければならない画像が含まれる場合などにより、リキッドレイアウトであっても横スクロールが発生することがあります。この時、横スクロールバーを隠さないようにしてください。

参考情報

達成基準 1.4.4: テキストのサイズ変更（レベルAA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
達成基準 1.4.8: 視覚的提示（レベルAAA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
達成基準 1.4.10: リフロー（レベルAA）WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）

視覚的な要素の配置と読み上げ順序をできるだけ一致させる

現在のブラウザでは、グリッドレイアウトをCSSのみで実現することができるようになりました。すなわち、HTMLでマークアップされた文書構造と、グリッドレイアウトによるアイテムの配置は完全に分離されることとなり、CSSの記述次第で、DOMの順番に関わりなく表示位置を変更することができます。

しかし、グリッドレイアウトを使用して視覚的に順序を変更しても、スクリーンリーダーでのコンテンツ読み上げ順序が変更されるわけではありません。また、視覚的に並べ替えてもタブキーのフォーカス順序も変わりません。視覚的な表示と論理的な表示が一致しないコンテンツは、キーボード操作で閲覧しているユーザーによって可読性や操作性が低下する可能性があります。また、スクリーンリーダーと画面拡大ソフトウェアを併用しているロービジョンのユーザーにとっては、読み上げ順序とフォーカス順序が一致しないことでフォーカスがスキップしているように見える可能性があり、情報伝達上の混乱をもたらしかねません。

CSSグリッドレイアウトのorderプロパティとgrid-placementプロパティは、コンテンツの論理的な並び替えではなく、視覚的な並び替えのみに使用しましょう。また、視覚的な並び替えであっても、DOMの順序から大きく外れた位置変更を行う場合は、そもそも文書構造の並び順を変更することを検討してください。

参考情報

達成基準 1.3.2: 意味のあるシーケンス（レベルA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
達成基準 2.4.3: フォーカス順序（レベルA）JIS2016WCAG2.1WCAG2.2
- ガイドライン（WCAG 2.2）
- 解説書（WCAG 2.1）
コンポーネント: ボタン（アクセシビリティ）- ボタンのフォーカス順序と表示順序に気をつける

レイアウト: 概要リンクテキスト: 概要

タイポグラフィリンクテキスト

デジタル庁新規タブで開きます

RSSフィード
プライバシーポリシー
ウェブアクセシビリティ