【Progate】で学んだら、サイト制作学習が楽しくなった!

 

イカ太郎

こんにちは、イカ太郎です

 

去年の年末から「サイト制作とかwebアプリ制作とかできるようになりたいなぁ」と思って勉強をしています。

いくつか教材を試してみて、Progateっていうweb教材がとてもよくできているなぁと思っていて、「最初からこれで勉強しておけばよかったなぁ」と思いました。

今回は
・僕が使ってみた教材の紹介
・どんな風にHTMLやCSSを学んできたか
・なんでスマホアプリ制作からwebサイト制作やwebアプリ制作にシフトしたのか

などについてお話ししてみたいと思います。

それでははじまりはじまり〜♪

 

1. こんな経緯でウェブ開発の世界に飛び出した

お遍路のアプリを作ることになった

昨年の年末に友人からこんな話を持ちかけられました。

 

友人

お遍路のアプリ、いいのがないから作りたいんだよね

 

彼は四国88箇所の途中でお世話になったナイスガイ。

 

イカ太郎

確かに…。いいアプリなかったよね…

 

というわけで彼が制作費を出してくれるというので、一緒に作ることになったのです。

 

iPhoneアプリだけではマズイ!

友人がアプリのアイデアを考え、僕がそのために必要なプログラミング技術を学んでいたのですが、

その途中でふとふと思いました。

 

イカ太郎

]iPhoneアプリしか作れないとまずいなー。Androidユーザーもたくさんいるしなー

 

そう、僕はiPhoneアプリしか作れないのです。

 

いくつかの選択肢

この問題を解決するためにはいくつかのオプションがありました。

1. Androidアプリも作れるようになって、iPhone用とAndroid用を別々に作る

2. iPhoneアプリとAndroidアプリ両方同時に作れるツールを使う

3. アプリではなく、webサイトを提供する

それぞれにメリット・デメリットがあるので悩んだのですが、

結局3番の「webサイトを提供する」に決めました。

 

こんな風に選択した

それぞれのメリット・デメリットを紹介しながらどうやって選んだかお話ししますね。

ちょっと専門的な内容もあるので、ややこしいなと思ったら途中まで読まなくて大丈夫です。

最後のところだけ読んでください。

 

1. Android開発を学んで、iPhone/Android両方作る場合

Android開発は日本でも多くの人がやっているので、情報も多くて学びやすいです。

もしAndroid開発もできるようになれば、iPhoneアプリとAndroidアプリを作れるようになるので、アプリ開発者としての価値はグッと高まります。

しかし問題もあって、プロジェクトをiPhone用とAndroid用の2つ作らないといけません。

プロジェクトが2つあると、変更があったときにiPhone用とAndroid用プロジェクトの両方に修正を加えないといけません。

両方のプロジェクトに修正を加えるのは大変なので、一つのプロジェクトで両方同時に作れる「クロスプラットフォーム型」と呼ばれるツールを使う方法を考えました。

 

2. クロスプラットフォームで作る場合

クロスプラットフォーム型のツールはいくつもあります。

最近人気でメジャーなものだと、

ReactNative と Xamarin ですかね。

ReactNativeはJavaScriptというプログラミング言語を使い、XamarinはC#

両方ともメジャーで人気なのだけど、情報がまだ少ない。

何かつまづいた時に解決する情報が少ないと、開発が滞ります。

あと、プログラムの大部分はこれらのツールで作れるのですが、一部分はiPhone用、Android用別々のプログラミング言語で書かなければならない。

そうなると結局Android開発のことも知らなければいけない。

もう少しレベルの高い開発者ならなんなくこなしちゃうツールなのだけど、僕にはちょっとハードルが高かったのでやめました。

 

3. ウェブサイトとして提供する場合

ウェブサイトならiPhoneだろうがAndroidだろうが関係ありません。

ブラウザさえあればサービスを利用できる。

しかし僕はウェブ開発に関しては完全な素人。

HTMLもCSSもわからないし、PHP(プログラミング言語)もJavaScriptもRubyも分からない。

分からないこと尽くし!!

 

でも結局この道を選びました。

 

なぜか?

 

やってみたかったから!!

 

これに尽きます。

結局メリットデメリットもへったくれもないんですよ。

やりたい!動機はそれだけで十分!

そんな適当な動機で、僕は分からないことだらけのウェブ開発の世界に飛び出したのでした。

 

(結局お遍路アプリは、制作費の確保ができずに流れちゃったんですけどね)

 

2. こんな風に学んできた

iPhoneアプリ開発で役立ったサービスをまずは使った

「どんな風に学習しようかなぁ」と最初に思いました。

