HTML

グラフィックデザインの原則 - HTML

グラフィックデザインの原則は、ロビン・P・ウィリアムズ著『The Non-Designer's Design Book』で体系化された4つの基本原則(CRAP原則:近接・整列・反復・対比)を中心に構成されています。これらの原則は、デザインの専門知識がない人でもプロフェッショナルな視覚表現を実現できるよう設計されており、ウェブデザイン、UI/UX、印刷物、プレゼンテーションなどあらゆる視覚コミュニケーションに応用されています。各原則は情報の整理、視覚的階層の構築、一貫性の確保、読みやすさの向上に寄与し、混沌としたデザインを直感的で効果的なものへと変換します。

グラフィックデザイン CRAP原則 デザイン理論 UI/UX 視覚コミュニケーション ロビン・ウィリアムズ デザイン教育
<table>
<thead><tr><th>code</th><th>slug</th><th>name</th><th>description</th><th>keyPoints</th></tr></thead>
<tbody><tr><td>01</td><td>proximity</td><td>近接(Proximity)</td><td>関連する要素を近くに配置し、関係性を視覚的に示す原則です。</td><td>[&quot;関連要素のグループ化&quot;,&quot;余白による分離&quot;,&quot;認知負荷の軽減&quot;,&quot;情報階層の明確化&quot;]</td></tr>
<tr><td>02</td><td>alignment</td><td>整列(Alignment)</td><td>要素を意図的に配置し、視覚的な繋がりと秩序を生み出す原則です。</td><td>[&quot;視覚的繋がりの構築&quot;,&quot;左・右・中央・両端揃え&quot;,&quot;統一感と秩序&quot;,&quot;プロフェッショナルな印象&quot;]</td></tr>
<tr><td>03</td><td>repetition</td><td>反復(Repetition)</td><td>視覚要素を繰り返し使用し、一貫性と統一感を生み出す原則です。</td><td>[&quot;ブランド認知の確立&quot;,&quot;視覚的リズムの創出&quot;,&quot;ユーザビリティの向上&quot;,&quot;一貫性の確保&quot;]</td></tr>
<tr><td>04</td><td>contrast</td><td>対比(Contrast)</td><td>要素間の違いを強調し、視覚的階層と注目性を生み出す原則です。</td><td>[&quot;視覚的階層の構築&quot;,&quot;注目性の向上&quot;,&quot;色・サイズ・フォントの違い&quot;,&quot;アクセシビリティの確保&quot;]</td></tr></tbody>
</table>