Blog
ブログ

2021年09月27日

【デザイン入門】デザインのきほん【第26回勉強会】



第26回SOHOBB社内勉強会にて、Vueの入門、デザインについての2つが発表されました。
今回は時間が無くて発表しきれなかったことも含めてデザインについての基本、やっちゃダメなデザイン、ちょっとしたTipsなどをご紹介したいと思います。

デザインとは?

「デザイン」とはいろいろな場面で使われる言葉です。建築では間取りや家の機能性、キャラクターは性格や服装、色合いなど…
意味合いとしては「設計」「計画」ですが、「デザイン」と言う言葉の意味に明確な正解は無いように思います。

もちろんデザインそのものに対してもそうで、「こうすると見づらくなる」「この色合いは目がちかちかする」と言うものはありますが
それが正解か不正解かは場面によります。
「デザイン」と言うのは場面にそぐうような物を考えることだと私は考えています。
お年寄り向けのポスターならできるだけ文字は大きく、子供向けならポップでカラフルにして楽しげに…など…

かと言ってその「場にそぐうような物」にこだわりすぎて型から外れないようにすると
次は「ありきたり」になってしまいます。もちろんそれがいけない訳ではありませんが、要望によってはたまには型から外れることが大事になることも。
とにかく、奥の深い世界です。

筆者がデザインで心がけていること


「デザインとは?」でも記述した通り、「デザイン」と言うものには正解が存在せず、また人それぞれにこだわりがあることが多いです。
ここではスライドなどを例に交えて筆者の3つのこだわりについてお話しします。

デザイン≠綺麗にすること

見た目がきれいなだけでは意味がないと思っています。
どんなに見た目が質素でも、情報がちゃんとわかりやすく伝わればそれはそれで「正解」だと私は考えます。
もちろん見た目も大事です!しっかりと情報が分かりやすく伝えられていて、なお見た目が綺麗なら
「ちょっと読んでみたいな。」「どんなこと書いてあるのかな?」と読みたい気持ちが上がります。そうなると万々歳ですよね!🙌

何を優先するかを最初に考える

「あれも伝えたい!これも伝えたい!」で欲張ってしまった結果、1ページにギュッと字が詰まっていた!
そんなスライドを今まで何枚も見てきました。
どんなに内容が素晴らしくとも、一枚に新聞のように文字を詰め込んだスライドは読む気を無くし、興味や意欲を下げます。
折角人の時間を少しもらってプレゼンテーションをしていても、それではお互いに不利益です。



プレゼンテーションのスライドと言うのは「紙芝居」みたいなものです。
しかし実際の紙芝居みたいに手に持って話すものでもないため、スライドの枚数は何枚あっても良いと思ってます。
1枚に無理やりまとめて伝わらないなら、そのスライドは伝わりやすいところまで分けましょう!

目標は「説明を無くす」こと

一番いいのは「特別な説明が要らない」と言う事です。
例えば非常口の看板。「非常口」と書かれているものもありますが、ピクトグラムだけのものもあります。
「非常口」と書いてなくともそのピクトグラムを見ると大抵は「ここは非常口なんだな」と分かると思います。

特別な説明をしなくともスッと頭に入ってくるようなデザインを目指したいですね🙆‍♀️🙆‍♀️
もちろんですが説明を少なくしすぎて伝わらなくなるのは本末転倒なのでこだわりすぎず程々にしましょう!

これダメ!デザイン

例えばIT系の説明会用スライド。



勉強会では皆に「どこがいけないと思いますか?」と聞いてみました。
挙げられたのは
・文字が詰め込まれすぎ
・背景が濃いので情報量が上がって何が何だか分からない
・明るいから本文が全く見えない
…などなど。皆さん的確に答えを出してくれました!
しかし難しいのは「いけないのは分かるが、どう直すか分からない」と言う人が多いことです。

ダメなデザインの特徴まとめ
・情報量が多すぎる
・全部優先度が同じなので結局伝わらない
・配色が見づらく、いろんな人に配慮がされていない
・原色ばっかりを使う
・フォントが雰囲気に合っていない、場にそぐわない

…つまりこの5つさえどうにかしてしまえば「ダメなデザイン」を卒業して「無難なデザイン」になれると言う事!🎉
ここからは実際に架空のカフェのポスターをテーマにこの「5つのダメ」を避けつつ無難なデザインを作っていこうと思います。

ポスターを作ろう!


さて、ポスターを作るにあたってこちらのお題を用意しました。

【内容】
・9月1日から11月20日までの限定メニュー
・お店の名前:「Hill Earth City(ヒルアースシティ)」(ロゴあり)
・オーダー時間:9:30~18:30(ラストオーダーは18:00)
・お店の場所(地図あり):「〒123-4567 XX県△市〇〇町 12-34」
・電話番号:000-XXXX-XXXX
・定休日:水曜日、祝日
・期間:9月1日~11/20
・A4サイズ

