コーディングができないWEBデザイナー卒業！JavaScriptでフロントエンドまでしっかり身につける方法

ツグミ

WEBデザイナーなんですけど、会社が完全な分業制で、私がやるのはPhotoshopのデザインからABテストの反映まで。コーディングができないんです。独学でもいいんだけれど、JavaScriptになるともうお手上げ…

クリエイターYAKO

案外コーディングができないけれどWEBデザイナーっていう人は最近多い気がします。

WordPressなら既存のテーマを使ってしまったり、Bootstrapを使えばすでにコーディング済みですからね…

でも、ゼロからデザインを作って、それをオリジナルでコーディングできる力がないと、おそらくいつまで経っても不安はぬぐえないと思います。

この記事では、コーディングができないWEBデザイナーの人が、無料でフロントエンドを学び、余裕があればWordpressやPHPまで学んでスキルの幅を広げる方法をお伝えします。

「説明いらないから、無料で学べるスクールだけ知りたい！」って方はこちらから↓無料でコーディングやPHP、Wordpressも学べるスクール

コーディングができないWEBデザイナーなら、今すごく不安なはず

スクールを卒業して、JavaScriptまでしっかり身につけている人なら考えられないかもしれませんが、たとえばインハウス系でWEB制作部隊にたまたま配属されてデザインをやっている、なんていう人もいます。

また、独学でWEBデザインを学んで就職したものの、いざ入社してみるとBootStrapを使っての制作だったり、Wordpressのテーマを使って制作していて、まったくコーディングができない、という人もいます。

実際、Wordpressで納品してほしいというクライアントのニーズは増えてきていますが、「コーディングができるけど必要ないからやっていない」のか、「そもそもコーディングが全くできない」というのでは、全然意味が違います。

コーディングができない弊害は、こんな形になって現れます。 コーディングができない人の特徴

• すでに何パターンかテンプレートを作っておいて、そこからクライアントにデザインを選んでもらう
• 「テンプレート利用だから他社より安い」と営業する
• 「それはできません」「テーマの仕様です」が口癖
• 薄利多売で収益が上がらない
• いつまでたっても薄給

ツグミ

うわぁ…　まさに私だ

コーディングスキルは、WEBデザイナーだったら絶対に身につけておいたほうがいいです。

「フロントエンドエンジニアが社内にいて、マークアップもJavaScriptも触らない」という場合でも、コーディングができればデザインを作るときに「どう作ればフロントエンドエンジニアが作りやすいか」と意識できます。

「こんなんじゃコーディングできないよ！」と突き返されることもなくなります。

WordPressテーマを利用してもカスタマイズは必須

WordPressのテーマを使ったとしても、クライアントからは必ず「カスタマイズ」要望が出ます。

良くあるのはこんなカスタマイズです。

これは、既存テーマだけでは絶対にできませんからカスタマイズが必要です。

プラグイン対応する人もいますが、重くなったりテーマのバージョンアップで対応できなくなることもあるので、極力カスタマイズで対応します。

カスタマイズできない。テーマ使って納品が許されるのは、実績を出している人だけ

WordPressの既存テーマで、カスタマイズ一切できないけれど受注して制作していいのは、すでに実績を出していてクライアントから「あなたに作ってもらいたい」というケースだけだと思います。

• 月間PVが10万超えていて、GoogleAdsenseの広告収入で月30万円以上
• FacebookやTwitterを利用したSNSマーケティングで成功している
• 公開しているサイトを見て、クライアントから「同じようなサイトを作って欲しい」と頼まれる

これは、マーケッターのスキルに対して対価を払います、という依頼なので、カスタマイズができようとできなかろうと、「あなたに頼みたい」という指名が入るケースです。

コーディングは、すごく面白い

コーディングができるようになると、すごく面白さを感じると思います。

Photoshop等でのデザインももちろん楽しいのですが、コーディングの面白さはパズルがピッタリはまったときの感覚に似ています。

自分で作ったデザインをWEB上で閲覧できるように再現するためにどんな構造にするか考えながら、HTMLとCSSでコーディングしていってどんどん形になるのはとても楽しいです。

どんなに複雑なデザインでも、レイヤー分解してCSSでうまく配置したり表現できたときの達成感はデザインとはまた違うものです。

