後編【Webデザイナーを目指す人へ!】何故バナートレースでデザインスキルを身につけるのか?




こんにちは。
coffeebreakの中の人です。

この記事にご訪問したほとんどの方が、将来Webデザイナーになりたい、まだ未経験だけどこれから目指したいとお考えではないでしょうか。

または前編記事をご覧になり、とりあえず続きを読んでみようと言う人がいればうれしいです。

前編は、バナートレースに必要なフォトショップの操作方法と、セットで身に付く工数削減ファイル管理のヒントについて記事にしました。前編の内容はバナー以外の制作でも役立つきっかけみたいなのも含んでいるので、ステップアップしていっても基礎部分の操作は忘れないようにしておきましょう。

【関連記事】
前編【Webデザイナーを目指す人へ!】何故バナートレースがデザインスキル上達に最適なのか?

さて、前編ではバナートレースのやり方ひとつで身に付くスキルが変わると書きました。後編ではのこりの2段階をご紹介していきます。
「記事を読むだけ」ですが、皆さんが学んでいる事に加えてみませんか?何かヒントに繋がるならうれしいかぎりです。

ご注意
独学出身という事もあり私のデザインノウハウはセオリーと違う場合が多々あります。
そんな時は、失笑しながら記事を読んでいただければ幸いです。

第3段階 目コピトレースで身につくバナーデザインスキル

第3段階は、参考バナーを横に配置して見ながら制作する方法です。
この段階が従来のバナートレースの作業になると思いますが、少しずつトレーニングのハードルを上げて行くのをお勧めします。

それでは、最初のステップで身に付きそうな主なスキルの紹介です。
ここからは参考バナーにそって記事を確認してください。

ガイドを使い目印つけながらトレースする

ガイドを補助にして高さ関係や天地の関係性を確認してください。素材同士が程よい距離感で存在していると思います。マージンや余白の知識をバナートレースで身につけるのが狙いです。

覚える事
マージン、余白、天地の習熟は必須

メインカラー、書体、素材のレイヤー構造を理解する

色数(何種類の色で構成しているか)やグラデーションの具合(色幅はどれくらいか)、書体(明ゴ強さといった設定)、どのようなレイヤー構造で参考バナーが成り立っているのか調べる。
なお、文字感は目安にする設定がある方が詰まっているのか広がっているのか分かりやすいので「ご自身が身につけた方法で」をおすすめしています。私は、iOsのテキスト文字間に程よく近いメトリクスのトラッキングを75pt間隔で覚えています。

覚える事
参考バナーの成り立ちをいくつかの軸で推測する

参考バナーの情報を抽出する

特にカラーについてはスポイトで抽出しましょう。
正直な何色を使うとか目で見て完全再現は不可能です。ただし、全て抽出すると肌間隔が養われないのでスポイトは2〜3点にとどめましょう。

覚える事
最初は16進数をパクってもOK

背景のあしらいや装飾など、出来るだけ再現する

横に置いた参考バナーを見ながら情報あしらいや装飾のパーツ作成をおこないます。
細部の作り込み方法は人それぞれだと思います。まずご自身で出来る方法を考えて実践してみましょう。
実践した方法はどのように工夫すればもっと早くできるか、別の方法で同じ事はできないか研究しましょう。
この段階で7割程度完成に近づいたのではないでしょうか?

覚える事
細部の作りはパターン性が少ない場合があるので自力です。

ガイドを外して最初からトレースする

次は、参考バナーの情報を目でみて捉えられるようにガイド補助無しで第3段階を復習しながらバナートレースしていきます。
この段階で、参考バナー、補助付きバナー、補助無しバナーの完成です。

それぞれの違いを確認して結果どこが苦手な作業なのかを確認しておきましょう。
デモで制作したバナーを参考バナーに除外モードで確認してみました。
この方法で文字が見える見えない、画像の配置とか視認性が低い部分は苦手なデザインスキルだと確認できます。


覚える事
弱点を知っておく。

第4段階 初見トレースで身につくバナーデザインスキル

ここからは、デザイナーとしてチームに指示していく事も視野にいれた制作トレーニングです。
見出しの通り、初見でバナーを確認してどうやって素早く参考バナーまでたどり着くかを養います。

初見で一番伝えたい要素とそれに紐づく要素を確認する

バナーには必ず伝えたい情報があります。逆に書いておけばそれでいい情報もあります。
文字の大きさや配色で優先順位を付けているので見つけていきましょう。

参考バナーからは「モデル」「秋」「コーディネート」「アイテム」といった情報でしょうか。
それに紐づくテキストが「STYLE BOOK」ですね。

覚える事
訴求の優先順位が何かを養う

初見でどのようなブロック(構成)で成り立っているか確認する

参考バナーがどのような構成になっているかを覚えます。
バナー構成はある程度パターンがあるので、事前にまとめておくのも上達方法のひとつです。

覚える事
構成パターンに当てはめて完成までのマヌーバを作っておく

初見で背景の印象を◯◯風といった自分ルールで考える

様々な背景処理があり、技法みたいな名称があるとは思いますが、ご自身で言いやすい名前を付けておくと覚えやすい隠語みたいなものでしょうか。例えば○○風といった親しみやすい形が伝えやすいと思います。

覚える事
自力で作っていた細部は伝えやすい言い方に変換しておく

最後は参考バナーを見ないで一気に作る

正直言うとそこまで記憶できないので参考バナーに近いバナートレースは初見では出来ません。
でもそれでいいのです。養ってほしいのはパっと入る情報と情報に紐づく流れ、その流れがどのような配置で構成されているのか、背景は◯◯風なのかをご自身のチームへ簡単に指示できる情報を養えていければ問題ないです。
参考バナーに近づく程、指示が的確明確になっていくかもしれません。

覚える事
将来指示できるように技術の伝え方を養う

後半終了!

記事内のノウハウを実践するのと必要数をこなしていけば、レベルアップしていくハズです。
ちなみに延長戦はありませんが、再練習は繰り返した方が上達は早いと思います。

さいごに私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。
ありがとうございました!

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

前編【Webデザイナーを目指す人へ!】何故バナートレースがデザインスキル上達に最適なのか?

2018.10.21

【第3回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.30

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

【年齢層別・乾燥肌】化粧品・コスメのランディングページ(LP)デザイン5選

2018.09.29

【5選】ダイエット訴求のランディングページ(LP)を調査してデザインを研究してみた

2018.10.07

【第2回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.23

前編【グラデーション効果】photoshopのツボとコツ!未経験でもワンランク上のWebデザイナーになろう!

2018.11.03


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google