Webデザイナーになる方法【両学長から教わるおすすめ副業】【収入アップ】

副業としてせどりやプログラマーが
よく取り上げられていますが、
本業との制約があり、別の副業を検討せざるを得ない
という方もいます。

そのような方にはウェブデザインが
大きな選択肢の候補となります。

なぜなら一人で始められて実績を積めば
ある程度稼ぐことができるからです。
プログラミングと並んで
1から始めるのにおすすめの副業です。

10代で起業し、様々なビジネスをして
経済的自由を獲得したリベ大両学長が
経営者としての経験から
最初に必要なもの、どのぐらい稼げるのかなど
Webデザイナーになるための方法を紹介しています。

Webデザイナーで月5万円を稼げるようになるために
最初にすべき行動ができるようになります。

おすすめスキル「WEBデザイナー」になるための勉強法

第4回 お勧めスキル「WEBデザイナー」になるための勉強法【稼ぐ 実践編】https://t.co/Y7xO7BfsYA

・WEBデザインは稼げるか？
・稼げるまでにどれくらいかかるか？
・WEBデザイン勉強法

WEBデザインはプログラミングに比べて初期投資は高いけど、その分初心者が最初につまづきにくいスキルやで^^

— 両🦁自由に生きるための知恵を配信中 – リベ大学長 (@freelife_blog) March 28, 2019

Webデザインを学ぶ手順がマインドマップで解説されています。

いくつかテキストを勉強した上で、次にどう進むか考えていたの
で自分にピッタリな動画でした。

小さい仕事探し、MENTA やWebデザインのサロンなども視野に入れてみようと思いました😄https://t.co/OZTDMSTwyD

— 珈琲豆助＠イラスト屋 (@cafeemamesuke) August 5, 2020

視聴者からのご質問

学長はプログラマーをおすすめスキルのひとつに推奨されています。
WEBデザイナーはどうでしょうか？
WEBデザイナーになるための勉強法も併せて
教えてもらえれば嬉しいです。

両学長の回答

稼げるかどうかはプログラマーと同じで
人による
としか言えないが、
両学長は稼げると答えている

転職、副業、起業もできるし、
そして融通の利くスキルである。
このあたりもプログラマーと同じ

学習の費用対効果が高い。

時間と場所に囚われない

会社員でも比較的自由な会社にも就職しやすい。
在宅ワークもしやすい。

資格が要らない

努力次第で学習時間が短くて済む。

例えば医者になろうとすると…
大学6年→研修医
を経る。
これだけで時間が何年も費やされる。

転職もしやすい

一定レベル以上のデザイナーだと即戦力。

学習コストも安い

学費の高い大学、専門学校に行かなくて良い。
必要ツールはプログラマより少し高め。

小資本からスタートできる

副業、起業するのに有利

学べば学ぶほど自分の価値が上がっていく

短期的には稼げなくても
将来どんどん稼げるようになる。

ITリテラシーが上がることで騙されにくくなる

良い情報にアクセスしやすくなる。
情報感度が高くなる。
非IT業の会社員でも知っておくことで役立つ。
生きていく上で得をする事が多い。

WEBデザイナーとは

次の２つに分けられる

全部をやる人もいれば、
何かに特化した人もいる。

コーダー

イチからHTML、CSS、JavaScriptを使ってWebページを作成。

CMS（WordPressなど）をデザインに組み込む。

絵（完成イメージ）として描かれているものを
ホームページにしていく。

グラフィック系Webデザイナー

ほとんどの人がイメージするWebデザイナー像に近い。
Webサイトの「見た目」に関わる部分を主に作成。

最初の絵（完成イメージ）を作る（デザインする）のが
グラフィック系Webデザイナー。

コーダーとグラフィック系Webデザイナーを
兼任することもよくある。

よく「センス」が必要と思われがちだが…。

センスがなくても「理論でデザイン」できる。
センスはあるに越したことはないが、
現場では「なぜそのデザインにしたのか」の理論の方が大事。
「なぜ」の理論を学ぶことで誰でもデザインは可能。

