ゲームやWEB関係がメイン。まとまりのない雑記ブログ

WEB関係

新人のWEBデザイナーはまずProgateで勉強しよう

更新日:

未経験で入社した新人WEBデザイナーへの教育で、HTML・CSSの基本から教えるのめんどくさいな〜まずは本を読んでもらおうかな…と悩んでいたとき、思い出した。

オンラインの学習サービス「Progate」が使えるかも。

僕は一応登録だけしていて、登録した段階ではすでに仕事でバリバリコーディングをしていたので「完全に初心者向けだな」思って少しだけやって辞めたんですが、新人研修に使えるのでは?と思い、早速新人WEBデザイナーにProgateをやってもらいました。

結果としては、かなり効果があったので、入社したての新人や独学でWEBを学びたい人はまずProgateで勉強するのがオススメです。

Progateで出来ること

WEBデザイナー目線で見ていきます。

言語別でプログラミングを学ぶことができるサービスですが、その中でWEBデザイナーの勉強になるレッスンは「HTML&CSS」「Javascript」「jQuery」「PHP」辺りになると思います。

どのレッスンもプログラミング未経験者けに作られているので、「HTMLってなんすか?」というレベルの人でも1から勉強できるようになっています。

イラストを使った紙芝居形式で基礎の基礎から説明してくれて、優しさに満ちあふれている…

WEB上で書いたコードの答え合わせまでできる

実際にコードを書いて問題を解いていくので、この時点で本を見ながら勉強するよりも圧倒的に効率的です。

コードの修正がリアルタイムで反映されていくので、正解の画面を見ながらパズル感覚で作ることができます。

しかも初心者が途中で投げてしまわないように、ヒントをいつでも見ることができます。同じ画面上で見れるので、わざわざ別ページに移動する手間はありません。

コードが完成したら、答え合わせしてくれますが、間違っていたらちゃんとヒントを出してくれます。

どこまで優しいんだ君は(笑)

おかげで新人に課題としてやってもらった「HTML&CSS」の初級レッスンは一切僕に質問することなくクリアしてくれました。

逆に言えば、冒頭でも書いたとおり、現役のWEBデザイナーには物足りない内容だと思います。あくまで初心者向け。

スマホでもできる

スマホアプリで学ぶこともでき、ちょっとした空き時間にも勉強できます。

ただ、本格的に勉強したい場合はちょっと微妙です。

スマホでコーディングする人は…まぁいないんでね…。

プログラミング初心者が遊び感覚でアプリ版もやってみるのはアリだと思います。

上級者向けのレッスンもある

月額の有料会員になる必要がありますが、上級者向けのレッスンもあります。

基本だけでなく、実践的な技術もマスターしたい人向けです。

WEB制作に関しては基本さえマスターできればあとは実践で覚えていくほうが早いので…社内では登録しないですね。

ただ、教えてくれる人がいない環境…独学でWEBの勉強している人にはかなり価値があると思います。

全てのレッスンをクリアすればそれなりの技術が身についていると思います。



実際に新人研修で使ってみた結果

WEBの基礎を教えるのに大活躍でした。

本を読ませたり、実際に口頭で説明するよりも全然覚えるのが早いです。

その後課題で超シンプルなWEBサイトを作ってもらいましたが、綺麗にコードが書けてました。

ただProgateをやらせただけで僕は何もしてないけど、基礎はバッチリでした。

いや〜教える手間が大幅に省けて助かりましたわ~。

これからはProgate先生と呼びます。

今後、新人研修(超基本の部分)はProgate先生に任せることにしました。

実践的なことは会社で教えたほうが早いけど、基本中の基本…HTMLとはなんぞや?的なことから教えてくれるのはとても良い。

実際に手を動かして覚えていくので嫌でも覚えてくれます。

うちの会社では基本的にWordPresswを使うので、ProgateにPHPの応用でWordPressテーマの作り方が追加されればもう新人研修は完璧。(絶対出ないけど)

新人のWEBデザイナー、またはこれから独学でWEBデザイナーを目指す人はまずはProgateをやってみるのが一番覚えやすいと思います。







関連記事

ワイヤーフレームを作るならAdobe Compが超実用的【iPad・スマホ】

最近iPad Proを買ってから、ワイヤーフレームはずっとAdobe Compで作っています。便利すぎる。 Webサイトの制作を進める工程で、デザイン、コーディング、システム制作などがありますが、序盤 …

【3分で完成】CSS3だけでSVGアニメーションロゴ作ってみた

あまりにも地味すぎて、気づいている人はいないかもしれないけど…このブログのロゴはSVGをアニメーションさせています。 ページを読み込んだ時、線を書くようなアニメーションでロゴが表示されます。 イラスト …

簡単にサイトマップを作れる「PS Auto Sitemap」の使い方

サイトマップを自動生成してくれるWordPressプラグイン「PS Auto Sitemap」。 一度設定すればあとは自動で記事を追加してくれるので、初心者だけでなく、WEB制作者もよく使っているプラ …

【PHP】日付比較で期間を指定して条件分岐してみる

日付での条件分岐はよく使うんですが、期間を指定しての分岐は普通にWEBサイト作ってたら滅多に使いません。 というより、今日とある制作案件で初めて使いました(笑) 非常に簡単なんですが、今後コピペで使え …

Atomのactivate power modeを使ってドヤる

Webデザイナーがコーディングするためには欠かせないエディタ。 同じ社内でも人によって使っているエディタが全然違う場合もあるでしょう。 社員A コーディングするならやはりDreamweaverです。 …

この記事をシェアする