ベイジ入社して１年、自主勉強としていくつものサイトを模写してきたが、その中で常に悩んでいたことがある。それは、いくら模写の数をこなしても、実際の仕事でうまく活かすことが出来ないということだ。
「数をこなしてないからだ」の一言でバッサリ切り捨てられそうな悩みではあるのだが、この悩みを解決しないことには、模写の数をこなしても、それはただ手を動かすだけの作業であり、自分自身のデザイナーとしての成長には繋がらない気がして、ウダウダと悩んでいたのだ。
そんな中、ベイジの制作フローの中に、ベースデザインの作成を始める前に、参考サイトの模写が組み込まれるようになった。デザイン模写を直接仕事で活かすことのできる環境が整ったのである。そしてありがたいことに、この環境の中で先輩デザイナーに相談し、アドバイスをもらえたことで、今まで散々悩んできたことへの自分なりの回答が出た。今回はそれを簡単にまとめてみようと思う。
まずはじめに、私が自分なりに出した「デザイン模写を仕事で活かすためにはどうるれば良いのか？」に対する回答は「感覚の視点」と「分析の視点」の二つを持つことである。
と言われても、これはわたしが勝手にそう名前をつけているだけなので、正直「どういうこと？」という感じだろう、なのでまずはこの視点に付いて簡単に説明していきたい。
分析の視点
まずはじめに分析の視点について。
分析の視点で見るべきポイントの具体例を挙げると以下のようになる。
- 押せるボタンと押せないボタンの違い
- フォントの種類、サイズ
- 背景の切り替わりがどのように作られているか？
- メインカラー以外の色の使い方
- シャドーの使い方
- 角丸の大きさ
これらは、多くの「デザイン模写で見るべきポイント！」のような記事で書かれていることだと思う。多くの記事に書かれている通り、デザイナー目線で細かい視点を持って、これらのポイントを分析することはとても勉強になり、ためになることだ。だがしかし、これらの「分析の視点」だけでは、模写で得た学びを自分のデザインに反映していくには足りないのである。
そこでその足りない分を補うためのもう一つの視点について説明したい。
感覚の視点
Webサイトそれぞれに「高級感」「ポップ」「知的」などのイメージがある。「今回のサイトは高級感を出したいからこのホテルのサイトが参考になるな。」「POPで可愛らしいデザインにしたいから、このコスメのサイトを参考にしよう！」など多くの場合、模写するサイトを探す時には、その漠然としたイメージが、今回目標とするデザインイメージと合致するかどうかで探していると思う。「感覚の視点」というのは、それらの漠然としたイメージを作り上げている要素は何なのかを見つける視点のことだ。
例えば「知的に見えるのは、角丸を使わず、配色のコントラストが強い」「高級感のイメージには、明朝体が使われていて、全体的なジャンプ率が低めに設定されているからだ」など。そのデザインの持つ漠然としたイメージは、デザインの中でフォントサイズや余白・配色のどういった組み合わせで成り立っているのか？そのなぜを追求することで、よりイメージ通りのデザインに近づけやすくなる。
これが「感覚の視点」だ。
私個人の所感だが、「分析の視点」はデザインをしていく上で直接参考にできる部分なので、かなり重要視しがちだが、こればっかりを見てしまうと、デザインの中の細かい部分にばかり目がいってしまい、全体の印象をうまくデザインすることができず、統一感のないデザインになってしまうと感じている。
特に私の場合は、感覚と分析を分離して考えてしまいがちなのでこの二つの両立が課題になってくると思ってる。とはいえ、これらの視点が必要になる段階的は異なるため意識さえできれば両立するのはそれほど難しくないことのように思うのだ。
全体の流れとしては
- 「感覚の視点」で、全体の方向性をざっくりと分析しまとめる
- 「分析の視点」で手を動かしながら、細かいディティール、デザインルールやフォント、余白のバランスなどを見ていく
このような流れで進めていくのが、デザイン模写の学びを、実際の仕事ですぐに活かせる方法かなと思う。
ここまで長々と書いてしまったが、模写の方法については私もまだまだ試行錯誤中であり、何が正解というものでもない。その時点ででの自分なりの最善の学び方で、続けていくことこそが重要なのだろう。そのため、私は今の自分の最善策として、今後しばらくはこのやり方で進めてみようと思う。