この2つからの派生形

紙系デザイン

名刺作成・販促グッズ作成業務に派生しやすい。

イラストレーター

絵を描けるデザイナーなら、
ちょっとした素材などは自作したり、
素材を販売したりできる。

グラフィックデザイナー

主にロゴやキービジュアル画像など、
1枚ものの画像を作成するイメージ。
簡単なモノならWebデザイナーが兼任して作成することもある。

フロントエンジニア

半分プログラマ領域。
コーダーから派生。

UI/UXデザイナー

主にインターフェースなどに関わる
画面とか見た目とか使い勝手みたいな。
サービスを利用することによる
ユーザーの体験にフォーカスした職種。

WEBディレクター

プログラマーデザイナーと、
お客さんの間に立って、
プロジェクトを遂行する。

プロジェクトを指揮監督する人。

WEBデザイナーはそもそも稼げるのか？

月数百円～数万円レベル

バナー作成などの小さな案件でお小遣い稼ぎ。

ブログデザインのカスタマイズ、
個人ブログのロゴ制作、
ちょっとしたデザイン改善、など。

月数万～数十万レベル

クラウドソーシングで
少し規模が大きめ、スキル高めの案件を受注。

• デザインだけ
  難易度にもよるが1ページ1万~10万
• コーディングだけ
  難易度にもよるが1ページ1万~5万
• デザインとコーディング一貫して行う
  10万以上
• WordPressの組み込み

グラフィックが得意な人はロゴ作成などの案件もある。

特急案件をうけることで
高額受注することも可能。
特急対応ができるだけのスキルが必要。
通常案件の1.3倍以上の値段になっていることが多い。

このレベルになれば、転職でも即戦力レベル。

月100万以上

WEBディレクターになって
外注さんを使いながら大口案件を捌ける人。
難しいスキル（UI/UXデザイン、フロントエンドの開発など）を持っている人。
最近はアプリUI系とか、人が足りていないところは高額になったりする。

どのぐらいで稼げるようになるのか？

人によるが月額数万円以上稼げるスキルを
身につけるには1~2年くらい。
もちろん営業が上手な人やセンスのある人はもっと早い。

バナー作成のような軽い案件、
お小遣い稼ぎ程度ならば割とすぐできる。
注：元々グラフィックデザインのセンスがある場合。

初期投資費用

スペック高めのパソコン

iMacかMacBookProで18万円ぐらい。

できればサブモニターも…あると効率が上がる

ツール系

• Adobe Illustrator
• Adobe Photoshop

とりあえず体験版なら無料で触れるので触ってみる。

購入する場合は下記からも可能。

両方使う場合はコンプリートプランの方が料金が安い。
月額6000円程度。

Adobe以外にデザイン系ソフトはあるが、
業界内で圧倒的にAdobeが使われているため、
本格的にWebデザインをするなら遅かれ早かれ
習得することになる。

スクールに通うならさらに何十万とかかる。

その他に場合によって必要なものは

• 効率化のためのツール
• 勉強のための本や動画

などなど、月数百円～1万円程度。

プログラマーよりは初期投資にお金がかかる。

だが、大学や専門学校に通うよりはだいぶ安い。

どこで覚えれば良いか

独学、もしくは学校になる。

独学

本

入門書を本屋や図書館などで見てみて、
自分に合いそうなものを選ぶ。
基礎だけなら、本による違いはほとんどない。

Webサービス

progate
Web上で操作しながら言語を学ぶことができる。

MENTA
メンターを探すのにぴったり。
Web系のメンターが多い。

teratail
Web系の掲示板

オンラインサロン
Webデザインに特化したサロンがあります。

実地訓練

コンペに出してみたり
知り合いのWebデザインを作らせてもらったりするが、
初心者がいきなりやるにはハードルが高いので
最初はprogateで学ぶことになる。

ワークショップに参加

