Webデザインスキルを伸ばしたいけど、効果的な学習方法が分からない…
このような悩みをお持ちの方は多いのではないでしょうか？
Webデザインを学習していて、スキル成長を実感できなかったり、成長が停滞してるかも…なんて時もありますよね。学習方法を調べてみても何を実践したらいいのか分からないという方も多いと思います。
そこでこの記事では、Webデザインを上達させるとっておきの方法を紹介します。
その方法とは、いいデザインを真似ることです。これをデザイントレースと言います。このWebデザイントレースの効果と実践方法についてこの記事で紹介します。
この記事を読むことで、Webデザイントレースの実践方法がわかり練習を始めることができます。
株式会社SAMURAI
SAMURAI ENGINEER Blog編集部
日本初の現役エンジニア講師によるマンツーマン専門プログラミングスクールを運営。卒業生は累計28,000名以上。挫折しないプログラミングスクールNo.1にも選ばれています。2013年創業以来の運営で得た知見をもとに、プログラミング学習・スクールの選び方・エンジニアのキャリアについて専門的な立場から解説します。
Webデザインの上達にはデザイントレース
ここではWebデザイントレースが何なのかということと、Webデザイントレースで身につくデザインスキルについて紹介します。
デザイントレースとは
トレースとは日本語で写経するや模写するという意味があります。デザイントレースとはあるデザインを模写することです。つまり、お手本のデザインを見ながらデザインを再現することなんです。
Webデザインを長年やっている人でも、いいWebデザインを見つけたらやっている程効果的なWebデザインを上達させる方法なんです。
有名な画家であるピカソの名言でこのような言葉があります。
「凡人は模倣し、天才は盗む」
これはどういう事かというと、普通の人で終わる人はただ単にコピーで終わる人で、天才はいいところを取り入れて自分の形にしてアウトプットするという事です。
デザイントレースは先人のスキルを盗むために実施するのです。
デザイントレースで身に付くこと
デザイントレースをやることで身につくことは、
- いいデザインの感覚
- 思考力
- デザイン知識
上記の3点を身につけることができます。
世の中にある良いデザインには、先人のデザイン知識や長年の経験で身につけたデザイン感覚が多く使われています。そのためデザインを真似することで、先人の知恵や技術を盗むことができます。
ここでの注意点として、何も考えずない思考停止状態で作業しないことです。思考停止状態で実施しても効果がでにくくなるためオススメしません。
デザイントレースを実施するときは、なぜこのデザインにしたのか、なぜこのデザインが良く見えるのかということを考えながら実施しましょう。
デザイントレースの実践方法
実際にデザイントレースをするための実践方法について紹介します。
- トレースする対象デザインを決める
- 対象のデザインのスクリーンショットを取る
- Photoshopで再現する
上記のような流れになります。この詳細について紹介していきます。
トレースする対象のデザインを決める
まずはトレースするデザインを決めましょう。決め方としては様々ありますが、自分が素晴らしいと思ったデザインを選んでやってみるのが一番です。
ですがより実践的で効果的にWebデザイントレースをする場合は、制作ジャンルを決めて実施してみましょう。
例えば、
- コーポレートサイト
- キャンペーンページやLP
- バナー
などまずは1つのジャンルに絞ってやってみる方が、あれこれとやるよりもジャンルの特徴をつかめるので実務をやるときに抵抗なく入ることができます。
ジャンルを選ぶときは、今後携わる業界やジャンルから選ぶことをオススメします。
Photoshopで対象を再現する
トレースするデザインを決めたたら、スクリーンショットを撮って撮ったものをPhotoshopに貼り付けましょう。
貼り付けたものを横に置きデザインを再現していきます。実際に再現する時の注意点は、細部まで再現するようにしましょう。
例えば、文字大きさや余白の使い方や影の付け方などです。細部に注意して再現することで今まで気づかなかったデザインのコツに気づくことでできて、デザインスキルを一段とアップさせてくれます。
トレースがはじめてなら動画学習がおすすめ
実際にしてみたいけど、ちゃんとできるか不安な方も多いと思います。
そんな方はまずは動画を見ながら学習しましょう。UdemyやYouTubeでWebデザインのチュートリアル動画が多く公開されています。
動画を見ながらやることで、
- ベテランの方の思考
- デザインを作る手順
- デザインツール効率的な使い方
上記のような事を学ぶことができます。実際にデザインを作成しているところを見る機会って少ないので、動画学習はオススメです。
まだトレースできるか不安という方はまずは動画学習からはじめてみましょう。
Webデザインスキル上達のために日常でやるべきこと
これまでWebデザイントレースについて紹介してきましたが、ここではWebデザインスキルを上達させるために普段からやっておきたいことを紹介します。
いいデザインに触れること
普段からデザインのまとめサイトなどで、洗練されたデザインに多く触れてみましょう。いいデザインをストックしておくことで今後の参考になります。
「Pinterest」などを使って、いいと思ったデザインはすぐに見れる状態にしておくとベストです。
こちらの記事で、デザインのまとめサイトを紹介しているのでブックマークしておきましょう！
https://www.sejuku.net/blog/6166 ブログカード
いいデザインを見つけたら観察する
先程いいデザインに触れることは重要と紹介しましたが、様々なデザインに触れながらいいデザインの観察をしてみましょう。
なぜいいデザインに見えるのかを観察して、自分のスキルに落とし込めるようにしましょう。
例えば、余白、配置、配色などを観察して、なぜいいと思ったのか、どういう点が良いのかということをメモしてみたりすることをオススメします。
観察して考えることによって、良いと思ったことを自分のデザインに取り入れやすくなります。
デザインが伝えたいメッセージを考察する
そう疑問に思う方も多いかもしれませんが、とても重要なことなんです。デザインを作るときには、必ず作成する目的があるからです。
例えば、コーポレートサイトであれば、企業のブランドイメージ向上や信頼を上げたいという目的があります。また、キャンペーンサイトやLPの場合は、商品を売るために作られています。
デザインを観察するのと併せて、デザインを通じて伝えたいメッセージを自分なりに考えて、デザインとメッセージの関係をストックしておくと自分の引き出しが増えて、結果的にデザインスキルの上達に繋がります。
普段からデザインを観察すると同時に伝えたいメッセージについても考えるようにしましょう。
まとめ：Webデザインの上達の一歩は小さな積み重ねから
この記事ではWebデザインスキルを上達させる方法について紹介してきました。
今回紹介した方法は、Webデザインを上達させる方法は、
いいと思ったデザインを真似することです。
また、普段からスキルを上達させるためにできることとして
- いいデザインに触れる機会を増やす
- なぜいいデザインと感じるのか観察する
- デザインのメッセージを考察する
以上の3点を紹介しました。
デザインに触れる機会を増やして考えるということはすぐにでもできるので、早速実践してみましょう。
