デザイン関連

Webデザイナーのなり方・手順を徹底解説【未経験でも3ヶ月で就職できる】

2020年9月25日

Webデザイナーのなり方・手順を徹底解説【未経験でも3ヶ月で就職できる】

 

ぎもんさん
Webデザイナーになりたい!なり方や手順が知りたいなぁ〜

 

このように思っている方は当記事を読めば悩みが解決します。

 

未経験からWEBデザイナーを目指そうとしても、実際なにをどうすれば良いのかよく分かりませんよね。

 

トモキ
私も今でこそWEBデザイナーとして働いていますが、目指そうとした当時は何を学んでいいのかわからず悩んだ時もありました。

 

それから色々考え模索して学習した結果、PCスキルなし、デザインセンスなしの人間でも3ヶ月でWEBデザイナーになることができたので、この経験を生かして当記事でWEBデザイナーのなり方・手順を詳しく解説していきますね。

 

当記事の内容

  • WEBデザイナーは誰でもなれるのかどうか
  • WEBデザイナーのなり方の手順
  • WEBデザイナーになるために何を勉強すれば良いのか
  • WEBデザイナーになるために、独学とオンラインスクールのどっちが良いのか

 

それでは早速記事を見ていきましょう!

 

はじめに:Webデザイナーは誰でもなれる?

はじめに:Webデザイナーは誰でもなれる?

 

WEBデザイナーのなり方や手順を解説する前に、そもそもWEBデザイナーは誰でもなれるのかということについて考えてみましょう。

 

トモキ
せっかく目指そうとしても、なれなさそうだったら意味ないもんね!

 

それでは早速。
結論からいうと、WEBデザイナーは誰でもなれます。

 

理由は、PCスキルなし、デザインセンスなしの自分でもなることができたから。

 

トモキ
昔から美術とかめっちゃ苦手でした。美術の成績は毎回安定の「2」。笑
ひ、低い...
おどろきさん

 

WEBデザイナーに必要なスキルは次の3点ですが、これらはセンスや才能などは必要なく、勉強すれば誰でも習得することが可能。

 

WEBデザイナーで必要なもの

  • デザインのスキル
  • グラフィックソフトの使い方
  • HTMLなどの言語の知識

 

デザインは理論に基づいて作っていくので、正直センスがなくてもある程度はできます。

 

「グラフィックソフトの使い方」や「HTMLなどの言語の知識」は、PCに詳しい方が理解しやすいとかはないので、安心してください。

 

つまりセンスや事前に知識がなくても、これから学び始めればなれる職業なんです。

 

トモキ
本当に全然知識とかスキルがなかった自分でもWEBデザイナーになることができたんだから、他の人だって同じようになれますよ。
というか絵心とかデザインのセンス的なものがあるなら、当時の僕よりも百倍優秀です!

 

それでは誰でもWEBデザイナーになれる可能性があるということがわかったので、続きでWEBデザイナーのなり方や手順をみていきましょう。

 

 

Webデザイナーのなり方・手順1:仕事について理解を深める

Webデザイナーのなり方・手順1:仕事について理解を深める

 

まずはじめに、WEBデザイナーとはどんな仕事なのかを理解しましょう。

 

なんとなく目指して無事にWEBデザイナーになっても、想像と違ったりしたら嫌ですよね?
なので、やりがいや仕事の内容は目指す上で最初に知っておくべきです。

 

やりがいや嬉しかったことについては現役webデザイナーの私が感じた「やりがい」や「嬉しかったこと」ベスト5という記事にまとめたので是非ご覧ください。

 

CHECK!!
現役webデザイナーの私が感じた「やりがい」や「嬉しかったこと」ベスト5
現役webデザイナーの私が感じた「やりがい」や「嬉しかったこと」ベスト5

続きを見る

 

仕事内容についてはWEBデザイナーってどんな仕事?内容は?現役で働いている私が暴露します!という記事で詳しくまとめました。

 

CHECK!!
WEBデザイナーってどんな仕事?内容は?現役で働いている私が暴露します!
WEBデザイナーってどんな仕事?内容は?現役で働いている私が暴露します!

続きを見る

 

トモキ
この記事では実際にWEBデザイナーである私の1日の流れなども紹介していますよ。

 

 

