亀岡的プログラマ日記

京都のベッドタウン、亀岡よりだらだらとお送りいたします。

デザインのことをわからないなりに何とかチラシのデザインをして見たメモ

突然ですが、私吹奏楽をやっとります。まぁ週末に時々、という感じであまり真面目な団員ではないのですが・・・(ごめんなさい・・・ >> 関係各位)

んで、先日「チラシ作って」と頼まれました。しかも今までは白黒の単純なやつだったんですが、今回はカラーで作りたいということで。デザイン一任。マジすか。

てなわけでこんな感じのデザインチラシをなんとか仕上げてみました。

f:id:posaunehm:20130206224322p:plain

まぁ至ってシンプルな感じですが、これだけでも色々あったので、四苦八苦しながらデザインをしてみたなりに感じたことをメモ。何かの参考になれば。

メインテーマにはお金を払おう

なんとなく画像検索したり、今まで見てきたチラシのイメージを思い出しても、やはりメインテーマとなる大きな写真、ないしはイラストを使うのがデフォルトのようですよね。ほむ。そいじゃあ、というわけでFlickerのCCライセンスを始め、フリーの画像横断検索をやってみましたが、どうにもこうにもピンと来ないのですよ。

そんなわけで有料画像サイトを使うことにしました。やっぱお金を払って得られるクオリティは半端ないです。デザインに関してはほんとにそう思います。んで。色々見ましたが、コストパフォーマンスという点ではiStockPhoto*1が最高すぎます。

今回は、メイン曲が「仲間たちへ」という曲だったこともあって、"ensemble"や"colleague"などで検索した中から、文字を配置しても違和感無さそうなものを選んで購入しました。よっぽど大量に刷るのでなければ2000円程度で収まるはず。これってほかのサイトと比べたらかなり破格なはず。万を超え始めると追加のライセンシーが必要っぽかったですけれどね。

結論としてこれは大正解でした。はっきり言って文字は絵の邪魔さえしなければいいのですよ。団内でレビューした限りでは好評でしたよ。

デザインソフトはフリーでそろえてみた

絵が見つかった所で、それに文字を入れたりしなければいけません。あとは印刷に出すというところでトンボ線なんかも欲しい所です。
もちろんオフィスあたりでやって出来ないことはないとは思うのですが、やはりドロー系のソフトが欲しい所です。

とりあえず、当たり前ですがAIもフォトショも持ってないです。製品版のデザインソフトウェアという観点ならExpression Designはもってます。ええ、最近無料化されたあれですよ。ええ。*2

とはいえDesignだと困ったときに情報が少なすぎるので、今回はInkscapeに落ち着きました。

ただしMac上だと、XWindowのメニューとMacの標準メニューが同時に出てしまう、というのがとどうもしっくりこないので、UbuntuをFusion上で導入したりしました。

これ結果的に良かったです。なぜかというと、日本語フォントの導入が簡単だったのです。ソフトウェアセンターに行って"japanese"とでも入力して、評価高いフォントからガスガス放り込むと、割りと良い感じのフォントが入ってくれました。これでひとっ風呂浴びている間にフォントの導入が終わったので非常にありがたく。

f:id:posaunehm:20130206230031p:plain

これくらいのデザインなら、ほとんど足し算。

見ていただいて分かるように、グラフィック要素は、メインにデンと構えた絵に、情報用の文字が主です。なのでほとんど如何にレイアウトするかの世界になります。これはもう、下で書いている「ノンデザイナーズ・デザインブック」の領分です。

んで、右上のロゴも一応自分で作ってみました。とはいえこれも足し算 + αに過ぎません。

f:id:posaunehm:20130206230243p:plain

まずアルファベットはMagikというフォントを一文字ずつ並べて、それをパス化し結合しました。つなぎで多少ベジェ曲線を使いましたが、もう微調整といった世界。

それから、「元の'R'の文字の一部が8分音符に見えるよなこれ・・・」という天啓があり、その部分を置き換えて見ることにしました。
と言っても自分でシェイプ作ったわけでなく、素材サイトにあった8分音符の画像をパス化し、それをフォントの一部と結合して置き換えました。

Mの最後の最後の跳ね上がった部分は、カリグラフィツールで何度か波線を書いてみて、良い感じに掠れたものをこれまたパス化して結合しています。

f:id:posaunehm:20130206230520p:plain

あとは「吹奏楽団」のフォントを適当に配置して完成。まぁとりあえずのロゴだし、こんなものでいいかな、と。

ここらへんはこの本が例題多くて非常に助かりました。

ノンデザイナーズ・デザインブックはやはり神本だった

あとは全体のレイアウトです。これは本当に「ノンデザイナーズ・デザインブック」に精一杯お世話になりました。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

後半の配色までこだわることはできなかったのですが、前半のレイアウト原則だけでも読むといいです。もっと言うと、以下を意識するだけで全然変わります。

  • アライメント(文字揃え)
  • グルーピング
  • コントラスト

アライメント

とにかく言えることは
1. 絶対に中央揃えは使うな
2. どんなオブジェクトでも右/左のアライメントに気を使い、見えない『枠』を意識させること。

これですね。今回の図も線を引いてみれば分かるように、そこだけは結構慎重にやっているのです。

f:id:posaunehm:20130206231438p:plain

デザイナさんが数ピクセルのズレにこだわるのがよく分かる気がします。ちょっとガタつくだけで緊張感が大きく変わっちゃうのが実感出来ました。

グルーピング

結局、自分で似たカテゴリに有ると思ったものが見た人も認識してくれるかというと、そうではないわけで。なので誰が見てもそうと分かるようにデザインしろ、ということです。
異なるカテゴリのものはきっちり距離を出して(あるいはアライメントを左右に振ったりして)やるように心がけました。

f:id:posaunehm:20130206231703p:plain

特に中央付近に並べた2つの曲目は、後述のコントラストも含めて、きっちり塊として捉えられるように注意しました。

コントラスト

コントラストは、つけるんならド派手につけましょう。

・・・といってもほんとに思い切りつかないんですよね。でも今回はパッと見てわからなくていいかな、という情報は極力小さくしました。例えば曲目もサブタイトルとか作曲家はかなり絞って曲目を目立たせるように。開場時間も小さく絞って開演を大きく。年度なんて普通分かるんだからおまけ程度に、などなど。

でも後から見るともっとおもいっきりやっても良かったな、と思いますね。ぱっと見のインパクトは足りない気がしますし。まぁここらへんはまだまだです。

おしまい。

とまぁこんな感じでございます。不慣れで大変でしたが、やっぱ実際にオブジェクト触っているときは楽しかったですね。今度はホームページをちゃんとデザインしよう・・・

あ、最後に。印刷会社とのやり取りは極力余裕を持ってやるようにしましょう。オンライン入稿でデータのやり取りをやってたりすると簡単に3日くらいおくれて短納期変更代4000位を支払うはめになります(´;ω;`)

*1:日本語サイトのトップアドレスがnihongoってのが斬新。

*2:当然ながら製品版Ultimate買ってますよ?泣いてないですよ?