IT系女子ログ

Webデザイナー目線のあれこれ話。デザインもコーディングも勉強中。

コーディングが苦手なWebデザイナーにおすすめしている独学方法

f:id:tosssaurus:20171001211437p:plain

Webデザイナーとして入社した新人さんの教育係を担当しています。
デザインもコーディングも教えるのですが、新人さん達からよく聞こえてくるのが、「コーディングが好きになれない…」という声です。

うまくいかないから、勉強不足だから、という理由で好きになれないのであれば、大丈夫です。
続けていれば、皆さん業務をおまかせできるようになります。

私も何度も何度もコードを書いて、1年経ってやっと基本を覚えられた気がします。

新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ

 

あきらめずに勉強を続けていれば、できることが増えてきます。そうなれば、嫌いな気持ちもやわらいできますよ。

 

今回は、「コーディングが苦手」と感じている新人Webデザイナーさんへ向けて、少し先輩の私からのメッセージです。
苦手だなぁと感じる方向けに、いつもおすすめしている独学方法をご紹介します。

 

何から始めるのがいいの?

単刀直入に、まずはProgate(プロゲート)をしましょう! 

コーディングやプログラミングを独学していけるWebサービスです。

無料会員は初級編までですが、まずはコーディングに慣れることが一番の目的ですので、無料でできるところで練習しましょう。

無料会員に登録したら、HTML & CSS の初級編をしてみてください。

HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]

 

なぜProgate(プロゲート)がいいの?

コードを書くことに集中できるからです。

上達するためには、とにかくコードを書いたり、読んだり、考えたりと、自分の手でコーディングした量を積み重ねることが一番の方法だと思います。
しかし、苦手意識のある方は勉強や練習自体がむずかしくて、「とにかくコーディングしたら良いよ」と言われても、なかなか勉強がはかどらないのが本音なようです。

「コーディングが苦手でなかなか勉強が進まない」「練習しはじめても分からないことが重なると挫折してしまう」という方でも、コードを書くことに集中できるのがProgateなんです。

f:id:tosssaurus:20171001212013p:plain

 

独学は大切なスキルの1つ

はじめのうちは、わからないことを聞ける先輩や先生がいるととても効率が良いです。

一方で、自力で勉強して解決していく独学のスキルは、Web業界では大切なスキルの1つになります。分からないことに出会った時に、自分の頭で考えたり手を動かして何かしら試してみることは、独学スキルという筋肉を強化していく筋トレになります。

(四文字熟語で「自助努力」というそうです。なんだかかっこいいですね。) 

 

“なんとなく” 苦手意識のある方を分析してみた

ここではコーディングが なんとなく” 苦手な方と接してきた経験をもとに、苦手と感じさせる原因を探ってみました。(2017年8月 IT系女子ログ調べ)


スキップしてProgateのおすすめポイントを見る

もっとスキップして、結論を見る

 

コーディングが苦手だと感じさせる原因は、IT系女子ログ調べによると、大きく2つに分けられると考えました。

 

1. デザインと比較している

「コーディングよりデザインの方が好き」
と、よくデザインとの比較が話題にあがります。

デザイン関連の操作に慣れていたり、感覚的にビジュアルを作っていくことが好きだったりします。

f:id:tosssaurus:20171001212736p:plain

比較すること自体に問題はないのですが、 なんとなくの比較だけで、「だからコーディングが苦手だ」という結論になってしまっているとしたら、少し強引かもしれません。

 

もしかすると、デザインとコーディングの関係を天秤のように捉えられているのではないでしょうか?どちらかに多く力を入れると、もう一方は弱まってしまうイメージ?

私は、デザインとコーディングはそれぞれ技術を高められるもので、「デザインができる人はコーディングができない」とは全く思わないです。
図にしてみるとこんなイメージです。

 

f:id:tosssaurus:20171001213125p:plain

もし「デザインが得意だからコーディングが苦手」と思ってしまうなら、デザインとの比較はいったん脇に置いておきましょう。
デザインが得意かどうか関係なく、コーディングは上達していきますよ。

 

2. 不安を感じている

もうひとつ、コーディングに関してたくさんの不安を感じていることが、苦手意識を作り出す原因のようです。

 

技術面での不安
  • PCの扱いに慣れていない
  • タイピングに慣れていない
  • テキストエディタの扱い方がよく分からない
  • コーディング用語に慣れていない
  • 調べ方が分からない

f:id:tosssaurus:20170911000934j:plain

 

精神面での不安
  • 細かいことが気になる
  • 分からないことがあると不安になる
  • きっちり手順を踏まないと先に進めない気がする
  • 予期しない動きになるとテンパる
  • あっているのか間違っているのか分からない
  • コーディングが途方もないことのように思える

f:id:tosssaurus:20170911000949j:plain

意外と基本の基本が抜けていたり、聞けずにいたりするようです。
調べても答えにたどり着けなかったり、質問できずにわからないままになっていて、なんだかわからない状態になっている感じがします。

はじめのうちはIT用語を覚えるだけで一苦労なうえ、コーディングの知識も並行して覚えていかなければならないので大変ですよね。
毎回毎回順を追って覚えていけないので、わからないことがそのままになってしまうことが起きるのは当然です。

 

ただ、あきらめずに何度も経験していくうちに、あるとき視界が広がる瞬間があります。いつのまにか覚えられているんです。

視界が広がる瞬間までが、わからないことだらけで辛い時期ですが、ぜひあきらめずに続けてほしいなぁと思います。

 

苦手意識をつくる原因

「コーディングが苦手」とひとことで言っても、PC作業自体が苦手だったり、慣れているか慣れていないかの話しだったりするのではないかな、というのが私の結論です。

