デザイントレーニング編03【デザイン】
こんにちは。いぬのパグです。
今回は、デザイントレーニング編03【デザイン】と題して、
Adobe自体全く触ったことのなかった私が、AdobeXDというものを知り、基本操作に慣れ、ワイヤーフレームを作ったので、
今回はついに！！！「デザイン」していくトレーニングを紹介していきます。
01（自己紹介カードのデザイン）
１）構成：自由。自己紹介したい内容を盛り込んでいく。
２）アートボードサイズ：W1366 H768
３）作り方
❶まずは構成（ワーヤーフレーム）を作る。
❷次に、デザインテイストを決める！
❸デザイン制作を行う。
前回…
私が入社した歓迎会を行ってくださるということで、その際に使用する自己紹介カードを作ることになり、ワイヤーフレームを作成したところで終わりました。
そのままOK、通ったので今回デザインしていきます。
出来上がったデザインがこちら！
01（苦労した点）
Q１）まずデザインって何？？？何すればいいの？？？
▼
A１）調べる！面白いギャラリーサイトがいっぱいあるよ。
Q２）統一感を出すのが難しい、ただごちゃごちゃしただけになりそう…
▼
A２）本文のフォントサイズは統一させたほうが読みやすい。全体的にラフな感じにするには、一度列や行を揃えてから崩すと良い。揃えるところは揃えて綺麗に。タイトルは大きめにしてアクセントとして活用するなども良い。
Q３）点線で区切りたいけど、して良いのかな？
▼
A３）OK！そういうのもアリ！
ただ、点線に対する各スペースの余白は統一させる。
Q４）写真の色がなんだか暗い…
▼
A４）写真はPhotoshopで明るく調整する。写真も右クリックでPhotoshopで編集というボタンが出てくるので、そこから編集すると良い。
Q５）手書き風、雑誌風にしたい…
▼
A５）切り抜き画像などを入れるとそれっぽくなる。切り抜き画像には影をつけて動きを出す。余白を設けたり、写真をはみ出させたりしよう。
今回は上司からのアドバイスがそのまま知識になりました！「デザインとはなんぞや？」だった私。作り終わっても「デザインとはなんぞや？？」でした。「これでいいのか？」の繰り返し。
トレーニングを重ねて実際に手を動かして、いろんなサイトを見て、少しずつ少しずつでも前に進んでいけるような知識を蓄えていけたらいいなと思います。
デザインって、潜れば潜るほど本当に底がなく深くて、その潜る方向も四方八方に広がっているような気がしています。終わりがなくまたそこが面白く楽しいなと感じています。
02（バナーデザイン）
次の課題は、バナーのデザインです！
設置場所：ECサイトのサイドメニュー
商品概要：冬限定一口チョコ。普段高いが今だけ割引価格で売っている
ターゲット：20〜40代の働く男女
イメージカラー：白、水色
バナーサイズ：W400×H400px
キャッチコピー：ちょっと一息。贅沢をお裾分け
割引期間：11月１日〜12月31日まで
割引価格：20％割引
参考バナーサイト
初めてのバナー作成です！
上司が教えてくださったバナーサイトを参考に、まずは「バナーというものをきちんと知ること」から始めました。
サイズは小さいながらも多くの情報を強弱をつけながら、うるさくなりすぎないように綺麗に入れていく。インパクトやグッと印象に残るものを作る。「こ、これはむずかしいぞ…」と眉間に皺を寄せました。
とは言っても手を動かし、情報を集め、進めていくしかありません。デザインの知識やストックなどはまだまだまだまだ（まだが多い）私の中にはないですから、「やってみる」が一番goodな方法です。
これ実は「こばやす@kobayas_s」さんという有名なWebデザイナーの方の「バナーお題」の中のお題の一つだったみたいですね！
noteやtwitterなどでお題を提供しているみたいなので、トレーニングをしてみたい方は是非覗いてみてくださいね。
できたものがこちら↓
「ちょっと一息しているシーン（画像）を見せているのがキャッチを分かりやすくしてgood！！」と、褒められたー！やったー！
02（苦労した点と上司からのアドバイス）
Q１）チョコレートのたれ感を目立たせすぎないようにする。
▼
A１）情報の優先順位をはっきりとさせる。
１：チョコパッケージ
２：一息
３：OFFや期間
４：チョコ
Q２）各パーツ（チョコパッケージ・コピー・OFFや期間・女の人・たれ）のサイズ感が難しい…
▼
A２）テキストサイズは全て統一するのではなく、日付や数字は大きくしたり太字にしたりして強調する。
Q３）大人っぽくしたいけど指定カラーは水色で、うまく雰囲気が出せない…▼
A３）水色はベタ塗りの水色だけじゃない！グラデーションや、写真、あしらいをうまく使って大人の雰囲気を出そう！
上司からのアドバイスをそのまま修正へと繋げました。
02（良かった点）
あくまでも自己評価ですが、たまには自分を誉めていくことも次へのモチベーションになると思い、今回は良かった点という項目を入れてみました。上司アドバイスをいただき実践したものがほとんどですが！
Good １）筆記体の「Chocolate」という文字をグラデーションにして配置したのは、「大人な雰囲気」出しとして良かったと思います。
Good ２）雪の結晶を細かく散らしたこと。というのも上司からのアドバイスで行ったのですが、「冬」限定というイメージに結びつきやすくなったので良かったと思います。
Good ３）キャッチコピーの背景に白いぼかしを入れることで、可読性が上がりました。
Good ４）チョコレートのたれを入れたことで「これはチョコレートの広告だ！」と誰でも即座に分かるようになったと思います。
Good ５）背景や筆記体のテキストのグラデーションと、チョコレートのパッケージや下部の図形のベタ塗りが差別化されていて良いです。
得た知識
１）テキストのグラデーション方法（雰囲気が良くなる）
①テキストをダブルクリックで選択
②左上のメニュー、オブジェクトでパスを選択→パスに変換
③プロパティインスペクターで塗りを選択→カラーの上部「ベタ塗り」の横の下矢印をクリック
④好きなグラデーションを選択
２）背景にぼかしを入れる方法（キャッチコピーの可読性が上がる）
①キャッチコピーの背景に長方形ツールで図形を作成→任意の色に変更
②プロパティインスペクターの下部「効果」から「背景のぼかし」の横の下矢印をクリック
③「オブジェクトのぼかし」を選択→任意のぼかし具合に変更
３）写真はPhotoshopで明るく調整する。
４）切り抜き画像には影をつけて動きを出す。
５）タイトルは大きめにしてアクセントとして活用する。
６）情報の優先順位をはっきりさせる。
７）日付や数字、限定などは強調する。
最後に
以上、伸びしろだらけの未経験ディレクター初めての「デザイン」でした！どうだったでしょうか？終始「デザインとは？？？」で、今も手探りで「とりあえずはやってみる」の精神で突き進んでいる私ですが、どのトレーニングも本当に楽しくて面白いです。
私が今作っているものは、見る人によっては「そんなのデザインじゃないやい！」と言われてしまうようなものかもしれません。でも、いつでも、どんな人でも、飛び込む勇気さえあればデザインの海に潜ることができます。
必死に足掻いて息継ぎをしながら、水の重さを知り、手足の動かし方を身につけていきます。その様子をどうか温かく見守っていただけたら幸いです。
デザインの海では、基本的な型や道筋はもちろんありますが「泳ぎ方」や「進む方向」は無限にあると思っています。もちろんそこに面白さや楽しさ、苦しさや悔しさ・もどかしさがあります。くれぐれも程よい「息継ぎ」を忘れないように。頑張りすぎないように頑張っていきましょう！アドバイスもどしどしお待ちしております！
次回もバナー作成のトレーニングです。
それではまた次の記事でお会いしましょう！
そのほかの記事はこちら。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？