Webデザイナーの方、以下のような壁にぶつかったことはないでしょうか。
- 求められる要望をどうデザインに落とし込めばいいか思い浮かばない
- なかなか自分の納得いくWebデザインが作れない
- 作ったデザインに対して、社内外から修正やクオリティアップを求められることが多い
- 別案を求められたが1案以外思いつかない
主にWebデザイナーとしての経験が浅い人に当てはまるものではないかと思いますが、数をこなしていなければこのような状態に陥りがちなのも仕方がありません。自分にもこのような経験がありました。
良いデザインを見るだけで上手くなるのなら苦労はない
「量は質を凌駕する」
よく言われることかもしれませんが、これは経験上本当のことだと思います。
優れたデザインを「見る」だけなら多くの方が実行できていることと思います。たくさんの良いものを見ることでその見る目は養われます。
ただ、大切なのは見る目だけではなく「作る手」も鍛えることです。「見る」に対して「作る」の比重が軽くなってはいないでしょうか？
良いものを見るだけでは「良いものを作る手」は育ちません。ひたすら熱心に野球観戦だけしても優れた野球選手にはならないのと同じです。まずはバッドやグローブを持って自分の体を動かすことが必要ですよね。
それには優れたデザインを見つけて模写するのがおすすめです。
数を重ねると効果が実感できると思います。特にまだデザイン経験が浅いうちに取り組むといいですよ。
「Webデザイン模写」の考え方とやり方
1. 模写対象とするWebサイトを探す
良いWebデザインが探せるおすすめのサイト
はじめのうちは自分の好みのサイトを選んでいきましょう。好きなものの方がやる気もでます。
特に思いつかないという人は、優れたWebデザインのサイトを集めたギャラリーサイトがあるので、そこから探してみるといいでしょう。
以下の記事でおすすめのギャラリーサイトについてまとめています。
バナーのデザインならこちら。
2. スクリーンショットをとります
模写するページが決まったらスクリーンショットをとりましょう。このとき幅のサイズを決めて撮影したほうが後々楽です。
ブラウザの拡張機能を使うか、OSやブラウザの機能を使って撮影する方法もあります。
Google Chromeの標準機能を使って幅を指定して撮影する方法は以下で紹介しています。
Google Chromeで拡張機能を使わずに全画面スクリーンショットを撮る方法
3. アートボードを用意します
実際に自分が仕事で使うツールを使いましょう。スクリーンショットとアートボードの横幅サイズを合わせて、隣にスクリーンショットを配置します。コンテンツ幅など計測してガイドをひいておきます。
なお、人によって細かいやり方は違うと思うのですが「キャプチャを下に敷いて上からトレースする」この方法は個人的にはあまりおすすめしません。
模写のポイントは「お手本をじっくり見る」「考えながらやる」この2点だと思います。考えながらやるというのは、目的意識を持つ、新たな発見を探すこととも言えます。
上からなぞるとこのポイントが弱まってしまうように思うのです。
時間がかかってしまうかもしれませんが、特にはじめのうちは横に並べて模写していくことをおすすめしたいです。
4. デザインを模写していきましょう
好きな順で模写しましょう。隣においたスクリーンショットのほか、ブラウザ上でも対象ページを表示しておきます。
色は極力スポイトを使わない
色を塗るときはスポイト機能を使わず、まず自分の目で近い色を探してみます。
スポイトは最後の答え合わせ的に使います。または、最初からスポイトやカラーコードで色をコピーするとしても、それがカラーピッカー上どのあたりを指定した色なのか確認しておくといいと思います。
フォント探し
フォントの種類やフォントサイズは、ブラウザのデベロッパーツールや拡張機能などで調べます。
入手が難しいフォントなら、使えるものので似た雰囲気のフォントを探してみます。
※ 好きなフォントであればメモしておくとその後の制作で役立つことも。
デザイン模写に慣れてきたら
自分の好みとは違うタイプのWebデザインをあえて選んでみる
いざ仕事でデザインするときには、自分の好みのものばかり作っていられません。自分の好みのデザインばかりに目を向けていると、それ以外のものを要求されたときに対応が難しくなります。
模写対象を選ぶときに今まで無視していたようなサイトをあえて選んでみましょう。
様々なデザインをよく見ておくことで、デザイン制作の守備範囲が広くなりますし、仕事での微妙なニュアンスの変更や提案を求められた際にも対応できるようになるはずです。
対象を下層ページにする
新人がデザインを任されるとき、いきなり新規のTOPページデザインからではなく、他者が作ったTOPやベースデザインに合わせて下層ページを作るというケースが多いと思います。
下層ページはTOPページとはまた異なる見せ方が必要です。
お問い合わせ、会社概要などよくあるコンテンツを中心に取り組んでおくと、実践にいかすことができるはずです。
一口に会社概要のページといってもデザイン的には様々な見せ方があり、そのパターンや良い点悪い点が見えてくるようになると思います。
デザインを言葉で説明できるようになることも大切
この模写を続けていくと、模写対象外のものも含めてかなりの数のサイトを見ることになると思います。
デザインを見たとき「良い」「好き」「良くない」「嫌だな」などと感じた理由を、「なんとなく」で済ませず論理的に言語化してみましょう。
実際に文字にして書き出す方が良いとは思いますが、そこまでできなくても心の中で文章化してみてください。
これはデザインコンセプトを作るとき、将来他者のデザインについてコメントする立場になったときにも役立ちます。
デザイン模写なんてやると他と似たようなデザインしか作れなくなる？
そんなことはないよ。
もしかするとWebデザイナーを目指す人の中には、「自分にしかできないデザインを実現したい」「自分の個性を大事にしたい」といった作家性を自分の強みとして大事にしたいと思っている人もいるかもしれませんね。既にあるのと似たようなデザインを作るつもりはない、見る必要はないと感じることもあるでしょうか？
得意分野を持つのは確かに強みとなりますし、大切に伸ばしたほうがいいと思いますが、Webデザインを仕事とする場合、クライアントがWebサイトを作る「目的」に寄り添う必要があります。
自分の得意分野だけに固執していると、サイトをつくる目的に合わせた効果のあるデザインを作ることが難しくなるでしょう。主役はWebデザイナーではないのです。
効果が出やすいセオリーに則る、またはそれを乗り越えるような案を考えてみる、そういった選択をできるようになるためには、やはり他者のデザインの研究が必要なのではないかと思います。
また、隠そうとしても出てしまうのが個性。他者のデザインを見ることで影響を受けてしまうようなものはそもそも個性とは違うものなのだと思います。
たくさん模写しよう
あまり気分がのらないときは、そのページの気に入ったポイント周辺のみに絞るという方法でもいいと思います。（それだけにはならないように）量をこなしていくと、頭の中に幅広いデザインの知識やテクニックが詰まった引き出しを増えてくるはずです。
