バナートレース｜ミトラボ

【すぐできる！バナートレースの始め方】デザイン初心者がPhotoshopとIllstratorでやってみた

mito — Sat, 25 May 2019 09:28:21 +0000

こんにちは、mito（@mito_works）です！

今回は、デザイン初心者がPhotoshopとIllstratorでバナートレースを30本続けた結果、どうなったのか？何がわかったのか？どのようにモチベーションを維持して30本のトレースを達成したのか？という内容をお届けします。

「独学でデザイナーを目指したい」

「デザインスキルをあげたいけれど何から始めたら良いかわからない」

「デザインの勉強法がわからない」

「バナートレースをやろうと思っていても継続的にできない」

という方の参考になれば嬉しいです。

バナートレースで学べること

あまりに学んだことが多く、これ以降の文章がとても長いので結論から書きます。

学べることは、

「デザインに対してどのようなツールや手法を使って実現するか理解でき、自分で再現できること」

です。

mito

料理で例えるのであれば、カレーを食べてこれは人参とジャガイモと豚肉を使っていて、無水調理で作っているな・・と分かり同じ味を作れるイメージです。

momo

そこまでできるようになると、もっと甘くしたいから、ジャガイモをさつまいもに変えて、黒糖を入れてみようなど自分なりのアレンジができるようになるね！

つまり、目で見たデザインを自分の手で再現できるだけではなく、アレンジして自分のデザインに使えるようになります。

バナートレースとは？

「トレース」とは日本語で「模写、真似する」という意味です。

今回はバナー（広告）に絞って模写をしました。

バナートレースでの素材の選び方

背景単色もしくは1枚の写真＋文字
①＋文字＋簡単なオブジェクト
背景グラデーションやストライプや切り抜き写真＋②

mito

まず文字の余白の取り方、フォントサイズの強弱、フォントの種類を重点的に学び、徐々にイラスト入りや切り抜き写真入りなど要素を増やしていくイメージでやりました。

バナートレースをするときの手順（取り組み方）

Pintarestでトレースするバナーを見つける
近しいフォント、素材を探す
ガイドを引いて配置場所やサイズ感を把握する
PhotoshopとIllustratorを使い分けてトレースする
フォント、カラーその他気づいたことをまとめる

やりっぱなしではなく、⑤の気づきをまとめるということは後から見返して学びが深まるので、やってよかったなと思います。

注意すること

最初の頃は②の近しいフォントや素材を探すに時間を多く使ってしまいがちです。

mito

完璧を目指さずある程度妥協も必要。ちょっと違うけれど今の自分の実力で探せるのはここまでと見切りをつけて次のステップに進むことが大事です。

momo

妥協の目安として時間で区切るのは有効だよ！

バナートレースを継続的に続ける秘訣

宣言する
やる
結果報告＋インプットしたことを即アウトプットすること

上記のことを繰り返すことが継続的に続ける秘訣です。

mito

私の場合、twitterやコミュニティで「やります！」と宣言して自分なりのまとめをつぶやいていました。特にやらないと何か言われるということはないですが、心理的な強制力を作る上で有効だと思います！

momo

思わぬタイミングでコメントや励ましの言葉をかけてもらえたりして、励みになることもあるよ！

＜#バナートレース #20＞
シンプルなバナーほど難しい。。

パスを変形させて、文字の流れるような加工にすること、背景に沈まないように背景の色と文字色のバランスを考えること。

文字が見えずらくなって残念＞＜。
イラレは文字をアウトライン化すると元に戻せないから断念してしまいました。 pic.twitter.com/bsW29qTUvt

— mito@フリーランスWebデザイナー (@mito_works) May 24, 2019

バナートレースのペース配分と内容

2019年3月にPhotoshopだけを使い10本トレースをしました。

この時に、やればやるだけどんどんトレースのスピードが上がり、Photoshopの使える手法も増えることを実感。

mito

ちなみにこの時、デザインはもちろん、Photoshopも触ったことがない初心者でした。

出産＆その後1ヶ月の休養を経て、2019年5月にトレースを再開。
Photoshopは、ある程度使えるようになったと思ったので、次はIllstratorを使えるようになりたいと思い、PhotshopとIllastratorを併用して取り組みました。

