⇒ このブログはこんな人が書いてるよ!

WEBデザイナー未経験の僕がデザイン力を上げる為にした事

日光浴が大好きです

久しぶりにWEBデザイナー関連の記事を書きます。

僕は独学でWEBデザイナーとしてのスキルを学び、現場未経験でしたがWEBデザイナーとしてWEB制作会社で働かせてもらう事ができました。しかし、当初はデザイン力なんて全く無くバナー1つを作成するにしてもデザインに関して何度も駄目出しされました。

もちろん今も大したデザインができるわけではありませんが、ある事を毎日やっていたからこそ当時よりはケツに毛が生えたぐらいですがデザイン力は上がったと実感しています。

 

WEBデザイナー未経験の僕がデザイン力を上げる為にした事

sitakoto01

WEBデザイナーとして働くわけだから1日でも早く立派なデザイナーになりたく、その為にはどうすれば良いのか考えていた結果この方法に辿り着きました。

 

 

デザイン力を上げる方法それはひたすら良いサイトを模写(トレース)することです。

 

 

実際に僕が働いていて感じたのはデザインのルールや知識を覚えただけでは現場では力が発揮できなかった事です。もちろん基礎知識は大事です、しかしそれは基礎でありデザイナーとは求められたデザインを素早く引き出せる能力が問われます。

 

つまりデザイン力が無い人は「センス」や「才能」が無いのでは無く、デザインをする技術が足りないだけです。

 

ここから本題です。

良いサイトを模写する為に僕が行った事。

  • 良いサイトを見る
  • 良いと思ったサイト、バナーを模写する
  • 会社の上司に提出、評価してもらう

かれこれ辞めるまでの1年近くほぼ毎日やったお陰で少しずつですが自分でも実感できるぐらいデザイン力が上がりました。

仕事の始まる前、休憩中にギャラリーサイトなどで良いサイトをたくさん見る。良いなと思ったサイトをキャプチャーしてストックしておく。

家に帰ってからキャプチャーして置いたサイトを実際に模写する。それを次の日に会社の上司に提出する。

 

それでは順を追って詳しく説明していきます。

 

1・良いサイトを見る

まずは良いサイトを見る事です。ギャラリーサイトなど見ると素敵なデザインのサイトがずらりとあります。自分が良いなと感じたサイトを見つけたらキャプチャーするのですが、ここで「良いデザインだな〜」で終わってはいけません。何故このデザインは良いのか?と考えてみて自分なりに答えを出してそれからキャプチャーして下さい。ただ見るだけと理由を考えて見るのでは全然違ってきます。そのデザインが良いと思った理由を考える癖をつけましょう。

キャプチャーする時はトップページの全体を撮っておいて下さい。

 

WEBデザインのギャラリーサイトはたくさんあります。僕が良く参考にしているのはこちら

僕が参考にしているWEBデザインギャラリーサイト 

 

2・良いと思ったサイト、バナーを模写する

sitakoto03

デザインを見ているだけではデザイン力は上がりません。

1でキャプチャーしておいたサイトを模写していきます。

 

白馬ホテルグローリアスの公式サイトを模写した時のを例に説明します。

 

※当時の頃のキャプチャー画像です。

0906_m 2

全部を模写するととんでもなく時間がかかってしまうのである程度箇所と時間を絞って模写します。

 

 

0906_m 3

模写してほしい箇所は大きく分けて4つです。

  • ロゴ
  • ヘッダー・メニュー付近
  • メイン画像
  • サイドバー

目的は模写するのでは無く良いデザインを盗む事です。

全部模写していたら何時間もかかってしまう場合もあるので1〜2時間と自分の中で制限時間を決めて、その時間内で収まる様に模写する箇所を考えていきます。

 

キャプチャーした画像を下においてそのままトレースすると何も考えずに作ってしまいがちなので少し下にズラしてサイズや色合いを同じ物にして作っていきます。

 

 

img0602

こんな感じで模写していきます。

 

 

0906

これが僕が実際に模写した画像です。時間はおおよそ2時間ほど。

余分な場所、模写していない箇所は分かりやすくグレーにしておきます。

