目次
比較
特集
【2020年11月限定】スクール各社 お得なキャンペーン!

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

この記事は約10分で読めます。
ツグミ
ツグミ

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

クリエイターYAKO
クリエイターYAKO

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

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

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

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

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

当サイトで人気のプログラミングスクール

  • DMM WEBキャンプ  (3ヵ月でRubyエンジニアに)
  • TechAcademy  (オンラインで好きな時間に学べる)
  • CodeCamp  (オンラインなのにマンツーマン指導。300社以上の大手IT企業が社員研修に導入する質実ともに評判が高い)

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

初級編

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

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

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

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

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

うわぁ… まさに私だ

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

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

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

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

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

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

WordPressで依頼の多いカスタマイズ
  • ヘッダーに電話番号とメール予約ボタンを表示させたい
  • ハンバーガーメニューをスクロール固定で常に表示させたい
  • 特定のカテゴリだけ、固定ページにアイキャッチ画像付きで抜粋表示させたい
  • 長すぎる表示部分は、クリックで全文表示させて欲しい
  • 固定デザインをレスポンシブ化したい

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

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

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

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

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

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

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

女性

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

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

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

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

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

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

コーディングを勉強する方法
  1. Progateやドットインストールなど、無料のプログラミング学習サイトで勉強する
  2. WEBサイト制作の初心者用の本を1冊買って(サンプルデータがあるのが良い)、ゼロから手を動かして作ってみる
  3. スクールに通う

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

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

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

クリエイターYAKO
クリエイターYAKO

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

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

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

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

クリエイターYAKO
クリエイターYAKO

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

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

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

コーディングスキルを身に着けるなら
  1. WEBデザインスクール
  2. プログラミングスクールの「フロントエンドコース」や「JavaScript」コースを選択

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

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

Code Village(コードヴィレッジ)

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

codevillage学習形式通学(授業形式)・オンライン

  • 珍しい授業形式で丁寧な指導
  • フロントエンドエンジニア志望の人におすすめ
  • オンラインコースもSkype対面による授業形式で、通学型と同等の指導が受けられる
  • 受講料金が他校よりもリーズナブル
  • いつでもチャットで質問可能。24時間以内に確実に回答が付く
  • 受講期間終了後2週間まで質問が可能
  • 1クラス10名以下の少人数精鋭制。「離脱者ゼロ」の徹底指導
運営会社株式会社Permil
対象プログラミング未経験者
WEBデザイナーのJavaScript強化
受講形式少人数クラスの授業形式 または 対面オンライン
受講期間5カ月
想定学習時間毎日2時間
身につくプログラミングスキルHTML5, CSS3, JavaScript
Sass, React, Node.js, Express.js mongoDB
支払い方法現金振込・クレジットカード決済
料金(税抜)通学生集団コース 350,000円(税抜き)
オンライン個別コース 400,000円(税抜き)
分割払いクレジットカード会社の分割払いで月額15,000円~可。

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

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

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

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

.Pro(ドットプロ)フロントエンドコース

エンジニア デザイナー

ドットプロ

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

  • フロントエンドエンジニアにもなれる
  • 他の通学型スクールと比較してもカリキュラム内容は上なのに料金は最安
受講料金WebExpert(4ヵ月)/398,000
WebExpert(6ヵ月)/498,000
対応時間[平日]10時~21時 [土日祝]10時~19時
転職サポートあり ※独立支援サポートもあり
分割払い可能。クレジット対応可能
コース名WebExpertコース
身につくスキル
  • HTML(5)/CSS(3)
  • JavaScript
  • Sass
  • WordPress
  • UI/UX
  • サービスの企画

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

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

Code Camp(コードキャンプ)

エンジニア デザイナー

学習形式オンライン

  • 個別指導でプログラミングスクールの家庭教師版
  • 厳選な審査を通過した、優秀で実績のある現役エンジニアが徹底指導
  • 365日、7:00~24:00いつでも受講可能
受講料金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万円分クーポンプレゼント実施中!

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

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

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

TechAcademy(テックアカデミー)

エンジニア デザイナー

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

  • コースの種類が非常に豊富。ほぼ学びたいものが見つけられる
  • ディレクター、マーケティング、UI/UXなど他のスクールにはないコースがある
  • 受講料がリーズナブル
  • マンツーマンによるマンツーマンによるメンタリングサポート
  • 回数無制限の課題レビュー
  • スクールコンテストがあり、モチベーションアップできる
受講料金89,800円/1ヵ月~ (コースによって異なる)
コース`全30コース
受講期間1ヶ月・2ヶ月・3ヶ月・4ヶ月
対応時間15:00~23:00
卒業後サポート≫ 転職サポートあり
無料体験≫ 無料体験あり
分割払いクレジットカード決済可能
備考Photoshop, Illustratorなどソフトは自前で用意。たのまなAdobeストアでお得に購入可。
TechAcademy無料体験や説明会動画閲覧で10,000円割引!

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

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

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

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

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

クリエイターYAKO
クリエイターYAKO

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

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

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

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

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

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

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

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

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

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

リクルートエージェント

エンジニア クリエイター未経験OK
リクルートエージェント
対応地域 北海道・東北・宇都宮・埼玉・千葉・東京・横浜・静岡・名古屋・京都・大阪・神戸・岡山・広島・福岡

  • 業界最大手。転職支援成功率業界No1
  • 全国対応なので地元で転職が可能
  • 土日・祝日、平日夜8時以降もOKだから働きながら転職活動できる
  • 対面が難しい人は電話での転職フォローもOK
  • 履歴書・職務経歴書の添削や面接力向上セミナーが秀逸。未経験者に嬉しい。
  • 残業、年収、社風など、入社前にブラック企業を避けられる
  • 非公開求人が8割。オイシイお宝募集が豊富
運営会社リクルートホールディングス
対応地域北海道・東北・宇都宮・埼玉・千葉・東京・横浜・静岡・
名古屋・京都・大阪・神戸・岡山・広島・福岡
登録条件不問
雇用形態正社員
特長豊富な募集案件数、実務未経験エンジニア、デザイナー登録可
登録費用無料

まとめ

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

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

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

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

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

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

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

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

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

クリエイターYAKO
クリエイターYAKO

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

コンテンツのコピー・流用は著作権上禁止しています。
タイトルとURLをコピーしました