Webデザイナーのなり方・手順2:必要なものを用意する

Webデザイナーのなり方・手順2:必要なものを用意する

 

次は、WEbデザイナーを目指す上で必要なものを準備しましょう。
次の3つを用意すればOKです。

 

WEBデザイナーで必要なもの

  • パソコン
  • グラフィックソフト(Photoshop)
  • テキストエディタ

 

用意すべきもの①:パソコン

 

WEBデザイナーはパソコンはMac!みたいなイメージが強いかもしれませんが、実際はWindowsでもMacでもどっちでも良いです。

 

トモキ
私は「WEBデザイナーはMac」イメージが強かったのでMacBook Airを購入しましたが、実際に入社した企業ではWindowsを支給されました。笑

 

MacとWindowsでグラフィックソフトの操作がほんの少しだけ違う点もありますが、基本そんなに変わらないのでここは気にしなくて良いです。

 

ただ、ものすごい安買ったり古かったりなど低スペックなパソコンはやめましょう。

 

WEBデザイナーはパソコンを駆使するので、低スペックパソコンは動作がすぐ重くなり、とんでもなくストレスが溜まりますよ。

 

 

用意すべきもの②:グラフィックソフト(Photoshop)

 

WEBデザイナーはデザインを作る職業なので、デザインを作るソフトを用意する必要があります。

 

グラフィックソフトは有料のものと無料のものもありますが、おすすめはPhotoshop。(有料ソフト)

 

ぎもんさん
どうしてPhotoshopがおすすめなの?
世界的に有名な画像編集ソフトで、大体の企業がPhotoshopでデザインを使っているからだよ!
トモキ

 

WEBデザイナーならPhotoshopは使えて当たり前というようなツール。

 

Photoshopは公式サイトよりフォトプラン(月額980円)を契約すると使えるようになりますよ。

 

トモキ
公式サイトでフォトプランの月額契約が最安値!買い切りで12ヶ月のものもあるけど26,000円くらいで売られているので、比較するとだいぶ金額に差があるね。

 

 

 

用意すべきもの③:テキストエディタ

 

テキストエディタとは、HTMLやCSSなどのWEBデザイナーが使用するコードを書くことに特化したものです。

 

トモキ
テキストエディタを使うことにより、コードが書きやすくなったり記述ミスが減ったりするんだよ。

 

テキストエディタも有料のものと無料のものがありますが、おすすめは「Atom(無料)」。

 

Atomの良さや使い方は無料のテキストエディタは「Atom」が最強!特徴やインストール方法をご紹介でまとめているので、是非こちらを参考にどうぞ。

 

CHECK!!
無料のテキストエディタは「Atom」がおすすめ!特徴やインストール方法やをご紹介
無料のテキストエディタは「Atom」が最強!特徴やインストール方法をご紹介

続きを見る

 

 

Webデザイナーのなり方・手順3:学ぶべき内容を知る

Webデザイナーのなり方・手順3:学ぶべき内容を知る

 

次は、WEbデザイナーとして学ぶべき内容を理解しましょう。

 

WEBデザイナーが学ぶべき内容

  • WEBデザインの原則
  • グラフィックソフトの使い方
  • HTML/CSS(任意)
  • JavaScript(任意)
  • php(任意)
  • WordPress(任意)

 

トモキ
上ふたつを習得すれば、デザインは作れるようになるのでWEBデザイナーになれます。残りはWEBサイトも作るWEBデザイナーであれば学習した方が良いものなので"任意"にしました。

 

 

学ぶべき内容①:WEBデザインの原則

 

WEBデザイナーはデザインを作る仕事なので、当然のごとくデザインのことを学ぶ必要があります。

 

ここで衝撃の事実。
デザインはセンスではない。

 

原則というか、理論的なものがあり、それをしっかりと学べば誰でもいい感じのデザインを作ることができるんです!

 

デザインの原則とは「余白の取り方」や「色のバランス」、「適切なフォント」などのこと。

 

トモキ
思ってる以上に難しいものではないですよ。

 

 

学ぶべき内容②:グラフィックソフトの使い方

 

デザインを作るツールであるグラフィックソフトは、初見で自由に使えるほど簡単なものではありません。
専門用語満載で、正直最初は意味不明に感じると思います。

 

