完全バックエンド担当のエンジニアなのにデザインも頼むねーとか契約外なのに言われたので（おこ）デザインについて勉強しています。
勉強のためにデザイン初心者が抑えておけばそれぽくなるというデザインのポイントを解説した漫画の『デザイナーじゃないのに！』を読みました。
普段参考書とかは漫画で読むことはなかったんですがとってもわかりやすいですね。
先に結論を言うと、ターゲットを決めてその相手にわかるものを伝えるのがデザインです。
デザインは綺麗であればいいわけではないのです。
確かに見た目が綺麗なのがいいけど！デザインするってことは目的があるってことだからそれに沿ったものじゃないといけないわけなんですね。
私の作った名刺のデザインを例にして、今回学んだ良い感じにするためのデザインの基本を書いていきます。
適当に作った名刺デザインですが、本当にデザイナーの肩書持ってるんですか？のレベルで面白い。
デザイン初心者が押さえておくべき基本の4ポイント
デザイン初心者が必ず押さえていて欲しいポイントは4つあります。
- 近接
- 整列
- 強弱
- 反復
同じものは近接させてまとめる
たくさんある情報はまとめた方が良いデザインになる！
似たような情報がバラバラに配置されているとなんか気持ち悪い印象があります。
逆になんでまとめて書いてくれないわけ…？と気持ち悪い印象を与えちゃうみたいですね。
確かにWEBサイトを見ていて情報がバラバラに配置されていたら見づらくて腹立ちますな。
このように同じものはまとめていた方がすっきりします。
あと、グループごとにまとめてそれらの余白を少しずつ空けると読みやすさが上がります。
私が作ったものは近接するとこうなります。
少しわかりやすくなったかも。
整列させて凸凹させない
図形やテキストを並ばせるときの基本的なルールです。
横並びの場合は上を合わせて並べて、縦並びの場合は左側を揃える。
これもバラバラだと気持ち悪いですね。
見ている人がなんか嫌だな…と思ったら見てもらうために考えたデザインとしては失敗しているのかもしれない。
例のぶどうワインの画像を整列させてみました。
整列させた方が綺麗めですよね。
デザインの話を見ていると部屋や机にも言えますが、整理されているのが一番ってことがわかります。
綺麗さ、わかりやすさを複数持っていることがデザインでは大事だとしつこいくらい書かれています。
名刺も整列させます。
きっちりしてきたけどまだなんかわかりにくいしデザインを任せたい気持ちにならないですね！！
メリハリをつけて強弱をつける
同じ大きさで並べずに大小のメリハリをつけましょう。
例では図形を使っていますがテキストでも同じことが言えます。
大事な部分は太字にしたり、フォントを変えたりすると読みやすくなります。
契約前の規約を読むのに苦痛が感じるのもずっと同じ大きさで太さの文字がずらっとあるからなんでしょうね。
単調な文字がずっと続くとポスターでもすぐ違うところに目移りしてしまうので確かに…となる。
流し読みをしていてもどこに目を止めて欲しいか、というのを狙ってメリハリをつけるのが良さそうです。
画像や図形もメリハリをつけて大きさを考えて配置すると見ていて楽しい感じになります。
でも、やりすぎには注意が必要ですね。。。
例の名刺も強調させてみましょう。
本当になんかそれっぽくなってきましたね。
同じ図形として反復する
バラバラの図形を並べるよりは同じデザインの図形を並べた方が良いです。
これも見ていて統一感がないからなんか見づらい気がしますね。
並べるだけでしっかりしているというかプロっぽくなるのでとりあえず綺麗に並べるのはオススメです。
実際にデザインを反復させてみました。
まだダサいですが最初に比べたらまだ良い感じではないでしょうか？
ダサ見え防止のために気をつけたいポイント
初心者が押さえたいポイントだけをしっかり押さえても、何を考えていないで作ったよりは良いものはできますがなんとなくダサかったりします…。
ダサくなくて今風のデザインにするならどうしたらいいかのポイントも本には書いてありました。
ここの回ではデザインというよりはテキスト原稿の時点でダサさが決まるというところが学べました。
タイトル部分は短くする
タイトルをダラダラと長く書いていると何が伝えたいかボヤけます。
デザインに関してはタイトルが顔になる部分だからタイトルは大きく書いた方が良いですよね。
タイトルは短くしてスペースを取れるようにして大きく書けるようにしたら目立つしわかりやすくなります。
行間を適度に空ける
上下が狭いと本当に読みづらいです！
この辺りの文章も行間を空けずに書いていますが他の文章よりは読みづらくないでしょうか？
キツイな〜って感じの印象も植え付けるし正直このあたりの文章は読みたくない。
別件でワードプレスの記事を書くときも行間を空けないで書いているんですが個人的に気持ち悪くてすぐ空けちゃいますね。
本書では文字サイズの0.7~1.0くらいの行間を空けるのがオススメと紹介されていました。
余白を大事にする
近接させてまとめるのところにも書いていましたが余白は結構大事です。
くっついていると読みづらいしダサくなります。
これも見ている人にキツそうだな…と不快になる気持ち悪さがあるんだろうな〜って感じ。
どこまで読んだら良いのか区切りがないので読みづらいからここも意識していきたいところです。
色は3色、彩度は低め
チカチカするとまるでパチンコの演出みたいになるので読みづらくなります。
たくさんの情報量があるところにさらに色の情報量も増やすと意味わからなくなりますね…。
また、おしゃれなカフェや今風のポスター、WEBデザインを作りたいときは色の彩度を落としてデザインするのが良いそうです。
チカチカしたものになるとダサく見える原因になりがちです。
彩度を少し落とすだけで今風なデザインになるのでパキッとしたデザイン以外では彩度を落としたデザインにするのが良いでしょう。
今風のデザインはどんな感じで描かれているのかは日々周りにあるデザインを見てみるとわかりやすいと思います。
画像を使いイメージしやすくする
長いテキストだとデザインを破壊するしイメージがしづらくなります。
『みずみずしく、フルーツが綺麗な○○シェフが丹精を込めて作ったフルーツタルト』よりも
『フルーツタルト（実物写真）』の方が伝わるデザインですね。
長いと読んでもらえないのでテキストは短くするのが吉です。
フリー画像、フリーイラストを使う
イメージが伝わった方が良いと言っても画像をわざわざ撮りに行くんか！？
そう思った人もいると思いますが安心してください。
一般の人がフリー画像として登録している画像サイトがあるのでそういったものをお借りしたら良いのです。
規約に商用利用が可能と書かれていればOK。
企画の段階でターゲットは誰にするかをめる
ターゲットがどんな人物か、年齢はいくつか、性別は何かを決めてからデザインを決めるとデザインを考えやすくなります。
デザインは伝えることが目的なので本当に伝えたい相手に伝わらなかったらそのデザインはやる意味がなかったと言われちゃいます。
対象のターゲットを決めることでその相手が立ち止まってくれるデザインのためには色はどうするか、文字サイズはどうするかなど決めやすくなる。
なんとなくで決めましたーっていうと信頼されなさそうです…。
根拠をもってデザインした方が自分のデザインに自信を持つこともできますし、作成するのに時短になるのでここもしっかり決めるのが良いでしょう。
