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

デザインとは？

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

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

かと言ってその「場にそぐうような物」にこだわりすぎて型から外れないようにすると
次は「ありきたり」になってしまいます。もちろんそれがいけない訳ではありませんが、要望によってはたまには型から外れることが大事になることも。
とにかく、奥の深い世界です。
「デザインとは？」でも記述した通り、「デザイン」と言うものには正解が存在せず、また人それぞれにこだわりがあることが多いです。
ここではスライドなどを例に交えて筆者の3つのこだわりについてお話しします。

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

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

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

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



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

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

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

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



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


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



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

色の決め方

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

優先度を決めよう！

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






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



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

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






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

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

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



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




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

まとめ

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

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

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

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

https://www.amazon.co.jp/dp/4798145939/ref=cm_sw_r_tw_dp_T2PKS5319M0XWTGDR5JH

デザイン入門教室