トモキ
レイヤーマスクとかクリッピングとかラスタライズとかスマートオブジェクトとか...最初は困惑しました。

 

デザインを作る上でグラフィックソフトの使用は避けて通れないので、最低限Photoshopの使い方と、余裕があればIllustratorも学ぶと良いです。

 

 

学ぶべき内容③:HTML/CSS(任意)

 

HTMLとCSSは、WEBサイトを作るために必要な言語です。

 

トモキ
WEBサイトは表向きには誰が見てもわかりやすく画像や文章などが表示されているけど、実はたくさんの文字列で表示されていますよ。

 

この記事も、画像のような文字の羅列でできています。

 

HTMLの画像

 

一見難しく見えますが、実は法則がちゃんとあり、勉強してみると意外と難しくないことに気づくはず。
WEBサイトを作りたい人にとっては必須の言語です。

 

 

学ぶべき内容④:JavaScript(任意)

 

JavaScriptは、WEBサイトに動きをつけたりすることができるプログラミング言語のひとつです。

 

この言語を理解すると、サイトにスライドショーを設置したり、クリックしたらメニューが開くボタンを作ることができたりと、サイトに楽しい仕掛けを設定することができるようになりますよ。

 

 

学ぶべき内容⑤:php(任意)

 

phpは、お問い合わせフォームや検索フォーム、会員登録など、WEBサイトにちょっとリッチな機能をつけることができたりするプログラミング言語のひとつです。

 

トモキ
ぶっちゃけ今はWordPress(後述します)という便利なものがあり、それを使えばお問い合わせフォームなどが知識不要で簡単に用意できるので、phpはそこまで深く学習しなくても良いような感じがしていますよ。

 

 

学ぶべき内容⑥:WordPress(任意)

 

WordPressとは、サイトやブログなどが作成できるCMS(コンテンツ管理システム)というもののひとつです。

 

そしてなんと無料!
誰でもお手軽に使うことができるんです。

 

誰でも無料で知識もそこまで必要とせずに、お知らせ機能やお問い合わせ、ちょっと頑張ればショッピングサイトも作ることができるので世界中で人気のシステムですよ。

 

 

Webデザイナーのなり方・手順4:スキルを習得する

Webデザイナーのなり方・手順4:スキルを習得する

 

次はWEBデザイナーになるために必要な学習内容がわかったら、次はそれらを学習しスキルとして身につけましょう。
未経験者が学習をする方法は、一般的に「独学」と「オンラインスクール」の2パターンです。

 

この2つのそれぞれのメリットやデメリットを下の表でまとめてみたので、ぜひ参考にしてどちらで勉強を進めるか考えてみてください。

 

それぞれのメリット・デメリット

独学オンラインスクール
メリット
  • 費用が抑えられる
  • 学びたい内容を選んで学べる
  • 自分のペースで頑張ることができる
  • 順序よく学習ができる
  • 就職サポートがあるものもある
  • わからないところを教えてもらったり質問ができる
デメリット
  • 自分で計画的に学習する必要がある
  • 就職のサポートがない
  • 質問や誰かに教えてもらうことができない
  • 費用がかかる(数万〜十数万)
  • 教えてもらう人と性格が合わない可能性がある
  • マニアックだったりコアな内容は学べないものがほとんど

 

トモキ
独学とオンラインスクールのどっちで頑張るかは決まりましたか?
決まったら、それぞれどうやって勉強していけば良いかを続きで紹介しますね。

 

 

独学で学ぶ場合の方法

 

独学で学ぶ際は、まずはどんな教材で学習するかを考えましょう。

 

ドットインストールのような無料の動画教材やYouTubeは、画面を見せてくれつつ音声で解説してくれるのでわかりやすいです。
ただ、スピードが早かったり、教えてくれる内容が浅かったりするので個人的にあまりおすすめしません。

 

ぎもんさん
じゃあなにで勉強するのがおすすめなの?
独学なら本で勉強するのが一番おすすめです。
トモキ

 

本ならお金もそこまでかからないし、学びたい内容がしっかりと学べるし、載っている情報も概ね正しく理論的に説明されているのでおすすめ。

 

