デザインの基本レイアウトは「近接・整列・反復・対比」の4原則で構成され、この4つを守るだけで情報の伝わりやすさが大幅に向上します。フリーランスが実務で即使える5ステップの制作手順と、媒体別の応用方法をこの記事で解説します。
この記事でわかること
4原則（近接・整列・反復・対比）を同時に使う設計習慣を身につける方法がわかります。制作前の情報分類からグリッド設定・納品前チェックまでの5ステップを習得できます。チラシ・バナー・Web・営業資料の4媒体ごとの重点設計ポイントがわかります。
30秒診断全2問・あなたに合う働き方のタイプが分かります
Q1. 今のデザインの仕事で、一番近い悩みは？
この記事の結論
デザインの基本レイアウトで最初に身につけるべきことは、4原則を「同時に適用する設計習慣」です。近接・整列・反復・対比のどれか1つを意識するだけでは素人っぽさが残り、4つをセットで設計することで初めて「伝わるデザイン」になります。フリーランスの実務では、制作前の目的整理から納品前チェックまでの5ステップを型として持つことが、修正回数の削減と作業時間の短縮につながります。
今日やるべき1つ
手元の制作物を開き、「近接・整列・反復・対比」の4原則それぞれが適用されているか1項目ずつ確認してください。所要時間は約10分で、どれか1つでも未適用の原則が見つかれば、そこが改善の最優先箇所です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| 4原則の意味をまず理解したい | デザイン基本レイアウトは4原則で整理 | 5分 |
| 制作をどこから始めればよいか迷っている | デザイン基本レイアウトは5ステップで設計 | 7分 |
| 自分のレイアウトの問題点を特定したい | デザイン基本レイアウトを3分で自己診断 | 3分 |
| チラシ・バナー・Web・資料で使い分けたい | デザイン基本レイアウトは4媒体で考え方が変わる | 6分 |
| 実務ハックをすぐに取り入れたい | デザイン基本レイアウトは5つの習慣で完成度が上がる | 8分 |
| クライアントへの説明方法を知りたい | まとめ | 3分 |
デザイン基本レイアウトは4原則で整理
近接は関係性を距離で伝える
関連する情報を物理的に近づけて配置することで、読者は「このグループは同じ意味を持つ」と瞬時に理解できます。見出しと本文の間隔を詰め、次の見出しとの間隔を広げるだけで、情報の区切りが一目で分かります。近接の原則を守ることで読者が内容を追うために使う認知コストが削減され、結果として「読みやすい」という印象に直結します。見落としがちなポイントとして、画像とキャプションの距離も近接の対象です。画像の下に間隔を空けすぎると、キャプションがどの画像の説明なのか判断しにくくなります。
整列は視覚的な基準線をつくる
要素の端や中心を揃えることで、ページ全体に見えない「軸」が生まれます。この軸があることで読者の視線は安定して動き、情報を追うストレスが減ります（富士フイルム レイアウト整列の基本）。左揃え・中央揃え・右揃えのどれかを基本方針として決め、記事内で混在させないことが整列の核心です。複数の要素が「なんとなく近い位置にある」だけで揃っていない状態は、整列しているように見えても視線が散漫になるため、必ずグリッドやガイドを使って数値で揃えてください。デザイン4原則のチェックリスト付き実務解説も参考にしながら、原則を制作物に当てはめる習慣を作ってください。
反復は統一感をルール化する
色・フォント・余白・線の太さなどのルールを繰り返し使用することで、デザイン全体に一貫性が生まれます（レイアウトの基本原則）。見出しには必ず特定のフォントサイズと色を使う、ボタンは常に同じ形状にするといった「ルールの再利用」が反復の実践です。反復を怠ると、ページが進むにつれてスタイルがばらつき、読者が「これは同じ種類の情報か」と迷う原因になります。反復は見た目の統一感のためだけでなく、読者の情報処理を助けるために機能しています。
対比は情報の優先順位を視覚化する
大きさ・太さ・色・余白の差を意図的につけることで、読者に「何が最も重要か」を伝えます。すべての要素を同じサイズ・同じ太さで並べると、視線の行き先がなくなり、読者はどこから読めばよいか判断できなくなります。見出しを本文の2倍以上のサイズにする、強調箇所だけ異なる色を使う、CTAボタンだけ背景色を変えるといった手法が対比の基本です。対比の差をつけすぎることへの恐れが初心者の最大の障壁になりやすく、思い切って差をつけるほどメリハリが生まれ伝わりやすくなります。Webデザイン配色は3色70-25-5%で決まるの知識と組み合わせると、色による対比設計がより体系的に行えます。
余白は情報を引き立てる設計要素
余白は「何も置かない空白」ではなく、隣接する要素を目立たせるための設計要素です。余白が十分に確保されている要素は周囲と明確に区別されるため、読者の目に自然と入りやすくなります（マージン・グリッド・余白の基本）。余白を削ることは「見やすさの予算」を削ることと同義であり、詰め込んだデザインほど読者の離脱リスクが上がります。余白デザインの実践例では余白の使い方をレイアウト別に解説しているので、あわせて確認してください。
CHECK
▶ 今すぐやること: 手元の制作物で、隣接する2つの情報グループの間隔と、同じグループ内の要素の間隔を比較してください。グループ間が広く、グループ内が狭くなっていれば近接が機能しています（5分）
Q: 4原則はすべて同時に意識しないといけませんか？
A： 制作慣れするまでは1原則ずつ確認する方法で問題ありません。ただし4つはそれぞれ補い合う関係にあるため、最終確認では必ず4つを同時にチェックする習慣をつけてください。
Q： 競合の記事でも4原則は紹介されていますが、何が違うのですか？
A： 4原則の説明だけで終わっている記事が多い中、この記事では4原則をフリーランスの制作フローに組み込む方法まで解説しています。原則を知ることと実務で使えることは別の問題です。
デザイン基本レイアウトは5ステップで設計
ステップ1：目的・読者・媒体・ゴールを言語化する
制作を始める前に、4項目をメモ帳やドキュメントに書き出します。目的は「何のために作るか」、読者は「誰が見るか」、媒体は「どこで表示されるか」、ゴールは「見た人にどう行動してほしいか」です。この4項目が曖昧なまま制作を始めると、完成後に「なんとなく違う」という感覚だけが残り、修正の方向性も定まりません。フリーランスがクライアントから修正指示を受けたとき、この4項目を再確認することで、修正の本質が「見た目の好みの問題か」「目的達成の問題か」を切り分けられます。これはデザインの話し合いを感情論から論理の場に移す上で有効な手順です。
ステップ2：掲載情報を3段階に分類する
掲載したいすべての情報を「必須・重要・補足」の3段階に分類します。必須はなければ目的が達成できない情報、重要は伝わりやすさを高める情報、補足は余裕があれば追加する情報です（デザイン4原則とレイアウトの実践）。この分類を行うことで、必須情報に最も大きな面積と対比（サイズ・色・太さの差）を割り当てる根拠が生まれます。逆に分類を省略してすべての情報を同等に扱うと、対比のないフラットなデザインになり、読者に「何が大切か」が伝わらなくなります。
ステップ3：グリッドとマージンを先に設定する
要素を配置する前に、ページの外周マージンとグリッドを設定します。グリッドはページを等幅の縦列に分割する補助線で、要素の端をこの線に揃えることで整列が自動的に機能します（マージン・グリッド・余白の基本）。グリッドを後から設定しようとすると、すでに配置した要素の移動が大量に発生するため、必ず制作の最初に設定してください。A4チラシであれば外周マージン15〜20mm、2〜4カラムのグリッド設定が実務で広く使われています。Figmaレイアウトグリッド完全ガイドでは3種類のグリッドと実務設定を詳しく解説しているので、ツールの使い方と合わせて確認できます。
ステップ4：要素を視線の流れに沿って配置する
グリッドの上に、ステップ2で「必須」に分類した情報から順に配置します。チラシや縦長のWebページでは上から下への視線の流れ、横長のランディングページやバナーではZ型の視線の流れを基準に、読者が自然に情報を追える順序で配置します（グリッドと視線誘導の基礎）。配置しながら、CTAや問い合わせ先が視線の終点（右下や最下部）に来ているかを確認します。目立たせたいCTAを中央に孤立させてしまうケースがよくありますが、視線の流れの終点でなければ目に入っても行動につながりません。
ステップ5：白黒・縮小表示で情報の強弱を確認する
配置が完了したら、デザインを白黒表示（グレースケール）にして確認します。白黒にした状態でも「何が一番目立つか」が明確であれば、色に頼らない対比が機能している証拠です。さらに縮小表示で全体を小さく見ることで、余白のバランスや視線の流れが一目で確認できます（Adobe InDesign ページレイアウトの基本）。印刷物では特に色の見え方が画面と異なるため、このステップを省略すると納品後に問題が発覚するリスクが高くなります。
CHECK
▶ 今すぐやること: 制作中または完成済みのデザインファイルを開き、ステップ3のグリッドが設定されているか確認してください。設定されていない場合は今すぐグリッドを引き、要素の端が揃っているかを確認します（10分）
Q: グリッドは何カラムにすればよいですか？
A： 媒体とコンテンツ量によって変わりますが、A4チラシは2〜4カラム、Webページは12カラムグリッドが広く使われています。初めてグリッドを使う場合は2カラムから始めると管理しやすいです。
Q： 視線誘導はZ型とF型のどちらを使えばよいですか？
A： 画像や短いテキストが中心のバナー・チラシはZ型、長文や情報量の多いWebページはF型が基本です。コンテンツの性質に合わせて判断してください。
デザイン基本レイアウトを3分で自己診断
Q1: デザイン全体を見たとき、最初に目が行く場所が明確ですか？
Yesの場合、Q2へ進んでください。Noの場合、対比が不足しています。メインメッセージまたはCTAのサイズ・色・太さをほかの要素と比べて明確に差をつけることが最優先の改善です。
Q2: 関連する情報（見出し・本文・画像）は他のグループより互いに近く配置されていますか？
Yesの場合、Q3へ進んでください。Noの場合、近接が機能していません。関連要素の間隔を詰め、無関係な要素との間隔を広げることで情報のまとまりを作ってください。
Q3: 要素の端が揃っていて、ページ内に共通の縦軸が見えますか？
Yesの場合、Q4へ進んでください。Noの場合、整列が機能していません。グリッドまたはガイドを設定し、要素の端を数値で揃え直してください。
Q4: 見出し・本文・注釈のスタイルが、ページ全体で一貫して使われていますか？
Yesの場合、Result A（4原則が機能しています）です。Noの場合、Result B（反復が機能していません）です。
Result A: 4原則が機能しているレイアウトです。
次の確認として、白黒表示・縮小表示でも情報の強弱が保たれているかを確認してください（所要時間2分）。問題なければ、ステップ5の納品前チェックに進めます。
Result B: 反復が機能していません。
まず見出し・本文・注釈のスタイル（フォントサイズ・行間・色）を1セット定義し、それをドキュメント内で一貫して適用し直してください（所要時間10〜15分）。
CHECK
▶ 今すぐやること: 上記Q1から順に手元のデザインを確認してください。最初にNOと答えた箇所が最優先の改善点です（3分）
Q: 診断でNoが複数出た場合、どの順番で直せばよいですか？
A： 対比→近接→整列→反復の順が実務上の優先順位として適切です。対比が機能していない状態では、ほかの3つを修正しても「伝わる」デザインにはなりにくいためです。
Q： 診断はクライアントへの説明にも使えますか？
A： 使えます。「Q1でNoになっているため、メインメッセージのサイズを変更します」という形で説明すると、感覚的な意見ではなく原則に基づく説明になり、修正の合意が取りやすくなります。
デザインの仕事で単価を上げたい方へ
Webデザインの学び方をLINEで受け取る
LINEで無料で届くもの
- 20本Webデザインの無料レッスン
- 全工程Photoshopの解説動画
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
デザイン基本レイアウトは4媒体で考え方が変わる
チラシは1枚で完結する情報の優先順位設計
A4チラシは手に取ってから見るまでの時間が非常に短く、その間に「自分に関係あるか」を判断してもらう必要があります。タイトルや問いかけの文言を最大サイズで配置し、読者が一目で「誰向けのものか」を判断できる設計が必要です。補足情報は必ず下部またはサイドに集約し、読む順番を設計することが核心です。印刷入稿時には仕上がりサイズ・塗り足し・解像度・カラーモードについて、依頼する印刷会社の入稿条件を事前に確認してください。案件ごとに数値が異なるため、自分で確認する習慣が納品トラブルを防ぎます。チラシフォントおすすめ7選では業種別の選び方と初心者ルールを解説しており、フォント選定と合わせてレイアウトを整えることができます。
バナーは1秒で用件を伝える対比設計
Webバナーは多くの場合、他のコンテンツと並んで表示されます。クリックされるためには、背景と主テキストの色コントラストを十分に確保し、テキストは最小限に絞ることが優先です。バナーに詰め込む情報は「何をクリックすればどうなるか」の2点のみに絞ってください。WebアクセシビリティのWCAG 2.1基準では、テキストと背景のコントラスト比を4.5:1以上にすることが推奨されており（WCAG 2.1 達成基準 1.4.3）、この基準が視認性確保の目安となります。
Webページはスクロールを前提にした情報の流れ設計
スマートフォンでの閲覧が多い現在、Webページのレイアウトは縦方向のスクロールを前提に設計します。ファーストビュー（画面最上部に最初に表示される領域）に最重要情報を配置し、スクロールごとに補足情報が展開される構造が基本です（グリッドと視線誘導の基礎）。スマートフォン・タブレット・デスクトップの3つの画面幅で表示を確認し、特にタップ対象（ボタン・リンク）の大きさが指で操作しやすいサイズになっているかを確認してください。Appleのヒューマンインターフェースガイドラインでは最小タップ領域を44×44ポイント、Googleのマテリアルデザインでは48×48dpを推奨しています。
営業資料はスライド間の反復と対比の一貫性が信頼を生む
プレゼンテーション資料や提案書は、複数ページにわたって読まれます。各スライドのレイアウトに一貫したグリッドとスタイルを適用することで、読者は「次のページも同じ構造で情報が整理されている」と予測でき、内容の理解に集中できます。営業資料でよく見る失敗は、ページごとにレイアウトが異なり、どこに重要情報があるかを読者が毎ページ探し直さなければならない状態です。表紙・目次・本文・まとめのテンプレートを最初に作り、全スライドで使い回すことで制作時間も短縮できます。スライド作り方のコツ5選では初心者でも伝わる構成とデザインを解説しており、営業資料の設計に直接応用できます。
CHECK
▶ 今すぐやること: 現在進行中の案件で使用している媒体を確認し、上記4種のどれに該当するかを特定してください。該当する媒体の重点設計ポイントを1つ実施します（5分）
Q: Webとチラシで同じデザインデータを流用できますか？
A： レイアウトの構造は流用できますが、解像度・カラーモード・サイズが異なるため、必ず媒体ごとにファイルを作り直す必要があります。同じデータをそのまま使うと印刷やWeb表示で品質が低下します。
Q： 営業資料はPowerPointとFigmaのどちらで作るべきですか？
A： クライアントが編集できる状態で納品する場合はPowerPoint、デザイン品質を優先しクライアントが編集しない場合はFigmaまたはKeynoteが適しています。納品後の運用方法を確認してから選んでください。
デザイン基本レイアウトは5つの習慣で完成度が上がる
ハック1：情報分類シートで修正回数を削減する
【対象】: 制作前の情報整理に時間がかかり、修正が多いフリーランス
【手順】: 制作依頼を受けたら、まずドキュメントに「必須・重要・補足」の3列の表を作り（所要時間3分）、クライアントから受け取ったすべての情報を3列に分類します（所要時間5分）。分類した表をクライアントに共有し、優先順位の認識を制作開始前に合わせます（所要時間5〜10分のオンラインまたはチャット確認）。最終ステップとして、表の「必須」列にある情報だけを最初にデザインに配置し、「重要」「補足」は後から追加する順番で制作を進めます。
【コツと理由】: 修正の多くは「情報の重要度についての認識のズレ」から生まれます。制作前に分類表を使うことで、クライアントとデザイナーが同じ優先順位を持って制作を進められ、完成後の「これを目立たせてほしかった」という指摘を事前に防げます。「すべての情報をラフに並べてから調整する」より、「分類表で優先順位を合意してから制作を始める」方が修正回数を減らせます。
【注意点】: 分類表はクライアントに「確認をお願いします」と送るだけで十分です。表の書式を凝ったり、説明文を長く書く必要はありません。シンプルな3列の表を5分で作ることが最優先です。
ハック2：グリッド先行設定で整列チェック時間をゼロにする
【対象】: 配置後の整列修正に時間がかかり、細かいズレが気になるフリーランス
【手順】: 新規ファイルを開いたら最初にグリッドを設定します（所要時間2分）。A4チラシであれば外周マージン15〜20mm・3カラムグリッドを基準として設定します。次にすべての要素をグリッドの境界線に「スナップ（吸い付き）」させながら配置します（制作時間中）。最終ステップとして、グリッドを非表示にした状態でデザインを確認し、縦の軸が自然に揃っているかを目視で確認します（所要時間2分）。
【コツと理由】: 「配置後に整列コマンドで揃える」と、基準にする要素の選択や順序を都度判断する必要があり、かえって時間がかかります。グリッドが先にあれば配置の判断が自動化され、整列チェックの工程自体がほぼ不要になります。「グリッドを先に設定し、配置しながら揃える」が実務では確実です。
【注意点】: 「スナップがうまく機能しない」と感じたら、グリッドの間隔が細かすぎる可能性があります。最初は1cm単位など粗めのグリッドから始め、慣れてから細かくしてください。グリッドを削除して後から整列しようとするのは逆効果です。
ハック3：スタイルガイドを1ページ目に作り反復を自動化する
【対象】: 複数ページの制作物でスタイルが途中でばらつくフリーランス
【手順】: ファイルの1ページ目（またはアートボードの端）にスタイルガイドページを作ります（所要時間10分）。見出し・本文・注釈・ボタン・カラーパレットの5要素を配置したサンプルを1セット作成します。このサンプルを参照しながら、以降のページで同じスタイルをコピー&ペーストで展開します（制作時間中）。最終ステップとして、納品前にスタイルガイドと制作物を並べて、スタイルに逸脱がないかを確認します（所要時間5分）。
【コツと理由】: ページ数が増えるにつれて記憶頼りのスタイル管理は必ずズレが生じます。スタイルガイドを目に見える形で1ページ目に置くことで、スタイルの一貫性を維持しやすくなります。スタイルガイドを参照するだけで判断が不要になるため、制作スピードも上がります。
【注意点】: スタイルガイドを詳細に作りすぎる必要はありません。見出し・本文・注釈・ボタン・カラーパレットの5要素が揃っていれば十分です。アイコンや装飾のルールを最初から全部定義しようとすると、スタイルガイドを作ること自体が目的になってしまいます。
ハック4：対比チェックの白黒確認で印刷・Web共通の品質を保証する
【対象】: 色を変えたら見やすくなったが、印刷すると薄くなる経験があるフリーランス
【手順】: デザインが一通り完成したら、ファイルをグレースケール表示またはモノクロプリントで確認します（所要時間2分）。白黒の状態で最初に目が行く場所が、ステップ2で「必須」に分類した情報と一致しているか確認します。一致していない場合、一致するまで対比（サイズ・太さ・余白）を調整します（所要時間5〜15分）。最終ステップとして、縮小表示（実際の閲覧サイズに近い割合）でも同じ情報が目立つかを確認します（所要時間2分）。
【コツと理由】: 色に頼って対比を作ると、カラーユニバーサルデザイン（色覚多様性への配慮）や印刷時の色再現で問題が発生するリスクがあります。白黒でも対比が機能しているデザインは、色が加わることでさらに強調されるため、結果的に高品質な仕上がりになります。「白黒で機能してから色を加える」が実務での正しい順序です。
【注意点】: 印刷物では特に省略できない工程です。デジタル納品のみの案件であっても、スクリーンリーダーや画像の白黒印刷が必要なケースはゼロではないため、習慣化してください。
ハック5：納品前5項目チェックリストで手戻りをゼロにする
【対象】: 納品後にクライアントから細かい修正が入り、追加工数が発生するフリーランス
【手順】: 制作物が完成したら、以下5項目を順に確認します（所要時間合計10分）。第1項目は整列（すべての要素の端がグリッドに揃っているか）、第2項目は余白（要素間・ページ端の余白が一貫しているか）、第3項目は文字組み（見出し・本文・注釈のスタイルが反復されているか）、第4項目は視線誘導（最初に見てほしい情報が最も目立つか）、第5項目は目的達成（CTAや問い合わせ先が視線の終点に配置されているか）です。5項目をすべて確認したことを記録し、クライアントへの提出前にメモとして添付します。
【コツと理由】: 感覚的な確認は、疲労や時間的プレッシャーがある状況では見落としが増えます。5項目のリストを使うことで確認の属人性がなくなり、案件量が増えても同水準の品質を維持できます。「完成したら感覚で確認する」ではなく「5項目を番号順にチェックする」方が品質が安定します。
【注意点】: チェックリストの5項目は「確認した」で終わらせず、問題があった項目は必ず修正してからチェックを付けてください。5項目すべてに問題がないと確認できたとき初めて納品可能な状態です。
CHECK
▶ 今すぐやること: ハック5の5項目チェックリストをメモまたはドキュメントにコピーし、次の制作物の納品前に使用してください（2分）
Q: チェックリストはすべての案件で使う必要がありますか？
A： 規模の大小に関わらず使ってください。小さな修正の見落としが積み重なると、クライアントの信頼低下につながります。5項目10分の確認は、追加修正の工数と比べると大幅に小さいコストです。
Q： 5つのハックをすべて同時に実践するのは難しいですか？
A： すべてを同時に始める必要はありません。ハック1（情報分類）→ハック2（グリッド設定）→ハック3（スタイルガイド）の順に1案件ずつ定着させてから、次のハックを追加するアプローチが実務上の定着率を高めます。
デザイン基本レイアウトを習慣化する：4原則で完成度が上がる5つの実践
4原則と5ステップは、特定のツールやソフトに依存しない考え方です。Canvaを使っていても、Figmaを使っていても、PowerPointを使っていても同じ原則が機能します。今日から1つのハックを実践し、次の案件で確認してください。
| 状況 | 次の一歩 | 所要時間 |
| 制作前の情報整理に迷っている | 情報分類シートを作りクライアントと共有する | 15分 |
| 整列修正に時間がかかっている | グリッドを設定して制作をやり直す | 10分 |
| スタイルがページごとにばらつく | スタイルガイドを1ページ目に作る | 10分 |
| 納品後に修正が入りやすい | 5項目チェックリストを実施してから提出する | 10分 |
| クライアントへの説明に困っている | 自己診断のQ1〜Q4を使い原則に基づいて説明する | 5分 |
デザイン基本レイアウトに関するよくある質問
Q: デザインの4原則はどこで学べますか？
A： 4原則の基本はデザイン4原則とレイアウトの実践で体系的に解説されています。またレイアウトの基本原則では余白・グリッドの設計まで詳しく説明されており、両方を参照することで実務レベルの理解が得られます。
Q： Canvaを使っていても4原則は適用できますか？
A： 適用できます。Canvaにはグリッド・ガイド・整列コマンドが備わっており、4原則のすべてをCanva上で実践できます。ツールが変わっても原則は変わらないため、4原則を覚えることがすべてのツールへの応用の基礎になります。Canva初心者の使い方では5ステップで最初のデザインを完成させる方法を解説しているので、ツール操作と原則適用を同時に学べます。
Q: クライアントにレイアウトの意図を説明するにはどうすればよいですか？
A： 本記事の自己診断（Q1〜Q4）をクライアントとの打ち合わせで共有し、「この修正はQ2の近接に関する改善です」という形で説明してください。感覚論ではなく原則に基づいた説明は、クライアントの納得を得やすく、修正の合意も取りやすくなります。
【出典・参照元】
デザイン4原則とレイアウトの実践 – 近接・整列・反復・対比の基本原則と実践的な解説
レイアウトの基本原則（マージン・グリッド・余白） – マージン・グリッド・余白の設計方法
Adobe InDesign ページレイアウトの基本 – 制作フローと書き出しの手順
富士フイルム レイアウト整列の基本 – 写真とテキストの整列と配置の基本
グリッドと視線誘導の基礎 – グリッド・ガイド・視線誘導の講義形式解説
WCAG 2.1 達成基準 1.4.3 コントラスト（最低限） – テキストと背景のコントラスト比に関する基準