「デザイン力が上がらない…」
「どうすればデザイン力が上げるの？」
「デザインってセンスじゃないのかなぁ」
「そもそもデザイン力とは？」
カンプ
こんにちは、独学でWebデザイナーになったカンプです
このページの辿り着いたという事は、デザイン力が上がらなくて悩んでいますね？
今でもこそ、多少のデザイン力を身につける事ができましたが、当初はまだまだWebデザイン力が低く、バナー１つのデザインで何度も駄目出しされました。
もちろん今も大したデザインができるわけではありませんが、【ある事を毎日やっていたことで、当時よりケツに毛が生えたぐらいですがデザイン力は上がった】と実感しています。
このページでは独学でデザイン力を上げれる練習方法を分かりやすくまとめました。
デザインの力を伸ばしたいと悩んでいるWebデザイナーさん、Webデザイナーを目指している人はぜひ、参考にしてみて下さい。
カンプ
この記事の目次
デザインスキルを上げるには、この方法しかない
半人前のWebデザイナーとして働いていた僕は、1日でも早く立派なWebデザイナーになる事を目指していました。
一人前になるにはどうすれば良いのか色々考えた結果、最終的にこの手法に辿り着きました。
デザイン力を上げる方法
それは…
ひたすら良いWebサイトのデザインを模写（トレース）することです
カンプ
実際に僕がWebデザイナーとして働いて感じたのはデザインのルールや知識を覚えただけでは現場では力が発揮できなかった事です。
もちろん基礎知識は大事です。
しかし、それは基礎でありデザイナーとは求められたデザインを素早く引き出せる能力が問われます。
つまりデザイン力が無い人は「センス」や「才能」が無いのではなく、デザインをする技術が足りないだけなんです。
カンプ
きちんとデザインを学び、経験値を溜めることで誰でもデザイン力を上げる事はできるんです
関連記事 Webデザインの基礎を上げたい人が覚えるべきデザインの三原則
そもそもデザイン力とは？
そもそもデザイン力とは、何でしょう？
よく「全てのデザインには意味がある」なんて言葉を有名なデザイナーさんの言葉で聞いたりしませんか？
僕も会社の人からこの言葉を聞かされたんですが、最初はさっぱり意味が分かりませんでした。
カンプ
「全てのデザインに意味がある」についてこちらの記事が詳しく説明しています。
参考 デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素WEBCRE8.jp
何気なくみている、
日常の全てにデザインが施されています。
「なぜこの色にしたのか？」
「なぜこの形にしたのか？
「なぜこの配置にしたのか？」
全てのデザインに関して「なぜ？」と思いながら、
デザインの事を意識して物を見たりすると、とても楽しくなりますよ。
この記事を全て見終わった後に、
上記の事をもう一度考えてみてください。
おすすめのデザイン本の紹介
オススメのデザイン本はノンデザイナーズ・デザインブック
さまざまなデザイナーの方に絶賛されておりフルカラー新装増補版で再販されるほど。まさにデザイナーのバイブルでは無いでしょうか。
絶対にWebデザイン力が上がる模写方法
ここから本題です。
僕が実際に行った模写（トレース）方法は次の通りです。
- デザインが良いサイトを探す・見る
- 良いと思ったサイト、バナーを模写する
- 先輩・上司に提出、評価してもらう
Webデザイナーを辞めるまでの1年近くほぼ毎日やり続けた結果、少しずつですが自分でも実感できるぐらいデザイン力が向上しました。
カンプ
入社した時はボロカスに言われていたので、褒められて凄く嬉しかったのを今でも覚えています
仕事の始まる前、休憩中にギャラリーサイトなどで良いサイトをたくさん見る。
良いなと思ったサイトをキャプチャーしてストックしておく。
家に帰ってからキャプチャーして置いたサイトを実際に模写する。それを次の日に会社の上司に提出する。
独学でやっている場合だと見せる人がいないかもしれません。
そんな場合は僕に連絡してください（笑）
多少であればアドバイスなどできるかと思います。
⇒ お問い合わせ
それでは順を追って詳しく説明していきます。
１ 良いサイトを見る
まずは良いWebサイトを見る事です。
自分が良いと思ったサイトでOK。
なぜ、そのサイトが良いのか？考えてみて模写（トレース）しましょう
ギャラリーサイトなど見ると素敵なデザインのサイトがずらりとあります。
自分が良いなと感じたサイトを見つけたらキャプチャー（スクリーンショット）するのですが、ここで
カンプ
で終わってはいけません。
何故このデザインは良いのか？と考えてみて自分なりに答えを出してそれからキャプチャーして下さい
ただ見るだけと理由を考えて見るのでは全然違ってきます。
そのデザインが良いと思った理由を考える癖をつけましょう。
キャプチャーする時はトップページの全体を撮っておいて下さい。
「Webデザイン ギャラリーサイト」などで検索すればWebデザインのギャラリーサイトがたくさん出てきます。
僕が良く参考にしているギャラリーサイトもあるので、ぜひそちらも参考にしてみてください。
Webデザインの参考・素敵なサイトを集めたWebデザインギャラリーサイト11選
２ 良いと思ったサイト・バナーをトレースする
デザインを見ているだけではデザイン力は上がりません
1でキャプチャーしておいたサイトを模写（トレース）していきます。
白馬ホテルグローリアスの公式サイトを模写した時のを例に説明します。
バナーのトレースのやり方に関してはこちらの記事を合わせて読んでみてください。
Webデザイナーが教えるおすすめバナー模写のやり方
※当時の頃のキャプチャー画像です
全部を模写するととんでもなく時間がかかってしまうのである程度箇所と時間を絞って模写します。
模写してほしい箇所は大きく分けて4つです。
- ロゴ
- ヘッダー・メニュー付近
- メイン画像
- サイドバー
- バナー
目的は模写するのでは無く良いデザインを盗む事です。
全部模写していたら何時間もかかってしまう場合もあるので1〜2時間と自分の中で制限時間を決めて、その時間内で収まる様に模写する箇所を考えていきます。
こんな感じで模写していきます。
これが僕が実際に模写した画像です。
時間はおおよそ2時間ほど。
余分な場所、模写していない箇所は分かりやすくグレーにしておきます。
アイコンや特殊なフォントやフォーム画面、写真の画像背景など時間がかかるので省きます。
比較するとこんな感じ（クリックすると拡大で見れます）
完成したら元のキャプチャー画像を1番上にもっていき透明度50%にしてズレなどを確認します。
この場合ロゴやボックスの位置はほぼ完璧に模写できていますがフォントがずれているので違っている事がすぐに分かりますね。
カンプ
模写がデザインのスキルアップになる理由
模写するにあたって意識するポイントは細かい部分のあしらい、フォントの使い方、揃える位置など見ているだけでは気づかない事がたくさんあります。
例えば1本の線のデザインにしてもただ1本の線を引いているだけじゃなく下に薄い線が引かれていたり、色でもベタ塗りでは無く微妙にグラーデーションがかかっていたりほんのわずかなノイズが入っていたりしています。
自分で作って比べてみる事によって違いがあれば見えてきますし、色々な発見が出てきます。
その違和感を消す作業を続けていくと本物と同じデザインに近づいていきます。
バナーはデザインの細かい部分が良く分かるのでWebデザイン初心者の人にはオススメです。
僕も最初はバナーのトレースから始まったので、1ヶ月ぐらいバナーの模写をしてからサイトの模写に移る方が良いと思います。
３ 先輩・上司に提出、評価してもらう
最後は模写した作品を先輩・上司に見てもらいましょう。
人の意見はとても貴重で自分では気づかなかった事が指摘されて初めて気づく事もあります。
指摘された箇所はやり直してもう一度見てもらい問題無ければ次のサイトを模写していく、こういった流れです。
そして、デザインしたファイルをまとめて保存。
カンプ
これで、いつでもすぐに引き出せる自分だけのデザインストックが完成です。
模写するサイトはコーポレートサイト、ショッピングサイト（ECサイト）、細かいパーツがたくさんあるサイト、海外のトレンドサイトなど色んなジャンルのサイトを作る事によりデザインの引き出しが増えていきます。
デザインの引き出しが多くなる事によって実際の作業でも瞬時にクオリティの高いデザインできるようになっていきます。
デザイン力を鍛えたいなら毎日続ける事が大事
この方法をやっていった結果、デザインの引き出しを着々と増やしていきデザイン力はグングン上がっていきました。
プロのデザイナーに比べると足下にも及びませんが、デザイン力を上げるには頭で考えて、手を動かすしかありません。
デザイン力が上がれば作業のスピードも上がり仕事の生産性も向上します。
カンプ
関連記事 【究極保存版】Webデザインのスキルアップに役立つ60記事
まとめ
デザイン力を上げるおさらいです
- デザインが良いWebサイトを見つける
- なぜそのサイトが良いのか考える
- 1〜2時間でサイトの一部を模写（トレース）する
- 先輩・上司に提出、評価してもらう
- 作った作品をまとめて、デザインの引き出しを増やす
最初は毎日続ける習慣をつけることを意識する
仕事が忙しくてそんなに時間が取れないならバナーの1個だけでもかまいません。
とにかく毎日続けることが大事です。
カンプ
がむしゃらにやっていくうちに力がついてきた事に実感する日が必ず訪れます。
最初は大変かもしれませんが、習慣付けて最終的に毎日やらないと気が済まないって状態になればこっちのもの。
デザインは「センス」や「才能」では無く
「努力」がもっとも大事なんです。
プロが教える！Webデザインスクール選びの決定版
デザインスクール選びで困っていませんか？ | gifmagazine.net
- illustrator、photoshop
- HTML・CSS
- JavaScript
これを見て、「全部できる」人は学校に行く必要はありません。
独学でWebデザイナーになれるイメージが 面接や書類選考で必要になるポートフォリオを作成して、就職活動を始めてください。
逆に、「全然イメージが沸かない！」人は学校に行くことをお勧めします。デザインスクールは時間とお金はかかりますが、この先に好きなことを仕事にするわけですから、先行投資は当然必要で、それも将来取り返すことができるものです。
このサイトでは「WebCamp」がおすすめです。
他にもプロが厳選したおすすめのWebデザインスクールを紹介しているので、ぜひチェックしてみて下さい。
詳細はこちら
↓ ↓ ↓