トモキ
ただ、初心者のうちは「どの本が良いのかわからない」といったデメリットがあるんですよね...
え...じゃあどうすればいいのかな...
こまりくん
トモキ
そんな方のために、学習内容毎におすすめの本をまとめてみました!ぜひ参考にしてください。

 

 

デザインの原則

CHECK!!
【2020年版】Webデザインでおすすめの書籍3冊を紹介【現役デザイナーが厳選】
【2020年版】Webデザインでおすすめの書籍3冊を紹介【現役デザイナーが厳選】

続きを見る

 

グラフィックソフト(Photoshop)

CHECK!!
【2020年版】Photoshop学習でおすすめの本9選【WEBデザイナーが厳選】
【2020年版】Photoshop学習でおすすめの本9選【WEBデザイナーが厳選】

続きを見る

 

HTML/CSS

CHECK!!
絶対習得できる!html学習本おすすめ厳選3冊をWEBデザイナーが紹介
絶対習得できる!html学習本おすすめ厳選3冊をWEBデザイナーが紹介

続きを見る

 

WordPress

CHECK!!
もう迷わない!WordPressおすすめ学習本を「目的別」にプロが詳しく紹介
もう迷わない!WordPressおすすめ学習本を「目的別」にプロが徹底紹介します。

続きを見る

 

 

オンラインスクールで学ぶ場合の方法

 

オンラインスクールは質問することができたり、就職サポートがあったり、無料体験があるものもあります。

 

トモキ
というか、これらが揃ってないオンラインスクールは選ばない方が良いですよ。

 

とはいえ、これから初めてオンラインスクールを検討する方にとってはどうやって選んだり、どれがおすすめで良いものなのかわかりませんよね。

 

そんな方のために、オンラインスクールを選ぶ上でのポイントをまとめたり、おすすめ3つをまとめた記事を用意したので、参考にどうぞ。

 

CHECK!!
webデザインオンラインスクールの選び方とおすすめ3社を現役デザイナーが紹介!
webデザインオンラインスクールの選び方とおすすめ3社を現役デザイナーが紹介!

続きを見る

 

 

Webデザイナーのなり方・手順5:WEBデザイナーになる

Webデザイナーのなり方・手順5:WEBデザイナーになる

 

WEBデザイナーに必要なことの学習が終わったら、次はWEBデザイナーという職業に就くよう頑張ってみましょう。

 

WEBデザイナーになるには「一般企業に就職」と「フリーランスになる」の2パターンがあります。

 

 

WEBデザイナーになる方法①:就活する

 

WEBデザイナーという職種で企業に勤めるかたちを目指すのであれば、書類選考や面接は避けて通れません。

 

書類選考の際には一般的な「履歴書」と「職務経歴書」のほか、「ポートフォリオ」という個人の作品集みたいなものの提示を求められることがほとんどです。

 

ぎもんさん
働いたことのない未経験者でも、過去に作ったものの提示を求められるの?
求められますよ。未経験とはいえWEBデザイナーを目指すのだから、目指す上で勉強をして何か作品を作るはずです。
まだまだ技術が足りなくても現段階でどんなものを作れるのか理解するために提出を求めるのです。
トモキ

 

ポートフォリオが必要な理由の詳しい説明や、ポートフォリオに盛り込むべき内容について知りたい方は下の記事を参考にどうぞ。

 

CHECK!!
未経験者がwebデザイナーを目指す際にポートフォリオが必要な理由【実体験ありで解説】
未経験者がwebデザイナーを目指す際にポートフォリオが必要な理由【実体験ありで解説】

続きを見る

 

また、一般企業に就職するなら大抵のところで面接がありますね。
WEBデザイナーを目指す際の面接について、対策を知りたい方は下の記事を参考にしてください。

 

CHECK!!
webデザイナーが面接(採用試験)を成功させる6の方法【未経験・経験者どちらも必見】
webデザイナーが面接(採用試験)を成功させる6の方法【未経験・経験者どちらも必見】

続きを見る

 

トモキ
面接の際に気をつけた方が良いポイントや聞かれる可能性の高い質問などがわかりますよ。

 

 

WEBデザイナーになる方法②:フリーランスになる

 

フリーランスは、いつでもなれます。笑

 

トモキ
なるための条件などがなく、名乗ったもん勝ちみたいなものですよ。

 

