この記事は自社メディア「remark」に書き下ろしたものです。
弊社新卒デザイナー2年目の円香と、私とのやり取り。SlackのDMでの会話をほぼそのまま記事化しました。

「cowcamo（カウカモ）」に関わるデザインは、全てtsukuruba studiosのデザイナーが手がけている。（※カウカモ：ツクルバの事業のひとつである、中古リノベーション住宅に特化したプラットフォーム）今回は、カウカモが「クラスカ文化祭」に出した、相談ブースを告知するためのバナーを事例として挙げる。

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

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

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

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

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

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

デザイン解説
・見切れてる建物がCLASKAだと分かりにくい
・建物がツクルバの本社と思われる可能性あり
・文字情報は分かるが、ビジュアルとの関連性が見いだせない

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

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

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

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

柴田：どう思うの？

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

柴田：せやな

デザイン解説
・外観全体の写真そのままだと、見切れの写真より情報量が多くなってツライ
・ベタ塗り箇所に文字をまとめるのめっちゃ普通…全然おもろない
・文字組と背景色と相まって…ダッサイ…

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

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

柴田：どう思うの？どれで校了出せるの？

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

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

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

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

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

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

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

デザイン指示
・写真をそのままビジュアルに使うのは無理がある
・派手な色の背景に建物だけを切り抜いてイラストのように置くか、CLASKAの外壁パターンっぽいデザインの背景に切り抜いた建物を置くか、素材のツライ部分を見極めて補う処理しないと、このパターンの素材を使うのは無理
・今回のような写真とベタな背景色の組み合わせだと情報量多すぎる

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

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

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

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

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

デザイン指示
・色の組み合わせのパターンをもう少しだそう
・文字組をもう少し調整しよう
・方向性はこれで

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

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

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

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

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

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

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

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

円香：こちらTHEカウカモ

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

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

柴田：ちょい弱いな。完全白は？

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

円香：よわいきがする…

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

デザイン解説
・白地に黒だった文字がカウカモグリーンになり、コントラスト比が弱まった
・結果、右側の建物の方が重くなってデザインバランスが悪くなった
・振り返ると、白に黒の方がコントラスト比が強いので立ち戻る

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

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

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

まとめ

・そのビジュアルで内容が伝わるのか
・そのデザインはインパクトがあるのか
・素材がなかったり、素材がイケてないときにツライポイントはどこなのか見極める
今回はCLASKAの引きの外観写真だと情報量が多くて、ビジュアルとして成立しない
・ツライポイントが分かったら、それを補うHowはどうするのか
外観を切り抜いて余分な情報を捨てる。色彩が弱いので大胆な色の上に配置してビジュアルインパクトを出す
・その文言はわかりやすいか
・レイアウトは美しいか

「remark」は、「tsukuruba studios」が発行するWebメディアです。
いま社会の何に注目しているのか、それは大きな文脈の中でどう位置付けられるのかを議論し、その内容をオープンに発信していきます。
https://studios.tsukuruba.com/remark