【デザイン①】デザインの基礎と流れ

11/20からスクールの授業が開始して、本格的に勉強を始めてから10日が経過しました！

3回の授業が終わったので、記録を残していきます♪

まず初回授業では、photoshopの基本操作を学んでいきます。レイヤースタイル、色調補正、マスク、描画モードなど。

photoshopは元々インストールしていて、自分でなんとなーく使ったことはあったけど、使いこなせていなかった機能の多さにびっくり！（今でも多分全体の2割くらいかな、、）

あとは驚いたのは、ショートカットの多さと便利さ！PC自体の操作でも、photoshopのアプリ内でも。ショートカットをいかに使いこなせるかで、制作にかかる時間がすごーく変わってくるんだなと感じました！
（これまではCommand +C、Command +V、Command +Zくらいしか使いこなせてなかった、、）

いきなり全部を覚えるのは難しいけど、暗記というよりは使って慣れるしかないかなと思うので、一つずつ身につけていきます！

授業では、習った基本操作やデザインのポイントをもとに、まずは先生と一緒に模写する形でバナー制作を行なっていきました。今回は化粧品のバナーです！（私の大好きな分野でテンション上がります♪）

〜デザインの流れ〜

①要件を確認する
②デザインコンセプトを固める
③イメージや素材を集める
④情報の優先度を決める
⑤手書きでワイヤーを書く
⑥白黒でデザインしてみる
⑦カラー・写真・装飾を適用する
⑩最終調整

いきなりデザインから入るのではなくて、流れに沿って順序立てて行なっていくことが大切。情報の優先順位を見極めて、誰に何を伝えたいのか、軸をしっかりと決める！

バナーのほとんどはクリックしてもらう事が目的の広告としてデザインされているため、どれだけかっこよくてオシャレなデザインでも、クリック率が低いと差し替えられてしまうのだそうです。

だからこそ、誰のため、何のために使用されるものなのかをしっかりと事前に考えておかないといけないんだなと感じました。

言われてみればすごく納得ですが、これは自分ではなかなか気づけなかったポイントでした。（デザインが良ければ、それでいいという感覚を持っていました。）

今回の化粧品バナーに関する詳細は以下の通りです。

■入れたい情報
・2年連続ナンバー1の実績があります。
・1週間分のプレゼントをしているのでその情報（送料無料です）
・7月31日までですが、10%OFFのキャンペーンをしています。

注意書きとして、検証期間も記載
※オンラインショップ売上（2012 年4月〜2013年10月）

■色味
落ち着いた印象でキツめでなければOKです。
パッケージが白いのでカラフルはNG

■バナーサイズ
・300 ✕ 250
※あとで複数サイズに展開します

■目的
購買してほしい。リンク先はLPになります。

■ターゲット
30代中盤〜40代前半の女性がメインとなります。

そして、先ほどの流れに沿って進めていき、完成したのがこちらの作品です。

普段自分もwebサイトを見ていると、このような広告をよく見かけますが、

何気なく目にしている広告ひとつひとつが、こんなにもたくさん考えられて、工夫されて作られているんだなと思うと、なんだか感慨深かったです。

デザイン力を鍛えるためにも、これからは普段の生活の中でバナーや広告を見かけた時も視点を変えて、目的やターゲットまで分析するなど意識を日常にも落とし込んでいけたらなと思いました。

次回は、初めてのオリジナルバナー制作についての記事を書いていきます！
ここまで読んでいただきありがとうございました^^