期間	ツール	数	ペース配分
1ヶ月	Photshop	10本	平日隔日(60~120分)
1ヶ月	Illastrator&Photshop	20本	平日毎日(60~90分)

1回目のトレースの時は、2時間くらいかかっていたので、かけすぎかなと思い、2回目のトレースの時は特に時間を気にしました。

具体的に、バナートレースを通して成長した点

PhotshopとIllastratorを併用することで再現できないデザインが減った

Photshopだけの時は花びらや傘などオブジェクトの再現ができていませんでした。
よく使う手法もわかってツールを使うスキルとデザインの幅が格段に上がったと思います。

見本と近しい素材（画像やイラスト）を探せるようになった

最初は、画像選びだけでもすごく時間を費やしていましたが、徐々にバナーの雰囲気にあった無料の写真やイラストを探せるようになりました。

mito

トレースでよく使った無料素材はこちらの2つです。

Unsplash
高品質な素材が無料で提供されています。

Unsplash

イラストAC
素材数が多く、目的にあったイラストが必ず見つかります。

イラストAC

見本により近いフォントを探せるようになった

最初は、明朝体、ゴシック体という大きなくくりでの区別はつきますが、明朝体の中での違いがよくわかっていませんでした。

mito

「たづがね角ゴシック」と「ヒラギノ角ゴシック」って何が違うか見分けがつかない！！という感じです。

そしてトレースした際にフォントがしっくりこなくて違和感がありましたが、徐々に「これだ！」というフォントを探せるように。

セリフをさらにくづしたSnell Roundhand。イタリック体だと王道感にプラスしておしゃれに見える

というようなフォントの考察もできるようになりました。

バナートレース #04 -Snell Roundhandで高貴におしゃれに-トレース結果 ※左：Sample 　右：Trace Time 50min Tool illustrator Fon...

バナーを見てどういう手法を組み合わせているのか分かるようになった

結果、大体どれくらい時間がかかるか見積もりが立てられるように。

mito

ただ、シンプルで余白があるものほど目に見えない工夫や技が潜んでいて想定以上の時間がかかるということも・・。シンプルほど奥が深いということも同時に学びました。

デザインの4原則「近接」「強弱」「整列」「反復」を意識して観察できるようになった

ただなんとなく見本に合わせて文字やオブジェクトを配置することが少なくなりました。どういう効果を狙っているのかわかるようになってきたような気がします。

mito

こんな風に考察しています。

バナートレース #13 - スポーティーの作り方 -トレース結果　 ※左：Sample 　右：Trace Size 300×250 Time 60min Tool illu...

「ポップ」「スポーティー」など抽象的な言葉をデザインで表現するためにどのような手法を使うのかわかるようになってきた

まだまだだとは思うのですが、トレースをして少しわかりかけてきました。
デザインの引き出しを増やすってこういうことなんだと思います。

mito

こんな風に考察しました。

ユーモアの表現

バナートレース #09 - ユーモアの表現方法 -トレース結果　 ※左：Sample 　右：Trace Size 300×250 Time 35min Tool ph...

若者向けの可愛さ、ポップ

バナートレース #10- パターンの色と大きさを変える & アートボードからはみ出した部分を無視して書き出す-トレース結果　 ※左：Sample 　右：Trace Size 360×240 Time 90min Tool il...

大人向けの可愛い、シンプル

バナートレース #12 - かわいさの作り方、簡単！波オブジェクトの作り方 -トレース結果 ※左：Sample 　右：Trace Size 1964×900 Time 90min Tool Ph...

スポーティー

バナートレース #13 - スポーティーの作り方 -トレース結果　 ※左：Sample 　右：Trace Size 300×250 Time 60min Tool illu...

ファッショナブルな女性らしさ

バナートレース #15 - 現代的、ファッショナブルな女性らしいデザインとは -トレース結果　 ※左：Sample 　右：Trace Size 360×214 Time 60min Tool i...

↑ここからフォントの考察もできるように

見えてきた課題

背景の効果的なデザイン手法

背景は、写真以外にものグラデーション、ストライプ、パターンで表現の幅が広がるということがわかりましたが、まだ使いこなせていません。