つまり、コーディングの経験不足が主な原因じゃないでしょうか。

f:id:tosssaurus:20171001214650p:plain

それなら、「苦手だ!」と決めつけてしまうのはもったいない。

分からないところが分からないのは、明らかに知識・経験不足です。知識も経験も今が上限じゃなく、これからどんどん増やせるものです。

 

PC操作もIT用語もコーディングの知識も一度にひっくるめて練習するのもいいですが、それが原因ではかどっていないのなら、いったんコードを書くことに集中して練習してみませんか? 

そういうわけでProgateをおすすめします。なんといっても、失敗や手詰まりの心配がないのが魅力です。

 

Progate(プロゲート)がおすすめな理由

ネットにつながるPCがあればOK

無料会員登録をするだけですぐに始められます。

ソフトをインストールすることもなく、他の何かを設定することもなく、Progateにログインするだけで直接コードを書いていくことができます。

これは地味なことですが、初心者の方にはかなりありがたいことです。

 

感覚的に操作できる

分からないことだらけでもできます。

ルールは進みながら「にんじゃわんこ」が1つずつ教えてくれるし、はじめに要点をまとめたスライドを読んで、その通りにコーディングを進めていけます。

f:id:tosssaurus:20171001215330j:plain

 

はじめのうちは、ポチポチとボタンを押していくくらいの簡単な操作です。

コピペミスしてもそうそうバグったりしないです。

 

余談ですがこの「にんじゃわんこ」、忍者+柴犬って、THE JAPANな組み合わせですよね。日本製を象徴しているのか、海外進出を視野にいれられてるのかもなぁと、妄想ですが勝手にわくわく楽しみにしています。

 

少しずつ進められる

1区切りがとても短いです。

あっさりしすぎて「え、これだけ?」とビックリします。あっさりしすぎて不安なので、どんどん進めてしまいます。

進めていくと同じ知識を何度も使う機会があって、うまく復習できるような仕組みになっています。

 

進めながら勉強できる

はじめに説明スライドを読んで、同じ内容を実践で書いていく、という短いスパンを繰り返していきます。「paddingって何?」という人でも大丈夫です。

f:id:tosssaurus:20171001215109p:plain

 

ヒントもあるし、答えも何度でも見れる

全くわからなくても進められます。

ヒントもあるし、答えだって見れます。

説明スライドにも戻れます。1度で覚えようと焦らなくてもOKです。
優しすぎです。

 

レベルアップするのが楽しい

はじめのうちはすぐにレベルアップします。楽しいです。

ヒントや答えを見なかったり、間違える回数が少ないと、レベルアップしやすいので頑張りたくなります。

 

デザインがステキ

デザインがとてもキレイで、使い心地も良いです。
はじめに読む要点をまとめたスライドのデザインがとてもキレイでシンプルにまとめられています。
使っていて楽しいし、さくさく進められるし、デザインの勉強にもなるので一石二鳥です。 

f:id:tosssaurus:20171001215557p:plain

コーディングしていくデザインも可愛いので、参考になります。

 

同じところを何度もできる

前のスライドの練習をしたくなったら、何度でも戻れます。1度クリアしてももちろん、何度でもはじめからできるので、1度で覚えようとしなくても大丈夫です。

 

まずはやってみましょう!

とにもかくにも一度、ProgateのHTML & CSS初級編をやってみましょう。

最後にProgateで練習するコツをまとめます。

 

1度でわからなくてOK

分からないところは答えをコピペしてもいいし、飛ばしてもいいので一通り目を通してみてくださいね。

1度で理解できなくても大丈夫です。何周も初級編を繰り返しましょう。

 

すらすらコードを書けるようになるまで5周、10周、15週でもしてみましょう。

実際にProgateをしてもらっている新人さんの1人は、毎朝5分程度、始業前やお昼休みの合間にしているようです。始めてから1ヶ月くらい経ちましたが、レベル25までいきました。

別の新人さんは、レベル15くらいまでいったあとは、バリバリ実戦でコードを書いています。

 

初級編をやり尽くしたら

初級編で物足りなくなったら、有料会員になって中級編や上級編をやりまくるもよし、ドットインストールやschooや書籍など、他のサービスを利用してもよし、上達するにはとにかくコードを書く経験がものを言います。

また、並行しておすすめなのが、ブラインドタッチの練習です。
タイピングのスピードはPC操作すべてに影響します。
あなどれませんよ。

 

他にもたくさん練習方法はあると思いますが、私のやってる方法はこちら。

実務経験3年すぎた現役Webデザイナーのリアル【勉強方法編】 - IT系女子ログ

 

【まとめ】とにかくコードを書く!

こればっかりは、新人さんの代わりにしてあげることはできません。

コードを書く経験を積み重ねていくのは本人が行動するしかないです。

いくらプロの講師の講義を聞いても、高い受講料を払っても、コードを書いたことがない人は、みずからバリバリコードを書いてきた人に敵うわけがないんです。

だって、コーディングってコードを書くことでしょ?どれだけ上手に講義を聞けたかなんて関係ないですよ。理解を深めるのにはとても役立つでしょうが、一番役立つのはもちろん、コードを書いた経験です。

さぁ、コードを書きまくりましょう!

 

参考

少し前に話題になっていたスライドです。私もTwitterでアンケートに参加しました。
「文字だらけのメモ帳では嫌いになるに決まってる、まずはカタチから入ろう」と、わかりやすい内容でとてもうなづきました。

 

ブログでもまとめられているので、もっと情報収集したい方はぜひご覧になってみてください。

コーディング苦手意識調査してみた(結果発表) | hanarenoheya