WEBサイト作るなら知っておきたい4つのデザイン原則

こんにちは！Takeshi(lhZJlNpUPZ1iCfR)です！

今回はデザインのお話をします。

今まではコーディングしか出来なかったのですが、最近デザインの勉強を始めたのでその備忘録的な記事になります。

もしこんな方がいれば、この記事を見て頂くとWEBサイトを見るときに今までとは違う観点で見れるようになると思います。

デザイン4つの原則

早速デザインの原則を例をつけて紹介します。

基本的に最低限押さえておきたいデザインの原則は4つだけなので大丈夫です。

その４つとは、

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

以上の4つになります。

１つずつ例をつけて紹介していきます。

近接

近接とは同じ項目のグループを近づけて視覚的に組織化することです。

言葉にすると分かりづらいので例をつけて紹介していきます。

例えばこんなWEBページがあったとします。

すいません。

今適当に作ったやつなので分かりづらいかもですが。。

上の画像がheaderでその下にコンテンツがあります。

よくある感じのやつですね。

これを見るとほとんどの方がこう思うはずです。

「なんか左の部分が見づらい」

これに近接の原則を使ってみましょう。

するとこんな感じになります。

パッと見ただけで3つの項目があるという情報が視覚的に分かるようになりましたね。

これが近接の法則です。

このようにまとまった情報を近づけ、他の要素と離すことで視覚的に分かりやすくしましょう。

整列

画面上のテキストや画像の幅などを揃えて内容を分かりやすく伝えましょう。

以下の画像を見てください。

ちょっと極端ですが、ガタガタですよね。

これはちゃんと整列ができていないからです。

これを整列の法則を使い修正するとこうなります。

左揃えに整列することで強い線を生み出すことができました。

このように見えない線にそって揃えることを意識すると、とても見やすくなります。

ただこの例だとちょっと余白の部分が窮屈になってしまいますね。

これをよりスッキリさせるには赤の点線で囲まれた行き場のない空白を解放してあげましょう。

お互いの縦の線が寄り添い互いを強化しています。

デコボコした余白もスッキリしたことで、より見やすくなったのではないでしょうか。

反復

同じ要素を繰り返してそれらが同じものだと視覚的に認識できるようにしましょう。

今の所のレイアウトはこんな感じです。

これをより良いものにするために反復の要素を足してみましょう。

サブタイトルに同じ大きさのフォントサイズを適用させました。

たったこれだけでパッと見ただけで同じ要素のコンテンツが繰り返されているんだと判断することができます。

コントラスト

コントラストをつけてより目を引く内容にしてみましょう。

このようにコントラストをつけることでより面白みが増し、内容を見てもらえる可能性が高くなります。

デザインの勉強の始め方

僕はごく最近デザインの勉強を始めたのですが、勉強の方法としてはこんな感じです。

• 参考になりそうなWEBサイトを見まくる
• WEBデザインに関する記事を見まくる
• 書籍で勉強

まあ、正直かなり普通の方法ですが上記の3つです。

最初の2つは今すぐ始められますね。

書籍で勉強に関してはどの参考書を購入しようか悩む方もいらっしゃると思いますが、参考までに僕はこの本を買いました。

内容としては、僕のような初心者に向けてこの基本的な4つの原則を様々な例を出して紹介してくれています。

色々な方がオススメしている本なので買ってみましたが買って正解だったと思ってます。

最後に

以上がWEBサイトを作るなら知っておきたい4つのデザイン原則になります。

僕のように最近WEB制作の勉強を始めたけどコーディングしかできない…みたいな方って沢山いらっしゃると思うので、自分の付加価値をつけるためにデザインの勉強を始めてみるのもいいかもしれませんね。

最後まで読んで頂きありがとうございました！