各個人が開催している「もくもく勉強会」など。

• ストアカ
• compass

Twitterなどでオフ会（勉強会）している人もいます。

学校

一人だと勉強がはかどらない人にはおすすめ。
同級生や先生との人脈もできる。
ただし初期投資は高額＆まとまった時間も使う。

目に見えて動く分、プログラミングよりも心が折れにくい。
分からないことが分からないとはなりにくい。
プログラミングは合う合わないがある。

それぞれにメリット・デメリットはあるが、
独学で初期投資が少なくても、ある程度いける。

一部有料サービスあり（学校よりは安い）。
自分に向いている勉強法をすればOK。

Webスクール（動画系）

WEBデザイナーはどの言語・ツールを学べば良いか？

学ぶ言語は下記の通り

• HTML（必須）
• CSS（必須）
• JavaScript（あったほうがいい）

この３つでほぼ事足りる。

必要なツールは下記の通り

• Adobe Illustrator（必須）
• Adobe Photoshop（必須）
• Adobe XD
• Sketch
• エディタ
  • Adobe Brackets
  • Adobe Dreamweaver
  • Subtime Text
  • Atom
  • Code

Adobe以外の無料ソフトでは
まだマニュアルなどが充実していなかったりする。

現状としてはAdobeを使用するしかない状況。

エディタについては
なんでもいいので、触りやすそうなもの。
有料のものあるが、とりあえず無料でいろいろ触ってみるといい。

リベ大ではBrackets（無料）を使っている人が多い。

WEBデザイナーになるための大まかな流れ

HTML、CSSの基礎概念を学ぶ

• Progate
• ドットインストール
• Schoo

とりあえず無料でも十分。
もちろん書籍などをみてもいい。

基礎概念をちゃんと学ぶ。

Adobeの体験版をインストールして、使い方を勉強する。

Adobe公式YouTube動画もある。

書籍は買わず、
とりあえず動画を見ながら触って覚える。
ということも可能。
最初から100%理解するのは大変なので、
分からないことは都度検索して使い方を覚える。
個人のブログなどで操作の解説をしてくれるところがいっぱいある。

基本的なデザインの理論を学ぶ

どうしたらきれいなデザインが作れるのか？
余白のとり方、フォントの決め方など。

美しいデザインはある程度、理屈で決まっている。
絵や芸術的な作品なら
いろいろ大胆なやり方があると思うが、
デザインの場合は、人が見やすい、という目的なので
構図やデザインはある程度、決まってくる。

ショッピングサイトでも使いにくいデザインがあったりする。

使いやすいデザインはだいたい決まっている。

書籍で学ぶなら

昔から基礎としてよく読まれている代表的な本。
他にもいろいろある。

動画教材ならUdemy。

いろいろなブログでWebデザインを検索すると出てくる。

デザインの理論（ルール）を学ぶことで、
センスに限らず説得力のあるデザインを作ることができる。

この段階で一旦、方向性を考える。
（興味関心がある方、得意な方）

最終的には両方やってもいいし、
どちらかを突き詰めてもいい。

ちなみにリベ大のWebデザイナーはデザインもコーディングも両方できる。
でも個々によってコーディングが得意な人もいれば、
デザインが得意な人もいる。
会社によってはコーディングとデザインが分業のところもある。

ひとつひとつやり込み要素のある奥深い技術。
それゆえに専門分野としての需要がある。

深い技術がない代わりにいろいろできる人も、
それはそれで需要がある。
一人で一貫して完結するモノづくりができる。
最終的にはWebディレクターなどにもいきやすい。

現場でやりながら、
必要に応じて足りない部分を補完して
スキルの幅を広げる。
そのため、どこまで習得すれば終わり、
というものでもない。

グラフィック寄りに行く。

バナーやサイトのトレース。
IllustratorやPhotoshopの触り方を覚える。
デザインの基礎（余白や配色）をマネしながら学ぶ。

トレースする題材の探し方。