コーディングができるようになるには

コーディングができるようになるには、次の方法があります。

私のおすすめは２の、「WEBサイト制作の初心者用の本を一通りやってみる」という方法。

この方法がなぜおすすめかというと、うろ覚えの部分や理解していないところを確認しながら進められるからです。

Progateも過去に遡って学習はできますが、ちょっとやりづらい。ハウツー本が書籍だと読みやすいけどKindleだとなんとなく頭に入ってこない、というアレと同じです。

クリエイターYAKO

ひと通りProgateでやってみたけど、頭にあまり入っていないなぁ、という人は書籍でやってみてください。

コーディングを勉強するおすすめ本

サンプルを参考にしながら実際に手を動かして作っていく、というチュートリアル本はこういうのです。

これから発売みたいですが、こちらも良さそうです。

クリエイターYAKO

書籍で一通り自分でWEBサイトを作ってみるといいですよ♪　書籍でも独学はちょっと難しい💦と言う場合は、いいスクールがあるので、検討してみてください。下に紹介します。

スクールに通うなら。おすすめのプログラミングスクール

コーディングを勉強するなら、「WEBデザインスクール」か「フロントエンドエンジニア養成コース」のどちらかをチョイスします。

今、この記事を読んでいる人はすでにデザインスキルはあって、コーディングだけ勉強したいと思っているはずなので、「2」のコーディングをしっかり学べるスクールをご紹介します。

デザインも全然自信ない、って人は、こちらの記事をご参考にしてください。

Code Village（コードヴィレッジ）

フロントエンドエンジニア WEBデザイン

学習形式通学（授業形式）・オンライン

Code Village（コードヴィレッジ）はJavaScriptを徹底的に学ぶプログラミングスクールで、通学コース（池袋）とオンラインコースがあります。

「一生モノのスキルを身につける」というポリシーのもと、小人数クラスで徹底的にフロントエンドのスキルを身につけることができます。

毎回、最初に講師のレクチャーが行われ、その後にオンラインテキストを参考にプログラミング学習を行っていきます。オンラインコースも、スカイプで講師とのマンツーマンのレクチャーを行います。

地方にお住いの人にもおすすめです。

フロントエンドエンジニア養成・Code Village

.Pro（ドットプロ）フロントエンドコース

エンジニア デザイナー

通学場所 東京都渋谷区渋谷2-12-13 八千代ビル8階 TOMO PARTNERS内
学習形式通学

通学型のプログラミングスクール。フロントエンドコースというだけあって、かなりしっかりコーディングを学べます。

そして、このスクールのおすすめポイントは「マーケティング」を基本にサイト企画から作ることができること。作り方だけ教えるスクールは多いですが、「効果を出せるサイト作り」を教えるスクールはほとんどないですから。

.Pro（ドットプロ）WebExpertコース

Code Camp（コードキャンプ）

エンジニア デザイナー

学習形式オンライン

受講料金	148,000円（税込159,840円）/2ヶ月 248,000円（税込267,840円）/4ヶ月 298,000円（税込321,840円）/6ヶ月
コース	WEBマスターコース
受講期間	2ヶ月・4ヶ月・6ヶ月
対応時間	7:00-24:00
分割払い	ローン可（最大36回）・クレジットカード対応
学べる言語・スキル	Photoshop・Illustrator・HTML(5)・CSS(3)・JavaScript・jQuery・Wordpress
卒業後サポート	≫ 転職サポートあり　※就職・転職成功で特典あり。くわしくは公式サイトへ
無料体験	≫ 無料体験あり
備考	Photoshop, Illustratorなどソフトは自前で用意。たのまなAdobeストアでお得に購入可。

CodeCamp　※無料体験で1万円分クーポンプレゼント実施中！

コードなんちゃらと、なんとも紛らわしいですがコードシップとは全く関係のない別のスクール。

こちらはオンラインスクールで有料ですが、プログラミングスクールの中では受講料が安くおすすめ。

企業も社員研修に利用しているので、カリキュラムもしっかりしています。

CodeCamp　デザインマスターコース

TechAcademy（テックアカデミー）

エンジニア デザイナー

