独学で未経験からWebデザイナーになるためにやった全てを公開

Webデザインの基礎を上げたい人が覚えるべきデザインの三原則

Webデザインの基礎を上げたい人が覚えるべきデザインの三原則

 

 

デザインは難しい

 

 

僕は独学で勉強しWebデザイナーとして働ける様になりましたが、当時勉強していた事はHTML・CSS・Javaの基礎やAdobeソフトの使い方がメインでした。

デザインに関しては全く勉強しておらず、デザインの意味も分かっていないほぼ素人の状態でWeb制作会社で働くことになりました。

カンプ

そもそも独学でデザインの勉強をするのって難しいと思いません?

でもWebデザイナーとして働く以上はデザイン力は絶対に高めていかなければいけないですよね。

このページでは、デザインが難しいと感じる人に絶対見て欲しいデザインの三原則をご紹介します。

 

カンプ

これら三つの法則を意識しておくだけでもデザインに対する考え方がグッと変わります 

僕のデザイン本のバイブルです

 

Webデザイナー初心者が覚えるべきデザインの三原則

最初の頃、デザインの基礎知識が全く無かった僕は会社のWebデザイナーの方にデザインの三原則をきっちり叩きこまれました。

  • 揃える
  • スペースを取る
  • 色を使いすぎない

カンプ

デザイン力を上げたいならこの3つを意識するだけ

これはあくまで僕の働いていた会社で教わったデザインの三原則

とにかくデザインをする時はこの三点を必ず意識するように教えられました。簡単にですがこの三原則を説明していきます。

 

1 揃える

物は揃えることで美しく見える

下図を見てもらっても分かるように、物をバラバラに置くより揃える事によって美しく見える様になります。

揃える事によって揃った左側に実際には存在しませんが、強い透明の線ができます。この線が強さは、デザインに強さを与えてくれます。

 

カンプ

左より右の方が明らかに綺麗なデザインに見えますよね? 

 

 

次に

ヤフーのサイトを見てみましょう

 

 

普段は何気なく見ているとyahooのサイトですが、揃える事に対して意識して見るとしっかりとボックス、文字、スペースを揃えているのがわかりますね。

これだけの文章が鏤められているのに綺麗に見えるのは物と物をしっかりと揃えているからです。

これだけのテキストがあるサイトですが、テキストやコンテンツを揃えるだけでとても見やすくなるわけです。

普段何気なく見ているyahooのサイト。

その背景にはしっかり考えられたデザイン設計があるんです。

デザインをする場合、揃える意識を持つ事で統一感のある綺麗な物が生まれます。

 

2 スペース(余白)を取る

余白を取ることで美しく見える

初心者のデザインは空きができないように隅々まで埋めてしまうという傾向があります。

昔の自分はまさにこれでした。

なぜスペースを埋めてしまうのか?

デザイン初心者は空き(スペース)ができるのを恐れているからです。

隙間を埋め尽くそうと色んな物を置いてしまうと情報が読みにくくなり、結果良くないデザインになってしまいます。

 

 

スペースは必要です

 

 

スペースがある事で空間のゆとりに強弱が生まれデザインに動きがつきます。

そしてスペースも揃える事によってより綺麗なデザインになります。

 

3 色を使いすぎない

色を抑えることで美しく見える

色って難しいですよね。

知れば知るほど奥が深い、けれど色にはキチンとしたルールが存在します。

初心者がやりがちな事は色を使いすぎてしまう事です。

わかります!色をたくさん使いたくなるその気持ち!

でも、ちょっと我慢しましょう。

勿論、多彩な色を使いカラフルで素敵なデザインをする人もいますがその人達はデザインの基礎がしっかりできているからこそたくさんの色を臆さずに使用できるのです。

 

僕も最初の頃は色を使いすぎてよく上司に怒られました

特に僕の場合は理由は無いけど色をたくさん入れてしまう傾向が強かったようです。

とりあえず始めのうちは色でデザインする事はあまり深く考えずに色を抑える。

もしくは配色ツールを使用してデザインカラーを整えましょう。

3色以上は使わないと自分で縛りを付ければ色を使いすぎる傾向が無くなっていくはずです。

初心者は3色以内でデザインする事を意識しましょう

 

現在は閉鎖されたようですが今や伝説となっている愛生会病院のホームページサイト。

Webサイト上でもトップクラスのカオスっぷり

これは誰が見ても色を使いすぎて何が何だか分からない状態になってますね。

 

デザインとは?

そもそもデザインって何でしょうか

デザインとは《名・ス他》設計。図案。意匠。また、製品の機能や美的造形を考慮した意匠計画

参照:google

デザインの厳密な定義は、個人の捉え方次第で良いかもしれません。

ただ、言葉にとらわれるよりも、何がユーザーのためになるのかを考え抜くことがデザインとして大切なのだと思います。

おすすめのデザイン本

中でもオススメのデザイン本はノンデザイナーズ・デザインブック

さまざまなデザイナーの方に絶賛されておりフルカラー新装増補版で再販されるほど。まさにデザイナーのバイブルでは無いでしょうか。

 

まとめ

最後におさらいです。

  • 揃える
  • スペースを取る
  • 色を使いすぎない

僕が会社で教えてもらったデザインの三原則を紹介させてもらいました。

デザインの基礎はこれだけではありませんが、Webデザイン初心者の人はまずはこの3つを基礎として覚えておいてください。

カンプ

デザインの基礎ができていないと一生、一般的なプロのウェブデザイナーにはなれないと言われた事を覚えています

プロのWebデザイナーの人達は基礎ができてるから色んな表現や素敵なデザインを作れる事ができます。

しかし、その人達も最初は基礎を覚えて今に至るわけです。

 

ルールを破るためには、まずルールを知らなくてはいけない

ルールを破るためには、
まずルールを知らなくてはならない。

 

基礎を無視したデザインもあります。

しかしそれはデザインのルールを理解した上で、あえて基礎を無視しているデザインです。

デザインの基礎というルールをしっかり把握しているから、ルールを破っても素敵なデザインにできるのです

この記事を読んだあと、デザインの三原則を意識してアイキャッチでもバナーでも良いので簡単な物を作ってみて下さい。

きっと以前より良いデザインの物ができあがるはずです。

 

以上、Webデザインの基礎を上げたい人が覚えるべきデザインの三原則…でした。