楽しい!「Progate」がWebデザインの勉強に超おすすめ。ブログ男子、はじめました。LIFEおすすめアイテムITEMmenuCLOSEプロフィールいっこーのTwitter実績とお仕事依頼のページお問い合わせはこちらメインカテゴリーマッチングアプリ会社員のリアルな生活おすすめアイテムCLOSEキーワードで記事を検索CLOSEPairs・withなどのマッチングアプリ対策はこちらHOMEWebサービスめっちゃ楽しい!「Progate」がWebデザインの勉強に超おすすめ。尾道ミント(おのみちみんと)めっちゃ楽しい!「Progate」がWebデザインの勉強に超おすすめ。ツイートシェアはてブGoogle+Pocketこんにちは、尾道ミントです。最近Webデザインを勉強しはじめました。Webデザインとは、パソコンやスマートフォンなどの電子機器上で表示されるもののレイアウト、デザインを決めることを指します。ホームページのデザインも、ウェブサービスのデザインも、ランディングページのデザインも一概にWebデザインと呼ぶことができます。聞けない!Webデザインとは【初心者向け】ぼくが勉強しているのは「HTML」「CSS」という言語で、ざっくり言うと「Webサイトを1からつくれるようになるよ!」って感じ。勉強をはじめた理由はシンプルで、なんとなくモテそうだったからです。ぼくは文章を書くライターの仕事もしているんですが、「Webデザイナー兼ライター」ってめちゃくちゃかっこよくないですか!?Webデザイナー兼ライターってめちゃくちゃモテそうなので勉強します。2016年12月20日そんなわけで日々パソコンと格闘しているぼくですが、勉強に使っている「Progate」というサイトがめちゃくちゃおすすめなので紹介させてください。LINKプログラミング学習サイト「Progate」Progate(プロゲート)は、オンライン上でプログラミング・Webデザインを基礎から勉強できる学習サイト。▼HTML&CSS、JavaScript、Ruby、PHP、Swift...など、主要なプログラミング言語を好きなだけ勉強することができます。各レッスンの初級編は無料で受講できるので、「ちょっと試してみようかな」って人でも気軽に利用できます。(初級編といってもけっこうボリュームある)全てのレッスンが受け放題の有料プランでも980円/月なので、何冊も本を買って勉強するよりもはるかにお得。ぼくも有料プランを利用中です。▼Progateでの勉強はこんな感じで進んでいきます。実際に自分でコードを書いていく答え合わせこの1〜3を何度もくり返すことによって、ちょっとずつプログラミング、Webデザインを勉強していく仕組み。ぼくが勉強しているHTML.CSSの画面で説明してみます。1、スライドを見てコードを確認するHTML.CSSコースでは、自分でコードを書きながら、お手本のWebサイトと同じものをつくっていきます。レッスンの最初には解説のためのスライドがあり、それを見て「どんなコードを書くのか」を確認します。2、実際に自分でコードを書いていくスライドを見終わったら、実際に自分でコードを書いていきます。画面左に手順が示されているので、それに従って真ん中のエディタにコードを入力。画面右上には書いたコードが反映されるので、画面右下の完成図と見比べながら、お手本と同じサイトをつくっていきます。3、答え合わせをして次のスライドへコードが書けた!と思ったら、エディタ右下の「確認して次へ」ボタンを押して答え合わせ。お手本通りにできていたら次のスライドへ移ります。ここまでかかった時間は約5分〜10分程度。項目が細かく分かれているので、ゲーム感覚でさくさく進めていくことができます。Progateのいいところ1、スライドで勉強するから自分のペースで進められる実はぼく、以前にもWebデザインを勉強するぞ!って意気込んだものの、挫折したことがあるんです。そのときは動画を見て勉強するドットインストールというサイトを使っていたんですが、これがイマイチ自分に合わなかったんですよね...動画を見ながらの勉強だと、「ややこしい部分は時間をかける」「簡単なところはサクッと飛ばす」みたいに、自分のペースで進められません。Progateではスライドを見ながらの勉強なので、誰にも急かされずに自分のペースを守ることができます。プログラミングとかWebデザインってやっぱりややこしいので、ちゃんと理解できるまで時間をかけられるのは嬉しいところ。2、項目が細かく分かれていて飽きないさっきも書きましたが、Progateのレッスンでは1項目がめちゃくちゃ細かく分かれています。スライドは1枚だけ見てすぐ実践!なんて項目もたくさんあるので、飽きる暇がないんですよね。5分で終わるミニゲームを何度も繰り返しているイメージなので、どんどん次に進めたくなっちゃうんです。「Webデザインとか難しそう...」って最初は思うんですけど、ゲーム感覚で楽しく勉強できますよ。3、レッスンが豊富すぎる学べる言語も多いんですが、そのそれぞれに豊富すぎるレッスンが用意されています。▼ぼくが勉強しているHTML&CSSだとこんな感じ。IIしかも初級編は無料、全レッスン受けられる有料プランも980円/月と激安です。ぼくはとりあえずHTML.CSSを制覇しようと思います!ってことでProgateがおすすめプログラミングとかWebデザインって、言葉だけ聞くとめちゃくちゃ難しそうで身構えますよね。実際やってみると、ゲーム感覚で案外楽しくできちゃいます。オンラインプログラミング学習サービス『Progate』ひとりじゃ続かない...って人は「プログラミングを勉強してみたいけど、ひとりじゃ続くか不安...」という人は、プログラミングスクールに通ってみるのもおすすめです。[テックアカデミー]WebCampどこのプログラミングスクールも「1ヶ月みっちり学習してスキルを身につける」というものが多く、短期集中で勉強したい人にはおすすめ。料金はけっこうかかりますが、講師のサポートを受けながら勉強できるので習熟度は高いです。学生は半額になるスクールも多いので、「就活に向けてスキルを高めたい!」って受講生もたくさんいますよ。尾道ミント(おのみちみんと)Web広告マンな新卒1年目/今年は社畜として頑張ることを決意/文章を書くこと、ラジオを録ること、デートすることが生業。音声配信アプリ「Radiotalk」公式パーソナリティです。(全て見る)【肌の手入れ・男性編】全部1500円以下で買える、俺のベストコスメまとめ。24歳男子が寂しい日々を振り返る。社会人になりたくない大学生に向けて、24歳新卒が1年目のリアルを教える。ROCKの新作、「Ambitions」を最速で全曲レビュー!誤字・脱字が多い人に限って、ファッションもダサいという仮説。RECOMMENDこちらの記事も人気です。Webサービス2016.11.7プレゼント選びに悩む男子よ!モノじゃなくて「体験」を贈ろう。Webサービス2016.11.22ZOZOTOWNの下取りサービス「買い替え割」が便利!手順を全解説します。Keita」が帰ってくる!Webサービス2017.2.22タラレバ娘より超リアル!ドラマ「東京女子図鑑」がおもしろい。Webサービス2017.2.23美容院って高い!カットモデルアプリ「minimo」でサロン代を節約しよう。Webサービス2017.1.1「孤独のグルメ」は、男心をくすぐる最高の飯テロドラマだ。尾道ミント(おのみちみんと)Web広告マンな新卒1年目/今年は社畜として頑張ることを決意/文章を書くこと、ラジオを録ること、デートすることが生業。音声配信アプリ「Radiotalk」公式パーソナリティです。POSTこのライターの最新記事おすすめアイテム2019.1.7【肌の手入れ・男性編】全部1500円以下で買える、俺のベストコスメまとめ。24歳男子が寂しい日々を振り返る。会社員のリアルな生活2018.12.10社会人になりたくない大学生に向けて、24歳新卒が1年目のリアルを教える。恋愛2018.12.8上京して「寂しい...」と思った瞬間と対処法を、24歳新卒が語ります。@ikkotweetWeb広告マンな新卒1年目/今年は社畜として頑張ることを決意/文章を書くこと、ラジオを録ること、デートすることが生業。音声配信アプリ「Radiotalk」公式パーソナリティです。【肌の手入れ・男性編】全部1500円以下で買える、俺のベストコスメまとめ。24歳男子が寂しい日々を振り返る。2018.12.16社会人になりたくない大学生に向けて、24歳新卒が1年目のリアルを教える。2018.12.10上京して「寂しい...」と思った瞬間と対処法を、24歳新卒が語ります。2018.12.08【デートの持ち物・男性編】スマートに振る舞うための必需品7選。ブログ男子、はじめました。