この記事は2013年に公開した「WEBデザインが短期間で上達した方法」の改訂版です。
デザイナーを交代してほしいと言われる
私はWebデザイナーとして20年以上の経験があります。
まだまだ足りない部分があると感じますが、少なくともクライアントから満足してもらえるデザインを提供できるようになりました。
私が上達するために実践していたデザインの勉強法を紹介します。
新人の頃は、デザインが上手くできず、先輩から叱られることがよくありました。
クライアントから「デザイナーを交代してほしい」と言われたこともあり、かなり落ち込んだこともありました。
そんな経験をした方には、以下の方法が参考になるかもしれません。
「デザインが上手くできない！」「どうすればデザインが上達するの？」という方も、ぜひ参考にしてみてください。
クオリティとスピードの向上に向けたアクション
当時の私はプロのデザイナーとして最低限の能力が欠けており、クライアントから求められるクオリティのデザインを期日までに提出できていませんでした。今となっては恥ずかしいですが、その当時はそうでした。
最低限必要だった能力は、「求められているデザインをできるだけ早く提供する」ことでした。
この課題をクリアするために、私が行った方法は次の2つです。
- 多数のサイトを閲覧し、スクリーンショットを保存する
- 多数のサイトを模写する。
多数のサイトを閲覧し、デザインのアイデアを集めることでデザインの引き出しを増やし、デザインを考える時間を短縮することができました。
また、模写することで求められるクオリティを提供する技術力・想像力を上げることができました。
この方法を半年程度実践した結果、私のクオリティとスピードが劇的に向上しました。
（１）たくさんのサイトを見る。そしてスクリーンショットする
基本的な方法ですが、数多くのサイトを閲覧しました。
優れたデザインやトレンドのあるデザインを見て、「デザインのアイデアの引き出し」を増やしていきました。
印象的なデザインや、将来的に役立つかもしれないデザインを見つけたら、注意深く観察しました。そして気に入ったデザインがあれば、すぐに確認できるようにスクリーンショットしました。
サイト自体だけでなく、バナーひとつが気にいるとサイト全体をスクリーンショットするようにしました。
バナーなどパーツだけでなく全体を見て、バランスを確認するためです。
なぜスクリーンショットするのか
ブックマークしても、サイトは更新やリニューアルで変わることが多いため、気に入ったものはすぐにスクリーンショットしました。
アイデアに困ったり、デザインの解決策が見つからなかった時には、「自分の気に入ったもの」「参考になる」と感じたものだけをスクリーンショットしていたため、自分だけのスクラップブックができ、探す手間が省けました。
スクリーンショットする場合はトップページだけでなく、主要ページはもちろん、「会社概要」「サイトマップ」「お問い合わせ」など、どのサイトでも作られることが多いページもスクリーンショットしました。
「サイトマップ」や「お問い合わせ」などはシンプルで見やすさが重要で、デザインに時間がかかることがあるため、スクリーンショットしておくと参考になります。
（２）多くのサイトを模写する
自分が失敗したのは、他のサイトを見てもデザインを学ぶことができず、タイトルやボタンなどの個々の要素ばかりに目がいってしまい、全体的なデザインのバランスの重要性に気づかなかったことです。
このデザインなら簡単にできると思い、実際に作ることを怠りました。
デザインにおいては、ただ見ているだけでは上達しません。
実際に模写をしてみることで、色の強弱を調整してサイト全体のバランスを取ったり、カラムの幅を調整して情報の重要性を表現したり、余白をうまく使って情報をグループ化したり、メインの画像が変わっても全体のバランスが崩れないようにするなど、見ているだけでは気づけなかった様々なことを学びました。
模写の方法
- 選んだサイトをスクリーンショットをして、PhotoShopやFigmaなどのデザインソフトで開きます。
- 新しいファイルを実際のサイトのサイズで作成します。
- 上に重ねてトレースすると、何も考えずに作ってしまうことがあります。そのため、スクリーンショットと自分の模写するファイルを並べて比較しながら模写することをおすすめします。模写の目的は、デザインの作り方を学ぶことであり、同じものを作ることではありません。
- サイトの幅や高さを測りながら、同じものを作っていきます。ただし、メインの写真やロゴなどは、同じものを作る必要はありません。
- テキストはダミーでもかまいませんが、リアルな文言を入れる方が、できあがりの雰囲気がリアルになるのでおすすめです。
- 下記のことを確認しながら模写していきます。
- デザインテイストを決めている要素（写真・色・パーツの作り・フォントなど）
- 情報の強弱・グルーピング（大きさや余白、色によって意味が異なります）
- レイアウトの幅（全体の大きさや、2カラムの場合の左右のカラムの大きさなど。少しの幅の違いでバランスが変わります）
模写するサイトの種類
模写するサイトの種類については、その会社によって求められるデザインがあるかもしれませんが、自分はテイスト・色・レイアウトの違いなど、いろんなパターンのデザインを模写するようにしていました。
模写するサイトの例としては、以下のようなものがあります。
- コーポレートや学校など固めのサイト（明る色使いのサイトと暗い色使いサイト）
- ポータルサイトや就職サイトなど、テキストが主体のサイト（明る色使いのサイトと暗い色使いサイト）
- パーツの作りこみが多いサイト
- ショッピングサイト（2カラムと3カラム）
- ナビゲーションが上部のサイト・横のサイト
- 写真がメインのサイト
自分は明るいテイストが苦手でしたが、あまり得意でないデザインテイストや好みではないデザインもやっておいた方が、自分の引き出しを増やすためには有効でした。
Webデザイン初心者でも、大体10サイトほど模写させると、その後、オリジナルのデザインをさせても、一定のクオリティをだせるようになるようです。
量が質を生む
最初は、模写を多く行ってデザインの知識を増やしました。
その結果、作品の品質とスピードが向上しました。模写を十分に経験した後、自分でゼロからデザインすることに挑戦しました。
同じ要素や基準を使っても、新しい視点や方法でデザインすることができるようになりました。
この結果、以前より作品の品質が高くなったと感じることができました。
それまでの自分は、こなした量が圧倒的に少なかったため、質が伴っていなかったということです。
まとめ
以前よりも予定内に一定のクオリティでデザインを提出できるようになり、それが評価され、社内やクライアントからの評価も上がりました。
理由としては、
- デザインがスピードアップしたため、スケジュールに余裕ができ、クライアントが依頼しやすくなったこと
- クオリティが上がったことでコストパフォーマンスが改善したこと
などが挙げられます。
ただ、プロとして当然なことができるようになっただけともいえます。
デザインの近道は存在しませんが、王道はあります。
それは模写です。
模写をすることで、自分のデザインの引き出しを増やすことができます。
この方法は王道であり、最も効果的で速い近道です。
この方法が、デザインの上達には、何をすべきかわからない人の参考になればと思います。
最後に、デザインの上達に一番大事なのは、すぐに諦めずに継続することです。
改定にあたって
2013年に書いた「WEBデザインが短期間で上達した方法」という記事は、多くの人に読まれました。
それから10年が経ち、デザインの世界は進化しました。新しいツールやサービスが登場し、便利になった反面、デザインの基本的な上達方法には変化がないように感じます。
例えば、音楽を聴いたからといって歌が上手くなるわけではなく、プロ野球を見たからといって野球が劇的に上手くなるわけではありません。
同様に、デザインのツールがすべてをしてくれるわけではありません。また、他のデザイナーの作品を見ても、自分自身のデザインがうまくなるわけではありません。
ノウハウ本がたくさんあるかもしれませんが、結局は自分自身が手を動かして身につけるしかありません。
成長には時間がかかりますが、納期は待ってはくれません。
そんな中でも、私が短期間にWebデザインが上達した方法は、以前に書いた記事と同じです。
この記事を読んで、Webデザインに挫折する人が少しでも少なくなり、優秀なWebデザイナーが増えることを願っています。