【初心者必見】社会人から転職!未経験でもWEBデザイナーになれる方法(基礎学習編)

こんにちは!僕は現在都内のデザイン会社でWEBデザイナーをしています。

WEBデザイナー歴は二年ほどで、技術も知識もまだまだ。

これまで、WEBデザインどころか、デザインやプログラミングやWEB関係の仕事もやったことがありませんでした。

でも、全くの未経験からWEBデザイナーという仕事に就くことができました。

今回は僕がどのようにしてWEBデザイナーになれたかをご紹介。

これからWEBデザイナーを目指している人に少しでも参考になれば幸いです。

satokota

未経験からでも絶対なれるよ!!

経歴

高校生 地方の工業系の学校に通う。そこでC言語を習うが全く理解できず、プログラミングが苦手教科だった。バンド活動を細々とやって過ごしていた。
社会人 外資系の工場勤務。外資系だったので上の階級になるためには英語の理解が必須、また挫折。WEBデザインに興味を持つ。独学の後に、土日でWEBデザインのスクールに通いだす。会社を3年半務める。
学生(ニート) WEBデザイナーになるために会社を辞め本格的に学校に通う。半年の間にポートフォリオを完成させ、就活し、内定をもらう。
現在(WEBデザイナー) 都内のデザイン会社で働く。某有名企業のWEBを担当し、現在2年目になる。

ざっくりと書き表してみました。

社会人になるまで、特に目標もなく、だらだら過ごしていた人生でした。。

会社でのノルマを達成しても達成感は生まれず、やりがいや手に職をつけたいという気持ちでした。

そんなときにWEBデザイナーという職業があることを知り、初めてやりたい仕事に出会えました!!

これからご紹介する方法は僕の実体験ですので、決して最善の方法ではないかもしれません。

それを承知した上でご覧いただけますようお願いします。

勉強するための道具を用意しよう!!

  • ▪️PC
  • ▪️テキストエディタ
  • ▪️Photoshop
  • ▪️Illustrator
  • ▪️WEBデザインの参考書

まずはこれだけでOKです!!

PC

使用するPCはCPUの性能がなるべく高い方が好ましいです。

「Photoshop」などのツールは重たいためCPUが低いと落ちやすく作業が行いづらいです。

以前WEBデザインを勉強するに前に使用していたのは「dynabook」を使用していましたが、今後のために「MacBookPro」に変えました。

超サクサクで映像もとても綺麗なので、デザインをするのにも最適です。

テキストエディタ

昔はDreamweverを使った方がいいと言われてきました。

しかし今は無料で便利なエディタはたくさんありますので、それを使うのもいいと思います。

上記二つは人気がありますので、どちらかを使用すればOK!

【Atom】


Atomはこちらから

【Sublime Text】


Sublime Textはこちらから

「Photoshop」&「Illustrator」

PhotoshopとIllustratorは現在もWEBデザインの現場では必須です。

パソコンにインストールしておきましょう。

▪️Photoshopは主にレイアウトと画像の加工に使用します。

▪️Illustratorは主にアイコン画像やイラストを作成する時に使います。

Adobe Creative Cloudのコンプリートプラン PhotoshopやIllustrator、Adobe XD、Dreamweaverなどアドビソフトのほとんどが使用できる 3,980円/月

高い…
これだけで一気にハードル上がりますよね。
お金に余裕のある方はコンプリートプランが最適ですが、初めてだし安く済ませたい人が多いと思います。
そんな方には「Adobe フォトプラン」があります。

Adobe フォトプラン PhotoshopとLightroomが使用できる 980円/月

WEBデザイナーになるための勉強方法


まずWEBデザイナーになるための勉強方法は大きく分けて二つあります!!
「デザイン」「コーディング」
もちろん「JavaScript」や「PHP」ものちに必要な技術ですが、頭が混乱するのでスルーしましょう!!
学習順番としては、

  • ⑴コーディング
  • ⑵デザイン

【理由】
「Photoshop」と「Illustrator」に関しましては、月額費がかかるので、最初にコーディングの勉強から始めましょう。
もちろんどちらを先にやるのも自由ですし、同時進行でももちろんOKです!

コーディングの勉強方法

  • ▪️Progate
  • ▪️ドットインストロール
  • ▪️参考書を見て実際にサイトを作る

順番は上から順に行います。

Progateで楽しくHTMLを学ぼう!!


『Progate』とはオンラインでプログラミングが学べるサービスです。
課題をクリアしたら自分のレベルが上がるというゲーミング性があり、初心者でも楽しく学ぶことができます。
『Progate』は基本無料でHTML、CSSの基礎を学ぶことができます。
しかし、無料プランでは全ての学習機能が使えないので、もっと学びたい方は有料会員になるのをおすすめします。
実践で使える技も学ぶことができるので、損することは無いと思います。
しかも、PCだけでなくスマホアプリからも学習できるので、隙間時間にも勉強できますよ!!

無料会員 無料
プラス会員 980円/月

Progateはこちらから

ドットインストロールで基礎知識を学ぶ!!


Progateが進んだら次に『ドットインストロール』で動画学習!
『ドットインストロール』とは動画で学ぶオンラインプログラミングサービスです。
こちらも無料で使用できます!!
『ドットインストロール』では『Progate』では学べなかった基礎中の基礎を学ぶことができます。
1つの動画は3分と短く、飽きっぽい僕でもサクサクと学ぶことができました。
ドットインストロールはこちらから

実践編!参考書を見て実際にサイトを作ってみよう

『Progate』と『ドットインストロール』が終わったらだいぶ基礎について学べたと思います。
実践編ということで参考書を見て実際にサイトを作ってみましょう!!
【おすすめ!コーディングを学ぶために必要な参考書はこちら】

HTML&CSSとWebデザインが1冊できちんと身につく本

以前この本について記事を書きましたので、そちらをご覧いただけたら嬉しいです。
なんと、この本を終える頃にはポートフォリオまでが完成しています!!

【おすすめ記事】未経験からWEBデザイナーになるための一冊!!これからWEBデザインを学ぶ方や、基礎はわかる!でも実際にWEBサイト作りたいけどいざ作るにはどうしたらいいかわからない方に必見の一冊!!

デザインの勉強方法

この分野は奥が深すぎて、本数冊読んだ付け焼刃では難しいところです。
なので、全くの初心者から少しはわかる程度になることを目標に紹介します!

上記2冊は読んでおいて損はないです!!
デザインの基礎から、応用まで載っていますので1回読んで満足するのではなく、何度も読むのがおすすめです!

基礎編まとめ

今回は「コーディング」と「デザイン」の勉強方についてご紹介しました。
次回は実践編!Photoshop等のソフトの勉強法と実際にWEBデザイナーになるまでの方法をご紹介します!
ではまた!!