バナー作るよ
なんだかんだで、ポートフォリオサイトの制作をまだ続けています。
平日少しずつ改修しているのですが、トップページの絵があんまりにもあんまりではないかと、家人に指摘を受け続け・・・、他のコンテンツも何とかまとまってきたので、仮置きのものから差し替えることにしました。
折角なのでバナーっぽく作ろうと思い、今回はペンツールの練習も兼ねて、イラスト系バナーを制作したいと思います。
「なにこれ？」な元画像。
制作時間
先生方から聞いた、実務現場のバナー制作の時間は、1つ15分が目安らしいです。
（↑ 数をこなす単価が安い仕事の場合。高級感の求められるバナーは、もっとじっくり作ることもあるそうです。）
・・・15分はちょっと難しそうなので、絵の練習も兼ねているというエクスキューズ付きで、半日くらいを目標に作りたいと思います。
Illustratorでラフを描く
ブラシツールで、ラフを描いていきます。
学校でも知らない子が結構いたのですが、お絵かきソフト同様のブラシはIllustratorにもついていて、ショートカット「B」でツールに切り替えることができます。
マウスで描いたぐにゃぐにゃの線でも、適当にきれいなパスにしてくれるので、とっても便利です。
卒業生のポートフォリオサイトを見ていると、『モバイル対応だと、スマホ画面を切り取って中にサイトの画像を配置して…』
といった絵が定番なようですが、
せっかくなので「スマホサイトが快適に見られることで生まれる便利な生活」みたいなイメージでラフを起こしてみました。
ちょっと伝わりにくいかな？どうかな？
ラフ画をページに仮置き
ページ上に仮置きして、色や文字のバランスを見ます。
先に作っていた別のバナーのレイアウトと、メインとなる文字の位置が同じだったので、文字位置の配置替えを行いました。
（どうも私は無意識だと、左下にメイン文字を配置してしまうようです。）
先に作っていた別のバナー
バナーといっても、600×400pxなので結構大きいのですが、スマホ版ではこれをボタンに使うので、用途としてはやっぱりバナーです。
参考サイト
・キャラクターの目の高さにメイン文字を置くと効果的？
（ ↑ 人が顔の中で目を一番に見るという習性からの推測です。）
・背景はカラフルに塗ってるのが多い。
（テキストベースのニュース系サイトなどは白いので、目を引くようにでしょうか？
サイト自体のbackgroundが色ついている場合はどうしたら・・・）
・イラスト内の人の数は、面積が狭いこともあってか、メインキャラクター1人or2人が多い。
（やっぱり、メインキャラが中央にドーン！の方が、ストーリー型コンテンツは印象が伝わりやすいです。少年漫画だって群像劇とか流行らないですからね。ただしソーシャルゲーム系は5人以上並んでいるようなのも。）
・多人数が並んでいる場合は、モブ的に小さく配置。
（リンク先のビオレのバナーが、今回一番参考になったかも。）
・サービス名は必ずしもメインではない。
（興味を持って押してもらうことが主目的なので、インパクトとして強い、キャッチコピーの方が面積的にも重視されているようです。
ただし、まったく名乗らないで良いというわけでもないようです。道端で名前の分からない人についていく人がいないのと同じですね。）
続きます
webdesign-nonnna.hatenablog.com
