WEBデザインが短期間で上達した方法

この記事は、Webデザインが短期間で上達した2つの方法として、新たに書き直しました。

---

WEBデザイナーとして10年ちょっと経過。
未だにデザイナーとして足りないものは多いですが、
どうにかクライアントにも満足してもらえる
デザインが提供できるようになったと思います。

これは、自分が新米デザイナーだった頃にやっていた、デザインの上達方法です。
「上手くデザインができない！」「上手くなるにはどうすればいいの？」など、
どうすればデザインが上達するのかわかならい人の参考になれば幸いです。

新米デザイナーの頃、ダメなデザインをして先輩からよく叱られていました。
クライアントからデザイナーを交代してくれと言われ、
激しく落ち込んだこともあります。

いまになると恥ずかしいですが、
その頃の自分には、
プロのデザイナーとして最低限の能力がなかったのです。

クライアントの満足するクオリティのデザインを
期日までに提出することができていませんでした。

まず、最低限必要だった能力が、
「求められているデザインをできるかぎり速く提供する」
でした。

この課題をクリアするために行った方法が次の2つです。

• たくさんのサイトを見てキャプチャする
• たくさんのサイトを模写する

サイトを沢山みてデザインの引き出しを増やし、デザインを考える時間を短縮する。
そして、模写することで、求められているクオリティを提供できる技術力を上げる。

私の場合、この方法で半年程度でクオリティとスピードが劇的に上達しました。

1．たくさんのサイトを見る。そしてキャプチャする

基本的ですが、たくさんのサイトを見ました。
素晴らしいデザインや、流行のデザインをみて
自分の中に「デザインの引き出し」を増やしていきました。

ここのデザインは印象に残ったとか、
いつかこういうデザインは参考になるかもとか、
思いながら見るようにしました。

そして、気に入ったデザインがあれば、
あとですぐに見ることができるようにキャプチャしました。
サイトのそのものだけでなく、バナーひとつでもキャプチャしておきました。

ブックマークしても、
サイトは更新されたり、リニューアルされたりして元のままのことは少ないです。
そのため、気に入ったものがあったら、すぐにキャプチャしておきました。

アイデアに困った場合や、デザインの解決策がわからない場合、
「自分の気に入ったもの」「参考になる」と思ったもののみを
キャプチャしているので探す手間が省けます。

また、キャプチャする場合はトップページだけでなく、
主要ページはもちろん、
「会社概要」「サイトマップ」「お問い合わせ」など、
どのサイトでも作ることが多いページもキャプチャしておきました。

「サイトマップ」や「お問い合わせ」などは、
シンプルで見やすさが必要なため、意外とデザインに時間がかかりますので、
キャプチャしておくと参考にするときに便利です。

キャプチャ方法

キャプチャはFireFoxのAdd onのPage Saverを使っています。

Pearl Crescent Page Saver
http://pearlcrescent.com/products/pagesaver/

オプションで、
キャプチャの保存名は、年月日時分秒ページタイトルの
「%Y%m%d%H%M%S%t」にしています。

こうしておけば、各ページ連続でキャプチャしたときに、
フォルダ内でキャプチャ順にまとまります。

2．たくさんのサイトを模写する

自分の失敗は、
サイトをみてもデザインを学ばず、
タイトルやボタンなどパーツかっこよさばかり真似して、
全体のデザインバランスの重要性にきづかず、
これならできると思い手を動かさなかったことです。

デザインは見ているだけでは、上手くなりませんでした。。。

実際、模写をしてわかったことですが、
色の強弱でサイト全体のバランスをとっていたり、
カラムの幅によって、情報の強弱をつけたり
余白によって情報をグルーピングしたり、
メインの画像が変更されても全体のバランスが崩れないデザインをしていたりと、
見ているだけではわからなかったことをいろいろ学びました。

模写の方法

選んだサイトをキャプチャし開きます。
新規に幅1200px程度でファイルを作成します。

上にのせてトレースすると何も考えずに作ることになりがちなので、
並べて作るなどした方がいいです。

模写の目的は、どのようにデザインされているかを知るためで、
同じものを作ることが目的ではないからです。

幅や高さを測りながら、同じものつくって行きます。
メインの写真やロゴ等は同じものをつくる必要はないかとおもいます。
テキストはダミーでもいいですが、おなじ文言をいれるのではなく、
リアルな文言を入れた方がリアルな雰囲気がでるので、
できあがりがわかりやすいです。

この時、ただ漫然と模写するのではなくて下記のことを確認していきました。

• デザインテイストを決めている要素
  （写真・色・パーツの作り・フォントだったり、それらが複雑にからみ合っています）
• 情報の強弱・グルーピング
  （大きさや余白、色によって意味が違ってきます）
• レイアウトの幅
  （全体の大きさや例えば2カラムの場合の左右のカラムの大きさ。少しの幅の違いでバランスがかわります）

模写するサイトの種類

模写するサイトの種類ですが、
その会社によって求められるデザインがあるでしょうが、
私の場合、テイスト・色・レイアウトの違いなど、
いろんなパターンのデザインを模写するようにしていました。

例えば、

• コーポレートや学校など固めのサイト（明る色使いのサイトと暗い色使いサイト）
• ポータルサイトや就職サイトなど、テキストが主体のサイト（明る色使いのサイトと暗い色使いサイト）
• パーツの作りこみが多いサイト
• ショッピングサイト（2カラムと3カラム）
• ナビゲーションが上部のサイト・横のサイト

ブルー系の固いテイストは得意だったのですが、
自分は明るいテイストが苦手でした。

あまり得意でないデザインテイストや、
好みではないデザインもやっておいた方が、
自分の引き出しを増やすためには有効でした。

新人にも、大体10サイトほど模写させると、
その後、オリジナルのデザインをさせても、
一定のクオリティをだせるようになるようです。

まずは、模写の数をこなして、
デザインの引き出しを増やすことで、
クオリティとスピードが大きく上昇しました。

ある程度上記の方法をこなしたら、
自分が今まで作ったデザインを、
再度ゼロからデザインしました。

要素や規定は同じでも、
新たな視点や切り口でデザインすることができるようになりましたし、
できあがったものが、以前よりクオリティが上がったのが実感できました。

まとめ

予定内に一定のクオリティでデザインを提出することで、
社内はもとより、クライアントからも喜ばれることが多くなりました。

評価が上がった理由としては

• デザインがスピードアップすることで、社内もクライアントもスケジュールに余裕ができた
• クライアントとっても、期限とクオリティの正確な予測ができ依頼しやすくなった
• クオリティがアップしたことで、コストパフォーマンスが改善した

などが上げられますが、プロとして当然なことがひとまずできるようになっただけともいえます。

自分の経験が、
デザインが上達するにはどうしたらいいかわからない人の参考になれば幸いです。

最後にデザインの上達するために一番大事なのは、
すぐに諦めないことです。