全くのパソコン初心者だったで、WEBデザイナー未経験だった俺がデザイン力を上げるためにやったことを紹介します。
独学でWebデザインのスキルやコーディングを学び、未経験でしたがWebデザイナーとしてWeb制作会社で働くことができました。
Webデザイナーとして働く前の経歴は「未経験からWebデザイナーになった経緯を紹介」で詳しく説明しています。
デザイン力をあげる
WEBデザイナー未経験の僕がデザイン力を上げる為にした事があります。
それは良いサイトを模写しまくりました。
模写の方法として、ギャラリーサイトに掲載されている一つを選んで、トップページ・一覧ページ・詳細ページのキャプチャーを撮る。
そのキャプチャーを下に引いて、全く同じに上からトレースする。
それをコーティングして、ブラウザー上で見えるようにするまでを、何度も何度も試しました。
たまに横で見比べながら模写したり、トップページだけするとか、手法を変えながらとにかく模写しました。
良いデザインを真似る
模写をしているとパッと見ただけでは気づかないようなディティールの部分にまで目が行くようになります。
例えば、1pixelの薄いラインや、余白の感覚、薄いグラデーションなどサイトデザインに気づく部分がたくさん出てくるようになります。
1pixelの薄いラインを引くことで、他のラインに立体感が出てる！っなんて驚きと発見にたくさん出会うと思います。
そうすることで他のサイトを見ているときでも、デザインを見る目が養われいくと感覚がありました。
コーディングも一緒で、良いサイトのコーディング技術を学ぶことで、「こんなプロパティあるのか！」「こうやってレイアウトを調整しているのか！」など新しい技術を出会えると思います。
（コーディングが苦手な人は、とにかくデザインを模写をするだけでも全然違うと思います。）
模写した時の感想
ここが１番大事だと思うんですが、ただ模写するだけではデザイン力がなかなか上がらないかもしれません。
大切なのは、しっかりと考えながら模写することです。
- このサイトのターゲットはどの世代で、性別は男性か女性か？
- なぜ、このサイトを良いと思ったのか？
- なぜ、1pixelの薄いラインを引いてるの？
- なぜ、この商品と商品の間の余白はこの間隔であいているのか？
- タイトルの一文字一文字の間隔を縮めたらどうか？
などを「なぜ？」みたいなことを考えて、模写します。
その線が何故入っていたのか、身を持って知ることができ、自分がデザインをする時のストックにしておき、今度は「こういう時には線を入れればいいんだ」と応用することができます。
模写したサイトをまとめてポートフォリオに
俺の場合、Web制作会社に提出するポートフォリオサイトとして模写したサイトの気付いた点とかを、まとめてポートフォリオとして提出しました。
（せっかく一通り模写して作ったし、なんかもったいなかったので）
面接のときもそのサイトを見ながら、なんで良いと思ったかって感じで面接で話したのを覚えています！
デザイン力を上げるってなかなか時間がかかると思います。
ただ、こういったことを考えながらデザインを勉強することでデザインの引き出しが多くなってデザインすることが楽しくなってくるので、諦めず何度も何度も模写してデザイン力を上げていきましょう!!!
