Webサービス開発、あるよ
Webサービス開発、あるよ
2019.03.18

100年前のポスターっぽいビジュアルの作り方。芸術運動ロシア・アヴァンギャルドから着想を得て。

Jona

こんにちは。

私は良い意味で古くさいものが好きです。

LIGの本社がある御徒町や上野のあたりには、昔からやってるようなちょっと古びれているんだけれど魅力的で愛のある飲食店が多数あります。昼ごはんを食べにいくと「やっぱいいよね」って心が落ち着く感じ。

デザインでいうなら、Photoshopがなかった時代に作られたポスター。当時のデザイナーたちは、いろんな手法を試して、失敗して、やっとの思いで一枚のポスターを作り上げていたんだろうなぁと。

出来上がったものが日焼けして全体が黄色っぽくなっていたり。雨風によってシミができていたり。月日を重ねることでさらに深みを増します。

最近プライベートでそういう「時代を感じさせるようなグラフィック」を作る機会があり、なんとなく要点を掴んだ気がするのでこの記事で簡単に手順をご紹介します。

完成形はこちら

つくった作品をもとに解説します。

東中野にあるGALLAGE(ガレッジ)というお店の店頭に置くポスターっぽいメニューボードです。質の高いコーヒーはもちろん、見たことのないウイスキーや、斬新なコーヒーカクテルを提供する珍しいお店です。

制作のための7つの手順

7ステップで完成です。

作り方より考え方の共有がメインです。デザイナーでない方でも気楽に読み進めていってみてください。

1.参考画像探し

ジャズが流れるうす暗い店内に、斬新で美味しいドリンク、ファンキーであり知性的でもある店主やお客さんたち。あらゆる人にとって革新的なお店。そんなお店にぴったりなメニューボードを。

店主と話してロシア革命のときにうまれた芸術運動「ロシア・アヴァンギャルド」のポスターが参考になりそうだよねと。実際参考にしたクリエイティブを掲載します。

 

なるほど、この斬新でダイナミックなレイアウト、ポスター全体の色褪せ、汚れ感。かっこいい。つくるのが楽しくなりそうです。

2.レイアウト

「斬新なドリンクがある」ことがしっかり伝わるよう、今回は各種ドリンクに大小差をつけ、さらに横向きや斜め向きにして配置してみます。あとで文字が入ることもある程度考慮しながら。

基本形の「ホットコーヒー」は一番大きい面積にし、左下に見やすく配置しています。優先度の高いものを大きくするというシンプルな考え方でいいと思います。

上から生えている草は、コーヒーの木です。人工物(ここでいうコップのこと)の中に植物など自然のオブジェクトが入ると急に画面全体が生き生きします。物足りないなと思ったら試してみてください。

面倒くさがらず、レイアウトには時間をかけて何パターンも出してみるのをオススメします。特に異なるサイズのオブジェクトを配置するときは、微妙な位置の変化で全体の印象が大きく変わったりします。

3.文言

お店の名前「COFFEE BAR GALLAGE」という文字は、参考画像にならって上部に帯を敷いて配置します。バラバラにオブジェクトを並べて不安定そうに見えてしまいそうなところに、安定感をプラスする目的もあります。

フォントは「歴史があって個性的で遊びのあるものを」という選定基準でGill Sansにしています。お店には気品と荘厳さがありますが、どこかポップで愛嬌もあるのでぴったりだなと。

 

ドリンクの名前を入れるときは、参考画像にならってちょっと遊んでみます。今回はフチに沿ってグィーンと曲げてみました。遊び心を出しつつ、どのドリンクの名前を指しているのか認識させることもできます。

文字のサイズ感について意識すべきは、隙間を埋めることです。スカスカだと寂しい印象になりますが、詰まっていると情報量がたくさんある印象になり、賑やかに見えます。

4.背景と色味

背景を考えましょう。

参考画像をみると、単色でベタ塗りにするのが基本のようです。ポスターですから、紙っぽい質感も出したいところ。

お店の基本のカラーが「黒」なので、黒色でかつ紙っぽい素材を探してみます。これもいくつか試して一番しっくりくるものを選びます。

 

ここまでレイアウトに集中するためにあえてモノクロで作ってきましたが、そろそろ色も入れてみます。コーヒーが主役だから、コーヒーっぽい茶系の色が良さそうだと考えました。

色あせた感じを出すのは最後の工程にまわすので、この段階ではあえてビビッドな色を入れます。ちょっとかっこ悪いけれど、ここは我慢です。

5.明るさとコントラスト

続いて光について考えます。改めて参考画像をみてください。

コントラストが強い(=明暗がくっきりしてる)のがわかります。

一般的に、コントラストが強いとドラマチックになって「深刻そう」とか「凄みがある」みたいな印象を与えます。

これにならってハイライトとシャドウを部分的に追加していきましょう。

だんだん重みを増してきましたね。

6.質感

背景に敷いた紙っぽい画像をコピーして、上から被せて質感(素材感、汚れ感、かすれ感)を出していきます。

やり方はいたって簡単。

上から背景をかぶせてPhotoshopで言うブレンドモードを「オーバーレイ」にするのが基本です。Too Muchな感じなら不透明度を下げたりして馴染むまで調整してください。

「オーバーレイ」が合わないときもあります。そんなときはほかのブレンドモードもいろいろと試してみてください。ちなみに今回はブレンドモードの「除外」「減算」などがマッチしました。

7.最終調整

あとひとふんばり。最後の調整に入ります。

経年劣化した感じを出すために、赤・黄色系の色味を全体にプラス。彩度を落とし、全体を明るくしました。しっくりくるまで微調整を繰り返します。

これで完成です。

お店にも置いてもらいました。

雰囲気出てますね。

まとめ

お疲れ様でした。

うりふたつのクリエイティブを作っていただくというよりは「何か時代を感じさせるようなもの」を作るときの参考になればと思い、考え方と大まかな手順を紹介させていただきました。ぜひ参考にしてみてくださいね。

今回例として取り上げたお店、東中野にあるコーヒーバーGALLAGEは、おもしろいお店なのでぜひ新宿付近にお越しの際には、もうちょっと足を伸ばして東中野まで寄ってみてください。新感覚のコーヒーとお酒を堪能できますよ!

ではでは。デザイナー、踊り手のJonaでした!

▼デザインについてもっと学びたい方はこちらもどうぞ!

U Y A
K A