両学長

【リベ大両学長から教わる】Webデザイナーになる方法

両学長

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

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

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

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

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

両学長と言えばライオン。この画像はいらすやから引用
  • お金がなかなか貯められない
  • お金の不安から解放されたい
  • 老後の生活が不安でたまらない

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

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

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

表紙より抜粋

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

表紙裏より抜粋

著者:両@リベ大

お金を「稼ぐ力」

こちらはお金を稼ぐ力を養うための記事の一つです。

お金を稼ぐ力の各まとめ記事は下記の通りです。

スポンサーリンク

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

視聴者からのご質問

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

両学長の回答

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

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

WEBデザイナーの魅力
  • 時間と場所に囚われない
  • 資格が要らない
  • 転職もしやすい
  • 学習コストも安い
  • 小資本からスタートできる
  • 学べば学ぶほど自分の価値が上がっていく
  • ITリテラシーが上がることで騙されにくくなる

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

時間と場所に囚われない

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

資格が要らない

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

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

転職もしやすい

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

学習コストも安い

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

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

副業、起業するのに有利

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

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

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

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

WEBデザイナーとは

次の2つに分けられる

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

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

コーダー

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

CMS(WordPressなど)をデザインに組み込む。

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

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

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

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

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

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

デザイン≠芸術

デザイン=問題解決

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

この2つからの派生形

それぞれを専門でやる人もいれば、
各項目ごとに明確な区切りはなく色々な範囲をカバーする人もいる。
誰が何をどこまでやるか・線引きは結構あやふや。
関わる案件、会社などによる。

言葉ってそうやって生まれてくるものなのよね。

Webデザイナーの派生型
  • 紙系デザイン
  • イラストレーター
  • グラフィックデザイナー
  • フロントエンジニア
  • UI/UXデザイナー
  • WEBディレクター

紙系デザイン

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

イラストレーター

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

グラフィックデザイナー

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

フロントエンジニア

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

UI/UXデザイナー

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

WEBディレクター

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

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

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

月数百円~数万円レベル

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

バナーとは

Webページに掲載する小さいPR画像
あるページを宣伝する、
あるページを目立たせるためにはる画像。

参考サイト

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

月数万~数十万レベル

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

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

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

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

特急案件を請け負えるか、
というのも大きな武器となるのよね。

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

月100万以上

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

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

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

バナー作成のような軽い案件、
お小遣い稼ぎ程度ならば割とすぐできる。

注:元々グラフィックデザインのセンスがある場合。

初期投資費用

はじめるのに必要なもの
最低限この2つは必要
  • スペック高めのパソコン
  • ツール系(最低でもこの2つ)

スペック高めのパソコン

iMacかMacBookProで18万円ぐらい。

格安パソコンではダメね

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

ちなみに私が使っているサブモニターはこちら

大きくて見やすい。
2画面表示は作業効率が劇的に上がる。
ノートPCにHDMIケーブルで接続するだけ。

同じ大きさでももっと安いモニターもあるので
初期費用を抑えたい方は
他機種もご検討してみてください。

ツール系

  • Adobe Illustrator
  • Adobe Photoshop

出た!定番のソフト!

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

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

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

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

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

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

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

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

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

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

どこで覚えれば良いか

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

独学

独学の場合
  • Webサービス
  • 実地訓練
  • ワークショップに参加

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

私も何冊が読みましたがよかったのがこのあたり

Webサービス

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

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

teratail
Web系の掲示板

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

実地訓練

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

ワークショップに参加

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

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

学校

学校の場合

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

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

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

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

Webスクール(動画系)

Webスクール(動画系)の場合

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

学ぶ言語は下記の通り

  • HTML(必須)
  • CSS(必須)
  • JavaScript(あったほうがいい)

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

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

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

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

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

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

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

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

Webデザイナーになる流れ
  1. HTML、CSSの基礎概念を学ぶ
  2. Adobeの体験版をインストールして、使い方を勉強する。
  3. 基本的なデザインの理論を学ぶ
  4. この段階で一旦、方向性を考える。
    (興味関心がある方、得意な方)
  5. 勉強しながらでいいのでポートフォリオや制作実績を用意する
  6. 勉強中、分からなければ、検索・メンターに聞く、Webサービスに質問すればいい

HTML、CSSの基礎概念を学ぶ

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

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

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

Adobe公式YouTube動画もある。

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

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

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

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

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

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

書籍で学ぶなら

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

動画教材ならUdemy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

などなど。

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

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

コーダー寄りに行く

HTML・CSS・javascriptを学ぶ。

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

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

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

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

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

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

  • 書籍
  • schoo

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

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

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

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

  • WordPress
  • wix

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

スポンサーリンク

SNSの反応

スポンサーリンク

こちらの動画もおすすめ

スポンサーリンク

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

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

  • お金がなかなか貯められない
  • お金の不安から解放されたい
  • 老後の生活が不安でたまらない

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

著書

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

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

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

表紙より抜粋

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

表紙裏より抜粋

著者:両@リベ大

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

次の三点です。

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

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

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

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

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

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

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

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

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

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

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

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

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

表紙より抜粋

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

表紙裏より抜粋

著者:両@リベ大

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

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

自分自身の体験の検証

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

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

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

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

ご関係者のみなさまへ
表現や内容で、もし気になる点や問題点が
ございましたらお伺いさせていただきます。
お手数でございますが
フォームにてご連絡いただけば幸いです。

読者の方で
もし、どうしても気になることが
ある場合はフォームから
優しくご連絡いただけると助かります。

両学長@リベ大 関連記事

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

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

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

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

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

両学長がおすすめする本

SNSアカウントなど

リベラルアーツ大学

ブログ

公式グッズショップ

YouTube

Twitter

Instagram

 

この投稿をInstagramで見る

 

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

スポンサーリンク
シェアする
DMR-300GLをフォローする
よせあつめ
タイトルとURLをコピーしました