バナートレース #05 -グラデーションとオブジェクトで春らしく-トレース結果 ※左：Sample 　右：Trace Size 300×250 Time 90min Tool il...

バナートレース #06 -リボン作成＆ワープで変形 -トレース結果 ※左：Sample 　右：Trace Size 978×330 Time 60min Tool il...

バナートレース #11 -雨の作り方、シアーで平行四辺形、パスファインダーの分割で可愛らしく、アートボードに中心線を引く -トレース結果　 ※左：Sample 　右：Trace Size 400×600 Time 120min Tool ...

mito

特にブラシ効果がまだ使えていません。

バナートレース #14 -ゴールドの作り方 -トレース結果　 ※左：Sample 　右：Trace Size　980×250 Time 60min Tool il...

適切な文字の加工

文字をそのまま使うのではなく、加工することで随分見え方が変わるということがわかりました。

ネオン風

バナートレース #07 - 文字の縁取りと切り取り、一部回転方法 -トレース結果　 ※左：Sample 　右：Trace Size 440×270 Time 60min Tool il...

象形文字っぽく

可愛らしく

バナートレース #12 - かわいさの作り方、簡単！波オブジェクトの作り方 -トレース結果 ※左：Sample 　右：Trace Size 1964×900 Time 90min Tool Ph...

爽やかに

バナートレース #20 - photoshopで背景の余分な部分を消す、illustratorで文字の変形 -トレース結果　 ※左：Sample 　右：Trace Size 1238×536 Time 70min Tool p...

mito

届けたいターゲットやデザインコンセプトに合わせて、思い通りに文字を加工するまでには至っていません。

写真の効果的な加工

「ああでもない。こおでもない」と時間がかったけれど見本に近づけず・・。

もっともやり直したいものの一つです。

バナートレース #18 -文字の均等配置・両端揃え、背景透過の効果、自然体なたづがね角ゴシック -トレース結果 ※左：Sample 　右：Trace Size 300×210 Time 60min Tool ph...

結局バナートレースで何を学べるか？

一言で言うと、「ツールの使い方」と「デザインを見る目が養われる」ことだと思います。

mito

「このデザインいいな」とただストックしているだけでは得られるものは少ない。とにかく手を動かさなければ習得できないなと思いました。

バナートレースだけでは学べないこと

トレースは誰かが作ったものをあくまで模写するということ。なのでコンセプト、ターゲットなどを考える部分が抜けています。

トレースで身につけたものを実際の案件で使うというように「練習」と「実践」を行き来するのが良いなと思いました。

まとめ

トレースはあくまで手段！ですが、トレースを通して自分のデザインスキルを上げるためにこれからも使いたいです。

バナートレースからデザイントレースへ。50個トレースしてわかったこと＆Tipsこんにちは、mito（@mito_works）です！すきま時間に続けていたバナートレースも気づけば50個になりました。（途中...

mito

バナートレースの次に何をしたらいんだろう？という方向けの記事はこちらです〜！

momo

試行錯誤しながら色々試したことを紹介しているよ！

【デザイン独学】お仕事に繋げるために、バナートレースの次にやったこと今回はバナートレースをいくつかやって「次に何をすればいいんだろう？」と思っている方向けに私が実際にやったことをまとめます。 ...

バナートレース #20 – photoshopで背景の余分な部分を消す、illustratorで文字の変形 –

mito — Fri, 24 May 2019 02:01:18 +0000

トレース結果

※左：Sample 　右：Trace

Size 1238×536
Time 70min
Tool photoshop illustrator
Font 木漏れ日ゴシック
Color #fdcf2f(黄色)、#fb6287(ピンク)、#347db1(ブルー)

デザイン考察

背景に合わせて爽やかで流れるような手書き風文字に加工している
「州」の3つの点と顔がアクセント（強調）になっている
白枠の内側はストライプで塗りつぶし、白の塗りは外側にストライプをつけて背景に消されない工夫をしている。

mito

③がうまく再現できず、背景に文字が沈んでしまいました。白枠をもう少し太くするとよかったと思います。

学んだこと

写真の中の余分なものを消す

加工前

加工後

mito