【カラーについて】
大人のカフェをイメージしています。落ち着いた色でお願いします。

【メニューについて】
matcha_pafeit:和風抹茶パフェ(550円)←一番メインのもの
cake:ガトーショコラ(300円)
pancake:ねこパンケーキ(890円)
parfait:コーヒーゼリーパフェ(250円)


リスト化されているので分かりやすいものの、実際だと依頼人のお話を一つ一つ聞いて自分でリストアップしなければいけません。
とても大変です……
まず全体のイメージを決めるべく「カラーについて」を見て色合いを考えましょう。

色の決め方

今回はカフェのポスター。大人向けとのことで「落ち着いた色」で考えます。
落ち着いた色=彩度の比較的低い色です。
さらに「カフェ」なので「茶色」を主体にしましょう!
また、今回はアクセント色として「オレンジ」を採用しました。
これでテーマカラーは決定しました!🎊🎊

優先度を決めよう!

さて、テーマカラーを決めたら次は情報の優先度を決めます。
今回はブロックを「ヘッダー」「メニュー」「お店の詳細情報」の3つに分けて考えました。
まずは「ヘッダー」。
今回は第一に「スペシャルメニューの宣伝をしたい!」と言う宣伝のため、「【New】SpecialMenu」と言う文言を大きく左上に載せました。



Tips
「New SpecialMenu」と書くのだけでも良いですが
なんだか物足りない…そんな時は「囲い」です。
今回はリボン型の塗りつぶしを使って「New」部分を強調しました。
他にも四角く囲ったり、吹き出しにしたり…
いろんなやり方があるので皆さんも模索してみてくださいね!



その隣に開店・閉店・ラストオーダーの情報を載せました。
これについては下のお店の詳細情報に書いても良いと思います!



次に「メニュー」について考えます。
今回は「和風抹茶パフェ」がメインの商品と言う事で、一番目立つように配置します。
残りの三つはタイル状に並べました。
パフェについてはメインなので、ちょっとした説明も入れることで見た人が「食べてみたい!」と思わせるようにします。
また、お値段をメニューよりも大きい文字で表示することで「お手軽な値段だな」とお店に行きやすくなるのを目指しました。

そのまま文字を書くと後ろの写真と同化してしまい、あまり目立たなくなってしまうためベージュで四角い枠を設置し、その上に値段を載せます。




Tips
いいデザインが思い浮かばない、配置してみたけど何かが違う…
そんな時は「Pinterest」!
アカウントを作成して、自分が参考になるな~とか、このデザイン良いな~!と思うような
デザインたちをジャンル分けで保存して並べることが出来ます。
デザインは何よりもインプットが大事です。
詰まったら他の人のデザインを見てインスピレーションをもらうのも手ですよ!


最後は「お店の詳細情報」です。
どんなにメインコンテンツを強調して「お店に行きたい!」となってもお店の情報が分かりづらければ意味がありません。
逆に言うと、とにかく「行きたい!」と思ってもらえれば最終的にお店の情報を探すはずなので、メインコンテンツよりは目立たなくても良いと言う事。
今回は一番下にフッターのような形で設置することにしました。
ここでお店の内容を少し振り返ってみましょう。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
・お店の名前:「Hill Earth City(ヒルアースシティ)」(ロゴあり)
・オーダー時間:9:30~18:30(ラストオーダーは18:00)
・お店の場所(地図あり):「〒123-4567 XX県△市〇〇町 12-34」
・電話番号:000-XXXX-XXXX
・定休日:水曜日、祝日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
オーダー時間はすでにヘッダー部分に書いたのでOK。
となれば考えるのはお店の名前、場所、電話番号、定休日の4つになります。

この情報の中だと一般的にお店>場所=>電話>定休日の優先度になるので今回のポスターもこの優先度で作りました!



お店の名前はロゴしかなかったので新たにフォントベタ打ちで書きます。この時、ロゴで使われているフォントを特定して出すのも統一感があっていいと思います。




最後に配置などの全体的な調整をして完成です!

まとめ

大変長くなってしまいました。
実際の社内勉強会でもかなりの時間をかけて語ってしまったのですが、これだけ長く書いても3分の1も語っていないため本当にデザインの奥深さを思い知りました…
人に説明するのは楽しいですがとても難しいものです。

さらに、仮にもデザインの話をする以上資料は非の打ち所がないほど完璧なデザインにしなければいけません。それもかなり難しかったです。
実際、作ってみたポスターも、(今回は説明用に最低限のデザインにしたとは言え)作ってから
「ああ…もっとここをこうすれば…」と言うのがたくさん出てきてとてもしんどかったです。
精進します…

いかがだったでしょうか?ソホビービーではこのように毎月勉強会が開かれ、個人の興味を持った技術などを発表しています。
今後も勉強会のブログは更新されるので、お楽しみに!

参考&おすすめ文献



なるほどデザイン

やってはいけないデザイン

デザイン入門教室

このページの先頭へ