ベーシストとして参加してる、バイオリニスト小夜子さん率いるBandaCapriccioのフライヤーを作った。 バイオリン、ピアノ、ギター、ベースでジャズ、ゲーム曲、ジブリ曲、歌もの等を演奏するバンドです。

7/25に岩本町EggmanTokyoEastで。また、毎月第二日曜に本厚木MacArthurGarrageにてライブやってます。よかったら聞きにきてください。

こんな曲をやってます

で、本題のフライヤーの作成についてなんだけど、作業量や技術的には大したことやってないが、自分は基本サーバサイドのWEBエンジニアなのでそれなりに苦労した。
作るにあたって考えたことや使ったものを書く。

筆者のデザインスキル

CSSフレームワーク頼り。一応ノンデザイナーズ・デザインブックぐらいは読んでる。

TL;DR

プロのフォトグラファーにかっこいい白黒写真撮ってもらってPicMonkeyでGeosansLight乗せろ

何はともあれ写真

グラフィックデザインができないので、写真に頼る。バンドなら、ライブの写真をプロに撮ってもらうのが一番だと思う。
小夜子さんの友達のStephenJacksonっていうフォトグラファーが超かっこいい写真を撮ってくれたので、これをフルに活用する。ありがとうStephen!!

画像加工

フォトショもGIMPも使えないのでWEBサービスでやる。PicMonkeyというやつがよかった。無料でかなりのことができる。

PicMonkey

便利なんだけど、作ったやつをjpgとpngでしか保存できなくて、後で文字だけ変えるみたいなことができない。有償アカウントならできるのかな。今後はGIMPでやることになるかも。

紙媒体とWEBってきっとデザインの考え方が違うんだろうけど、WEBしか知らないのでWEBの延長線上で考える。

最近流行りのかっこいい画像or写真をドーンとやった後にきれいなフォント乗せる感じでやってみる。イメージはこの辺。

• http://www.consul.io/
• https://squareup.com/
• http://domains.google.com/about/index.html
• http://www.homelessfonts.org/

はじめに小夜子さんが草案を送ってきてくれて、自分のイメージと近かった。
これをベースにやってみる。

フォントをGeosansLightに変える。ミニマルなデザイン良い。しかもフリー。
クールでミニマルな印象にしたいのであればこれ選べば間違いなさそうという知見を得た。

はじめに作った奴。そのままフォント置いたら見えにくいので、黒い半透明のオーバーレイを下に敷いてる。!はなんとなくつけてみた。

バンド名を大文字にしてみてほしいと言われたので大文字にする。

ふと思い立ってバンド名を極端に大きくしてみる。これがけっこうメンバーにウケた。

少し小さくしてみる。最終的に大きいほうになった。

写真が中心にいる小夜子さんに視線がいくようになってるので、それを崩さないように調整。

オーバーレイを下半分全体にしてもいいんじゃない？と言われたのでやってみた。最終的にこれが採用。

あと気を使ったことと言えば

• フォントカラーをちゃんと合わせる(当たり前か)
• フォントサイズを合わせる(これも当たり前か)
• オーバーレイの左と下の隙間を同じぐらいにする
  • PicMonkeyはピクセル数が出なかったので感覚でやった
• フォントの左側の並びを合わせる
  • これも仕方ないので感覚で
• 上でも書いたけど、中心にいる小夜子さんに視線が行くように気を使う

感想

写真とフォント様々といった感じ。フォントはうまい探し方とか情報の集め方とか覚えたいですね。
あと本職のデザイナーさんがやるとどんな感じになるのか見てみたい。見て技を盗みたい。