「本で学習するのはあんまり得意じゃないから、動画で学びたい」と思いました。

最初に思いついたのはiPhoneアプリ開発で大変お世話になったこの2つのサービス。

 

ドットインストール Udemy

 

ドットインストール

ドットインストールは日本人の田口さんという方がコツコツとコンテンツを作り続けている神サービス。

「よくぞまぁ、こんなにも多くのツールを教えられるレベルまで短期間で習得できるものだな」と感心してしまいます。

2分程度の短いセッションに動画が分かれていて、少しずつ手元のPCで試しながら進めることができる。

iPhoneアプリ時代には大変お世話になりました!

 

Udemy

Udemyはグローバルに展開されている学習サービス。

世界中のスペシャリスト達が非常にわかりやすいコンテンツを提供しています。

1200円の買い切りコンテンツを購入すれば、初心者がプロとして活躍できるレベルまで学習できるコンテンツなんかもあって、それはそれはすごい!

1200円のセールはかなり頻繁に行われているので、僕は安くなっている時に買ってしまいます。

プログラミングの技術書は1冊3000円オーバーとか当たり前だから、

「1200円で動画でこのクオリティはやばすぎる。。。」

って感じです。

 

しかし、情報が多すぎて実際に作れる気がしなかった…

ドットインストールではこのコースをやりました。

HTML入門(全24回)

CSS入門(全23回)

 

確かに入門的な内容なんだけど、意外にも内容てんこ盛り!

初めてのHTML/CSSだったので、その内容の多さに圧倒されてしまいました。

覚えたそばから忘れていく…

 

あと思ったのは、実際にサイトを作るイメージがしづらかったこと。

どちらかというとHTML/CSSの文法を学ぶには最適なコンテンツだと思いました。

HTML/CSSで最低限の機能でサイトが作れるようになった後で、もっといろんな表現を学ぶために使うといいかも!!

 

覚えたそばから忘れちゃったけど、ドットインストールでHTMLとCSSがどんなものかは分かったので、

次にUdemyのこちらをやってみました。

【世界で30万人が受講】フルスタックwebエンジニア講座(2017最新版)

全部やりきったら相当な能力を手に入れられるコース。

 

このコースで良かったのは、

・jQueryやBootStrapといった道具を使って、より少ないコード量で凝ったパーツを入れる方法がわかったこと

・HTML/CSSでデザインされたサイト内にJavaScriptやPHPのプログラムをどうやって入れるのかがわかったこと

でした。

 

今時のサイトはHTMLやCSSだけで構成されたものは少なくて、JavaScriptを使った色んな機能が入っていたりPHPを使ってサーバーから情報を取得したりできるようになっているので、

そういった凝ったサイトを作る方法がわかるのがとても良かったです。

 

ただ、HTMLとCSSを使ってサイト構築さえできない初心者が手を出すにはちょっとハードルが高すぎました。

 

結局2つのコースで学んだものの、シンプルなサイトさえ作れる気がしなかった僕、

そんな僕にとって福音だったのがProgateのHTML/CSSコースだったのです!

 

3. Progateをオススメする理由

シンプルなサイト作成から始まり、必要以上に詰め込まない!

サイトを実際に作りながら進めるのですが、最初は非常にシンプルなものを作りました。

そのシンプルなサイトを作るのに必要な知識以外ユーザーに教えない!

本当にシンプル!

おかげで頭がパンクしそうになることもありませんでした。

 

そうして超シンプルなサイトを作った後は、ほんの少しだけ複雑なサイトを作ります。

そんな感じで段階的に複数のサイトを作るので、

実際にサイトを作っている感覚があり、

初歩的な知識は何度も何度も使うことになるので、

自然と頭の中に入ってくる感じがありました。

 

動画ではないので、マイペースに進められる!

レッスンは「説明」と「演習ドリル」の2部構成になっています。

説明:

演習ドリル:

演習の左側には作業内容が載っているので、迷うことなく進められます。

 

さらに!

ここがこのサービスのすごいところなのですが、

ブラウザ上でプログラムが動くのです!!

プログラムを書くためのソフトをインストールして、別の画面とブラウザを行ったり来たりしなくていい!

なので、ブラウザ画面だけに集中できる!!

これがこのサービスの使い心地の良さを生み出しているのだと思います。

 

そして何より!

動画ではないのがいい。

動画だと分からなくなった時に一時停止しなければいけません。

これが意外と面倒。

でもProgateは動画ではないので、一時停止する必要がありません。

「一つ終わったら次、一つ終わったら次」と、

自分のペースで進めていくことができます!

 

忘れそうなタイミングで復習が入るので記憶に定着しやすい!

いかにシンプルなサイトを作るといっても慣れないHTML/CSS