• 自分が好きなサイト
  自分が普段見ているサイトがあるなら
  そのサイトをみてデザインソフトで再現してみるのもOK。
• Pinterest
  いろんな人が良質なデザインをたくさん登録してくれるので、
  その中から探す

とにかく良いデザインをマネしてみて、
「どこが良いか」「どういう風にデザインを再現しているか」を知る。
検索すればいろいろ出てきます。

ある程度、ツールの使い方が分かり、デザイン力が上がってくれば実践してみる。
まずはバナー作成など、簡単な仕事にチャレンジ。
出来ることから始めて、徐々に大きな仕事につなげていく。

• クラウドソーシング
• ココナラ
• スキルクラウド

などなど。

勉強を兼ねて自分のポートフォリオを制作してみる。

コーディングも両方勉強したい方は、ここでコーディングの勉強もする。
イチからHTMLとCSSを作らなくても下記のようなツール（CMS）を
カスタマイズしてもいい。

• 無料テンプレート
• WordPress
• wix
• STUDIO

コーダー寄りに行く

HTML・CSS・javascriptを学ぶ。

• Progateの上級
• ドットインストール
• Schoo
• Udemy

などで、まずは概念を理解する。
実際に自分でサイトをコーディング（コードを書く）をしてみる。

無料テンプレートサイトなどからファイルを
ダウンロードしてお手本にする。

商用可能なホームページテンプレート、
レスポンシブ、WordPressテーマがダウンロードできる。

イチから手を動かしてみると、
「これをどうするの？」という
疑問が出るので、
その都度、調べたり質問する。

コーディングをする上でSEOの知識を学ぶ

• 書籍
• Schoo

検索すればいろいろ出てくる。
古い情報も多く、移り変わりが激しい。

勉強を兼ねてまずは自分のポートフォリオを制作してみる

デザインも両方勉強したい方は、ここでデザインの勉強もする。

オリジナルでデザインをしない場合でも、フリーの素材サイトなど上手く利用する。
イチからHTMLとCSSを作らなくても下記のツール（CMS）をカスタマイズしても良い。

• WordPress
• wix

調べながらでもある程度コーディングでサイトを形にできるようになったら実践する

まずは部分的なコード変更など、簡単な仕事にチャレンジ。
出来ることから始めて、徐々に大きな仕事につなげていく。

• クラウドソーシング
• ココナラ
• スキルクラウド

グラフィック寄りか
コーダー寄りかは
Progateをやっていく内に
分かるようになっていく。

勉強しながらでいいのでポートフォリオや制作実績を用意する

案件を受注する際、自分が「こんなことができる」というのが
相手にもわかるようにすることで仕事が受けやすくなる。
就職・転職する際にも必要になることが多い。
作りながら、必要なスキルや、やってみたいデザインが
新たに出てくると思うので、勉強の場にもなる。

勉強中、分からなければ、検索・メンターに聞く・Webサービスで質問すればいい

• MENTA
• 技術者が集まるオンラインサロン
• teratail
• Google検索

最初は上記で聞く方が早いですが、
色々検索をしていく内に検索力が上がる。
自力で解決できることも増えてくる。

どうやって時間を確保すれば良いか？

プログラマーと一緒ですが、
工夫してください。

両学長「勉強時間がなかなか取れないという人がいますが、
例え1日1~2時間でも取れないわけがない(笑)
取る気がない。（遊びに行く時間、通勤時間、休みの日。）」

自分の将来のために今、何に時間を使うか？

両学長「WEBデザイナーおすすめです！」

まずはかじってみるのもあり。
経験してみないと分からないこともある。
ぜひチャレンジしてみてほしい。

Webデザイナーは今後も稼げるのか？

第23回 Webデザイナーは今後も稼げるのか？【稼ぐ 実践編】https://t.co/DoibhcYqsh

最近は色んな無料サービスが出てきて、Webデザインに対する敷居が低くなってきてる。
Webデザイナーに限らず、時代の流れやニーズに合わせて仕事ができるかどうかが重要になってくるで^^

