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




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

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

普段どのようにWebデザインスキルを磨いていますか?
働きながら独学でデザインの勉強をしたり、職業訓練でデザインを学んだり、インターネットアカデミーで情報交換したりと「Webデザイナーに転職する!就職する!」目標に向かって習熟に励んでいるのではないでしょうか。

私もその一人でした。独学という形でWebデザインの勉強をして、知り合いから仕事を分けてもらったり、資格を取ったりしながら実績を積み重ねてWebデザイナーになったのです。

私の習熟過程ではスピードを上げてデザインスキルを学んでいくのに、バナートレースが最適でした。

バナーは限られた領域の中で必要なニーズをギュッと詰め込んでいるので、デザインスキルが豊富。

かっこ良く言うと、バナーはサイトの中にあるウェブサイトです。ウェブサイトのトレースでもデザインスキルは身につきますが、最初からトライするには領域が大きすぎで途中でお腹いっぱいになります。

まずはバナートレースでデザインスキルを磨いてく、それがWebデザイナーになる近道なのかもしれません。

実は、バナートレースのやり方次第で身に付くスキルが変わってきます。
私が学んだ中では4段階あって、順番にご紹介していくので余裕がある方は記事を読んで調べて試してみてください。
「記事を読むだけ」ですが、皆さんのヒントに繋がるならうれしいかぎりです。

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

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

第1段階は、どのフォトショップの機能を優先して扱うのかを

ゆっくり、

じっくり、

ご自身のペースで、

身につけましょう。

それでは、最初のステップで身に付きそうな主なスキルの紹介です。

フォトショップのツール操作を覚える

選択、枠、ペン、テキスト、シェイプ、色、スタンプ、スポイトツールはバナー制作で頻繁に使います。まだショートカットは覚えなくていいのでそれぞれのツールがどのような時に有効なのかをトレースしながら覚えてください。

覚える事
バナートレースに有効なツールを覚える

使うフォントを絞り込む

まず日本語フォントの明朝体、ゴシック体の二つ。ヒラギノか小塚だけで作ってみましょう。
必ず合わない日本語フォントが出てくるので、書体の特徴を見ながら別のフォントを探してみてください。

なぜ2つのフォントだけなのかですが、バナーデザインしまくっているデザイナーさんは手に余る程フォントを所有していますが、9割以上は使用していません。手慣れたベストメンバー(フォントのこと)と案件によって活躍するサブメンバーだけで制作しています。だから限られたフォントで勉強するのも有りだと思ってます。

【関連記事】
そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

覚える事
大量なフォントは必要ない

様々な効果のパラメータを障りデザイン装飾を調整していく

今では当然の様に使っている効果は、すごい古いフォトショップに無かった機能です。
CCの前のCSというシリーズ辺りから登場した機能で、当時は画期的だったのではないでしょうか?
まず効果は境界線、グラデーション、ドロップシャドウ、光彩(内と外)のパラメータ調整を駆使して参考バナーそっくりな陰影を目指しましょう!

覚える事
パラメータ調整でデザインがどのように変化するか覚える

カーニング操作を覚える

テキストツールからキーボードで文字を入力すと、なんだか気持ち悪い文字同士の距離感を感じませんか?
プログラム上で自動的に間隔を調整されていますが、あくまで自動処理です。参考バナーはしっかりと文字間を詰めたり広げたりしています。
カーニングで文字同士の気持ちよい距離感を保ってみてください。

覚える事
気持ちよい文字同士の距離感を覚える

細部のデザインが分かる

ご紹介した項目だけでは、参考バナーの細部の調整は仕上がらないと思います。
例えば背景色が単調ではなく、凸凹だったり柄が入っていたりしてます。
パターンを使えば処理できますが、まずは参考バナーの細部のこだわりに気づく事を優先しましょう。

覚える事
細かい処理が施されているバナーが何故必要だったのかを考え真似してみる

配色の統一感を理解する

同じようなカテゴリで複数の参考バナーを比べると配色数やトーンの統一をしているのが分かると思います。
配色のトレーニングはメインカラーが2~3色、サシ色として1色を加えた参考バナーを見つけてトレースしてみてください。
配色は学問的に研究されていますが、トレースを繰り返すと肌感で身に付きやすいです。
明度や彩度、補色の理解は必ず身につきます!

