柴田紘之
tsukuruba studios アートディレクター / デザイナー

デザイン事務所にてアートディレクターとして企業ブランディングを中心に広告、商品企画、プロダクト開発、Webプロモーションなどに従事。自分たちの働き方もデザインの一部と捉え、自らのほしい未来をつくるために2015年9月ツクルバに参画。Web、グラフィックなどツクルバに関わるデザイン業務を担当。柴田のインタビュー記事

後藤円香
tsukuruba studios デザイナー

宮城大学で認知科学・心理学を学ぶ傍ら、独学でデザインを学び、2017年4月に新卒でツクルバに参画。現在はWeb、グラフィック問わず社内のデザイン全般を担当している。人の体温、場の温度感を伝えるデザインが得意。

まずは自由に作ってもらう

円香:バナーできたので見ていただいてもよいですか〜。

file

柴田:これ、CLASKA(イベントの会場)ってのがビジュアルから伝わってこないのだけど、素材これしかないの?

円香:これしかないんす…公式のビジュアルがこれで

柴田:ならしょうがないな…全然わからん。CLASKA側からこれ使ってくれって?

円香:絶対これってわけでないとは思いますが、送られてきたのがこれなんで…

デザイン解説

  • 見切れてる建物がCLASKAだと分かりにくい

  • 建物がツクルバの本社と思われる可能性あり

  • 文字情報は分かるが、ビジュアルとの関連性が見いだせない

柴田:別件で撮影した外観写真の素材あるでしょ?

円香:少し納期まで時間あるからもう一種類作ってきまっす

足りない部分に気付かせる

円香:外観見せパターンこんな感じでどうでしょう?

file

柴田:どう思うの?

円香:背景の色が原因なのではとは思うんですが、いまいちパッとせんなと…地味

柴田:せやな

デザイン解説

  • 外観全体の写真そのままだと、見切れの写真より情報量が多くなってツライ

  • ベタ塗り箇所に文字をまとめるのめっちゃ普通…全然おもろない

  • 文字組と背景色と相まって…ダッサイ…

もう一回自分で考えさせる

円香:ここらへんでどうでしょ。オレンジのがかわいいな

file

柴田:どう思うの?どれで校了出せるの?

円香:オレンジので校了出したいが、いまいち納得いかん

柴田:なんかね…都会感ないんだよね。田舎の不動産屋のバナー感…

円香:最初の方が都会感あったよなあ…

柴田:あったけどさ。言うように建物がさ。分かりづらすぎるでしょ?

円香:外観見せようとすると急に情報増えてつらみ

柴田:まぁー俺はそのパターンに満足してないのだよ。つまるところ。

円香:むー。写真もそのままだし、もう少し調整する

デザイン指示

  • 写真をそのままビジュアルに使うのは無理がある

  • 派手な色の背景に建物だけを切り抜いてイラストのように置くか、CLASKAの外壁パターンっぽいデザインの背景に切り抜いた建物を置くか、素材のツライ部分を見極めて補う処理しないと、このパターンの素材を使うのは無理

  • 今回のような写真とベタな背景色の組み合わせだと情報量多すぎる

柴田短い時間でいかに良いパターンを作れるか。アイデアを引き出す筋トレパターンの案件。とにかく楽しようと思わないで、脳をフル回転してアイデアを出せばどうにかなる。

円香:ちょっとやってみたい気持ちはあるからやってみる。といいつつ、個別相談だからそんなに尖ったのにはしたくない気持ち…

柴田:だから作って壊してチューニングするのだよ。あーでもないこーでもないのスピードを早めて、今回の正解になる早で近づける。

ちょっとヒントを与えて発想をジャンプさせる

円香:ちょっと方向性変えてこんな感じどうでしょう?切り抜きはちょい雑です。

file

デザイン指示

  • 色の組み合わせのパターンをもう少しだそう

  • 文字組をもう少し調整しよう

  • 方向性はこれで

円香:色〜〜、もうちょい出します。意図としてはTHE・Webのバナーって感じではなく、紙の特色っぽい配色とレイアウトがいいな〜というのでやってます。配色悩み中…

その色使いは今回のイベントに適切か

file
file

円香:淡い×淡いよりは、どっちかを締めたほうがしっくりくる気がするんです

柴田:どぎつい配色もいいけど、一回スタンダードにカウカモっぽい配色も見てみたい

円香:完全に個人の趣味に走ってしまった…ちょっとやります

柴田:まぁー好きだけどね。俺は。

A案、B案、C案の中にひとつスタンダードな案を入れておくと、見る人は判断しやすい。ただ、見慣れているものに人は流れやすいから、見せる順番とタイミングは大事だけど。裏で案を用意しておくってのは損がない

全体を俯瞰してデザイン調整

file

円香:こちらTHEカウカモ

柴田:建物の方に100%カウカモグリーンを乗せて、左側を白かカウカモの背景色にしてみて

file

円香:配色としては最初のにちかい

柴田:ちょい弱いな。完全白は?

file

柴田:強いがツライな。文字グリーンで「相談」の「談」がかぶっているところ反転は?

file

円香:よわいきがする…

柴田:悪くないけど、文字がグリーンになって白の面積とのバランスが良くないのだね。改めて見直すと、白に黒のパターンの方が強くていいな。悪いけど、元に戻して微調整してみて。文字情報も担当者と分かりやすくなるようブラッシュアップしてみて。

デザイン解説

  • 白地に黒だった文字がカウカモグリーンになり、コントラスト比が弱まった

  • 結果、右側の建物の方が重くなってデザインバランスが悪くなった

  • 振り返ると、白に黒の方がコントラスト比が強いので立ち戻る

文字情報のブラッシュアップをして完成

file

円香:デザイン調整、文言FIXしてこうなりました〜もうちょっと調整したらパスしてもいいですか?

柴田:文言を整理して内容がわかりすくなった。OK! これで行こう

まとめ

  • そのビジュアルで内容が伝わるのか

  • そのデザインはインパクトがあるのか

  • 素材がなかったり、素材がイケてないときにツライポイントはどこなのか見極める

  • 今回はCLASKAの引きの外観写真だと情報量が多くて、ビジュアルとして成立しない

  • ツライポイントが分かったら、それを補うHowはどうするのか

  • 外観を切り抜いて余分な情報を捨てる。色彩が弱いので大胆な色の上に配置してビジュアルインパクトを出す

  • その文言はわかりやすいか

  • レイアウトは美しいか