誰かに見てもらうための、簡単なデザイン

mihimaruGTの「帰ろう歌」から簡単に学割チラシを作ってみたチュートリアル

先週こんなニュースがありました。
mihimaru GT、活動休止を発表(AOLミュージック) – エキサイトニュース
えー!?活動休止∑(゚Д゚)!?まぁ休止っていうことはいつか再開もあるかもしれんしねーでも残念…(:_;)
と思ったので、mihimaruGTの「帰ろう歌」からインスピレーションを得た学割チラシ制作のチュートリアルでもしようかと思います。

kaerouka_img_3

使ったソフトはIllustratorCS6。Illustrator初心者さん向けな、難しいことは全然していない内容です。選択ツール、ペンツール、文字ツール、長方形ツールを使ったことがある人なら大丈夫です。
それらのツールの使い方はここでは説明していません…。ショートカットキーも使っていません…。
音楽からインスピレーションを得るというのは、私はよくあるんですが、そうやって作ってる人とかいるのかな?基本ぼっちなのでよく分かりません。インスピレーションと言ったら聞こえはいいですが、やってることはパクリ…いや、インスピレーションです!!
休止→再開、があればいいのですが、イエモンみたいに知らん間に解散してる…みたいなことがありませんよう…(`;ω;´) イエモンの復活も心から願っております。

まずは完成図から

6_kaerouka_02

ああ単純な構造!!ちなみにサイズはA6です。
普段Illustrator触っている人なら、どうやって作ったかひと目で分かると思います。
ないと思いますが、この画像をダウンロードして使っちゃいけませんよ!

帰ろう歌とは?

mihimaru GTの2ndシングル。2004年4月28日発売。下校ソングとして全国の一部の学校で使われていたっぽいです(参考・Wikipedia)。タイトル通り、キラキラした学生たちの楽しそうな下校・放課後?シーンが散りばめられた歌詞とHipでPopな曲調が良いなぁと思うところ。
私がmihimaruGTを知ったのも、当初「帰ろう歌」がニュースでやってたからなんですが…なんか珍しいテーマの曲だし、耳に残ったのですぐにCDを探しに行きました。この曲を聴いてはこんな学生生活が送りたい…と思ったものです。mihimaruGTは「気分上々↑↑」とかが有名ですが、それも好きですがこの歌が好きです。

歌詞・帰ろう歌 mihimaru GT 歌詞情報 – goo 音楽

動画・mihimaru GT 帰ろう歌 TAKE07 – YouTube

まずは大体の素材イメージを

歌詞の冒頭に「退屈から抜けだしたら胸騒ぎのミニスカが揺れる」というのがあるので、「ミニスカが揺れる女子高生━(゚∀゚)━!!」ということで女子高生の絵を入れることは決定。となったら男子高生もいるかな、歌詞に出てくるし、ってことで男子高生も決定。あと「こっそり彼女の待つ改札」っていうのもあるので、鉄道に関する何かを入れられたらいいな…ということと、「帰ろう歌」なので音符を飛ばそうかと。楽しそうで若々しい雰囲気がいいよね。

そして色のイメージを

なんだったか…以前mihimaruGTをTVで見た時、hirokoちゃんピンク三宅さんブルーのTシャツを着てたな…と思って、その色を使おうかと。あと何色かほしい…と思ったけど、それは作りながら決めようという曖昧な感じがあったものの、にぎやかなイメージがいいので、黄色は使うだろうなぁ…あと、下校→寄り道→公園?的なイメージがあったので、もいいかも、でも派手すぎ?とぼんやり思ってました。HipでPopな曲なので、明るくハッキリした色合いがいいなぁと思ったり。「色とりどりの恋の話」っていうフレーズもあるので、色とりどりもいいなぁと思いつつ、恋の話なんかねぇよ!とツッコミを入れたり。

素材を探しに行く

女子高生と男子高生、って決めたものの、写真にするのかイラストにするのか…。とりあえず「胸騒ぎのミニスカが揺れる」ので、ミニスカが揺れてるのがいい…ということでイラストにすることに。写真だとそこまでピンポイントな表現をしたものを探すのは難しいし。シルエットにして匿名性があるのがいいな、と思ったので、影絵素材サイトの「シルエットデザイン」さんで探すことに。
ありました。

6_kaerouka_06

ミニスカ揺れる女子高生おったでぇぇぇ━(゚∀゚)━!! とテンションが上がりながらシルエットデザインさんに感謝。男子高生はこだわりがないですが、立ち姿が綺麗な方がいいかな、と思ってこちらの素材を使うことに。でも更にイメージを合わせるためにちょっと修正をします。

6_kaerouka_10

とっても可愛い素材ですが、hirokoちゃんのイメージに合わせて髪の毛を増毛しました。影絵に合わせて、左から2番目のピンク部分のような図形をペンツールで適当に描きます。それを黒色にして元絵と色を合わせたら完了。あとは切り抜きたい範囲ギリギリで四角形を描いて、人物と四角形を選んだ状態で、右(副ボタン)クリック→クリッピングマスクを作成、で不必要な部分を隠します。

6_kaerouka_14

男の子の方は、男子高生っていう影絵が見つからなかったので、普通の男の人の影絵をちょっと修正して使います。まずは襟が立っているので、それを無くします。ペンツールのアンカーポイントの削除ツールやダイレクト選択ツールを使って整えました。あと、上着の裾の広がり方。ちょっと遊びのあるような広がり方なので、ダイレクト選択ツールを使ってブレザーらしく広がりを抑えました。あとは靴もちょっと違うのですが、隠してしまうのでそこは気にしないことに。同じくクリッピングマスクで不必要な部分は隠します。

6_kaerouka_17

そして着色。hirokoちゃんがピンク、三宅さんがブルーのTシャツを着ていた…ので女の子はピンク、男の子はブルーに。それだけ。単純。まぁなんか色的にも男女!って感じがしていいんじゃない?

影絵って自分で作ると時間かかっちゃいますが、予め素材があれば時間短縮に繋がるのでいいですね、シルエットデザインさん、ありがとうございます。

学割の見出し

6_kaerouka_20見出しどうすっかなー、と思いついたのがこれ。基本的なイメージは定期券です。歌詞に改札で待ち合わせするシーンがあるので、鉄道に関する何かを入れたかったのです。IC定期券ってロゴの上に駅名とか書いてありますよね、なので¥マークの上に文字を書く方向で。あと、定期券は角丸長方形ですね、なので合わせて角丸に。フォントも定期券ぽくゴシック体を使ってみました。
下にローマ字があるのは駅名の看板をイメージしています。定期券も看板も長方形ですが、正方形にしたのはなんとなくです。正方形って何だかスタイリッシュなイメージがあって、オシャレに見える…気がするのです。

そうだ、角丸でいこう

定期券のイメージで角丸にしたので、このまま角丸で合わせよう、と思って、枠を用意しました。印刷する紙自体が角丸じゃなくても、中に角丸四角形を配置するだけで、何だかちょっと柔らかい雰囲気がします。
角丸長方形ツールで長方形を描いて、オブジェクトメニューから、パス→パスのオフセット、で、オフセット値を5mm、角の形状をラウンド、角の比率を4にしてOKを押すと、白い長方形の周りに、四方が5mm大きい長方形ができます。

6_kaerouka_25

オフセットは何ミリ大きくするか(マイナスの値やpxでも指定可能)、角の形状は、マイターは角が尖り、ベベルは角を裁ち落としたようになります。ラウンドは丸くなります。角の比率は、数値を上げれば角がシャープになります。
同じ作業をもう一度繰り返して、青い長方形の周りに、四方が5mm大きい長方形を作ります。一番大きい四角をピンクで塗って、枠が完成。

6_kaerouka_28

A6サイズの長方形の上に、先ほどの枠を配置します。店名を入れられるように下部は少し余白を持たせます。そして女子高生と男子高生の影絵を配置。枠と繋がって見えるように、女の子はピンクの枠に、男の子は青い枠に沿って配置します。青い枠が内側で、それに合わせて男の子を配置しているので、男の子の方が少し奥にいるような感じがします。なので男の子は少し小さくして、遠近感をつけました。

6_kaerouka_32

配置は、離しても(左)、近づけても(右)、そんなに違和感はないなぁと思うのですが、離すとちょっと寂しい感じがするかなぁ…とか思ったり。なので近づけてみました。男女の影を近づけると、場合によってはいやらしい?感じがすることもありますが、今回は色分け&遠近法でそこまでいやらしい感じも出ないだろうと。学生らしく健全なイメージがいいですしね!まぁ…好みかもしれませんが。

6_kaerouka_35位置が決まったら、角丸枠と影絵を選択して、右(副ボタン)クリックからグループ化を選んでグループ化して、A6サイズの長方形と先ほどグループ化したものを選んで、上部のコントロールパネル内にある「整列」から整列ツールパレットを出して、左右の中央に揃えます。

見出しを配置する

6_kaerouka_38

見出しを配置して、何パターンか作ってみました。見出しがパッと目につくのは左側の2つかと思います。一番右側のものは、女子高生のスカートが隠れてしまっているので個人的に却下です。左から2つ目のものがいいかなーと思いますが、なんか配置もオシャレだし。しかし、その他の文字の配置がちょっとしにくそう…ということで、無難そうな一番左ものを採用することにしました。

6_kaerouka_41さらに見出しを目立たせるために、オレンジの四角のまわりに白線をつけて、影をイメージしたピンク色の四角も置いてみました。元々のピンクの枠と繋げることで、ちょっと統一感も出たかな、と。

文字を配置する

文字を配置します。今回入れる文字は「お会計時、学生証の提示で10%OFF」とお店の情報です。一番目立たせたいのは10%OFFってとこかな、ってことで。

6_kaerouka_43とりあえずバランス見て、そのまま文字を打ち込んで配置…ってこのままでええわけないやろー!!まず問題は10%OFFですよね。10%OFFを目立つように修正します。

6_kaerouka_52

まずはカーニング(文字詰め)。1と0の間が開いているような気がするので、少し詰めました。そして%を小さく。小さくするとバランスが良くなります。
文字の色は学割の見出しに合わせてオレンジにすることにしました。
あとは文字飾り。文字が目立つように白枠と…あともうちょっと存在感を出すために、シルバーのグラデーションの枠をつけてみました。グラデーションの色をシルバーにしたのは、お金や値下げを表す色がいいかな…と。赤は値下げの色ですが、なんか合わなさそうだし、ゴールドだったら派手でリッチな感じがして、お得感があまり伝わらないような気がしてやめました。シルバーだとゴールドよりは落ち着いていて、また小銭とか連想させる色なので、お金のない学生さんに向けるのならこっちの方がお得に思ってもらえるかな、と思っただけです。

文字の枠線は、文字に線幅を設定してもいいですし(その場合、複製して同じ物を2つ作って、線幅を設定したものを下に、線幅を設定していないものを上に重ねると、文字が見づらくなくなります。この方法をずっと使っていますが、他に方法あるのかな?)、他には書式メニュー→アウトラインを作成、で、文字をアウトライン化してから、ピンクとブルーの角丸四角形を作る時に紹介した「パスのオフセット」を使ってもOKです。その場合、後から文字の修正がしにくいんですけどね…。

6_kaerouka_55

置いてみました。もうなんかこれで伝えたいことは全部入れられたような気がする。のでええわ、とか思ってしまいがちですが、あとちょっとだけ仕上げをします。何だか見た目が寂しいような気がするので、とりあえず背景に色でも置いてみようかな、と。

背景

6_kaerouka_59

色々色をつけてみました。下校→夕日、みたいな感じでオレンジのグラデーションとか、下校→寄り道→公園→緑色、とか。黄色は目につきやすいかなぁと思って作ってみました。結果、緑色にすることにしました。学生らしい爽やかさも出たんじゃない?

最後、音符

6_kaerouka_46最後に、帰ろう歌、なので、歌らしく音符を飛ばします!音符は簡単、文字ツールで「おんぷ」と入力したら音符が出るのでそれを使うだけ!手抜きでスイマセン。色は黄色を、不透明度は70%にして、ちょっと透け感をつけて配置しています。

完成

6_kaerouka_02

できましたー!1つの歌からのインスピレーション!間に色々小技や自分なりの理屈を挟みましたが、結果はこうなりました。今回は女の子の絵を手前にしたので、女子への訴求力が高いかも。男子を手前に持ってきたり、二人の大きさを同じにするとまた訴求効果が違ってきますね。

同じ歌から連想しても、みんな作るものは違います、それがデザインの楽しいところ!そして、自分はこれがいいと思ってやったのに、おかしい、と言われることもあります…(´・ω・`)ショボーン まぁ勉強になるんですけどね。今回の例は比較的簡単でしたが、自分の手順を公開するのは初めてなので、なんか変、とかあれば教えて頂きたいです…。

それでは!Have a nice design!


  • Pingback: 2013年3月のブックマークまとめ | mugen beer()