覚える事
統一感は肌感で!※私はアウトスケールが大切だと考えていて理屈だけではその枠から外れないです

第1段階をおさらいしてバナーとレースしてみましょう!

アイキャッチの画像をバナーにみたたてトレースしてみましょう。
10分くらいで仕上げたデザイン処理ですが、細かい調整を詰め込んでいます。第1段でお伝えした内容だけでどのような処理をしているか確認してみてください。
※写真素材は写真ACを使いました

挑戦する事
時間はいくらかかってもいいので、第1段階の項目を振り返ってください。

第2段階 大量トレースで身につくバナーデザインスキル

しっかりとひとつのバナートレースが出来る様になったら次のステップで、
大量にバナートレースする時に役立つワークフローのスキルが身につきやすいです。

フォトショップのツール操作の最適化

※説明はwin環境です。
選択[V]、枠[M]、ペン[P]、テキスト[T]、シェイプ[U]、色[X]、スタンプ[S]、スポイトツール[I]は、あらかじめキーボードのショートカットが設定されています。頻繁にマウスで動かしてツールを扱う場合はショートカットに切り替えていきましょう。

覚える事
キー1つのショートカットから覚えるのとショートカットの9割は左手で完結できるのを知っておく

キーボードのショートカットをもう少し覚える

※説明はwin環境です。
保存、戻る、進む、色相彩度、レベル補正等はaltキー+(それぞれのキー)でショートカットできます。
このようにaitキーから始まるキーのたたき方で様々なショートカットが存在しています。
※ショートカットキーは、フォトショップのバージョンによって変わるのでアップデートごとに都度確認が必要です。CC2019から戻るはもっと簡単になっています。

覚える事
altから始まるショートカットは案外便利

ショートカットを設定する

普段ショートカットとして使わないキーを任意でショートカットキーとして登録できます。
例えば、web用保存をjpgにして圧縮率を50%で書き出す。このような流れは、JSXファイルを使って2個のキーで実現できます。

覚える事
JSXファイルや自動スクリプトといった時短方法がある

重複作業を発見し工数削減する

大量バナーを同じフローで作っていると、実は重複する工程がある!なんてことないでしょうか?
私の場合は、ずっと同じやり方で作業したり、ひとつずつバナーパーツを完成させたり、各工程で確認を何度もしたりと慎重に作業をこなす事がありました。
もし、同じ結果になる作業で、結果的に早くできる工程があれば早い方に切り替えてください。
バナーパーツひとつずつ完成させるより、まとめれる作業工程があればまとめたほうがいいです。
トレースの確認回数(fixの場合)は2回にして、どの工程のタイミングで2回の確認をすれば品質を落とさずにトレースができるかをご自身の制作フローを見直してください。

覚える事
品質は時間をかけなくても担保できる方法はいくらでもあるのでめんどくさい作業方法は見直したりネットで調べてみたりする方がスキルアップに繋がる

レイヤー構造のルール化をしておく

各レイヤーの関係性を整頓できてますか?選択ツールに頼りきりで、レイヤー構造がおろそかになっていては、誰かが見直すときに混乱します。バナーパーツごとにレイヤーをグループ化したり、ぱっと見でグループフォルダの中身がわかるレイヤー名のしたり、バナーの配置ごとにレイヤーを重ねて行く順番をルール化することで、見やすいファイルが完成します。

覚える事
整理整頓はパソコンの中でも必須!自分以外も編集するファイルと意識しておく!

フォルダ構成やファイル名のルール化をしておく

フォルダも編集フォルダや納品フォルダや素材フォルダを統一感のあるフォルダ名で分けておくとあとでフォルダを追いやすいです。

覚える事
デザインもフォルダもファイルもスッキリとした方が視認性が高い

前半はここまで!

第四段階まで記事をまとめようと思ったのですが、考えていたより情報量が多くなる事に気づきました。
後半は次回にします。
それまでは、第2段階までをアイキャッチをトレースして振り返ってみましょう。

挑戦する事
レイヤー、ファイル、フォルダの整理整頓とショートカットキーの応用を振り返る

次回予定しているバナートレース記事の内容

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

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

【化粧品・コスメ】乾燥肌訴求のランディングページ(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