— 両🦁自由に生きるための知恵を配信中 – リベ大学長 (@freelife_blog) June 19, 2019

SNSの反応

Webデザイナーになりたいなぁと思って、今の勉強の仕方だと若干違うかも？と思う😅（完走はするつもり！）#デイトラ のデザインコース受講🌼

時間がないならお金をかける！
仕事の通勤時間、休み時間に予習☺️

両学長感謝です🙏

「WEBデザイナー」になるための勉強法　https://t.co/tWvWTbOSvi

— ぴょこ🍀WEBデザイン (@pyokoblog) July 7, 2020

MENTAっていうメンターのサービス始めて知った！SHE卒業して案件やるときに、誰にも聞けなかったら怖いなーと思ってた。いざという時に利用したらいいんだ！✨https://t.co/hZq5cYPYHo

— 新井ちひろ (@sametan00) May 17, 2021

Webデザインを学ぶ手順がマインドマップで解説されています。

いくつかテキストを勉強した上で、次にどう進むか考えていたの
で自分にピッタリな動画でした。

小さい仕事探し、MENTA やWebデザインのサロンなども視野に入れてみようと思いました😄https://t.co/OZTDMSTwyD

— 珈琲豆助＠イラスト屋 (@cafeemamesuke) August 5, 2020

あれ？自分のやってることな、webデザインの１つかもしれんな🤔

むしろこっちの勉強をしてから、PHPを後で勉強した方が効率的かも✨

勉強方をリセットしないとな💦スクール契約した方がいいかな？

第4回 お勧めスキル「WEBデザイナー」になるための勉強法【稼ぐ 実践編】 https://t.co/S1SKkPY72D

— メガネ@元美容師✂SEO髪の毛ライター▶今年は英文読めるようになる (@sekibiyou1984) April 15, 2019

両学長さんのYouTube動画にあった。ウェブデザイナーについて
昔から絵を描いたりしていてよく賞をもらってたことを思い出した。副業として稼ぐというのはおいといてチャレンジするのもありだと思った今日https://t.co/6MiGNzVNE5#両学長 #リベ大 #リベラルアーツ大学

— ゆうき@LPデザイン×営業 (@Yuki_ASARUM) August 3, 2020

こちらの動画もおすすめ

YouTubeチャンネル「両学長 リベラルアーツ大学」をもっと知りたい

これらの動画はYouTubeチャンネル「両学長 リベラルアーツ大学」でご覧いただけます。

このような方におすすめの動画がたくさんそろっています

著書

本当の自由を手に入れる お金の大学

話題本「お金の大学」が届いたー！

図解や余白が多くてとっつきやすい。易しい表現が多くて、めちゃくちゃ目線を下げて書かれてる印象😌

こういう本に興味が無い人こそ読むべき！

いつも両学長のリベ大観てる人は好きなアーティストのベストアルバムを買うつもりで買おう（笑） pic.twitter.com/P0A5hHiRjy

— ヤツテラ＠頑張らないゆる業で月10万 (@SuperLooser3) June 21, 2020

一生お金に困らない
5つの力が身につく
実践型ガイドブック

貯める・稼ぐ・増やす・守る・使う

表紙より抜粋

今日が人生でいちばん若い日。
お金の不安がない自由な生活を
手に入れるために、
学びの一歩を踏み出そう！

表紙裏より抜粋

著者：両＠リベ大

「両学長＠リベラルアーツ大学」関連の記事を書く目的

次の三点です。

• お金の知識を必要とされる方への橋渡し
• 両学長が発信されている膨大な情報を見やすく整理
• 自分自身の体験の検証

お金の知識を必要とされる方への橋渡し

間違ったお金の常識に洗脳されてしまい
困っている方もたくさんいます。
私もその一人です。

