スポンサーリンク

 
 
こんにちは、かーりーです。
私は今デザイナーとして仕事をしているんですが、
もともとデザインの知識も経験も全くない初心者でした。
 
ゼロからスタートだったこともあり、上司に色々怒られながら基礎知識を学んでいった感じです。
修正の数なら負けません(笑)
 
今回はそんな経験を活かし、「デザインを始めたい!」「初心者だからまだよく分からん!」という人にデザインの基礎知識を詳しくご紹介していきます。
 
「デザインの4つの原則」なんてルールもありますが、今回はそれを踏まえてもっと実践的な部分まで説明していきたいです。

おさえておきたいデザインの基礎

1.情報の優先順位をつける

いくつかの要素を組み合わせてレイアウトする際に、「情報ごとの優先順位」がついている方が相手に伝わりやすくなります。
 
たとえばバナーを作りたいとして、下記の文言を入れることになりました。
・無料で100万円がもらえるチャンス
・宝くじキャンペーン実施中!
・4月1日まで

 
この情報をそのまんま画面に乗っけてみます。
 

多くのお客さんはこれを一瞬だけ見て「読むのダル」と思って目をそらします。
広告物は一瞬で伝えたいことが分からなければ終わりなのです…。せちがれぇ
 
そんな悲しい結末を避けるため、まずは文言に優先度をつけましょう。 依頼主がいるなら確認してみるのがいいですね。
①無料で100万円がもらえるチャンス
②宝くじキャンペーン実施中!
③4月1日まで

 
客観的に見て魅力を感じる順に優先度をつけました。
特に「無料」とか「〇〇円」とかパワーのある文言を優先度高めにしてみましょう。
 
優先度が決まったところで早速レイアウトを組んでいくんですが、優先度を高く見せるために以下のような方法がおすすめです。
 
・文字を大きくする
・文字を太くする
・派手な文字色にする
・装飾を入れる

 
一番優先度が高い文字にこのような変化をつけるといいでしょう!
ガツンと目に入ればこちらの勝ちです。
 
 

優先度に合わせてざっくりと変化をつけてみました。
文言にメリハリが出て、伝わりやすくなったんじゃないでしょうか。
 
ただ要素を並べるだけじゃなく、優先度を意識するだけで見やすくなります。

2.同じグループのものは同じ規則で並べる

同じグループのものは同じ規則で並べると見やすくなります。
飲食店のメニュー表などがいい例になります。
 

基本的に写真、メニュー名、説明までの1ブロックが規則正しく並んでいますよね。
(おすすめメニューだけ大きかったりするのは割愛)
 
この規則が崩壊していると一気に伝わりづらいメニュー表になります。
↓どれがおすすめメニューなのか、どこまでが同じ系統のメニューなのか分かりません。
 

 
規則的に並べて、見た人が「なんとなく」でも認識出来るようにしましょう。

3.関連性の高い情報は近づける

意外と当たり前だけど見逃しがちなのが、情報同士の距離感です。
関連性の高い情報は近づけ、低い情報は間を置くとグループが見分けやすくなります。 
 

1つ上の項目で使用したメニュー表を見てみましょう。
 

ページの左側:写真と料理の概要の距離はなるべく狭くしています。写真と料理の概要を1ブロックとして、それぞれ縦と横に均等な幅を空けています。
ページの右側:「DrinkとDesertのブロックの間隔」を「Drinkとジュース名の間隔」よりも空けています。

このような距離を意識して作りました。

逆に離れていたらどうでしょう。
変な間の空き方で全体が不格好に見えてしまいます。

4.端は基本揃える

文字や図形を左右どちらかに揃えた場合は、端はそろえるようにしましょう。
ガイドを引いて文字位置を調整するのがおすすめです。
ガイドがない状態でも「見えない線」を感じられるくらい揃っていれば、見ていて気持ちのいいレイアウトになります。
 
ここで1つポイントですが、
先端が丸いものを端にそろえる場合、ほんの少しガイドラインからはみ出させるといいです。 
目の錯覚によって先端が丸いものの方が引っ込んで見えてしまうのです。
 
