デザインの仕上がりがまとまらない、初心者デザイナーさん向け。
「がんばってデザインしてみたけど、上手くまとまらない。」
「理由は分からないけど、なんかしっくりこない。」
「デザインを簡単に、きれいに仕上げる方法が知りたい。」
こんな疑問を解決していきます。
※この記事は、3分くらいで読み終わります。
読み終える頃には、「まとまりのあるデザインができるようになる」はず(`・ω・´)ゞ
本記事の内容
1:【原因】デザインが「まとまらない」と感じる原因を紹介。
2:【解決方法】まとまらないデザインを、5秒で解決する方法を紹介。
3:まとめ
こんにちは!takaです。
グラフィックデザイナー・クリエイティブディレクター歴12年。
毎月30万〜50万の収入を、コツコツ稼ぎつつ生きています。
また、今のLINE@のお友だち登録数は、402人で、
毎月のブログ訪問者は1万人くらいです。
今回のお話は、デザインが「まとまらない」と感じる原因と、5秒でできる解決方法について。
デザインを始めたての頃って、デザインが上手くまとまらず、苦労することが多いと思います。
しかも、その原因が分からないので、イライラすることも多いはず。
ちなみに僕も昔は、「一流のデザイナーみたいに、デザインがまとまらない...」と悩んでおり、わりと苦労してました。
今回は先にネタバレすると、「上手くまとまらない原因」は、
下記の3つです。
1:正しい文字組みができてない。
2:単純に、装飾が足りてない。
3:細かい部分の「細工」ができてない。
こんなかんじ。
この3つが足りてない場合が多いです。
特に3つ目の「細工ができていない」は、「実際に、どんなふうにやればいいか分からない」というケースが多いです。
なので、今回の記事では「細工を5秒で出来る方法」をレクチャーしていきます。
今回も、3分少々おつきあいください(`・ω・´)ゞ
1:【原因】デザインが「まとまらない」と感じる原因を紹介。
繰り返しますが、まとまらない原因は、下記の3つです。
1:正しい文字組みができてない。
2:単純に、装飾が足りてない。
3:細かい部分に「細工」ができてない。
こんなかんじ。
詳しく解説します。
デザインがまとまらない原因1:正しい文字組みができていない。
正しい文字組みができてないと、デザインはまとまりません。
理由はシンプル。
つまり、文字が見にくいと、情報が頭に入ってこないので、まとまってる感じがなくなります。
イメージで言うと、営業マンがもってくる「営業資料」のかんじです。
まとまりのあるデザインを作る第一歩は、「正しい文字組み」からはじまります。
デザインがまとまらない原因2:単純に、装飾が足りてない。
装飾が足りてないと、まとまり感がなくなります。
なくなる理由も、シンプル。
つまり、装飾が少ないと、文字が主役のデザインになるので、「文字組みの質」が、もろに出ます。
結果、1つ目の原因が発動して、「まとまりのないデザイン」になりやすくなります。
文字組みに自信がない方は、できるだけ装飾を多くしたほうが吉です。
デザインがまとまらない原因3:細かい部分まで「細工」ができてない。
細かい部分まで「細工」ができてないと、まとまり感がなくなります。
理由もシンプル。
たぶん聞いたことがあると思いますが、
デザインは、細部に宿ります。
つまり、細かい細工が少ないとデザインのクオリティが下がり、「まとまりのないデザイン」になりやすいです。
以上が、デザインが「まとまらない」と感じる原因です。
次の項では、「まとまらないデザインを、5秒で解決する方法」を紹介していきます。
2:【解決方法】まとまらないデザインを、5秒で解決する方法を紹介。
今回の記事では、原因3つ目の「細かい部分まで細工ができてない」ことに注目して、解決方法をレクチャーしていきます。
詳しく解説します。
まとまらない解決方法1:【初級編】アンダーバーを使ってデザインする。
例えば、下記のデザインがあるとします。
チラシやwebの見出しなどでよく見る文字組みです。
これでもまとまり感があって見やすいですが、
人によっては「寂しくてまとまってない」と思う人がいます。
この場合は、アンダーバーを使えば、意匠性が少しアップします。
こんなかんじ。
ちょっとした細工ですが、わりと良い感じになりました。
この細工のメリットは、「タイトル周りが、なんか物足りないとき」に使えます。
線を引くだけなので、5秒で物足りなさが解消できます。
詳しいレシピは、下記のとおりです。
【デザインレシピ1】フォントの種類とサイズ
フォントの種類は、すべて無料で使える「源ノ角ゴシック」です。
見出しのサイズは「14pt」で、本文は「7pt」で作っています。
webデザインの場合は、見出しのサイズを「32pt」で、本文は「16pt」で作ればOKです。
【デザインレシピ2】字送りと行送りのサイズ
見出しの字送りは「60」です。
本文の字送りも「60」で、行送りは「11.2」です。
字送りと行送りの設定がわからない方は、上図右下のボックス部分を変更すればOKです。
webデザインの場合も、同様のサイズでOKです。
【デザインレシピ3】余白の取り方
余白の取り方ですが、「見出しと本文の間は、”見出しの高さの1.6倍くらい”空ける」とOKです。
webデザインの場合も、同様のサイズでOKです。
【デザインレシピ4】守るべき、ポイント。
守るべきポイントですが、「線の太さは、フォントに”3割くらいかかっている”くらい」でOKです。
※今回の線の太さは「5pt」にしています。
レシピは、以上です。
装飾を作る時間がない方は、わりと使えると思います(`・ω・´)ゞ
まとまらない解決方法2:【ちょい初級編】3mmくらいの線を引いて、デザインする。
例えば、下記のデザインがあるとします。
そこそこデザイン経験のある方ならわかると思いますが、
掲載要素が「流れ」「見出し」「サブ」「本文」など、まとめて掲載する必要があるとき、文字が連なってまとまり感のない文字組みになりやすいです。
客観的にみて、文字ばかりで、かなり見にくいです。
この場合は、本文の上に「3mmくらいの線」を付け足して、情報を分けてあげるとOKです。
例えば、下記のかんじ。
見やすくなって、情報にまとまりが出てきました。
線を引くだけなので、5秒で解消できます。
詳しいレシピは、下記のとおりです。
【デザインレシピ1】フォントの種類とサイズ
フォントの種類は、すべて無料で使える「源ノ角ゴシック」です。
見出しのサイズは「14pt」で、本文は「7pt」に。
その他は「9pt」で作っています。
webデザインの場合は、見出しのサイズを「32px」にし、本文は「16px」で作ればOKです。
※その他は「18px」くらい。
【デザインレシピ2】字送りと行送りのサイズ
見出しの字送りは「60」です。
本文の字送りも「60」で、行送りは「11.2」です。
その他の字送りも「60」です。
webデザインの場合も、同様のサイズでOKです。
字送りと行送りの設定がわからない方は、上図右下のボックス部分を変更すればOKです。
【デザインレシピ3】余白の取り方
余白の取り方は、下記のとおり。
1:「PONT 1」「見出し」「-ポイントは〜の数値-」の間は、「見出しの高さの約1個分くらい」空ける。
2:グレー線と「上3つの要素」「本文」の間は、「見出しの高さの約1.6倍分」を 目安に空ける。
こんなかんじ。
webデザインの場合も、同様のサイズでOKです。
【デザインレシピ4】守るべき、ポイント。
守るべきポイントは、下記のとおりです。
1:グレー線の色は、「テキストの濃さの半分以下」の濃さにする。
※今回は「K(ブラック)100」%なので、「K50%」。
2:グレー線の太さは、テキストより目立たなければ、 デザイナーの感覚で調整してOK。
※今回は「1pt」で制作。
以上がレシピです。
最後に、これまでの2つを組み合わせたテクニックをレクチャーします。
まとまらない解決方法3:【ちょい中級編】飾りの文字を足して、デザインする。
例えば、下記のデザインがあるとします。
チラシやwebの見出しなどでよく見る文字組みです。
これでもまとまりはありますが、
人によっては「文字が連なっていて、まとまりがない」と思う人がいるかもです。
この場合は、「装飾用の文字」を加えれば、意匠性が少しアップします。
例えば、下記のかんじ。
見やすくなって、情報にまとまりが出てきました。
文字を足すだけなので、5秒で解消できます。
詳しいレシピは、下記のとおりです。
【デザインレシピ1】フォントの種類とサイズ
フォントの種類は、すべて無料で使える「源ノ角ゴシック」です。
見出しのサイズは「14pt」で、本文は「7pt」に。
POINT1は「9pt」で、for beginnerは「6pt」で作っています。
【デザインレシピ2】字送りと行送りのサイズ
見出しの字送りは「60」です。
本文の字送りも「60」で、行送りは「11.2」です。
POINT1とfor beginnerの字送りも「60」です。
webデザインの場合も、同様のサイズでOKです。
字送りと行送りの設定がわからない方は、上図右下のボックス部分を変更すればOKです。
【デザインレシピ3】余白の取り方
余白の取り方は、下記のとおり。
こんなかんじ。
webデザインの場合も、同様のサイズでOKです。
【デザインレシピ4】守るべき、ポイント。
守るべきポイントは、下記のとおりです。
1:「for beginner」の色は、「テキストの濃さの半分以下」の濃さにする。
※今回は「K(ブラック)100」%なので、「K50%」。
2:「for beginner」のフォントサイズは、本文より「1pt」小さくする。
3:for beginnerのフォントの種類は、「見出し」「本文」で使用しているフォントと「真逆の印象」を与えるものを使用する。
こんなかんじです。
これで、レシピは以上です。
デザインにまとまりがなくて困っている方は、ぜひご活用ください(`・ω・´)ゞ
【余談】「文字組みのコツ」と「装飾の作り方」が知りたい方は。
ちなみに、冒頭でお話しした原因の、「文字組み」と「装飾の作り方」が知りたい方は、下記で詳しく解説しています。
時間のある方はご一読ください。
>まとまらない解決方法:装飾デザインの作り方。
装飾の作り方は、過去の記事にまとめています。
初心者の方も、すぐにできます。
わりと長く使えるテクニックです。
3:まとめ
というわけで、今回は以上です。
最後に告知ですが、僕のインスタでも今回みたいな情報を随時発信しています。
皆さんの暮らしに、少しでもお役に立てればうれしいです(`・ω・´)ゞ
※下記みたいなことを紹介しています↓
よければフォローいただけるとうれしいです(`・ω・´)ゞ
Design is easy!


最新記事 by Owner|taka (全て見る)
- 【欲しいものは自分で手に入れる】独学スキルを身につけたら、人生が楽しくなった話。【体験談】 - 2020年9月20日
- 【自分の身を守ろう】デザイン契約書に載せるべき留意点を紹介。【winwinにしよう】 - 2020年9月18日
- 独学でデザイナーになるには、まずは現場に飛び込めば解決する話。【体験済み】 - 2020年9月16日