無駄な保険に加入してしまったり
十分な知識もなく投資信託を始めてしまったりしました。
大損こそはしませんでしたが
ちゃんとした知識、
例えば保険の勉強や、投資信託の常識を
事前に知っていれば十分に防ぐことが出来ました。

なぜ防げなかったかと言えば
お金に対する無知と
無知から出てくる不安
でした。

はじめて両学長の動画を見たとき
なぜこの知識をあの時勉強しておかなかったのだろうと
後悔しました。

もし両学長の動画の存在が伝えられれば
そして同じ後悔をしてしまうかもしれない方々にとって
大きな意義があるのではないかと思い執筆し始めました。

両学長が発信されている膨大な情報を見やすく整理

両学長のYouTubeチャンネルを見ると
膨大な数の動画を投稿しています。
その中で必要な動画、見たい動画、
過去に見たもう一度見たいあの動画
を探すうえで情報量が多いがゆえに
とても探しにくい状況があります。

また特定のテーマの動画をまとめてみたいときも
再生リストだけでは探しにくいという状況もあり
私自身が両学長の情報を整理したい
というところからこのような記事を書き始めた点にあります。

また、両学長ご自身が執筆された
「本当の自由を手に入れるお金の大学」という本もあります。

一生お金に困らない
5つの力が身につく
実践型ガイドブック

貯める・稼ぐ・増やす・守る・使う

表紙より抜粋

今日が人生でいちばん若い日。
お金の不安がない自由な生活を
手に入れるために、
学びの一歩を踏み出そう！

表紙裏より抜粋

著者：両＠リベ大

そちらは発信者である両学長が
体系的にまとめられているので
かなりわかりやすく作られています。
そちらから情報を探すという方法もあります。

個々の事情に合わせて
やりやすい方法からお選びいただければと存じます。

自分自身の体験の検証

実践をする機会もありますが
もちろんそれぞれの方々で事情は異なります。
実行できる場合もあれば
できない事情もあると思います。

それぞれのご事情でカスタマイズする必要があります。

例えば家賃交渉に関する記事も
自分が実際にやった場合と
両学長の事例とでは違いはありましたが
自分の状況を踏まえて
その中で自分が考えられる最善の選択肢を取りました。
それによってもちろん差異は出てきます。

両学長のケースだけでなく、
微力ながら私のケースも紹介することで
読者ご自身の状況判断に役立てられればいいな
という思いで執筆しています。

両学長＠リベ大　関連記事

両学長がおすすめする資格「簿記」と「FP」

両学長から学ぶ賃貸物件でぼったくられないための理論武装

両学長から教わる「保険」の基礎知識

【両学長から学ぶ】NISA＆つみたてNISA

【両学長から学ぶ】せどりの種類と稼ぐ手順を解説

両学長がおすすめする本

SNSアカウントなど

リベラルアーツ大学

ブログ

公式グッズショップ

YouTube

Twitter

所得税のよくある勘違いを図解にしてみたで^_^

例えば所得が195万を超えたら所得税が高くなるから195万未満に抑えておこうは間違い。

200万所得があったとすると195万以上の5万円部分だけ税率高くなるねんで^_^

そして謎の税率ゾーンに気付くとこの国のルールが垣間見えるかもしれん。笑 pic.twitter.com/ihe2igMXDW

— 両🦁自由に生きるための知恵を配信中 - リベ大学長 (@freelife_blog) November 14, 2018

男性は女性の出産と育児の大変さを知ろう！

産後の体は事故後のケガと同じぐらいの傷を負ってる。
そんな状態で家事なんか出来るわけがない。

世のママ達は育児も24時間年中無休でホンマに頑張ってるんや。

男は率先して家事育児に参加して、ママに迷惑かけんと自分のことくらい自分でやるんやで^^ pic.twitter.com/QMOAzvOwTB

— 両🦁自由に生きるための知恵を配信中 - リベ大学長 (@freelife_blog) August 26, 2019

Instagram

 

この投稿をInstagramで見る

 

両学長@リベ大(@freelife_blog)がシェアした投稿