えれなです。
今回はデザイン上達のコツ
について話そうと思います。
タイトルと若干矛盾してますが、
とりあえず最後まで読んでみてください。
別の記事でブログ用のデザインを
作れるようになりましたね。
まだの方はこちらの記事をチェック
▼▼▼
Canvaリンク
せっかくならデザインスキルを磨いて、
ちょっといい感じのブログにしたくないですか？
今後自分でデザインを作らなくなったとしても、
デザイナーさんに外注する際に
納品されたデザインの良し悪しを判断したり
修正をお願いしたりする場面があります。
デザイナーさんとのやり取りを繰り返していて
なかなか納品にならないなんて相談を受けるので、
最低限のデザインスキルくらいは
身につけておくと良いですね。
今回は、
デザインを学んだことがない方から
普段受けている相談の中で、
特に多い3つの悩みについて
解説していきます。
1.デザインの作り方について
まず1つ目の質問は、
「見よう見まねでデザインしてみたけど、なんかしっくりこない。」
です。
デザインスキルが0で、
どこをどう直せば良いのかわからない
という相談を多く受けます。
まずは基本中のキホン、
「デザインの4大原則」
を理解しましょう。
デザインの4大原則とは、
・近接
・整列
・強弱
・反復
この4つです。
デザインを作るときに
これらの原則を意識するだけで、
格段に見栄えが良く
わかりやすいデザインになります。
それでは、一つずつ見ていきましょう。
◼︎近接
関係する要素を近づけてグループ化すること
「近接」とは、
関連する要素を近づけてグループ化すること。
人は近いもの同士を
「関係がある」と認識します。
関係性によって位置を整理するだけで
ぱっと見でわかりやすいデザインになるんです。
例えば、
いろんな商品を紹介するとき、
商品画像と商品名の間隔が
必要以上に空いていると
商品名が一目でわかりません。
商品名、画像、説明文、価格などの
関係する要素を近づけてグループ化することで、
商品ごとの情報をわかりやすく伝えられます。
また、
関係性のない商品との間に余白を作ることで、
商品情報が一目で伝わりやすくなります。
「近接」に従わないと、
見る側にストレスを与える
デザインになるだけでなく、
情報を誤って伝える場合もあるので、
関係性ごとにグループ分けをして
デザインするよう意識してください。
◼︎整列
関係する要素を一定のルールに沿って配置すること
「整列」とは、
関係する要素を一定の
ルールに沿って配置すること。
例えば、名刺の場合。
役職や名前
→左揃えで上部へ
社名や住所、電話番号など
→右揃えで下部へ
このようなデザインが多いです。
それぞれの情報を整理して整列することで、
一目でわかりやすくなります。
整列させた情報が少しでもズレると
違和感を感じてしまうので、
基準になる線を意識して、
要素が揃っているか？
はみ出していないか？
しっかり確認しましょう。
要素を整列させると
デザインに統一感が生まれ、
「近接」と同様に一目で
理解しやすくなります。
全て中央揃えにしてしまうと、
それぞれの情報の違いが分かりづらくなり、
良く見ないとどこに何が書いてあるのか
理解できないデザインになってしまいます。
◼︎強弱
要素に優先度をつけ、強弱をつけること
「強弱」とは、
要素に優先度をつけ、強弱を付けること。
要素の大きさや色などに
強弱を付けることで、
情報を理解するスピードが上がり、
直感的に伝わりやすくなります。
例えば、チラシを作る場合。
「50%OFF」「セール中」など
アピールしたい言葉の文字サイズを
大きくしたり色を付けたりすることで、
一目で何を伝えたいかが分かりやすくなります。
インパクトを付けることができ、
他のデザインより目立ちやすくなる
という効果もありますね。
このとき、
少しの差では効果が小さいため、
大きく差をつけましょう。
強弱をつけないと、
どこを見ていいか分からなかったり、
アピールしたい内容を見てもらえなかったりと、
効果が薄いデザインになってしまいます。
◼︎反復
同じ要素を一定の規則で繰り返し、一貫性を持たせること
「反復」とは、
同じ要素を一定の規則で繰り返し、
一貫性を持たせること。
線や色、柄、配置など、
同じ要素を繰り返すことで
デザインに一貫性が生まれます。
例えば、レシピ本の場合。
「写真＋レシピ」の決まった配置が
ページを跨いで繰り返されていたり、
使用する色が統一されていたりします。
これが「反復」です。
このように、
デザインや雰囲気に一貫性を持たせることを
「トーン&マナー（トンマナ）」と言います。
デザイナーさんから「トンマナは？」
と確認されることがあるので、
この言葉は覚えておきましょう。
以上がデザインの原則です。
この4つの基本を押さえれば
ある程度整ったデザインになります。
プロがデザインするときに
どんなことを考えているのか？
デザインについて
もっと知りたいという場合は、
こちらの本がオススメ。
▼▼▼
「なるほどデザイン」リンク
この本の内容を完璧に理解して
できるようになる必要はありませんが、
デザインにはどんな要素があるのか？
何を意識して作っていくのか？
そんな、デザインの全体像を掴むには
もってこいの1冊です。
ぜひ、一度目を通してみてください。
2.配色の決め方について
2つ目の質問は、
「自分で配色を決めると、気持ち悪い色になる。」
です。
これも結構相談されます。
「この配色、なんかしっくりこないんですけど良い案ないですか？」
といった感じの相談が特に多いですね。
基本的には自分で考えると
時間がかかる上に事故ります。笑
配色のコツを押さえて便利なツールを使い、
サクッと良い感じの配色を作っちゃいましょう。
まずは配色のコツから説明します。
◼︎配色比率を理解する
配色には、
多くのデザインで取り入れられている
「配色比率」があります。
この比率は3つの色で構成されていて、
・ベースカラー（70％）
背景など広い範囲で使用する色
・メインカラー（25％）
一番主張したい色
・アクセントカラー（5％）
ワンポイントで使用し、強調して目立たせるための色
それぞれこのような割合になっています。
必ずこの比率というわけではありませんが、
簡単にバランスを整えられるのでオススメ。
実際に色を決める場合は、
①メインカラーを決める
②メインカラーに白を足した色をベースカラーにする
③アクセントカラーを決める
といった順で進めるとスムーズに決まります。
例えば、こんな感じ。
自分で決めるのも良いですが、
より簡単に配色を決めたい場合は
配色ツールを使用しましょう。
カラーパレットで検索すると
いろんな種類のものが出てくるので、
使いやすいものを探してみてください。
私はCanvaのものを使っています。
▼▼▼
Canva カラーパレットジェネレーター
Canvaでデザインする場合は、
使用するテンプレートを選択し、
「スタイル」の項目から別の配色に
自動で変更することができます。
とても便利な機能なので、
ぜひ使ってみてくださいね。
また、配色に関する本を
参考にするのも良いですね。
本を参考にしたい場合は、
まずは3色で構成されている
配色パターンの本を参考にし、
徐々に配色に慣れていきましょう。
▼▼▼
見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色PART2 (見てわかる、迷わず決まるシリーズ) リンク
3.参考デザインの生かし方について
3つ目の質問は、
「何を参考にデザインを作ったらいいかわからない。」
です。
ピンタレストやギャラリーサイトで
いろんなデザインを眺めているけど、
他にもインプット方法はないか？
といった質問を受けます。
＊ギャラリーサイトとは
バナーやHPなどの良いデザインをまとめたサイトのこと
参考サイト
▼▼▼
◼︎RESPONSIVE WEB DESIGN JP
https://responsive-jp.com/
◼︎SANKOU！
https://sankoudesign.com/
◼︎LP ARCHIVE
https://rdlp.jp/lp-archive/
◼︎BANNER LIBRARY
https://design-library.jp/
◼︎BANNER GALLERY
https://design-gallery.jp/banner/
私が普段参考にしてるのは、
・テレビ
・Netflix
・街で見かけるもの
（飲食店のメニュー、ポスター、商品パッケージ、雑誌など）
これらのデザインです。
デザインのインプットに
特別時間をかけたくないので、
目に入りやすいな、キレイだな、
そう思ったデザインの理由を考えてみたり
写真で残しておいたりしています。
なぜこういった所から
インプットしているのか、
それぞれ説明していきます。
◼︎テレビからのインプット
大衆が一番目にするものであり、
YouTubeが発展してきたとはいえ、
結局「プロ」の仕事はこれなのでは？
と思い一番意識して見ています。
おしゃれ系のデザインを作るときは、
CMやドラマの衣装やセットの配色、
オープニングやエンドロールなどの
デザインを参考にしています。
ドラマの特設サイトも良いですね。
視聴率を上げるために
一般向けの流行りのテイストに
なっているはずなので、
ターゲットが見そうな作品を選び、
参考にしています。
YouTubeのサムネ系を作るときは、
バラエティのテロップや
画面上に表示される番組内容などを
参考にしています。
ビビットカラーや、
たくさんの色を使ったり、
あしらいの種類が豊富だったりと
とても参考になります。
出演者の感情によって
テロップの色味や書体、
効果音やBGMも変化するので、
制作側が何を意図しているのかを
考えながら見るようにすると、
表現力が磨かれると思います。
＊あしらいとは
装飾や情報を整理したり強調したりなど
デザインの細かな部分のこだわりのこと
◼︎Netflixからのインプット
定期的にデザインが変わるので、
視聴させるための工夫をして
データを取っているのかなと。
デザインが変わったときに、
前とどっちが見やすいかな？
どんなカテゴリー分けにしてるのかな？
などと意識して見て、
自分が手を止めた理由を考えます。
サムネイルが変わったことで
前はスルーしたのに今回は手を止めた
なんて場合もありますね。
もし、真っ白な背景に黒文字で
タイトルが書かれただけだったら
興味が湧くでしょうか？
デザインによって
ストーリーや出演者などを想像して
「自分の心が動いたもの」を
選んでいるはずです。
どんな印象を受けたから
手を止めたのかを考えることで、
魅力的なデザインとは何か？
正しく伝えるデザインは何か？
といったことを
考えるきっかけになります。
そういったデザインの
「意図」を考えることで、
よりデザインすることが
簡単になると思います。
デザイン意図を考えるときに
とても参考になった本があるので
紹介しますね。
▼▼▼
「Webデザイン良質見本帳」リンク
Canvaでのデザインするなら、
こちらの本もオススメ。
▼▼▼
「アプリ1つでパパッとおしゃれにデザイン Canva Design Book」
ぜひ、一度目を通してみてください。
4.おしゃれなデザイン≠良いデザイン
なんだかんだ説明してきましたが、
一番伝えたいのってこれなんですよね。笑
デザインの本質は、
情報を整理して見る側に
内容を正しく伝えるための
「設計」そのもの。
表面のカッコ良さはそれからです。
まずは、あなたが読者に
「何を伝えたいのか？」
これを正しく、そしてわかりやすく
伝えなければいけません。
なので、
「とりあえずPinterestを見てみる」
みたいな、
キレイやおしゃれに一点突破の
インプットには要注意です。
作品としての良さを極めるのは芸術家の仕事。
私たちがやろうとしているのは、
「商品の価値を顧客に知ってもらう」
ということなので、
顧客の感情を動かして
興味を持ってもらえるよう
「感情を設計する」ということを
大事にしていかなければいけません。
となると、
ここまで説明しておきながら、
結局はデザインうんぬんよりも、
・文章の質を上げる
・スムーズに理解できるよう、記事のカテゴリー分けやまとめ記事を作る
・デザインは最低限整えるだけにして、ダサいと思わせて減点されないようにする
といったことが重要になりますね。笑
小手先のデザインスキルではなく
マーケティングの視点からデザインを考え、
・この配色だとどんな印象を与えるか？
・どの画像が内容を正しく伝えられるか？
・どの配置がより伝えたいことを認識してもらえるか？
などなど、
「正しく、わかりやすく伝える」
ということにこだわっていきましょう。
5.まとめ
いかがでしたか？
何となーく「デザイン」について
分かっていただけたでしょうか？
あなたはデザイナー志望ではないはずなので、
デザインそのものよりも
「どのように、何のためにやるのか？」
思考にフォーカスしてお話しました。
とはいえ、
冒頭でもお伝えしたように、
デザインの知識がまるっきりないと
外注した際に納品されたデザインの
良し悪しを判断することができません。
ある程度のキャリアがあり、
こちらの意図を汲み取れるデザイナーさんなら
初めから良いものを出してくれますが、
もちろん費用も相応です。
一方、
キャリアの浅いデザイナーさんに
発注して費用を抑えたい場合は、
こちらでしっかりとデザインの意図や雰囲気、
修正点などを伝える必要が出てきます。
このとき、
「なんか違うのは分かるんだけど」
と、どこを直して欲しいか
上手く言語化することができず、
修正が終わらないと相談されます。
凝ったデザインを
自分で作れる必要はないですが、
最低限のデザイン知識くらいは
身につけておきましょう。
別の記事でデザインの
外注方法についても解説してますので、
外注の際はこちらも読んでみてください。
デザインの外注方法についての記事はこちら
▼▼▼
記事リンク
