ProgateのHTML/CSSは難しい? Webデザイナーになれる?

プロゲート ホームページ作成

プログラミング学習ができるWebサービスが数多く登場してますが大半のサイトは動画の視聴による学習が中心です。

もちろん動画学習サイトには参考書の学習にはない、わかりやすさもあるのですが、手を動かさないので実際に作ろうとすると、あまり身についていない場合が多いです。

動画中心のプログラミング学習サイトが多い中で、最近Twitterなどで実際に手を動かしてプログラムを書く学習サービスのProgate(プロゲート)が結構話題になってますよね。

ロンドンブーツの田村淳さん、メルカリ創業者の山田親太朗氏、DeNAなども出資しているので、スタートアップ業界では、かなり前途有望なWebサービスみたいです。

そこで、Progateを利用すれば、未経験からWebデザイナーになれるのかどうか、レビューしてみたいと思います。

ProgateのHTML/CSSは難しい? Webデザイナーになれる?

Progateで学習できるコースは全部で11個あります。

プロゲートの学習コース

大体ざっくりとした目的はこんな感じです。

  • HTML & CSS(Webサイトの構造とデザイン)
  • JavaScript(Webサイトのアニメーション)
  • jQuery(JavaScriptをより簡単に実装)
  • Ruby(サーバ側で情報の受け渡しする言語)
  • Ruby on Rails(Rubyのフレームワーク)
  • PHP(サーバ側で情報の受け渡しする言語)
  • Java(サーバ側で情報の受け渡しする言語)
  • Python(サーバ側で情報の受け渡しする言語)
  • Swift(iPhoneアプリ開発)
  • Command Line
  • Git(バージョン管理)

これだけのコースがあって、月額980円で使い放題です。数10万円するようなプログラミング学習サービスもある中、コストパフォーマンス的には良心的なサービスだと感じました。Progateには最低契約月数もないので、1ヶ月間だけ使用して解約するといったこともできます。

Webデザイナーになる為に必要なスキルとして、とりあえずHTMLCSSが必要になります。

またJavaScriptとjQueryも動きのあるサイトを作るには必要になります。スライドショーやスマートフォンサイトのメニューボタンを実装する時に使います。

あと最近はWordPress案件が多いですが、WordPressはPHPで動いています。WordPressのテーマを作成する場合の基礎としてPHPも勉強しておきたいですね。問い合わせフォームも自作する場合はPHPが必要です。

Ruby・Pythonとか勉強するとWebエンジニアとしてWebサービス開発している会社も目指せますが、とりあえずWebデザイナーには不要です。

ホームページで一番重要なのはHTMLやCSSです。HTMLがホームページの構造を設計し、CSSでホームページの装飾を行います。jQueryやPHPは今回は割愛します。

Progate始めるにあたってアカウントを作成する必要があります。とりあえず、メールアドレスとパスワードだけでアカウント作成できます。

ちなみにProgateのコースの序盤のレッスンは有料会員登録しなくても無料で利用できます。

ProgateはFireFoxなどのブラウザでも使用できますが、一応推奨ブラウザはGoogle Chromeになっています。

ProgateのHTML & CSSコース

HTML & CSS を実際に体験してみました。

Progateでは学習コース・道場コース・実践コースとあります。

プロゲート HTML & CSS

学習コースではHTML・CSSのタグの使い方をスライドで学習しながら、半分完成されたコーディング画面上に、タグを追加していきながら画面左の指示通りに完成させます。これまで、一度もコーディングをしたことがない人にとっては、ワクワクする時間ですよね!

プロゲートのスライド解説

プロゲートのコーディング画面

画面右上で自分が書いたHTML・CSSがすぐに見れるのは便利な機能です。

全くWeb知識ゼロでも、学んだことを利用して、クリアしていくことが可能です。

レベルなども設定されているので、ゲーム好きな人にはたまらないかもしれません。

プロゲートのレッスンクリア

道場コース・実践コースは難しい

学習コースに関しては、算数や英語の学習問題を説いていくような感覚で、次々とクリアしていけます。ヒントやスライドの確認で、全く何をすればいいのか分からないということはありません。

ただハードルが上がるのは道場・実践コースです。

道場・実践コースでは、見本サイトを見ながら同じサイトに実装していきます。

初級コースのように、「ここを◯◯してください」といった指示通りにこなせばクリアできるわけではありません。

自分はここら辺りから詰まりはじめました。

一応、初級コースで習ったことだけで完成させることはできますが、具体体的にどのタグを、どこに書けばいいのか初心者にはイメージできないと思います。

運営が用意したたヒントの中に、道場・実践コースでは、ブラウザの機能の1つである「要素の検証」を利用するようにとアドバイスがあります。

Progate上でデベロッパーツール使用時

要素の検証を行うと、見本サイトのHTMLやCSSがどのような構造なのか簡単に把握できます。それに、実際にコードを書き換えると、その場で書き換えた部分が変わる大変便利なツールです。

しかし、検証ツールをどのように利用するのかは、指示がありません。

完全に写経してしまっていいのであれば、レッスンクリアは簡単ですが、それではノート丸写ししているのと同じであまり意味がない気がします。

また、検証ツールに頼らずに作ると、間違っていた際に、どこが間違っているのか教えてくれるのですが、間違いの指摘に具体性がなく、直せないようなケースに何度か陥りました。

初級編までは楽しくホームページ作成の知識を学ぶことができますが、道場篇・実践編でギブアップする人が多いのではないかな? と感じました。

Progateは非常によく出来たプログラミング学習サービスだと思いますが、自動でコーディングの良し悪しを判定しているということもあって、的確なヒントをもらえない場合があり、個人的にはフラストレーションを感じました。

まとめ

Progateは自分が書いたコードを確認しながら学習できるユニークな学習サイトです。しかしProgateでの学習では、道場・実践コースでつまづく方が多いのではないかと思いました。

道場コースから、いきなり見本を見て「はい、じゃあ作ってください」となるので、いきなりハードモードになります。とりあえず言われたとおりに進めてくれば、なんとかクリアできた初級コースと違い、自分の頭で何を書けばならないのか考える必要があるので、何から始めたらいいのか分からなくなります。

検証ツールで模写しながら書けば、簡単にクリアできますが、模写は自分の頭で考えずに書き写しているだけなので知識として身についていませんし、いくら写経してもWeb制作スキルは上達しません。

Progateの試みとしては面白いと思いますが、今のところ、ProgateだけでHTML・CSSをマスターしてWebデザイナーとして就職するのは難しいと思いました。Progateだけだと、完全な独学に近いので挫折しやすいというのが個人的な印象です。