
デジLIGバナー課題①
こんにちは、にとです。
今デジLIGでWEBデザインを学んでいます。動画教材や課題で何枚かバナーを作成したので、一旦ここまでの制作物をまとめようと思います。
ここまでやってみた感想は、「バナーって手間がかかる。そして難しい。今までしっかり見てなくてごめんなさい(涙)」という感じです^-^;。「思わずクリックしたくなるバナーデザインの基本」という本も買ってみたのですが、目指すべきゴールがとても遠くに感じられ、心折れかけました。
トレーナーさんに相談したところ「場数だ」というアドバイスをいただいたので、また前を向いて頑張ろうと思います!
(以下は単なる制作物一覧なので、興味のない方はスルーしていただければと思います <(_ _)>)ちなみに、Photoshopを使用しています。
「1-2. 課題(動画なし)」以外は、動画の手順に沿って作成しています。
1-1. カフェバナー
学習のポイント
・クリッピングマスクを使った写真の切り抜き
・写真の色調補正
・文字の調整(トラッキング)

1-2. カフェバナー(動画なし)
上記で作成したカフェバナーの、別デザインバージョンを作成する
バナーの目的等は特に指示が無いため、各自で想定して作成します。
バナーの目的(仮定)
・「カフェで仕事」=というイメージを想起させることで、DHW CAFEへ足を運んでもらう。
・「カフェで仕事するならDHW CAFE」というイメージ作り
ターゲット(仮定)
外出多めの会社員、在宅クリエイター
バナー設置場所、設置時期(仮定)
ニュースサイト、クリエイター向け仕事サイト
秋頃の設置を想定

トレーナーからのFB
・ターゲットが広すぎる。
・(当初右下は「WiFi OK」のように文字列も配置していたところ、)アイコンがあるので説明は不要。
・場数を踏めば表現力は向上するので、バナーについてはひとまずOK.
⇒ 合格点には達していないが先に進みましょう、なのかな?^-^;;
感想
課題を見た時はすぐに作れるかなと思ったのですが、「そもそもこのバナーってどこに置くのか、何のためにおくのか」と考え込んでしまい、目的やターゲット設定にかなり時間をかけてしまいました。広告業界についてもう少し理解する必要がありそうです。
2. サイト内バナー(ブランドアイテムSALE)
作成のポイント
・アイテムを前後似配置して、奥行き感を演出
・各アイテムに影をつけることで、立体感を演出
・アイテムの配置は三角形を意識
・背景に薄いグラデーションをかけ、立体感と雰囲気を演出
学習のポイント
・影部分を切り抜き、アイテムと一緒に配置
・薄いベージュでグラデーションを作成し、薄く色付け

3. コンバージョン系バナー(ポイントキャンペーン)
作成のポイント
・お得感や勢いを出すために、文字は太め・大きめで余白は少なめに
・コインをたくさん配置し、ザクザク感と躍動感を出す。
・キラキラの装飾を行い、豪華さを演出
学習のポイント
・Illustratorでパスの変形等を使い、御来光を作成
・文字列やリボンにドロップシャドウをかけ、飛び出している感じを出す
・中央コピー部分には境界線を二重にかけ、目立たせる
・グラデーションオーバーレイで光沢感を出す
・パターンオーバーレイで文字列(「最大200ポイント…」)に装飾
・星を光彩(外側)で華やかに

4. ブランディング系バナー(美容クリーム)
作成のポイント
・ブルー基調で清潔感
・背景を水面画像にしたり、水への映り込みを表現することでみずみずしさを表現
・明朝体で高級感
・4つの機能についてボタンのあしらいを使い、他の情報と差別化
主な加工内容
・クリームの蓋の下に、楕円形ツールで影を作成
・クリーム画像のコピーを反転させ、グラデーションと不透明度で映り込みを作成
・境界線や光彩(外側)で浮き立たせる

いかがでしたでしょうか。デジLIGへの入学を検討されている方や、コース選択で迷っている方の参考になれば幸いです。
今はバナー制作実践の課題(模写)に取り組んでいます。またある程度終わったら投稿しようと思います。