初心者でも大丈夫!デザインの4つの原則でプロっぽくなる(2)

69d5920a253f9cf14e79027379e214ec_m

こんにちは。 よしえです。

昨日は、デザインの4つの基本原則のうち、
(1)近接、(2)整列をお話しました。

まだ読んでいない方は、
ぜひご覧くださいね。
↓ ↓ ↓
初心者でも大丈夫!デザインの4つの原則でプロっぽくなる

 

さて、4つの基本原則をおさらいします。

(1)近接(グループ化)
関連する要素同士を近くに配置してグループ化すること。

(2)整列
各要素をきちんと並べて配置すること。

(3)コントラスト
1つの要素と、それとは違う1つの要素の違いを、はっきり区別させること。

(4)反復
色や形、アイコン等、視覚的に特徴がある要素を、ページ全体を通して繰り返すこと。

今回は残る2つ、
(3)反復、(4)コントラストをお話していきます。

 

初心者っぽくないデザインになる、4つの基本原則の続き

(3)コントラスト

コントラストにはいろんな種類があります。
色の濃淡、フォントの大小、
線の太さ、余白の大きさ・・・。

コントラストのコツは、
二つの要素をはっきりと区別すること、
メリハリをつけること、です。

少し大げさかな・・・と思わず、
思い切り大胆に区別をつけたほうがいいですよ!

例えば、下の画像を見てみてください。

sample1

最初の行が見出しのように見えますが、
ちょっと分かりにくくありませんか?

では、このように変えたらどうでしょうか?

sample2

最初の画像よりも
見やすくなっていますよね!

こんな感じはどうでしょうか?

sample3

これも見やすいですよね。

こんなふうにして、
コントラストを思いきってつけると、
ぐっと読みやすくなります。

 

でも、これは
自然にやっていることではありませんか?

ブログの見出しや中見出しを
本文の文字より大きくしたり、太字にしたり、
ということはやっていますよね?

あなたのブログ、どうでしょうか?

見出しは見出しと、
はっきりわかるようになっていますか?

目立つコントラストは、
読者の目を引き付けます。

いろいろなパターンが考えられるので、
ご自身で試したり、他のブログを見たりして
いろんなパターンを探してみてくださいね。

意識してフォントの大きさを変えたり、
色を変えたり、余白を広くとったりすることで、
がらっと変わりますよ!

 

「コントラスト」のまとめ

・2つの要素が同じものでないなら、はっきりと違いを出す。
 2つの要素を同一ページに配置するときは、似せないこと。

 

(4)反復

デザインの中の何かしらの特徴を、
ページ全体、作品全体を通して繰り返すことです。

色や形、レイアウト等、
視覚的に認識できるものなら何でも良いです。
そうすることで、ページ全体に統一感が生まれます。

例えば・・・
・強調したいテキストには特定の色を使う
・箇条書きにしたとき、「■」を先頭に使う
・下線は、破線に統一する
といった具合です。

ブログでは、こうした一貫した反復があれば、
ページの一部を見ただけで、
「あ!これは○○のブログだ!」
と分かってもらえることがあります。

ランディングページの場合では、
一貫したルールがないと、
その中に何か特別な要素を追加したときに、
特別感が全く出ません。

むしろ、混乱をまねいてしまうわけです。

 

「反復」のポイント

・デザインの中から特徴的なものをポイントとして使う
・反復を利用して、統一感を作る

 

4つの基本原則は、複数使うことが大切

デザインという意味を調べてみると、
意外なことが分かります。

デザインは日本語では「設計」にもあたり、「形態」や「意匠」と訳されてきたが、それだけに限らず、人間の行為(その多くは目的を持つ)をより良いかたちで適えるための「計画」も意味する。人間が作り出すものは特定の目的を持ち、それに適うようデザイナー(設計者)の手によって計画されるのである。

weblio

そうなんです。
デザインは見た目ではないのです。

ランディングページは
商品の購入や、登録等の申込をしてもらうためのものです。

実際に申込ボタンをクリックしてもらうまでに、
いろいろなプロセスがあります。

どうしたら読んでもらえるか?
どうしたらクリックしてもらえるか?

それらをより良い形でかなえるために、
デザインをするのです。

「近接」だけではダメですし、
「コントラスト」だけで良いデザインができるわけではありません。

読者が読みやすくなるために、
どうしたらいいのか?

その問題を解決するために、
4つの基本原則を使ってデザインをするのです。

 

 

今日の内容が参考になりましたら、
ぜひ、クリックをお願いいたします!

↓ ↓ ↓

 

 


関連記事

Comment





Comment