書店さんにPOPを置いてみたい！せっかく本がでたのならやってみたいですよね。Webデザインはモニタの前で作って完了してしまうので「モノ」に憧れます。
ということで「スマートフォンデザインでラクするためには」で作ってみました。
著者POPは効果が高い！
らしいですよ！本当は書店さんへ突撃してみたいのですが、書店員さんも忙しかったり、POPを置かない主義のところもあるようですので今回はデータをあずけて書店へ向かわれる出版社の営業さんにお持ちいただくようにしました。
可能であればその場へ行って、その場で描いてみたいですね。
デジタルで作る理由
手書きだけでいいとは思うのですが以下のような理由があげられます。
- うまくかけた文字だけ使える
- 文字ごとに高さや大きさを調整できる
- 色が変えられる
- 後からやり直せる
入れる内容
- キャッチコピー
- 説明
- 著者名
- タイトル
順番は優先順位。POPということで、商品の近くに置かれます。だから本のタイトルは優先順位は低いです。
キャッチコピー
「スマートフォンデザインでラクするためには」に興味を引くコトバってなんでしょう？しかも完結に。
制作中「神が降りてこない」とよくデザイナーさんは言います。
でも神様に頼らなくても、いいものが作れたら嬉しいよね？ということでこんなコピーにしてみました。
あとは前回書いた記事で「神様がかわいい」と褒められたことも理由のひとつです。
説明文
「自立するためのデザインの『考え方』まとめました」としています。
いろいろ描いてみたのですが、版面が小さいのでシンプルにしています。前回の記事が反響良かったのでタイトルも影響あるのかと似たような説明文にしています。
著者名
著者名は念のためですね。著者直筆POPは効果があるらしく、それと分かってもらうために名前を入れてみました。
髪型を自分の名前の「M」にしてみたり。てか可愛く描きすぎだなこれ。
タイトル
本のタイトルは今回いれていません。商品の近くに置かれるので不要ですし、版面をとるので省きました。
作業過程
ここからはその作り方を解説します。
手順は以下
- 素材を手書きする
- スキャン
- パス化
- レイアウト
ライブトレースでらくらくパス化！
さきほど書いた物をスキャンします。わたしはドキュメントスキャナーを使っています。
省スペース+電源いらずなのでカンタンなのです。電源いらずというのは大きいですよね。USBでPCにつなぐだけですぐ起動します。すげー。
読み込んだらIllustratorでパス化します。
画像を配置
トレースしたい画像をIllustratorで配置
画像を選択すると、上部メニュー（オプションバー）がライブトレース用の設定項目に変わります。
画像トレースをクリック
ボタンひとつでトレース完了です。
パス化された
設定項目で微調整
このようにさまざまなプリセットがあるのでお試しあれ。
昔はPhotoshopで開き、階調を直した後に「色域選択」で選択範囲を作成し、レイヤーパレットから「選択範囲をパスに変換」をして、パスの書き出し。を行っていました。ついいつものクセでこれやっちゃうんですが、Illustrator便利になりましたね。
あとはレイアウトしていくだけです。
頭の中で考えていた並びにとりあえず配置してみます。
裁ち切りしたくなったので神様の字のてっぺんを伸ばしてみました。中二病というか、様式美というか、ベタベタです。
メリハリをつける
重要なものは大きく。そうでないものは小さく。ということでキャッチコピーを大きくします。サイズより大きくなっちゃいましたね…。微調整しました。
トリムマークでマスク機能欲しいなー。
裁ち切り具合を確認するのに、わたしはよく白い長方形を使います。マスクを使ってもいいのですが、オブジェクトの増減や微調整が多い場合面倒なんですよね。
「トリムマークでマスク」ってのがアートボードのオプションメニューでオン/オフできたらいいなー。
説明文はコンパクトにしつつ、重要な箇所は大きくしています。
各要素のあしらいを考えてみる
デコレーションの部分ですね。今回は「手書き」がテーマです。
他のPOPを見てみる
検索するとたくさんでてくるので良いですね。
書店・レコ屋さんおPOPを紹介してるブログ PoPooo!
これはすばらしい！ついつい見ちゃいます。POP好きにはたまりませんね。
POP界を見てみると、書籍やハウツーが豊富で世界の広さにびっくりします。梅原 潤一さんという方のPOPがすごくらしいです。本読もうかな。
参考にしてまわりを囲むことにしました。
ストライプを作る
手書きですと色ムラなどがあって風情があるのですがデジタルですと無機質ですね。ちょっと濃淡をつけたいのでストライプを入れます。
長方形を作って複製
このように適当なサイズを作って複製します。数値移動とコマンド+Dで一気に作れますよ。
シアーをかける
斜めにします。
色を変更してみました。
Illustratorで水彩で塗ったようなエフェクトをかける！
適当に鉛筆ツールでがしがしと線を引いたあと、「ブラシ」パレットから「モップ」を選択して色と幅を調整するだけです。
Illustratorハイテクになったなぁ。
Illustratorで蛍光ペン風の線を作る！
POPで印象深いのは蛍光ペン使いです。
こういった線を真似したいですね。
こんな感じで作ります。真ん中へグラデーションした２つのオブジェクトを乗算して重ねるだけなんですね。
Illustratorに色を変えてもらう！「カラーを編集」→「オブジェクトを再配色」
グラデーションを使っていると色を複数変えなくてはいけないのでめんどうです。そういうときはIllustratorにやってもらいましょう。
「メニュー」→「カラーを編集」→「オブジェクトを再配色」を選択します。
ウィンドウが表示されるので「編集」をクリックします。
円形の色相図が出ますので、これでグリグリ動かせば見ながら色を変えていけます。全体の色味を合わせたい場合は、右側のリンクアイコンをクリック。繋がった絵になります。ひとつずつ変えたい場合はそれをハズせばOK。
これで完成！
手書きっぽく見えますか？ あとはプリントして実寸でのイメージをつかみます。
自分の場合は厚紙に貼りつけて、セロテープを全体に張ってPP加工っぽくしてみました。
本の色相に合わせつつも、重要な箇所はアクセントつけられてていいのではないでしょうか。手前味噌。
作ってくれた！
自分の字が下手すぎて死ぬるー。だれかPOP描いて…。
— イシジマミキ (woopsdez) (@woopsdez) January 25, 2013
と、ぐちっていたら「http://handywebdesign.net/」の中の人が作ってくれました！ありがとうございます！
どちらもかわいいですね！文章やレイアウトなどすべておまかせして、どのようなものになるのかを見るのは勉強になります！
もし興味ある方、POPデザイン募集しますので送りつけてやってくださいませ。
お仕事のご依頼はこちら
イシジマ宛のデザインや講演、執筆のお仕事のご依頼は、ザ・マーズナレッジ株式会社までお問合せ願います。
少しでも役だったらシェアしたり、コメントもらえると記事を書くモチベーションが跳ね上がります！
これ、コンビニにいたころよくやったなぁ。：手書きPOPをIllustratorでつくろう！〜POPができるまで〜 http://t.co/bqC6YG3e @woopsdezさんから
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/ZUqWLHTd
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) 書店さんにPOPを置いてみたい！せっかく本がでたのならやって… http://t.co/LoUImuUp
手書きポップとはいいものだ。ビレバンがいい例だ。
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/otlFIseW @woopsdezさんから
[MyInterest][illustrator][デザイン][web制作][design][*thresh25] / “手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナー…” http://t.co/Ofbv0YOV
“手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/5sls6vt7
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/ozpttDY5
手書きをスキャンするっていいよね！／ 手書きPOPをIllustratorでつくろう！〜POPができるまで〜 http://t.co/Q0tLJtYg
(・∀・)ｲｲﾈ!! / “手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/nSzVdUNR
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/JkV7R0o0
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/EvZT2vr1
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/C58GMLDI
[考え方]手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/IA9pbXkU
[web制作][illustrator][素材]やりたかったことができるかもしれん / “手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/wjTHDEDV
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/F0BNCarb
見てる→ 手書きPOPをIllustratorでつくろう！〜POPができるまで〜 http://t.co/2OCILGfi via @woopsdez これいいな
“手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/bXutaBJK
似たようなものを以前作る機会が何度かあったのだけど、またこれは自分と違って勉強になる 手書きPOPをIllustratorでつくろう！〜POPができるまで〜 http://t.co/5FiSY7z5
でも最初の手書きの時点でセンスがいるよね… / “手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ)” http://t.co/DRNxxN37
見てる→ 手書きPOPをIllustratorでつくろう！〜POPができるまで〜 http://t.co/ccmY73Um @woopsdezさんから
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/oRU7kp1n
From my CLIP: 手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/jNSdsU3R
手書きPOPをIllustratorでつくろう！〜POPができるまで〜 | ウープスデザインブログ (デザイナーまめこ) http://t.co/oyR2Qi7g