雲の部分を少し消したいと思います。

レイヤーをラスタライズ

レイヤーが「スマートオブジェクト」になっている場合は、ラスタライズする。
レイヤーを右クリックして、「レイヤーをラスタライズ」を選択。

消したいものの選択

「クイック選択ツール」を使って、写真から消したい範囲を選択。

塗りつぶす

編集＞塗りつぶしを選択。

ウィンドウを開き、内容は「コンテンツに応じる」、設定はデフォルトのままで「OK」を押す。

実行結果

momo

選択範囲はCommand+Dで解除になるよ！

写真の彩度・明度の調整

mito

さらに、彩度・明度を変えて調整したいと思います。

調整ウィンドウを開く

イメージ＞色調補正＞色相・彩度を開く

調整

数値を変更し、調整。

完成

文字を変形させる

momo

以前、文字を回転させることはやったね。今回は、文字そのものを加工していくよ！

バナートレース #07 - 文字の縁取りと切り取り、一部回転方法 -トレース結果　 ※左：Sample 　右：Trace Size 440×270 Time 60min Tool il...

文字ツールで文字を作成

文字ツールで文字を作成する。

momo

アウトライン化した文字を、フォントデータに戻すことはできないので、塗りや全体的な大きさはこの時点で完成させておいてね。

文字をアウトライン化

選択ツールで選択した状態です、書式＞アウトラインを作成　を押す。

momo

文字の変形方法はいくつかあるよ。ここでは2つのやり方を紹介するね！

1.パスの直接編集

ダイレクト選択ツールを使い、パスを動かして文字を変形させる。

2.エンベロープ機能で変形

オブジェクト＞エンベロープ＞ワークで作成

momo

スタイルはたくさんあるので色々試してみてね！

反省点

背景と文字のコントラストをもう少しパキッと出せるとよかったです。
流れるような手書き風文字の加工技術を身につけたいです。

まとめ

今回で、当初目標にしていたバナートレース20本を達成しました。
とても勉強になることがわかったので、定期的に続けていきますが、投稿は一旦終わりにします。

デザイン力アップを目指して、バナートレースはじめます！こんにちは。mito（@mito_works）です。デザイン力アップのためにバナートレースを始めることにしました。ここでは、私な...

バナートレース #19 -[イラスト編]波線のつくり方、太陽光線のつくり方-

mito — Thu, 23 May 2019 02:00:24 +0000

トレース結果

※左：Sample 　右：Trace

Size 379×210
Time 70min
Tool illustrator
Font たづがね角ゴシック（タイトル）、sacrament、ヒラギノ角ゴ（数値、都市名）
Color #ffffff

デザイン考察

線のみのイラストを使い、遊びを演出している
背景の写真を効果的に使っている。
フォントの種類を変えることで強弱をつけている

学んだこと

波線の作り方

直線をかく

ペンツールを使い、直線をかく

パスの変形

選択した状態で、効果＞パスの変形＞ジグザグをクリック

波線に調整する

「ジグザグ」ウィンドウでプレビューで確認しながら、数値の微調整をする

完成

太陽光の作り方

太陽の円をかく

楕円形ツールで円をかく

太陽の光線をかく

ペンツールで直線をかく

光線を増やす

選択ツールで直線を選択し、回転ツールを選択。optionキーを押しながら、円の中心をクリックします。

ダイアログが表示されたら、角度を入力し、コピーをクリックします。

同様に回転ツールを使ってもよいのですが、面倒ですので変形の繰り返し（Command+D）を使います。

完成

momo

変形の繰り返し（Command+D）はかなり使える操作だから覚えておくと便利だよ！

バナートレース #18 -文字の均等配置・両端揃え、背景透過の効果、自然体なたづがね角ゴシック –

mito — Wed, 22 May 2019 01:28:13 +0000

トレース結果

※左：Sample 　右：Trace

Size 300×210
Time 60min
Tool photoshop
Font MT たづがね角ゴシック（タイトル）、Futura（ロゴ）、ヒラギノ角ゴ（メッセージ）

Color #67bdbd(水色)、#ffffff(白色)、#000000(黒色)

デザイン考察

