WEBデザインの基礎を覚えたら5割増しにイケて見える!

WEBデザイン知識
スポンサーリンク
スポンサーリンク

ウェブデザインの基礎を学ぶ

デザインの基礎TOP画像

デザインと聞くと、アート、クリエイティブ的に感じたりするかもしれませんが、決してそうではなく、1つ1つに意味があり、それらを組み合わせることでウェブデザインが出来上がるのです。

初心者がデザインと言う言葉を聞くと、「私には出来ない〜」なんて思ってしまいますが、基礎を覚えるだけでも見違えるデザインになるので、まずは基礎を覚えてみましょう。

デザインの基礎とはどんなものなのかと言いますと

  • 近接
  • 整列
  • 反復
  • コントラスト

この4つは、webデザインをしている人に取っては当たり前のことなんですが、この基礎が基礎ではないくらい重要な事なのです。

デザインの基礎、近接

まずは近接から説明していきましょう。

近接と言うのは、「似ている要素同士を並べてあげる。」と言うことで、関連性のあるものは近づけて配置し、関連性のないものは含めない。と言うことになります。

例えば、コンビニの商品置き場を想像してみてください。

売り場をみるとパンはパンコーナーにあり、お惣菜はお惣菜コーナーにあります。本も本棚に並べられていますよね。

もしこれが、パン、お惣菜、本、混ざって売り場に置いてあったらどうでしょう?
パッと見て何があるのか分かりづらいですし、探すのに時間がかかってしまいます。

かなり使い勝手悪いコンビニになってしまいますね。

ヒロ
ヒロ

似ているものは近くに置くことで見やすくなるっ

つまり人間は、位置的に近いものを「関係性がある」と判断する為、近接を使うことにより見やすく分かりやすいデザイン、レイアウトになります。

反対に関連性のない要素は、余白を取り「関連性がないもの」と分けてあげることで見やすいレイアウトになります。

デザインの基礎、整列

整列は「名刺」に例えて想像してみると分かりやすいでしょう。

名刺には、会社の名前、会社の情報、自分の名前、役職がありますが、

これがバラバラに配置されていたらどうでしょう?

NGなレイアウト

一見揃っているように見えますが、文字が真ん中に寄っていたり、左に寄っています。冴えないデザインになってしまいました。

ちょっとこれでは冴えないし見づらいので、改善したいと思います。

文字を左に揃えてみました。どうでしょうか?

先ほどとは違ってかなり見えやすくなりました。

ちなみに住所、電話番号、メールアドレスは似たような情報なので、「近接」を使いグループを作ってあげます。似ている要素以外は、余白を取ってあげることで見えやすくなりますね。

webデザインも名刺と一緒で、整列してあげることにより一気に見やすく、デザインも整って見えるようになります。

これだけで素人感がかなりなくなるでしょう。

ヒロ
ヒロ

基礎が大事やね!

 

デザインの基礎、反復

「近接」「整列」の次は反復です。

反復は似たような要素を同じように表示すると言ったことです。

僕のブログで分かりやすく説明すると、こんな感じです。

デザインの基礎反復の参考画像

「関連記事」の項目は、長方形で統一、文字サイズ、画像の大きさも同じ。

長方形で表示されていますが、これが一部だけ丸だったり三角だったりするとバラバラなデザインになって統一感が出なくなることが分かるかと思います。

上の画像は反復だけでなく、「近接」「整列」も使われており、とても見やすいデザインになっていることが分かりますね。

素晴らしい!

デザインの基礎、コントラスト

デザインの基礎、最後になりましたが「コントラスト(強弱)」も大事な要素です。

先ほどの画像をまた使って説明しますね。

デザインの基礎反復の参考画像

この画像で言うコントラストとは、「関連記事」「見出し」の部分になります。

文字が大きく太くなっていることが分かりますね。

もし「関連記事」「見出し」の文字が小さく細かったら、メリハリのないデザインになることが分かるかと思います。

こんな感じです。

デザインの基礎コントラストNGレイアウト

ウェブサイト全ての項目が同じ文字サイズだと、見出しも分かりませんし、全体的にパッとしない印象です。

ヒロ
ヒロ

何を伝えたいのか分かりづらいし、読みづらいよね〜。

見出しをつけて強調させることで、文字が太く、大きくなりそれ以降の文字は説明が書かれているんだと僕たちは認識することが出来ます。

近接、整列、反復、コントラストの4つの基礎はウェブサイトのデザインを綺麗に見せることができるので、とりあえずこの基礎だけ頭に叩き込んでください!これを覚えるだけでかなり素人感が抜けたデザインに変身しますよ!

さらに素人感をなくしたい方は、先人たちが作ったサイトを参考にして自分の引き出しに加えてみましょう。参考サイト、お手本を参考にしながら、良いデザインを学んでみます。

ただ参考サイトを見るだけでなく、「なぜこのサイトは美しいのか?」「なぜこのレイアウトなのか?」と「なぜ〇〇なのか」を考えながら参考サイトを見ることで、自分に足りないものが分かるようになるでしょう。

以下は僕がよく拝見している、ウェブサイトを集めた参考サイトになります。デザイン、レイアウトを確認して引き出しを増やしましょう。

 SANKOU!

MUUUUU.ORG

コメント

タイトルとURLをコピーしました