便利な機能

html・css・プログラミング基礎をオンラインで学ぼう!(にんじゃわんこと一緒に)

  • このエントリーをはてなブックマークに追加

制作部の姫野です!

三寒四温の激しい温度差もやわらぎ、ここ数日はぽかぽかーとしておりますね( ´-`)o O 〇
もう少しして桜が見ごろを迎えたら、新宿御苑で茶でもしばきたいもんです!

何かはじめたいよね。春だもの

さて少し前、経理のMさんが
「勉強したら私でもコーディングできるようになる?」
「そんで、実務レベルになるまでどれくらいかかる?」
と尋ねてこられました。

おそらくMさんは、猫の手も借りたいくらい日々シャバダバしている制作部を見て、力になりたいと感じてくれたのだと思います。m( _ _)m
ただその答えは、「ゴールを何にするか(何ができるようになりたいか)」によってだいぶ変わってきます。

例えば、ゴールが『レイアウト崩れを発見した時に何が原因なのかわかるようになりたい』であれば、
・htmlの構造を理解し、cssの基本的なプロパティを覚えている
で十分かもしれません。
ただ、まったく知らない人がそのレベルに到達するまでは、少なくとも1~2か月はかかるでしょう。

あるいは、『ラフを見て、デザイン通りにコーディングできるようになりたい』であれば、
・htmlやcssの構造
・レイアウトの組み方、それを実現するための記述の仕方
・Photoshopの使い方(ラフがPSDデータの場合)
・Dreamweaverの使い方の知識
も必要になってきますね。
どんなにガッツリ勉強したとしても3~4か月はかかりそうです。
更に言うと、レスポンシブやjQueryを使わないサイトはないので、その点を含めると実務レベルになるまでは約半年といったところでしょうか…。

 

…。

 

あっ!待って!嫌いにならないで!(泣)

 

…と初心者さんが怖気づいてしまうことを言いましたが、実際初めてみるとコーディングの面白さに気付いてもらえると思うんです。

PCがあり、コーディングスキルさえあれば、自分が思い描いている世界をそこに展開し、表現することができます。
言ってしまえば箱庭のようなものです。
webサイトが思い通りにレイアウトされたり、動いてくれた時の感動は計り知れないですよ!

でも、まだデザインスキルがないし…という方でもだいじょうぶ。今やcssだけで素敵なことがたくさんできます。
まずは「ばちくそ簡単なサイトを作ってみる」ことをゴールに、この春コーディングデビューしてみましょう。

そう。「Progate(プロゲート)」でね ←AppleのCM風に

無料プログラミング学習ツール「Progate」


Progate トップ

Progate(プロゲート)の特徴
・スライド形式と実務的なレッスンでhtml・css・php・rubyなどのプログラミングが学べる
・会員登録が必要
・無料でできる(月980円~の有料プランもあり)
・スマホには対応していない

とりあえず、実際にやってみましょう。Facebookでログインしてみます。

Progate ログイン画面

なんかカワイイ!!!

なにかが仲間になりたそうにこちらを見ていますね!!
ちなみにこの子はProgate公式キャラクター「にんじゃわんこ」です。なんだそりゃ、たまんねぇ!(*’д`*)ハァハァ
四の五の言わずにログインしましょう。

ログイン後はこのような画面が現れます。無料会員登録で受けられるレッスンの一覧のようですね。にんじゃわんこどこ?

Progate マイページ

 

マイページに行くと、このようになっています。

Progate_mytop02

「Lv.1」という表示がなんともやる気にさせますね。これでは単体ならともかく、複数のスライムに襲われたら大変です。

それでは『HTML & CSS -基礎編-』から進めて、レベルアップを図ります!

Progate レッスン

レッスンはスライドで説明が行われた後、実際にソースを打ち込んで理解度を確かめる演習形式があり、その繰り返しになっています。
『HTML & CSS -基礎編-』は学習&実践を重ねて、1ページwebサイトを完成させることが目的です。

Progate レッスン1

ふむふむ。おい、にんじゃわんこを出せ

Progate レッスン2

はい。

Progate レッスン3

↑これが実践演習の画面です。左側に問題、真ん中が実際にソースを記述してみる領域です。右側上部では、記述されたソースがweb上ではどのように表示されるかプレビューされます。画期的ですね!

言われたとおりにカキカキしていきます。見出しタグ<h1>タグで囲んでみると、その部分が右側のプレビューで大きく表示されます。

Progate レッスン4

正解し、経験値を積んでいくことでレベルアップ!

Progate レッスン5

 

ここでやっとにんじゃりわんわんが出てきます!ああかわいいよぉ…モフモフ!!

このように進んでいきます。だんだんと高度になるため、きちんとスライドを読んでいないと理解できなくなっていきます。。

最終的にこの『HTML & CSS -基礎編-』レッスンを終えるのに、1時間と10分かかりました。レベルは12にアップ!

Progate レッスン6

1レッスン終えての感想は以下です。

Progateのいいところ
・世界観がかわいい。わんこを見たくて頑張ろうという気になる。
・経験値、レベルアップなどゲーム性があり、モチベーションアップになる。
・実際にソースを打ち込んで再現できるので、Dreamweaverなどのソフトを扱っているかのような気になる。
Progateのよくないところ
・途中で学習が単調になってくるので、もう少し「先に進んでみよう」と思わせる工夫がほしいところ。
(せっかくレベルの概念があるので、レベル5ごとにわんこのイラストが変わるとか、称号がつくとかどうかなと思いました)
・「html5だからDoctype htmlを使用します」といったような説明があったりするので、予備知識があるならともかく、まったくの初心者がやるには少し親切でないかも…。もうちょっとわかりやすくしてくれればなぁ。

とまあ改善してほしい点もありましたが、「コードの知識もあまりないし、ソフトも持ってないけど、自分でサイトを作っている実感に浸ってみたい!」という方にはおすすめです!

自分もレッスン全制覇を目指して頑張ります。

ではではー!

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