メッセージとロゴは等幅で文字間広め、下のメッセージは文字間詰めており、強弱をつけている。
色は違うが、写真は同じ大きさの長方形、同じようなポーズを反復している。
原色に透明度を加えると、強すぎる主張が消されてシャープな印象になる。（色同士が喧嘩しない）
全体的に色数は多いけれど、写真の4色を背景と考えると、白、黒、アクセントカラー（水色）という3色でシンプルに見える

mito

下部のメッセージのゴシックを文字間狭めて使っていたり、縦長のFuturaを文字間広めに使っていて、通常の使い方とは異なり、印象的になっている気がしました。

学んだこと（Photoshopの操作）

文字の均等配置、両端揃え

「テキストツール」を使い、普通にクリックして文字を入力すると、「段落パネル」の「均等配置」「両端揃え」のボタンは無効になっていました。

momo

これは、通常の入力方法では、「均等配置」「両端揃え」をするための基準となるテキストの左右の範囲が決まっていないためだよ！

テキストの範囲を決めることで、均等配置、両端揃えが可能になります。

テキストの範囲を決める

テキストツールを選択し、キャンバス内でクリック→そのままドラッグして入力範囲を決める。

入力エリアができると段落パネルの「均等配置」、「両端揃え」が有効になる。

テキスト入力と配置決め

バウンディングボックス内に文字を入力し、配置を決める。

フォントの豆知識

momo

タイトルに使われている「たづがね角ゴシック」について解説するよ。

mito

ヒラギノ角ゴシックだと横幅が広すぎて、線も太く収まりがいまいちで・・。たづがね角ゴシックを当てはめると線の太さや少し縦長でシュッとしている感じがしっくりしました。

たづがね角ゴシックの開発経緯

たづがね角ゴシックは、Monotypeのオリジナル日本語フォントです。Monotypeの欧文書体、Neue Frutiger®に合う日本語書体として開発がスタート。

サイン・書籍・広告・Web等、用途を限定しない汎用性の高いフォントを目指して作られています。

momo

2018年度グッドデザイン賞を受賞しているよ！

たづがね角ゴシックの特徴

手書きに近いフォルムで読みやすい
単語の輪郭、文章のすがたを捉えやすい
ゴシックの伝統を活かした安心感と正統感

momo

地下鉄路線図や標識、看板など日常的によく目にするものに多く使われているよ！

課題

写真に、透過した色を重ね、グラデーションオーバーレイで上の方を白くしたので、淡くなってしまいました。正しくはレイヤーマスクにグラデーションかなと思うので、レイヤーマスクを使う方法、習得します。

バナートレース #17 -角丸長方形の角丸微調整、強弱の表現方法

mito — Tue, 21 May 2019 05:24:49 +0000

トレース結果

※左：Sample 　右：Trace

Size　348×348
Time 50min
Tool illustrator Photoshop
Font ヒラギノ明朝 Pro(W3、W6)
Color #68b9cb(水色)、#f0631f(オレンジ)

デザイン考察

四角の枠を作ることで強調部分を表現し、四角の大きさからも強調の順番が一目瞭然。中の文字も大きさに合わせウェイトを変えている。

momo

四角の枠自体はデザインの4原則でいうところの反復だね。

明朝体で統一しているが、サイズ、太さを変えることで、強弱を作りリズムが生まれ、単調ではなくなっている。

mito

一文の中でも文字の色と大きさを変えることで読みやすくなっているね。強弱を効果的に使っているなと思いました。

四角の枠左右でそれ以降の文字も整列させることでまとまり感がある。

学んだこと

角丸長方形の角丸の微調整

長方形の作成

長方形ツールで長方形を作成

スタライズで数値指定

効果＞スタライズ＞角を丸くするを選択。
数値を変えながら適当な角丸に調整する。

完成

バナートレース #16 – 心地よいリズムとまとまり感のあるデザイン –

mito — Mon, 20 May 2019 05:50:25 +0000

トレース結果

※左：Sample 　右：Trace

Size 300×300
Time 30min
Tool illustrator
Font :Avenir
Color #f0e56a(黄色)、#52587e(紺色)

デザイン考察

