今回は未経験から独学でWebデザインスキルを身につけて、副業で収入を得られるようになる勉強方法を紹介します。
目標期間は3ヶ月。
最初はダラダラとやるよりも「このくらいの短期間で仕事をとるんだ！」という気持ちで取り組んだほうが成功率が高まるからです。
この記事を書いている僕はWebデザイン歴15年ほど。
自作のネットショップ運営を本業にしながら、10年くらい他社さんのホームページ制作などを副業で請け負っています。
僕は特に学校とかでデザインの勉強をした経験はありません。むしろパソコンも苦手なほうでした。
その状態から独学でWebデザインのスキルを習得しましたので、その経験からおすすめの勉強法を紹介します。
この記事はこんな方に読んで欲しいです。
■Webデザインに興味があるけど何から始めていいか分からない
■在宅で副業ができるようになりたい
■自分の力で稼げるスキルを身につけたい
この記事を読んで実践するとこんなスキルが身につきます。
その他にも独学での注意点などについても書きましたのでぜひ参考にしてみてください。
スポンサーリンク
目次
独学でWebデザインの仕事をするために絶対必要なスキル
Webデザインの仕事をするために必要なスキルはPhotoshop（フォトショップ）です。
PhotoshopはAdobe（アドビ）という会社が出している有料の画像編集ソフトでして、プロのWebデザイナーの方はまず使用しています。
画像編集ソフトは無料でも例えば「GIMP」のように高機能なものもありますが、こういった無料ソフトをメインに使っているプロの方を僕は知りません。
なのでWebデザインで仕事をするためにはこのPhotoshopを使えるようになる必要があります。
というわけでこの記事ではPhotoshopを使ったWebデザインの独学での勉強方法について紹介します。
その前にこちらの記事が未読でしたらまずはこちらからご覧ください。
独学でWebデザインの仕事をするための勉強方法
３ヶ月で仕事を請け負うまでのスケジュール目安
先ほど紹介した在宅副業のためのPhotoshop学習の始め方【完全初心者向け・目標３か月】内でも紹介した内容になります。
重要な部分なのでこの記事ではさらに深堀りしてみたいと思います。
■１ヶ月目・・参考書をもとに基礎学習する
■２ヶ月目・・基礎をもとに参考デザイン（バナー画像がおすすめ）を真似て自分でつくりまくる
■３ヶ月目・・オリジナルでデザインしてみる
【１ヶ月目】
Photoshopの入門書を読みながら基本的なスキルを身につけましょう。読むだけではなく、実際にPhotoshopを操作しながら体感するのが大事です。
何冊もやる必要はありません。むしろ１冊を何回も繰り返して体で覚えていく感覚です。
こちらの記事で入門書３冊と実践用４冊を紹介していますのでご参考下さい。
【２ヶ月目】
基礎をもとに参考デザインを真似て自分でどんどんWeb素材をつくりましょう。
その際は「バナー画像」の制作がおすすめです。Webデザインの基本的なスキルが身につきます。
完璧にコピーできなくてもOKです。同じ写真は使えないので雰囲気を似せる感じで。
ここは数の勝負です。バナー画像だったら１ヶ月で20個くらいはつくりたいところ。
こういったバナー画像参考サイトから気に入った画像を選んで真似て作ってみてください。
【３ヶ月目】
３ヶ月目はオリジナルのデザインをつくっていきましょう。ここで制作したものは自分の制作実績としてフォルダーにまとめておいて下さい。
ここめちゃめちゃ大事です。
仕事を初受注する際にクライアントに制作実績を提出すればグッと請け負いやすくなりますので。
Webデザインの基本的なスキルを身につけるためにバナー画像を作りまくってみよう
ここからは深堀りの内容です。
【１ヶ月目】参考書をもとに基礎学習するはとにかくやるのみです。
紹介した入門書を繰り返し読みながら自分でPhotoshopを操作してみてください。
Photoshopには色々なツールや「レイヤー」・「マスク」・「選択範囲」などの機能があります。それぞれどんな機能なのかパッと思い浮かぶようになるまで学習しましょう。
僕の経験上、最も大切なのが【２ヶ月目】参考デザインを真似て自分でつくりまくるです。
ここでどれだけ数をこなせるかで実力がぐーんとアップします。逆にいえば独学で挫折しちゃう人は【１ヶ月目】の部分から抜け出せないパターンが多いです。
参考書を一通り読んで覚えた気になっちゃうみたいな。
読んで覚えたものはだいたい寝たら次の日には忘れてます。
例えばギター入門書を繰り返し読んでも実際にギターに触らないと上達しないのと全く同じです。
参考デザインを真似る具体的方法
では具体的にどうやって参考デザインを真似ていけばいいのかみていきましょう。
制作過程については長くなるので流れだけ説明します。分からない部分はググりましょう。大抵の疑問は解決します。このググる力を身につけるのも大切です。
まずは先ほど紹介した「バナーデザインアーカイブ」から作りやすそうなものを選びます。
今回はこちらの画像を選んでみました。
選ぶポイントとしては、「写真」・「背景」・「文字」で構成されているものだと作りやすく色々スキルも身につくのでおすすめです。
参考画像を選んだら、その画像がどんなパーツでつくられているか分析します。
今回の参考デザインですとこんな感じです。画像サイズは「幅300px・高さ250px」です。
まず同じサイズのドキュメントを開いて背景からつくっていきます。
参考画像の背景はグラデーションがかかっているのでスポイトツールで濃い色と薄い色を拾って同じような感じにします。四辺に１pxの境界線が引かれているので同色で引きます。
次に写真を配置します。
写真は商用利用可能なフリー素材から探してみるのがいいです。仕事で請け負う際には良いのがなければ有料の写真を使うこともあります。
写真素材についてはこちらの記事をどうぞ。
配置する写真は切り抜く場合がほとんどです。切り抜きはパスでおこなうのが良いでしょう。
必要に応じて明るさや色味を調整します。今回の画像も参考デザインに合わせてコントラストを強めにしました。
次にテキストを配置していきます。
テキストでポイントなのはまず「ゴシック体」か「明朝体」かを見て似たフォントを使います。
次にテキスト色はスポイトツールで実際に参考デザインと同じ色を指定しましょう。
あとはフォントサイズを合わせて配置する位置も同じにします。デザインする場合、写真やテキストの位置は計算されていますので真似することでバランス感覚が身につきます。
続いてシェイプ（丸）と上部のラインを追加します。
シェイプ（丸）は上部がグラデーションで少し薄くなっているので「レイヤー効果」の「グラデーションオーバーレイ」で同じように表現します。境界線も1pxで加えます。
上部のラインは両端に透明のグラデーションがかかっているのでラインに「マスク」をかけてグラデーションツールでやってみました。
最後に違和感があるところを修正して完成です。
背景を少し薄くして鍋に影をつけ、背景下部の質感を参考デザインの感じになるようにトーンカーブで調整しました。
また湯気もトーンカーブで作成しています。
参考画像と比較するとこんな感じです。
参考画像の雰囲気をだいたい再現できてると思います。
最初のうちはここまで再現できなくても大丈夫です。
「全然同じ感じにならないよ！」ってなると思いますが、とにかく数をこなしていけばできるようになっていきます。
20個くらい作ればクラウドソーシングでバナー画像作成の案件は十分こなせるでしょう。
「どうやって影をつけたらいいのか？」
「グラデーションはどうやってつけるのか？」
ひとつひとつ分からないことをググって調べて再現できるようになっていくと驚くほど力がついていきます。
バナー画像からステップアップしたい場合は実際のWebサイトやLP（ランディングページ）を再現するのがおすすめです。
３ヶ月目のオリジナルでデザインしてみるは自分で仕事依頼を想定してバナー画像やLPを作成してみましょう。
取り扱う商品を決めて実際にそれが売れるようなテキストや構成を考えて作成するのがコツ。
先ほども書きましたがここで大切なのは作成したものを制作実績としてまとめておくことです。
クラウドソーシングでも他の方法でも仕事を受注するにはアピールとして過去の制作実績を提出するのが基本だからです。
もちろん自分が請け負いたい仕事に関するものを制作するのが効率的です。
以上が独学でWebデザインのスキルを身につけるおすすめの方法です。
要はひたすらお手本となる参考デザインを真似ることです。再現性が高まればクライアントの要望にもスムーズに応えられるようになります。
Webデザインを独学する際の注意点
僕はPhotoshopを含めWebデザインのスキルは独学で身につけました。
というのも僕が始めた15年くらい前は今のようにオンライン講座や動画など手軽に教われる環境が無かったから。
僕の経験上、独学するうえでのデメリットは次のとおりです。
■時間がかかりやすい
■挫折しやすい
■間違ったやり方が身についてしまうことがある
独学の場合どうしても時間がかかってしまいます。
最初のうちは何をすべきかも分かりませんので手探りで進めていく状態。
これはしょうがないです。教わるよりも独学のほうが時間がかかってしまうのは当然ですから。
ただ、時間がかかること自体は決定的なデメリットではなくて問題は時間がかかると挫折しやすいという点です。
Webデザインで収入を得ることが目的の場合、当然少しでも早く稼げるようになりたいと思うのが普通。
それに反して時間をかけて勉強しても思うような成果にならないと挫折します。
また独学の場合、間違ったやり方が身につく恐れがあります。
僕の例ですと、当時画像を切り抜く際に消しゴムツールを使っていました。今では考えられないことですがその時はそれが正しいと思っていたんですね。
ある日デザイン会社に切り抜いた画像を納品した際に思いっきり指摘されました「パスでやってください」と（笑）。
今思うとホントに恥ずかしいんですが・・。
独学だとどうしても我流になりがちです。それでもいいんですが仕事としてやり取りする場合、最低限のルールがあるんです。
それは書籍などからでは身につきにくいため、僕のように恥ずかしい思いをしてしまうことも。
こればかりはやはり誰かから教わって気づいていくしかないのかなと。
なのでもし本気でWebデザインで収入を得たいと考えているのであれば、今の時代オンライン講座なども利用して勉強するのも良策ですよ。
ある程度のお金は必要になっちゃいますが投資と考えて後で回収すればいい話なので。
もし僕が勉強を始めた当時にオンライン講座のような気軽に教われるサービスがあったのなら間違いなくやっていました。
Webデザインで仕事ができるスキルを身につけるためにおすすめのオンライン講座はこちらの記事で紹介しています。よければご参考ください。
まとめ
未経験から独学でWebデザインスキルを身につけて、副業で収入を得られるようになる勉強方法を紹介しました。
ポイントとしては参考書などで一通りの知識や基礎を身につけたあとは、
徹底的に参考デザインを真似てつくりまくる
ということです。もうこれだけ。
上達しない人や挫折しちゃう人は制作数が少ないんだと思います。
逆に短期間でも仕事を受けられるようになる人は圧倒的に制作数をこなしています。
PhotoshopやWebデザインは頭で覚えるというよりも体で覚えていく楽器のようなものですので、とにかく作りまくることが近道になります。
あとは正しいやり方を身につけるように意識しましょう。
今日はこのへんで。
それではまた！
