MD-Blog_Web Creative

これまで、がむしゃらに目の前の案件に立ち向かっていましたが、もっとデザインの幅を広げたいと思い、2019年は自身のデザイン力を上げる年にするため、その第一歩として「良いデザインを模写する勉強」を始めました。

デザインを模写することで、余白を使ってコンテンツをグルーピングしていることや、バラバラに見えるデザインが実は揃っていることなどに気が付けるようになります。

とはいえ、模写して勉強といっても、ただなぞるだけでは意味がありません。
そこで、今回は「どのように模写すれば身になるのか」をご紹介したいと思います。

01. 模写を始める前に

まず、模写するWebサイトを決めます。
自分はいつも、以下のサイトを利用して探しています。

• Pinterest Webデザイン以外の参考にも！
• Bookma! PC/SP両方まとめてみれて便利！
• 81-web.com Webデザインのリンク集です。

模写するには、クオリティーが高くて、自分が「こんなデザインしてみたい！」と思えるものや、今後案件で取り扱いそうな業種のモノを選ぶのがいいかと思います。

苦手なジャンルのデザインも、模写することで引き出しを増やすことにつながります。

次に、実作業に入っていきますが、その前に、業種やそのWebサイトが持つ世界観によって、コンテンツの間隔や色・フォントの使い方が全く異なりますので、自分は作業に入る前に一旦、そのWebサイトのデザインについて考察するようにしています。

• どの様なサイトか？
• ターゲット層は？
• 配色は？
• 書体は？
• レイアウトは？

これらを自分なりに「なぜそのフォントなのか？」「なぜこのレイアウトなのか？」と考察し、理解し納得した上で作業に入るようにしています。

02. ワイヤーを制作する

しかし、まだデザインの模写には入りません。
一旦、ワイヤーフレームを組んでいきます。

デザインの実作業に入る前にワイヤーを制作することで、一見、バラバラに見えるデザインでも、実は見出しと周りのコンテンツとの幅が統一されていたり、逆にあえてコンテンツの幅を変えている部分などがあることに気付かせてくれます。

03. いよいよデザイン

デザインを模写して練習するためには、完璧に真似する必要があるため、写真はできるだけ模写したいサイトから引用してくるのがいいかと思います。

しかし、アイコンやイラスト、あしらいの部分は、できるだけ自分でイチから作ります。
それによって、見ただけでは気がつかなかった微妙な効果・あしらいやグラデーションが、全体の世界観に大きく影響していることに気づくことができます。

まとめ

Webデザインの模写をして勉強を始めたところ、四角を組み合わせているだけのような単調だった自分のデザインが、少し成長できた気がしています。

デザインを勉強する方法は他にもいくつか思いつきますが、今度はセミナーに参加してみたいなと思っています。

ちなみに、MONSTER DIVEでは、Webデザインはもちろんのこと、インターネットの技術・知識や社内の制作環境に関する基礎講座、お題に沿ったモノヅクリにチャレンジする勉強会を開催しております。詳しくはコチラをご覧ください！

あと、最近はひっそりと3Dソフトの勉強もしているので、そのうち記事にしたいと思います。

最後まで読んでいただきありがとうございました。