アイコンや特殊なフォントやフォーム画面、写真の画像背景など時間がかかるので省きます。

 

 

 

img020602

完成したら元のキャプチャー画像を1番上にもっていき透明度50%にしてズレなどを確認します。この場合ロゴやボックスの位置はほぼ完璧に模写できていますがフォントがずれているので違っている事がすぐに分かりますね。フォントなど同じ物が無い場合はできるだけ近い物で合わせるようにして下さい。

 

 

模写するにあたって意識するポイントは細かい部分のあしらい、フォントの使い方、揃える位置など見ているだけでは気づかない事がたくさんあります。

例えば1本の線のデザインにしてもただ1本の線を引いているだけじゃなく下に薄い線が引かれていたり、色でもベタ塗りでは無く微妙にグラーデーションがかかっていたりほんのわずかなノイズが入っていたりしています。

 

自分で作って比べてみる事によって違いがあれば見えてきますし、色々な発見が出てきます。

その違和感を消す作業を続けていくと本物と同じデザインに近づいていきます

 

 

最初からサイトを模写するのは時間もかかるし難しいと思うで、最初はバナーなどから模写していきましょう!

バナーはデザインの細かい部分が良く分かるので初心者の人にはオススメです。僕も最初はバナーのトレースから始まったので1ヶ月ぐらいバナーの模写をしてからサイトの模写に移る方が良いと思います。

 WEBデザイナー未経験の僕が面接で教わったデザイン力を上げる方法

 

・会社の上司に提出、評価してもらう

yJl7OB3sSpOdEIpHhZhd_DSC_1929_1

最後は模写した作品を会社の上司・先輩に見てもらいましょう。

人の意見はとても貴重で自分では気づかなかった事が指摘されて初めて気づく事もあります。

指摘された箇所はやり直してもう一度見てもらい問題無ければ次のサイトを模写していく、こういった流れです。

 

模写するサイトはコーポレートサイト、ショッピングサイト、細かいパーツがたくさんあるサイト、海外のトレンドサイトなど色んなジャンルのサイトを作る事によりデザインの引き出しが増えていきます。そしてデザインの引き出しが多くなる事によって実際の作業でも瞬時にクオリティの高いデザインできるようになっていきます。

 

デザイン力を上げたいなら毎日続ける事が大事

sitakoto04

この方法をやっていった結果、デザインの引き出しを着々と増やしていきデザイン力はぐんぐん上がっていきました

プロのデザイナーに比べると足下にも及びませんが、デザイン力を上げるには手を動かす事がとても大事だと言う事が分かりました。デザイン力が上がれば作業のスピードも上がり仕事にも余裕がでてきます。

 

大事なのは毎日続ける事と諦めない事。

仕事が忙しくてそんなに時間が取れないならバナーの1個だけでもかまいません。とにかく毎日続けてみて下さい。

がむしゃらにやっていくうちに力がついてきた事に実感する日が必ず訪れるはず。

 

デザインは「センス」や「才能」では無く「努力」がもっとも大事なんです。

 

 WEBデザイナー関係の求人サイトをまとめてみました!

WEBデザイナー系の求人サイトをまとめてみた

 WEBデザイナー関連のオススメ記事!

未経験でWEBデザイナーになるにはどうすれば良いのか
失敗しない未経験からWEBデザイナーになる為の教材・本の選び方
読めば必ずスキルアップ!!WEBデザインの基礎を学べるサイトをまとめてみた
WEBデザイナーを目指している人に見てほしい!僕が教わったデザインの三原則

2 Comments

私がウェブデザイナーとしてスキルアップするためにやっている事 | Webクリエイターログ

[…] この方法はウェブクリエイターズボックスさんやismさんなど多くのウェブデザイナーさんのブログでデザインスキルを上げるための方法として取り上げられているものです。私も早速取り入れて今ではすっかり習慣になっています。ただデザインを眺めているだけでも「良いデザイン」についてインプットすることが出来ますが、実際に手を動かすとさらに細かいところ(1pxのこだわりやテクスチャの使い方など)にも気がつく事が出来て、実際に自分のデザインの引き出しが増えてきたのを実感しています。 […]

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)