学習形式オンライン・福岡のみ通学教室あり（福岡天神校）

受講料金	89,800円/1ヵ月～　（コースによって異なる）
コース`	全30コース
受講期間	1ヶ月・2ヶ月・3ヶ月・4ヶ月
対応時間	15:00～23:00
卒業後サポート	≫ 転職サポートあり
無料体験	≫ 無料体験あり
分割払い	クレジットカード決済可能
備考	Photoshop, Illustratorなどソフトは自前で用意。たのまなAdobeストアでお得に購入可。

TechAcademy ※無料体験や説明会動画閲覧で10,000円割引！

こちらも人気プログラミングスクール。オンラインスクールはテックアカデミーに限らず、「書籍」や「プロゲート」などと併用して進めるか、最初にある程度これらで知識を入れておいてから始める方法がおすすめです。

フロントエンドコース

転職してコーディングができる環境に変える

デザインはできてもコーディングができない原因は、職場環境にあるケースも多いですよね。 コーディングが身につかない職場環境

• WEB制作会社とは名ばかりで、既存のテーマを使いまわして「効率化」と言われる。仕事の半分は電話営業で、安い金額でWEB制作を請け負うという謳い文句でアポを取り付ける。
• 実際には納品後の毎月の実態のない管理費で儲けている
• SEOの知識がある人が社内にいない

もしあなたの会社がこれに当てはまるなら、残念ながらその会社に居続ける限り永久にコーディングスキルは実務では身につきません。

クリエイターYAKO

一日も早く、転職活動を始めましょう！

転職一体型のプログラミングスクールで学び、コーディングができる会社に転職

上にも紹介しましたが、Code Shipというスクールは無料でフロントエンド（コーディング）を学べて、かつ転職保証もあるので、まずコーディングをマスターしてから転職でステップアップするのがリスクゼロ、確実な方法です。

→　【公式】https://code-ship.wemotion.co.jp/

年収アップ、有名な制作会社への転職を狙いたい人は

もし、高年収を狙いたいとか、目標にしている会社があるとか、そういう人は「クリエイターまたはエンジニア特化型転職エージェント」を利用しましょう。

この業界に幸せに転職するなら、自力でやる「転職サイト」よりも「エージェント利用」の方が絶対いいです。クリエイター登録必須！キャリア＆年収アップを叶える転職エージェント

理由はブラック企業を避けられるから。エージェントってかなり有益な情報をたくさんもっていて、残業時間とか離職率とか、そういうのも知っているのである程度ブラック企業入社を避けられます。

すでにデザイナーとして働いている人は、経験者なので登録できると思います。

もし、スキル不足でエージェント登録ができない場合は、上に紹介したCode Ship経由で転職するか、総合転職エージェントで登録企業数の多いリクルートエージェントを利用するといいと思います。

リクルートエージェント

エンジニア クリエイター未経験OK

対応地域 北海道・東北・宇都宮・埼玉・千葉・東京・横浜・静岡・名古屋・京都・大阪・神戸・岡山・広島・福岡

リクルートエージェント

まとめ

コーディングを身に着けないと、WEBデザイナーとして生きていくには永遠に「不安」と戦うことになります。

他のプログラミング言語より簡単ですし、覚えるとすごく楽しくてハマります。

独学でやってみたい、という人はチュートリアルのような書籍（サンプルつきのやつ）を1冊購入しやりきってみましょう。

プロゲートが自分に合っている、という人はそれでもいいです。

でも、もし全体的にスキル不足なら、ちゃっちゃとスクールに通ってしまうのがおすすめ。独学でやっていると、どうしても習得ペースが落ちて時間がかかります。

転職一体型のCode Shipなら、ほぼ転職確実で、転職成功で受講料が全額タダ、つまり無料でコーディングを勉強することができます。（今の会社を辞められない、辞めたくないって人は要注意）

有料スクールなら、おすすめは

• .Pro（ドットプロ）
• CodeCamp
• TechAcademy

もしくは、「入社したらコーディングもやりたいです！」と主張して、受け入れてくれる会社に転職するのがいいです。

クリエイティブ・エンジニア特化型エージェントなら、こちらのページをご覧ください。

クリエイターYAKO

ご参考にしてくださいね♪