WEB担当者が最低限知っておきたい5つのデザイン基礎テクニック

ホームページ制作ならWebStage TOPコラム一覧WEB担当者が最低限知っておきたい5つのデザイン基礎テクニック
WEB担当者が最低限知っておきたい5つのデザイン基礎テクニック

ホームページのデザインを考えるために、知っておきたいコツをお伝えします。

同じ内容をまとめる「近接」

関係性のあるものを「まとめ」て、関係性のないものを「離せ」ば、各グループに意味があることを見る人に伝えられます。
例えば、名刺を思い出してください。名刺は「会社名」や「ロゴ」などの会社に関係するグループ、「所属」や「肩書き」「名前」などの本人に関係するグループ、「住所」「電話」「FAX」「メールアドレス」など、連絡先に関係するグループにまとまり、各グループは離れて配置されていると思います。もちろん、中にはこのルールが守られていない名刺もありますが、単純にデザインの基本を知らない素人がソフトウエアを使い、自分でデザインしただけかもしれません。

位置をそろえる「整列」

近接を使ってまとめたところで、位置がバラバラではデザインとはいえません。そこで、各テキストを「左揃え」「中央揃え」「右揃え」「左右均等割り」などにまとめる「整列」というテクニックを使います。
これは、見た目がきれいになる効果もありますが、より各グループが別々であることを意識させてくれます。
先ほどの名刺の例でいえば、「会社に関係するグループ」を「左揃え」に、「本人に関係するグループ」を「中央揃え」に、連絡先に関係するグループを「右揃え」にするといったものです。そして配置も、「左上」「中央」「右下」のように整列されているものが多いでしょう。

同じルールを繰り返す「反復」

次は「反復」というテクニックです。
これは、テキストや画像などを等間隔で並べることにより、リズムが生まれ視覚的に整った印象になるというものです。近接や整列を、より意識させることができます。

優劣を決める「対比」

これまでの3つの手法を使えば、どういう分け方をしているのかはわかります。ですが、何が重要なのかは、わかりにくいものになってしまう可能性があります。そこで、「何が重要なのか」を見る人に理解してもらうために、「対比」を使います。これは、サイズ変えることで、項目のプライオリティを認識させることができるテクニックです。
名刺の例でいえば、主役である名前を1番大きくするのが一般的です。電話、FAX、メールアドレスといった連絡先のうちメールアドレスを1番大きくデザインすれば、見る人によっては「連絡はメールでしてほしいのかも?」と感じてくれるでしょう。このような意味を持たせることが、デザインの基本であり意味なのです。

ユーザーを意識した「可読性」

これまで紹介したテクニックを見てもらえればわかるように、デザインの基本は「見た目のきれいさ」ではなく「ユーザーにきちん情報を伝える」ことです。
デザイナーから「空白スペースの多いデザイン」が上がってきても、上記の法則に照らし合わせて考えれば、意味があるデザインかどうか判断することができます。制作をお願いするデザイナーに一目置かれるためにも、最低限この5つのテクニックは理解しておきましょう。


デザインが求めるものとは?

これまで紹介したテクニックを見てもらえればわかるように、デザインの基本は「見た目のきれいさ」ではなく「ユーザーにきちん情報を伝える」ことです。
デザイナーから「空白スペースの多いデザイン」が上がってきても、上記の法則に照らし合わせて考えれば、意味があるデザインかどうか判断することができます。制作をお願いするデザイナーに一目置かれるためにも、最低限この5つのテクニックは理解しておきましょう。

この記事を書いたメンバー記事を書いた人のアイコン

記事を書いた人のアイコン

ウェブステージ集客メンバー。役立つホームページやウェブ活用を研究するウェブステージで、集客に関する情報を配信しています。ホームページを活用した集客戦略が得意分野です。



低コストで成果を最大化する
動画作成サービス
動く話す
ホームページとは!?