フォントは全てAvenirを使い、太さや種類を変えることで統一感がある。
斜めの水玉、上下黄色の枠の反復でリズムが生まれている。
ALL THE BEST!を少し右肩上がりにすることで勢いがある。

mito

オブジェクト（図形）の反復と同じフォントで太さを変えることでまとまりがある中でも飽きないデザインになっている気がしました。

前回トレースしたものを同じフォントが使われていました。

momo

Avenirは女性のアパレルでよく使われるのかもしれないね。サンセリフなので可読性が高く、都会的な印象を与えるね。

バナートレース #15 - 現代的、ファッショナブルな女性らしいデザインとは -トレース結果　 ※左：Sample 　右：Trace Size 360×214 Time 60min Tool i...

反省点

ドットはもう少し余白を設ける。
文字の線の太さをもう少し細く。
全体的に女性らしさをもう少し意識して、余白や文字の線を細くした方がよかったです。

バナートレース #15 – 現代的、ファッショナブルな女性らしいデザインとは –

mito — Sun, 19 May 2019 23:03:02 +0000

トレース結果

※左：Sample 　右：Trace

Size 360×214
Time 60min
Tool illustrator
Font Geneva、Bodoni 72（下のロゴ）、Avenir（メイン）
Color #bf1f4c(ピンク)

デザイン考察

サンセリフ体で現代風なデザインになっている。
文字にマスクを書けることで、白の空白を活かしつつ強調されている。
外枠があることで視認性が上がっている。

mito

外枠をつけることで白の空白に範囲が生まれてより強調されています。余白をうまく活かしているデザインだと思いました。

momo

そうだね、枠を設けることで、見る範囲が限定されるので視認性が上がるね。

mito

#14でトレースしたのもそうだったのですが、現代風な女性デザインは、背景が斬新で、外枠がついているという仮説を持ちました。

momo

その仮説を持っていろんなバナーみて見るといいね。あとは、文字にマスクをかけると表現の幅が広がるね！応用が効きそうな効果だね。

バナートレース #14 -ゴールドの作り方 -トレース結果　 ※左：Sample 　右：Trace Size　980×250 Time 60min Tool il...

フォントの考察

メインのフォントAvenir（アヴェニール、アヴニール）

スイスの書体デザイナーであり、UniversやFrutigerをデザインしたAdrian frutiger氏が、1988年に制作したジオメトリック・サンセリフ書体です。

現代的、都会的な雰囲気をもつこの書体、今回のバナーにぴったりですね。

ロゴに使われているフォントBodoni 72

Bodoniはセリフが縦のラインと比べると極端に差があるのが特徴です。アパレルやデザイン事務所のロゴによく使われるフォントだそうです。

momo

この極端にやたらと細いセリフの特徴からモダン・セリフと呼ぶよ！

Bodoniは装飾的面が大きいのでポイントを絞って使うのが良さそうです。

momo

小さい文字で表示すると、縦のラインが引き立ちやすく、ちょっと着飾った大人っぽい印象になるよ！（momoの個人的見解）

課題

セリフ体についてどれも同じに見えてしまいます・・。もう少し見分けがついて、ターゲットやデザインごとに使い分けられるようになりたいです。

バナートレース #14 -ゴールドの作り方 –

mito — Sun, 19 May 2019 04:37:05 +0000

トレース結果

※左：Sample 　右：Trace

Size　980×250
Time 60min
Tool illustrator
Font DIN Condensed Bold、Times New Roman（ロゴ）
Color #d20e53(ピンク)

デザイン考察

背景のピンクとゴールドがインパクトと勢いがあり、先進的な雰囲気がする
文字と背景のコントラスト（強弱）がはっきりしていて女性らしさのピンクの中にも強さを表現している。
文字は縦長で文字間が狭く、スマート。
背景の塗り方に広がりがあるけれど、枠を作ることで視認性をあげている。

mito

背景の「ブラシの塗り」と「枠線」という2つの要素同士、強弱をつけてるんですね。

momo

文字は、下揃えに整列することでスッキリまとまり感があるね！

学んだこと

ゴールドの作り方

少しサンプルとは異なりますが、グラデーションをつけることで実現しました。

背景作成

（わかりやすくするため）長方形ツールで黒塗りにしました。

