こんにちは、ラフデザインスクールの「ラフスクール運営事務局」です。

「Figmaの使い方は覚えたけど、なんだかデザインがダサく見える…」 「配置やフォントを色々試しているのに、しっくりこない」

Webデザインを独学で学び始めた初心者の方から、こうした声をよくいただきます。実はこの悩み、センスの問題ではなく「デザインの基本原則」を知らないだけ、というケースがほとんどです。

今回は、Webデザイナーを目指す方なら必ず押さえておきたい「デザイン4原則」について、初心者の方にもわかりやすく解説します。この原則を理解するだけで、デザインの見え方は大きく変わります。

デザイン4原則とは？未経験者がまず知るべき基礎知識

デザイン4原則とは、「近接」「整列」「反復」「対比」という4つの考え方のことで、著名なデザイン書『ノンデザイナーズ・デザインブック』で紹介されたことでも知られています。

これはロゴや広告、印刷物のデザインだけでなく、Webデザインにおいても非常に重要な基礎知識です。センスや才能に頼らなくても、この4つの原則を意識するだけで、誰でも「整って見える」「伝わりやすい」デザインに近づけることができます。

未経験からWebデザイナーを目指す方にとって、この4原則は独学の初期段階で必ず身につけておきたい知識のひとつです。ポートフォリオ作成やコーディングの前段階として、まずはここから理解を深めていきましょう。

4原則①近接・②整列とは？情報を整理して見せる考え方

まずは「近接」と「整列」という、情報を整理して見せるための2つの原則をご紹介します。

近接（きんせつ） 関連する情報を近づけて配置し、関連性の低い情報とは距離を空けるという原則です。例えば、商品名と価格は近くに配置し、別の商品の情報とは余白を持たせることで、ユーザーは瞬時に「どの情報がセットなのか」を理解できます。

整列（せいれつ） 要素を意味もなく配置するのではなく、見えない線に沿ってきちんと揃えるという原則です。テキストの左端を揃える、画像とテキストの上端を揃えるといった工夫だけで、デザイン全体に一体感と信頼感が生まれます。

Figmaでデザインを作る際は、この2つを意識するだけで「なんとなく整っていない」という状態から抜け出しやすくなります。コーディングの段階でも、CSSのmarginやpaddingを調整する際の判断基準になるため、HTML・CSSを学ぶ初心者にとっても実践的な知識です。

4原則③反復・④対比とは？デザインに統一感とメリハリを出す考え方

続いて、「反復」と「対比」という、デザインに統一感とメリハリを与えるための原則です。

反復（はんぷく） サイト全体で同じ色・フォント・装飾のルールを繰り返し使うという原則です。見出しのデザインやボタンの形などを統一することで、ユーザーは「これはこのサイトのルールだ」と学習し、迷わず操作できるようになります。

対比（たいひ） 重要な要素とそうでない要素の間に、大きさ・色・太さなどの差をはっきりとつけるという原則です。例えば、見出しは大きく太く、本文は小さく細くすることで、ユーザーの目線を自然に誘導できます。

この2つの原則は、Web制作会社の現場でも「デザインガイドライン」や「コーディングルール」として明文化されていることが多く、複数人での制作や、後からの修正・運用のしやすさにも直結する考え方です。

デザイン4原則をポートフォリオ制作に活かすコツ

4原則を「知っている」だけでなく、実際の制作物に落とし込めるようになると、ポートフォリオの完成度は一段階アップします。

• ポートフォリオに載せる制作物ごとに「近接・整列・反復・対比をどう意識したか」をひと言添える
• Figmaで作ったデザインを見返し、揃っていない要素や余白のばらつきがないかチェックする
• コーディングの段階でも、CSSのクラス設計に反復のルールを反映させる
• 転職・副業いずれの場合も、面接や商談で「なぜこのデザインにしたのか」を4原則の言葉で説明できるようにしておく

特に未経験からの転職やフリーランスとしての案件獲得を目指す場合、感覚だけでなく「理論に基づいてデザインを説明できるか」は大きな評価ポイントになります。デザイン4原則は、そのための共通言語ともいえる存在です。

まとめ

今回は、Webデザインの基本である「デザイン4原則」について解説しました。

私たちラフスクール運営事務局は、これまで多くの未経験の受講生を見てきましたが、「センスがないから向いていないかも」と悩む方の多くが、実はデザイン4原則のような基礎知識を知らないだけ、というケースを何度も目にしてきました。裏を返せば、正しい知識さえ身につければ、誰でも一定水準のデザインができるようになる、ということでもあります。

独学でWebデザインを学んでいると、どうしても感覚やトレンドに頼りがちになってしまいますが、近接・整列・反復・対比という基本原則に立ち返ることで、迷ったときの判断基準を持つことができます。これはFigmaでのデザインだけでなく、HTML・CSSでのコーディングやポートフォリオ作りにも活きてくる、いわば「デザインの土台」です。

ラフデザインスクールでは、こうした基礎理論からFigmaでの実践、コーディング、そしてWebデザイナーとして転職・副業していくためのポートフォリオ作成まで、初心者の方に寄り添いながらサポートしています。「デザインの基本から丁寧に学びたい」という方は、ぜひ一度私たちのスクールをのぞいてみてください。