↓微々たる差ですが、数ピクセルほどはみ出ているくらいがそろって見えます。
 

5.視認性の高い色使いにする

背景や文字色の組み合わせによって、見やすさは大きく変わります。
一般的に背景と文字の色に「明度の差」があるほど見やすくなるといわれています。  
 
例えば黄色の文字を使う場合、背景が白か黒かでこんな違いが出ます。
 

黒背景の方がはっきり見えますよね。
特に広告物を作成する場合は、すぐに文字を認識できる色合いを選ぶといいでしょう。

6.文字の高さを揃える

文字を使ったデザインをする時は、文字の揃い方が「見た目の気持ちよさ」を左右します。
ただ文字を打っただけでは上下の高さが揃っていないことがあります。
 
文字の位置が確定したら、ガイドラインを引いてみましょう。
文字は和文と欧文で構造が違っています。
 

和文は「字面」を、欧文は「キャップラインとベースライン」を高さの基準にするといいでしょう。

7.文字は字間をつめると読みやすい

上でご紹介した文字の高さと同様に、文字の間隔も見た目の気持ちよさに関係します。
さらに文字間隔をほどよく詰めると「可読性(読みやすさ)」も上がるのです。
 
文字の位置が確定したら、全体の文字間隔を詰めてみましょう。
そのあとさらに、1文字単位で間隔を調節していきます。
 
カタカナのトとか打ってみてください。
明らかに前の文字との間隔が空きすぎています。
 
ここでお伝えしておきたいのが「字間が空いている=悪いこと」ではないということ!  
あえて雰囲気を出すためだったり、他の文言と幅感を合わせるために字間を空けることがあります。

8.世界観を統一する

デザイン物を制作する際に、色や形状を決める礎になるのが世界観です。
主に広告業界などで「トーン&マナー」と呼ばれます。 
【トーン&マナー】…広告物においてデザインや雰囲気の一貫性を持たせること
 
例えば、商品を紹介する広告を作るとき、
・この商品はどんなコンセプトがあるのか
・どんな人を対象にしているのか
・どんな色を使っているのか
・どんな雰囲気なのか

上記のような要素を知っておきましょう。
 
トーン&マナーをしっかり落とし込めば、商品の世界観やターゲットが定まった広告物が作れます。
 
例えば、特別な事も無いのにマク●ナルドの広告が真っ青だったら「らしくないよね」ということです。
商品でも、WEBサイトでも、ゲームでも世界観を守っていきましょう!

9.ツールの「中央揃え」に頼りすぎない

Photoshopやillustratorなどのソフトに「中央揃え」という便利ツールがありますよね。
ワンクリックで縦横の中央揃えが出来ちゃうやつ。
あれで終わりにしたらアカンよと。私がよく説教されていました(
 
例えばなんですが、長方形の中に三角形を配置してみます。
 

 
【左:中央揃え 右:私が調整したもの】
なんとなく、左側の三角形がまん中から左に寄って見えませんか?
人は様々な目の錯覚を起こすので、ツール(機械)の調整だけでは”ズレを感じてしまう”ことがあります。
 
そのため、一度中央揃えをした後は「人の目」から見た調節も必要になります。 
見てくれるのも人ですからね!
 
もちろん中央揃えは便利ですが、最後は自分の目を信じて位置調節してみましょう。

↓以下サイトはデザインに関する錯覚について詳しく紹介してくださっているので、ぜひ覗いてみてください。
デザインは奥が深い!目の錯覚を効果的に使ったUI、ロゴ、イラスト、文字組みのデザインテクニック

スポンサーリンク

「人のための」デザインを意識しよう!

私はデザインを始めた時、カッコいい・おしゃれな画面作りをすることばかりを意識してしまい「人のために作る」というデザインの本質を忘れてしまいがちでした…!
「人からどう見えたら最適なのか」を優先的に考えながらデザインを作っていきましょう!
 
いうて私もデザイナー歴数年の若輩者なので、もっといい方法があるよ!
なんて意見がありましたらお気軽にお問い合わせください(*'▽')

スポンサーリンク
おすすめの記事