フリーランスは個人で仕事を獲得する必要があります。
紹介やツテで案件をもらう場合もありますが、未経験者は紹介をもらう繋がりもない場合が多いため現実的ではありません。

 

なので、ランサーズなどのサイトに登録し利用することで仕事を見つけることができるので、案件のないうちはおすすめです。

 

 

未経験から3ヶ月でWEBデザイナーとして就職する方法

未経験から3ヶ月でWEBデザイナーとして就職する方法

 

未経験でも3ヶ月でWEBデザイナーになる方法は、ズバリ「この記事で書いてきた方法をこなすだけ」です。

 

ただ、短期でWEBデザイナーになりたいのであれば、そのぶん1日の勉強時間や活動時間を長く取らないといけません。

 

トモキ
私は3ヶ月間、9時から21時まで食事やお風呂の時間以外はずっと勉強や就活をしていました。

 

3ヶ月でやってきたことは、こちら↓

 

実際に就職までやってきたことの流れ

  1. WEBデザインの原則を勉強する(1ヶ月目前半)
  2. Photoshopの使い方を学ぶ(1ヶ月目前半)
  3. HTML/CSSを勉強する(1ヶ月目後半)
  4. JavaScriptを勉強する(2ヶ月目前半)
  5. phpを軽く勉強する(2ヶ月目後半)
  6. WordPressを少し勉強する(2ヶ月目後半)
  7. ポートフォリオを作る(3ヶ月目前半)
  8. 履歴書を作る(3ヶ月目前半)
  9. 転職サイトやハローワークで企業に応募する(3ヶ月目前半)
  10. 面接をしまくる(3ヶ月目後半)
  11. WordPressをしっかり勉強する(3ヶ月目後半)

 

私の場合は仕事をやめて時間があったので朝から晩まで勉強などに費やす時間があったのでこのスケジュールができました。
しかし、在職中にWEBデザイナーを目指す人はあまり時間が取れなく、もっと時間がかかるかもしれません。

 

トモキ
そのような場合は、少し時間がかかっても無理せず生活に支障がないペースで学習を進めることをおすすめします。
頑張りすぎて身体を壊したら大変ですもんね。

 

ただ、この流れで比較的満遍なく学習ができますので、学ぶ順番や行動してきた流れはぜひ参考にしていただきたいです。

 

ちなみに私は本を購入し独学で勉強をしてきましたが、正直オンラインスクールでの勉強をとにかくおすすめします。

 

なぜなら、わからないところを調べるのに膨大な時間を費やしたから。
独学はわからないことがあったときに自分で調べて解決しなければならないので、とにかくしんどいのと時間を無駄にします。

 

また、就職活動のときも独学だと苦労しました。

 

トモキ
ポートフォリオってなに?って状態から始めたので、どうしたら良いか右も左もわからず苦しい思いをしながら、なんとかポートフォリオを作った苦い思い出が...

 

就職サポートのあるオンラインスクールであれば、ポートフォリオについてもアドバイスや添削をしてくれる場合がほとんどなので、お金に少し余裕があったり安心して学習や就活をしたいならオンラインスクールがとにかくおすすめですよ。

 

CHECK!!
webデザインオンラインスクールの選び方とおすすめ3社を現役デザイナーが紹介!
webデザインオンラインスクールの選び方とおすすめ3社を現役デザイナーが紹介!

続きを見る

 

 

Webデザイナーのなり方・手順まとめ

Webデザイナーのなり方・手順まとめ

 

Webデザイナーのなり方・手順は以上です。

 

ここまで読んでいただいた方はもうおわかりかと思いますが、WEBデザイナーは誰でもなれる職業だし、しっかりと手順通りに学べばなれるものです。(実際に私がなれたので)

 

デザインや配色のセンスもいらない。
勉強して知識をつければWEBデザイナーになれるんです。

 

WEBデザイナーになりたいと目指している方は、ぜひ当記事に記載している手順で頑張っていただけると嬉しいです。

 

トモキ
手順を忘れてしまった方や全貌をあまり理解できなかった方は、上に戻って復習をしてみましょうね。

 

当記事が参考になれば幸いです。

 

 

-デザイン関連
-

Copyright © TOMOKIBLOG , All Rights Reserved.