新しい知識はまだ定着していないので、すぐに記憶から消えそうになります。

そんな消えそうになっている知識を「こぼれ落ちるなー!」とばかりに、絶妙なタイミングで復習コースに入ったので驚きました。

 

イカ太郎

すげぇ!絶妙すぎる…

 

復習コースでは、通常コースのように懇切丁寧には教えてくれません。

最低限のガイドが表示され、分からなかったら過去のスライドを見返して思い出します。

そうすることで、忘れそうになった知識を効率的に頭の中に戻すことができました。

 

さらに!

ここでも必要以上のことを僕らユーザーにやらせることはありません。

通常コースでやったことすべてをやらない。

本当に復習すべきことだけに限定してくれている。

おかげで必要以上に復習に時間をかけることもありません。

この辺のユーザー心理をよくわかってる感じ、マジですごいです!

 

レベルアップするとゲームのように褒めてくれる!

もう良いところばっかりアピールしてて胡散臭くなってきてないですか?

でもね、本当に今のところ文句つけるところがないんですよ。

なのでこのまま良いところを紹介し続けます!!

 

Progateでは、レッスンが終わるとどんどんレベルが上がっていくんです。

これが地味に嬉しい。

https://twitter.com/ika_tarou/status/949406482004504576

この数字を上げるの、案外モチベーションアップに繋がります。

 

さらに!(この展開多いな…)

頑張ってコースを終えるとこんな演出もあるんですよ。

嬉しいキラキラアニメーション付き!!

これがまた嬉しいんだわ。

 

頑張ったら報酬を与えてさらにやる気にさせる。

これ作ってる人たち、ゲーム開発畑出身なんじゃないかしら。

 

こういう心理面でのケアってUdemyやドットインストールには無いですからね。

Progateはとてもユーザーフレンドリーなサービスだと感じます。

 

 

デザインが安らぐ!

Progateの良いところを挙げまくってきましたが、これで最後です。

 

最後はデザイン

先ほど見せた説明画面を見せますね。

画面に情報を詰め込みすぎてなくてすごく見やすいんですよ。

余白が頭の中にスペースを与えてくれるような感覚があります。

安らぐ。

 

そして色使い

パステル系や薄めのトーンの色が中心で、アクセントとして使っている色も優しい色が多い。

これがまた良いんですよね。

安らぐ。

 

そしてキャラクター

この忍者のクマさんがカワイイ!

レッスンの説明画像にもチョコチョコ顔を出してくるので、その度に気持ちが安らぎます。

 

見た目って想像以上に学習心理に影響するんですね!

 

4. 結論

初心者にはProgateが良いと思う

というわけで、僕の学習してきたことを詳しくお話ししてきましたがいかがでしたでしょうか?

ドットインストールも、Udemyも素晴らしいコースでしたが、初心者としてはProgateが最高によかったです。

 

新しいことを学ぶのは結構パワーが必要です。

Progateも例外ではありません。

でも、その高いパワーを要求する学習の第一歩を「より楽に」「リラックスして」始めさせてくれるのがProgateだと思いました。

 

こんな順番に学んでいったら良いかも

まだProgateのHTML/CSSのコース、中級が終わったところなんですが、残りの上級コース・実戦コースを終えたら、かなりパワーアップしている気がします。

その段階で使える道具を増やすためにドットインストールをやり、

さらにできることを増やすためにUdemyのコースをやる。

それがスムーズに成長していける道なのだろうと思いました。

 

ProgateドットインストールUdemy

 

この順番。

 

なので、Progateが終わったら実際にサイト制作をやってみて、道具不足を感じたらドットインストールをやってみようと思います。

 

学んだ知識は無駄にならない!

 

5. 終わりに

5年前、iPhoneアプリを作れるようになって、自分の作ったものが人に喜んでもらえる歓びを知りました。

作ったものが人の役に立つって本当に素晴らしいです。

 

今僕は千葉県の田舎横浜2拠点生活をしていますが、田舎にはITを通して地域の人たちに喜んでもらうチャンスがまだまだ眠っているように感じます。

サイトを持っていないお店なんてざらにありますし、ネットで買い物をしたことのないお年寄りもたくさんいますし、文字だけのチラシを使っているスーパーもあります。

地元の人と話をしていると、僕にできそうなことが湧いてくるのです。

 

ハイレベルな技術はいらない。

すごいレベルの技術じゃなくても、ちょっとした技術で人の役に立てる。

 

新しいことを学び、できることを増やすことは、自分の喜びを増やすチャンスを増やすことに繋がる。

 

今学んでいることがたくさんの笑顔を生み出すようになったらいいな!