『Webデザインとコーディングのきほんのきほん』
マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！
Webデザインに興味のある方やこれから学ぶ人におすすめの1冊です。

要素を揃える・均等に配置する

※書籍のChapter2『デザインのベーシックセオリー』/Section01『要素を揃える・均等に配置する』からの抜粋です。

「デザインする」ことの一番最初の作業は、要素を「揃える」ことから始まります。
無秩序な集合に「揃える」ことで秩序を与え、整った状態を生み出すのです。
規則性のある状態は人の目を留める効果があり、人の手が作り上げた整った構図は「安心」「安定」を感じさせることができます。

規則性を与えて整った美しさを出す

整ったものが与える安定感が美を生み出す

ガタガタとした手描きのような不規則な線と定規で引いたような直線の2種類の線を見たとき、不規則な線からは不安定な印象を、直線からは安定して静かな印象を感じます。
同様にランダムに要素が配置された構図よりも、水平や垂直など一定の規則で位置を揃えた構図の方が、整えられて安定している印象を与えます。

この安定した印象が見る人の心を動かし、「美しい」と感じさせることができるのです（図01）（図02）。
要素を等しい間隔で配置するなどさらに規則性を強調して構成することで、より整って安定している印象を与えることができるようになり、見る人が感じる美しさも強調されます。
こうして不規則な状況に秩序を持たせ、規則性のある構図にまとめることが「デザイン」の第一歩の作業なのです。

規則性を採り入れたレイアウト

規則性を強調した構成にするには

すべての要素のサイズや位置を直線的に揃える以外でも、規則性を感じさせるさまざまな構図があります。
水平垂直な位置揃えではなく円弧に合わせて要素を配置するなどの構成も、規則性のあるレイアウトと言えるでしょう。
 

また、サイズを一定の割合で徐々に変化させたり、色を段階的に変化させるなどの整え方もあります（図03）（図04）。
こういった要素の規則性は、数が多いほど強調されます。3個の要素では分かりにくい規則が、6個や10個に増えることで読み取りやすくなるのです。
また位置を揃えるだけでなく要素同士を均等な間隔に配置したり、サイズだけでなく色も同時に一定の割合で段階的に変化させるなど、1つの構図の中に複数の秩序を取り入れると、規則性を強調して整った印象を強める結果になります。

対称（シンメトリー）に配置する

規則的な要素の配置をさらに高度に使用した構成に「対称（シンメトリー）」があります。
水平や垂直のライン、または一点を中心にした対称なレイアウトは、より高度な構成の規則性と言えるでしょう。
シンメトリーの構図も普遍的な安定感が生まれ、見る人に整った美しさを感じさせます。
レイアウトのベーシックセオリーの1つです（図05）。
 

色の組み合わせ

※書籍のChapter2『デザインのベーシックセオリー』/Section05『色の組み合わせ』からの抜粋です。

複数の色を使用して1つの画面を構成するとき、相性の良い色同士を使用しているとお互いに引き立て合い魅力的なイメージになります。
逆に相性があまり良くない色同士を使用してしまうと、全体のバランスが悪くチグハグな印象になってしまうこともあります。
相性の良い色を選ぶためのベーシックな方法を覚えておきましょう。

色相環を活用して色を選ぶ

デザインの印象を左右する「色」という要素は、使用している1色の印象だけでなく、どのように複数の色を組み合わせているかということでも大きくイメージが変わります。
相性の良い色同士で構成すれば全体が統一感のあるまとまったイメージになりますが、相性が良くない色同士を使用してしまうと、全体がうるさすぎたりバランスの悪い印象になってしまいます。
色同士の組み合わせの相性を判断したいときには、色相環を利用しても良いでしょう。
色相環上で一定の法則のもとに色をピックアップするとバランスの良い配色になります。

類似色で組み合わせる

色相環上で近くに配置されている色同士は「類似色」と呼ばれ、色相の変化の割合が少ないことから自然な色の組み合わせとして目に映ります。
統一感のある配色になり、暖色系・寒色系など特定の色系統のイメージが強調されます。
 

類似色は見る側にも違和感なく受け入れられやすい配色ですが、反面変化が少ないことから画面が退屈に見えてしまう欠点もあります（図01）。

補色で組み合わせる

色相環で対角線上にある色同士は、色相が正反対の色の組み合わせです。
色味がぶつかり合って相性が悪そうですが、互いを引き立て補い合う相性の良い組み合わせです。
色相の違いを補い合うことから、対角線上の色同士は「補色」と呼ばれます。
いずれかの色をメインに画面を構成し、その補色をアクセントカラーとして利用するなど、補色を効果的に利用すると全体を引き締め画面に緊張感を与える配色になります（図02）。
   

色相環の角度から組み合わせる

色相環上で等間隔にある3色や4色を選び出す方法もあります。
 

それぞれ色相の変化の割合が等しいため、バランスのとれた配色になります。色相環を3等分して選択する3色のことを「トライアド」、4等分して選択する4色のことは「テトラード」と呼びます（図03）。

彩度・明度を揃えて同じトーンで組み合わせる

彩度や明度を大きく変化させた色同士を組み合わせると、色相の差異があまり感じられなくなり統一感のあるイメージになります。同じ割合で彩度や明度を変えることで、「ペールトーン」「ダルトーン」など同じトーンの配色になるわけです。
 

トーンを揃えて配色することで、柔らかさや明るさ、重厚感や慎重さなどトーンが持つイメージを表現することができます（図04）。


マイナビブックス・Manateeで販売中の『Webデザインとコーディングのきほんのきほん』から、書籍の内容を一部公開！
次回はChapter3『Webサイトをデザインするとは』の一部内容を公開予定です。