こんにちは!フリーランスWEBデザイナーのYUKAです。今回は、私が独学でフリーランスWEBデザイナーになるために実践した勉強方法を公開いたします!
photshop編
一番初めに、photoshopの使い方を覚えることから始めました。何も分からず色々と調べる中で、「まずはphotoshopを覚えるのがおすすめ」という記事をたくさん目にして、よし!まずはここから始めよう!と決め、勉強を始めることにしました。
やっぱりまずはphotoshopから覚えるんですね!
グラフィックとWEBデザインかどちらを学びたいかによりますが、WEBデザインを学びたい場合はphotoshopから始めるのがオススメです!
参考にする記事を1つ決めた
photoshopを独学で勉強するにあたって、操作方法を覚えるために参考にするブログ記事を1つ決めました。必ずしもブログでなくても、参考書でも良いと思います。ブログの文章が読みやすい、本のビジュアルが好みなど、ご自身がわかりやすいと思うものであればどんなものでもOKだと思います。
私は下記のサイトの記事を参考にして覚えました。
参考記事を見ながら実際にphotoshopを操作して、基本的な使い方を覚えていきました。この時点では、最低限の使い方を覚えるだけで大丈夫です。
バナーの模写をした
ある程度photoshopの使い方を覚えたら、次に既存のバナーの模写をして、バナーを作る勉強をしていきました。
参考サイトからバナーを選んで、実物に限りなく近くなるように1から作っていきます。途中、分からないところがあれば都度検索して調べます。1つ完成したら、今度はテイストの違うものを選んでまた模写していきます。私は全部で5〜6個くらい模写をしました。
参考にしたサイトはこちら bannermatome
オリジナルバナーを作成した
模写がある程度できたら、photoshopの操作面はもう心配ないと思います!今後は、次のステップとしてデザイン力を身につけるためにオリジナルバナーを作っていきます。
ここでポイントがあります!未だにそうなのですが、どんなデザインを作るにも、基本的には「すでにあるものを参考に」しています。よく、デザインをするというと、全部自分で考えないといけないって思われがちなのですが、全くそんなことはありません。バナーがまとめてあるサイトを見て、アイディアを得て、いいなと思ったところは自分のデザインに積極的に取り入れていきましょう。
そうしていくつか自分の作品を作っていくことでデザインの勉強にもなるし、作ったバナーが自分のポートフォリオにもなります。
クラウドソーシングなどで実案件を受注した
ここまでできたら、練習で技術を磨いていくのではなく、実際の案件を受注することをおすすめします。自分の好きなデザイン、自分が作りたいデザインを作るだけでは提案力やデザインを通しての問題解決力は身につきません。基本的なスキルを身につけたら、ぜひ実際の案件にチャレンジしていってほしいなと思います。
注意点としては、クラウドソーシングのバナー案件はかなり競争率が高いという点です。もし、なかなか案件獲得に繋がらなければ、ヘッダー作成などにチャレンジしてみてもOK。特に、アメブロヘッダー、youtubeサムネイルなどであれば、身近な友人・知人の方で必要としている方がいるかもしれないので、声をかけてみても良いと思います。
基礎を覚えたら、とにかく実際の案件を受けてみることをおすすめします!スキルは実案件を通して着実に身についていきます!
案件を受ける前にたくさん練習してスキルをしっかり身につけないと不安だと思っていたけど、まずは案件を受けることを優先した方が良いんですね!
HTML/CSS編
photoshopで画像制作ができるようになったら、平行してHTML/CSSの学習をしました。早めにコーディングの勉強をしようと思ったのは、自分がコーディングが苦手ではないか、嫌いではないかを確かめたかったからです。
WEBデザイナーになりたいと思った時からずっと、一番憧れが強かったのは「WEBサイト制作」のお仕事でした。なので、コーディングをすることが自分に向いているかを確かめたかったのです。
コーディングって難しそう…
HTMLとCSSの基礎を知っていることが大切なので、難しく考えなくて大丈夫です♪
では、実際にHTML/CSSを覚えるために実践した方法をご紹介いたします。
参考書を読んで用語や基本的な構文を理解した
まずは、未知の世界だったWEB言語と向き合うために、参考書を購入して一通り読んでみました。本当だったら、PCを触りながら読み進めるのが良いのかもしれませんが、私はとにかく本を読み切ることを優先しました。本を読んで、言語の種類、用語、構文など、まずは「言語」としての理解を深めたいと思ったのです。
1回読んだだけでは何となくしか分かりませんでしたが、それでもHTML/CSSとは何か?それぞれ何のための言語で役割がどう違うのか?などをまず知れたことは私の中でとても意味がありました。
progateでひたすら学習した
参考書を読んだ後は、もうひたすら言語に慣れること、コードを書きまくることで言語を「体得」していきました。その際のおすすめは圧倒的に「progate」です。これを何周か繰り返すことで確実にコーディング力が鍛えられます。progateのHTMLとCSSの初級・中級・上級・道場、全部通して一通り学ぶのがおすすめです。
おすすめはこちら プロゲート
エディタをインストールした
HTML/CSSはエディタと呼ばれるソフトに書き込んでいきます。progateの学習が終わったら、ご自身のお好みのエディタをパソコンにインストールして、コードを書けるように準備をしましょう。
おすすめはこちら Atom
LPの模写コーディングをした
progateを何周かして、エディタの用意もできたら、今度はLPのまとめサイトから模写できそうなサイトを見つけて、模写してみました。なるべくそっくりそのまま模写することを心がけましたが、完全に同じものを作るのは難易度が結構高いです。自分の中で、余白は適当でOKとか、何かルールを決めてやってみることをおすすめします。
途中、分からなくなったらChromeの検証ツールを使ってどんなコードになっているかを確かめながら進めると、より学習が深まると思います。
おすすめはこちら LP アーカイブ
オリジナルのLPを作った
photoshopの時と同様、基礎的な部分の学習が終わったら、オリジナルを作成してデザインの勉強につなげていきます。サイトのデザインはコンテンツの順番や構成、レイアウトなど、デザインで気をつけるポイントがたくさんあります。バナーの時同様、参考サイトを見つけてお手本にしながらオリジナリティーを加えていくと良いと思います。コードの練習なので、WordPressなどのサイト制作ツールは使わず、HTML/CSSのみで作っていきます。
クラウドソーシングなどで実案件を受注した
自分でオリジナルのサイトが作れたら、早速案件を受注していきます。サイトデザインとコーディング、トータルで受注するのがハードルが高ければ、どちらかだけでもOK。私は、最初にLPのコーディングのみの案件をクラウドソーシングで受注しました。
まとめ
WEBデザイナーになるために必要なスキルはたくさんあります。まずは、どんなWEBデザイナーになりたいのか、どんなお仕事をしたいのかをイメージしてみて、それを実現するために必要な最低限のスキルを身につけることをおすすめします。
私の場合は「サイト制作のできるWEBデザイナー」を目指していたので、そのために上記のような学習をしました。もし、受けたいお仕事がチラシや名刺、パンフレットのデザインであれば、WEBデザインの学習より先にグラフィックデザインの習得が先になりますので、illustratorの学習が必須となります。
どんなデザイナーになりたいのか、ビジョンをしっかりと考えて、夢を叶えるために効率的な学習をしていきましょう♪