フォント作成

背景の上にフォントを重ねる。

塗りの追加

アピアアンスパネルから塗りを追加

グラデーション作成

グラデーションパネルで3箇所の色を設定し、グラデーションを作成

完成

必要に応じてフォントや背景を変更し、完成。

反省点と課題

フォントはもう少し細めのフォントで余白を作るとより女性らしさがでると思いました。
今回背景は、素材を用いたのでブラシで書けるようになると表現の幅が広がるなと。
こちらを使わせていただきました。
（Rawpixel.com – jp.freepik.com によって作成された background ベクトル)
キラキラのゴールドの文字についてもどうやって実現するのか調べます。

バナートレース #13 – スポーティーの作り方 –

mito — Sat, 18 May 2019 05:51:24 +0000

トレース結果

　
※左：Sample 　右：Trace

Size 300×250
Time 60min
Tool illustrator Photoshop
Font ヒラギノ角ゴPro(メイン、サブ)、木漏れ日ゴシック（痩せる、上がる、ハマる）、コーポレート・ロゴＢ（ボクシング,暗闇、音楽）
Color #de7321(明るめの茶色)

mito

「木漏れ日ゴシック」はそのまま使うには線が細すぎたので、アピアランスパネルで黒の線を追加しています。

デザイン考察

メインとサブのメッセージは文字を縦長にしてシャープ感を出している
文字全て右肩上がりにすることでスピード感、勢いを出している
太めのゴシックを文字間を狭めて使うことでかっこよさを演出。
全体的に文字は多めだけれど、反復と強弱をつけることでリズムが出ている。

デザインの「4原則」でさらに考察

デザインの「4原則」とは？

webサイト・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインするために知っておくべき基本原則です。

近接　＝　まとめる
整列　＝　そろえる
反復　＝　くりかえす
強弱　＝　メリハリをつける

デザインの4原則をもっと知りたい方はこちらの本をどうぞ

ノンデザイナーズ・デザインブック［第4版］

posted with ヨメレバ

RobinWilliams/吉川典秀マイナビ出版 2016年06月30日

楽天ブックス

Amazon

Kindle

momo

良いデザインと言われているものは基本的にこの原則が守られているよ！

mito

４つの原則がどう使われているか分かれば、デザインスキルも上がりそうだね！

momo

この4つの原則を意識してバナーを見てみよう。

考察

全体的に、文字を右肩あがりに「整列」。
メインメッセージ、サブメッセージなど情報の塊ごとに「強弱」をつけて塊ごとに「近接」。一番下の部分のオブジェクトは、3回「反復」させています。

その結果、リズムが生まれて、スピード感と勢いのあるデザインになっています。

momo

このスピード感と勢いがスポーティーさを作っているんだね。

バナートレース #05 -グラデーションとオブジェクトで春らしく-

mito — Wed, 08 May 2019 02:15:08 +0000

トレース結果

※左：Sample 　右：Trace

Size 300×250
Time 90min
Tool illustrator
Font 小塚ゴシック Pr6N R、Arial Black（数字）
Color #ff7dad、#ffcccc、#fcbed1

デザイン考察

強調したい数値と季節感のでるオブジェクトを組み合わせて自然に目立たせている
背景をグラデーションにすることで柔らかさが出る
ピンク系しか使っていないけれど、情報の訴求順位でピンク色を使い分けている

学んだこと

300 × 250 pxのサイズに対して、「新生活応援セール」は40px、「50%」は20px。「50%」の方を強調したいので、フォントサイズは小さいけれど、背景にオブジェクトを重ねることで強調している。

mito

グラデーションの威力を感じました。ピンク系の配色のみしか使っていないけれど、グラデーションと文字色を細かく変えることで単調にならずより柔らかくなり、春らしさが強調されています。

momo

グラデーションを使いこなせるようになると、表現の幅が広がるね！

反省点 & 課題

mito

「新生活応援セール」の外枠の線幅、1pxにしたけれどもう少し太くしてもよかったなぁ。桜のオブジェクトの形がいまいち収まりが良くないのと、グラデーションがかかってしまったのも気になる…

背景のパターンもできなかったので、時間があるときに取り組みたいです。