こんにちは、笑うWebデザイナーの越智です。
フリーでWeb制作の仕事をやっています。
このページを見ているということは、HTML/CSSコーディングになんらかの興味関心を持っているのだと思います。
立場は様々かと思います。いずれでも構いません。これからお話することは、
コーディング技術を習得する方法
です。
途中、講座の案内が入りますが、講座自体に申し込まなくても、このページでコーディング学習の概要は網羅してますし、“外しちゃいけない押さえどころ”も知ることができますので、どうぞ最後までお付き合いください。
コーディングを習得すればWeb制作の仕事に関われるようになります。Web制作業界は一時期ほどではないですが、今もなお仕事がたくさんあります。
業界のトップ層の間では「いかに安定したクオリティを出せる技術者と関係を持つか」が問われているくらいですから、自分がそれになってしまえば、食うのに困らなくなるわけです。まさに「手に職をつける」というもの。スキルさえあれば在宅で働くことも可能です。ほっといたって仕事が来ますから。
また、デザイナーやディレクターなど、Web制作の世界でコーディング以外の業務に携わる人でも、「やっぱり自分でもコーディングができたほうがいい」というところに行き着く人は多いです。センスのいい人は必ず「コーディングは我関せず」というスタンスに限界を感じるようになるんですね。
そんなこんなで、様々な立場の人がコーディングの勉強をスタートさせるわけですが、すんなり身につくほど甘いものではなかったりします。コーディングは覚えてしまえば簡単なのですが、覚えるまでが大変。
勉強のアプローチを間違えてしまうと、何年経ってもスキルが自分のものになりません。逆に言うと、適切な勉強方法さえ確立してしまえば、比較的簡単に習得まで辿り着くことができます。
そこでまず、「コーディングの学習環境」についてざっくりと理解しておきましょう。
コーディングの勉強が「学校の勉強」と違うのはわかりますよね。学校の勉強は「テストに出るものを一生懸命覚えること」に終始します。「覚える」ことに集中していればいい。
それに対し、コーディングは「仕事で使うスキル」なのですから、覚えるだけでは不十分です。使えないといけない。そのためには、「慣れる」ことがかなり重要なんです。
「覚える」ことと「慣れる」こと、この2つを同時並行的に進めて行くのが、理想的なコーディング学習です。
HTML/CSSは市販の解説書がたくさんありますね。それを読み込めば、タグの書き方を覚えることができます。また、ネット上にもたくさん情報が出ています。バグが出て困ったら、ググればだいたい解決方法に辿り着きます。
ここまでは、学習環境として誰でも簡単に手に入れることができます。
しかしこれだけだと、「覚える」作業は進んでも「慣れる」ところにまでは行き着きません。だからいつまで経っても、自分がどれくらいコーディングを習得できているかがわからないのです。
もちろんその手前段階、「どんな本を読めばいいの？」とか「なんのソフトを入れればいいの？」というところでつまづく人もいるでしょう。
そこで、それら諸々の問題を解決してくれる「学校」に入ることが検討されます。
学校の良さは「課題」を出してくれることと「わからないことを先生に質問できる」ことにあります。
何にもない状態から「わからないことは何でも質問してね」と言われても、“どこがわからないかがわからない”のだから困るんですよね。ネット検索も同じ。“何を検索すればいいかがわからない”から困る。
課題に取り組んで初めて「わからないこと」が出てくるのだし、自分に足りないものも見えてくるわけだし、具体的な質問ができるわけです。
しかし、学校に入るにはそれなりの決断力が求められます。
特に社会人の人はそうですが、まず「学校に通う時間を確保できるのか」という問題があります。最近はオンラインの通信講座なんかもたくさんありますが、それでも課題をこなすにはそれなりの時間を確保する必要があります。
そこに「お金」の問題が追い打ちをかけ、断念せざるを得なくなるのです。
専門学校にしろオンライン講座にしろ、20万円くらいは用意しなければいけませんからね。20万もかけて学校に入っても「通えなかったらどうしよう」とか、「課題をこなす時間が取れなかったらどうしよう」とかがあるわけです。
で、結局「独学」という選択に戻る。多くの人はここに戻ってくるのです。
しかし、先に描写したように、独学だと自分で課題を設定しなければなりません。現場経験がそれほどない人に、「自分で課題を設定せよ」と言っても難しいですよね。無理くり設定したとしても、その課題が本当に適切なものなのかもわからないはずです。
本を何冊読み込んでも、ネットの記事をいくら読み込んでも、覚える作業が進むだけで、慣れることが一向にできない。コーディングの「知識」は増えても、それを「技術」に昇華できないでいるわけです。これらのことから僕は、
コーディングを習得するのって実はかなりの無理ゲーなんじゃないの？
と、思うに至りました。
ちなみに僕は独学でコーディングを習得しています。知り合いにも独学で習得した人はいます。ただ、よくよく観察してみると、独学で習得できる人はかなり“特殊な状況”にいたということに気づきました。
例えば僕の場合だと、コーディングの勉強期間中は命を削っていました。（首都高で居眠り運転をして助手席に乗っている当時の社長と自分の命を危機に晒したのは一部では有名な話です。）
僕の仲間の例だと、「お兄ちゃんに（チョー厳しく）教えてもらった」という人もいます。「いきなり現場に放り込まれたからやるしかなかった」という人もいます。
いずれも特殊・・・ですよね。
誰にでも与えられる環境ではないと思います。
極端に運がいいとか悪いとか、極限まで追い込まれたとか、もしくは天才的な頭脳を持っていたとかじゃないと、独学でコーディングを習得することはできないんじゃないかと思うわけです。
上辺の知識だけが増えていくばかりで、一向に慣れることができない。そもそも「慣れる」という視点に気づくこともできない。だからコーディング勉強中に「迷子」になる人が後を絶たないのです。僕もよく迷子になりました。
今思えば、僕がコーディングを習得できたのは“たまたま”だったのかもしれません。
「諦められたらどんなに楽か・・・。」
そう思うことも一度や二度ではありませんでした。
そこに、WixだのAdobeMuseだのWordPressだのといった、「専門技術がなくても自分の手でホームページを作ることができます！」といった趣旨の“誘惑”が襲ってきます。そうして、多くの人のコーディング学習が頓挫してしまうのです。
これが昨今の「コーディングの学習環境」です。
悲しいかな、これだけ構造化されているのです。この構造が、頑張る意欲を絡め取っていきます。
コーディングの勉強がなかなか進まないことに悩み、自分の才能や努力不足を疑い、「私ってなんてダメなんだろ」と思う人が多いのですが、その考えは間違いです。
その人がダメなんじゃなくて、構造がダメなんです。昨今のコーディング学習環境がそうさせているわけです。
後で詳しくお話しますが、コーディングを身につけると見える世界がガラリと変わります。だから僕は、「全員がコーディングを覚えればいいのに」と思っています。結構本気で思ってます。
しかしここまで説明してきたように、コーディングの学習環境があまり良くない状況なのも知っていました。みんな絶対覚えた方がいいんだけど、そう簡単にはいかないんだよな、と。
だから、「僕が教えて差し上げようではないか！」と思い、行動してみたのです。
今の僕なら、コーディングの知識や技術はもちろん、セオリーや現場の作法に至るまでを教えられる・・・。そう確信していましたので。
「コーディング教習所」と銘打って、有料のコーディング講座を始めました。
30人ほど申し込みをいただいて、今もなお運営中です。（と言っても新規の申し込みはもう締め切っています。）
コーディング教習所は11のセクションで構成される講座で、セクションごとに「課題」をお渡ししています。受講者からの課題の提出を受け、僕が「添削」します。その中でお互いに「ディスカッション」をし、コーディングの理解を深めていくというものです。
この「課題」「添削」「ディスカッション」の三本柱が受け、反響を呼びました。
教えてみたら、やっぱり思っていた通り。
みんな、コーディングのセオリーに辿り着くのに苦労していました。
タグの書き方は勉強しているからよくわかっているし、意味もよく理解できています。しかし、発想がちょっと違うんです。見た目上、デザインを再現できていたとしても、ちょっとしたことでレイアウトが崩れる作りになっていたり、必要以上に手間のかかる実装になっていたりで、僕から見ると不自然なソースコードになっていました。
でもこの「不自然」というのが、最初はわからないじゃないですか。
だからそれを添削で丁寧に教えていったのです。ほぼ全ての受講者が、添削のあまりの細かさに度肝を抜かれていたのでした。
繰り返し繰り返し教えていくと、受講者はみんな、コーディングのセオリーにジリジリと近づいていきます。僕が指導した内容に対して、「確かにそう書いたほうが合理的ですね」という反応をもらえるようになりました。
とにかくコーディングに慣れてもらうことに集中して教えました。
それをやっていると、ある日突然課題をこなすスピードが上がるんです。みんなそうです。コツを掴むんですね。
添削で何度も何度も戻しをくらっていた人が、いきなり次の課題をノーミスでクリアしたりする。「どうしたんですか急に？」と聞けば、「なんかわかってきたっぽいです」と返ってくるんです。
「やはりセオリーに触れ、慣れていきさえすれば、コーディングは習得できるんだな・・・」
そう確信できました。
課題を消化するのはそこそこ大変なのですが、日に日に成長していく喜びからか、みんな精力的にこなしています。その姿を見て、僕自身嬉しいですし、楽しいです。
ただ、このコーディング教習所は一人ひとりをしっかりサポートする形式です。いかんせん僕の手間がかかりすぎてしまいます。あまり受講者を増やしすぎるとサポートの精度が下がってしまうので、募集人数も制限せざるを得ませんでした。
そして2017年12月、コーディング教習所の受付を完全に締め切ってしまったのです。もう二度と募集することはないでしょう。
僕が運営するコーディング教習所の特徴の一つに、「有名な通信講座や専門学校の卒業生が受講しに来る」というものがあります。他所でお金を払ってコーディングを学んだにもかかわらず、知識・スキルに自信を持つに至らず、僕のところに来たというわけです。
「教科書的なことを教科書的に教えられるだけで、イマイチ腑に落ちないまま終わってしまった」
という声を、複数の受講者から聞いています。
教科書的な教え方ではわからないのは当然です。書店に行けば教科書になるような本はたくさん売っているのです。それを買って読むだけで理解できるのならば、そもそも有料の講座なんて受けないはず。
コーディングの勉強を始めた人にとって問題なのは、知らないことが多いことよりも、知ったところで「しっくりこない」「イメージできない」「腑に落ちない」という点です。
教える側はそれを補完してやる役割があるのに、多くの講師はそれができない。「教科書的な指導」に終始してしまうのです。
実はこれには理由があります。教える側の立場に立てばわかります。
僕自身、教える側になって初めて気づいたのですが、講師は受講者に対して、
間違ったことを教えちゃいけない
と、思うようになるんです。
つまり、「正しいことを教えよう」という意識が強く働き、指導が教科書的になっていくんです。“学び直し”してますからね。講師も。正しいことを教えたいから。
その結果、本に書かれていることをそのまま言ってしまうわけです。
「セオリーに触れ、コーディングに慣れてもらうことを重視する」と言った僕でさえ、時々こういう思考に陥ります。「間違ったことを教えちゃいけない」というのは教える側にとっての呪縛であり、ひいては受講者の理解の妨げに繋がるものです。
ちなみに、これは講師に限ったことではありません。例えば「職場の先輩コーダー」なんかも同じような傾向が見て取れます。「自分のやり方を押し付けるのは良くない」と、必要以上に思うもの。だから案外、現場に入っても伸びない人がいるんです。
これはどの世界でも同じですが、
できる＝教えられる
ではないんです。残念ながら。
コーディングができるからと言って、他人に教えられるとは限りません。コーディングにセオリーがあるのと同じで、人にモノを教えることにもセオリーがあります。
「詰め込み型」だと応用が効かなくなりますし、「根性論」だと心が病んでいきます。
コーディングは習得した後が肝心です。その先にキャリアが続いていくのです。だからこそ、
「誰から学ぶか」
が重要であり、この先の人生を決めると言っても過言ではありません。
「セオリーに触れ、コーディングに慣れていく」
言ってしまえばこれが、コーディング教習所の売りです。教える僕としては、現場目線を徹底すること、正しいことを教えるよりも、腑に落ちることを目的とするなどを意識し、言葉を尽くしています。おかげさまで、
といった、喜びの声をいただくまでになりました。
「コーディングの本質を理解する」という点においては、No.1の講座になったと自負しています。
大事なポイントを順序立てて理解できる課題の並び、細かく丁寧な添削、日に日に成長していく受講者たち・・・、まさに順風満帆でした。
しかし、一見完璧に見えるこの講座も、いくつかの問題を抱えていたのです。
というより、「みんなで一生懸命やってたら新たな問題に遭遇した」と言った方が正確かもしれません。
コーディング教習所の課題をいくつかこなした人を対象に、色々とヒアリングをしてみました。ほぼほぼ好意的な感想をいただいたのですが、結構多くの人が口にしたのが、
「思ったより勉強が進まない」
ということでした。
普段のディスカッションの文脈も加味して受講者のこの言葉を僕なりに噛み砕くと、以下のような解釈になります。
「思ったより勉強が進まない」にも関わらず受講者のモチベーションが落ちないのは、こういう思考になっているからだと考えられます。
そういえば、僕がコーディングを勉強していた頃もこんな感じでした。「2〜3ヶ月勉強すればイケるっしょ！」と思って始めたコーディングの勉強が、結局1年くらいかかりましたから。コーディングの勉強って、そういうもんです。
ただ、「せっかく僕が教えているのだからもう少し学習時間を短縮してあげたい」という思いもあります。
一方、これとはまた違ったところで、新たな問題に遭遇しました。
コーディング教習所は「添削を受けてOKが出るまでは次のセクションに進めない」というシステム的欠陥があるために、添削中、受講者が「待っている時間」が結構増えてきたのです。
また、サポート期間も厳密に定めているので、「期間内に終わらせられるか不安」という声を何度も聞いています。（それがネックになって教習所の受講を断念した人もいたくらい。）
これらのことがあり、「思ったより勉強が進まない」という声を、このまま放置しておくわけにはいかなくなりました。運営者として、「何とかしなければ」という思いを強くしていったのです。
そんな問題意識の中、コーディング習得における非常に重要な発見がいくつかありました。今更ながら、「コーディングの勉強ってこうやればいいんだ！」というのがあったんです。
これは盲点というより、条件が細かすぎて誰も気づくことができないものだと思います。
先程も言ったように、コーディング教習所は「課題」「添削」「ディスカッション」という三本柱で成り立っています。セクションごとにこの3つの行程を経るわけです。
ここに、ある時期から「模範ソースコード」というものを導入しました。
受講者が取り組んだものと全く同じ課題を僕自身が実際にコーディングし、模範として受講者に渡すようにしてみたのです。
これが大好評。
受講者は自分のソースコードと僕のソースコードを見比べ、より理解を深めることができるようになりました。以下、僕のソースコードを見た受講者の声をいくつか載せてみます。
「そんなに喜んでもらえるとは・・・」と、僕としても意外でした。きっと、受講者自身が課題を一生懸命やったからこそ、模範から学び取るものが大きいのだと思います。
能動的な答え合わせのようなものですね。夏休みの宿題でよくやった「答え丸写し」とは全然違います。
大抵の場合、この模範ソースコードを渡した後に、さらにディスカッションが加熱します。
「あそこはどうしてこういう書き方になってるんですか？」「この書き方ってこれこれこういうシチュエーションを想定してるんですよね？」みたいな。
お手本を先に見せるのではなく、「後に」見せることで、想像以上の効果が出たのです。
正直な話、今では僕が時間をかけてやってる添削よりも、この模範ソースコードの存在の方が大きいとさえ思います。ある種のカルチャーショック、パラダイムシフトが受講者の中で起こるからです。
さて。
そろそろ本題に入りましょう。
ここまで説明してきたことを踏まえて、全く新しいコンセプトの「コーディング講座」を企画しました。その一般募集の準備が整いましたので、ここからはその内容を詳しくご説明させていただきます。
一旦整理しましょう。
昨今のコーディングの学習環境は、充実しているように見えて実は劣悪です。
独学で習得を目指す人にとっては、情報を簡単に集められるのはいいですが、情報が多すぎて何から手を付けていいかの見当が付きません。
自分一人で課題を設定できないところにそもそもの問題があるのです。
じゃあ、課題を出してくれる学校に行けばいいという話なんですが、時間やらお金やらの問題でそれもなかなかできない。行けたとしても、僕のもとに入ってきている報告によれば「教科書的な指導で終わってしまう可能性がある」ということですね。
頑張りたくても頑張れない状況がそこにある。
ここに、僕自身の経験を付け加えます。
適切な課題さえ設定できれば、誰に言われるまでもなく自らコーディングの本質を追求するようになります。そして、課題に真剣に取り組みさえすれば、後の答え合わせが非常に有意義なものになります。理解を加速させてくれるというわけです。
では。
独学でコーディングを学ぶために、本当に必要なものはなんでしょう？
正しいことを教えてくれる講師でしょうか？分厚い本でしょうか？バグ解消の手順を教えてくれるブログでしょうか？
どれも違います。違うというか、そんなのは後回しでいい。
まず最初に絶対に用意しなければいけないのは、
ブレることも迷うこともなく、目一杯頑張れる「環境」です。
教科書なんて後でいい。ネット上の記事なんていつでもアクセスできるんです。それらは直接的に「習得」に導いてくれるものではありません。あくまでも勉強の補助に過ぎないんです。
本当にコーディングスキルを身につけたいのならば、それができる「環境」をまず用意しなければならない。「場」です。習得までの「シナリオ」です。
情報収集だけではなんともなりません。ゴールが描けないから暗中模索の旅が延々と続くのです。これでは一体いつまで「勉強中」の状態が続くのか・・・、わかったものじゃありません。そこで・・・。
新企画、「コーディングクエスト」、スタートです。
はい、コレです。
多くの方に受講いただき、今もなお受講者を成長させ続けているコーディング教習所。そこで使われている課題と動画セミナーを、メンバーサイトにまるごと公開します。
氾濫する情報、ピンと来ない教科書的な指導、目まぐるしく変化するトレンド・・・。それらに一切流されることなく、一心不乱にスキルを向上させられるトレーニング環境をご用意しました。
あなたはそこに並んでいる動画セミナーを見て、ひたすら課題に挑み続けていればいい。
もちろん課題は簡単なものではないかもしれません。悩み、苦しむこともあるかもしれません。しかし心配はいりません。僕自身が同じ課題をこなしています。それを「模範ソースコード」としてお渡ししますので、然るべきタイミングでそれを見て、自分なりに学んでください。
コーディングクエストの詳しい内容について説明しましょう。
基本的にはコーディング教習所と同じコンテンツになりますが、独自の補足コンテンツもありますので、コンテンツ自体はグレードアップしていると思ってもらって構いません。
本講座では以下のソフトを使用します。
これらをご自分のパソコンにインストールしておいてください。
Creative Cloudを契約しておけば、月額5,000円で全てのソフトが使い放題です。
ソフトのバージョンについては下位バージョンでもできなくはないですが、実際に現場に出るとなると、少なくともIllustratorとPhotoshopはCC以上でないと厳しいです。
Creative Cloudを契約していない場合は、この機会に是非検討してみてください。
本講座では、以下の書籍をテキストとして使用します。
HTML5＆CSS3ポケットリファレンス
「詳しくはテキストの○○ページを・・・」と、細かい解説をテキストに委ねることが多々ありますので、参加する場合は入手しておいてください。
カリキュラムはコーディング教習所と同じです。11のセクションに分かれ、それぞれに獲得するスキルが違います。最適な順序で、段階的にコーディングを習得していくためのステップだと思ってください。
以下に各セクションの説明を載せますが、わからない用語があれば質問してもらってもいいし、「今わからなくてもこれからわかるようになるんだ」とポジティブに捉えるに留めてくれたのでも構いません。
まずは「コードを自分の手で書く」ということに慣れる必要があります。
本講座ではDreamweaverのデザインビューはほとんど使いません。自力でHTMLを書いていくために、テキストの流れに沿って手を動かしながら、コードを書くことに慣れてもらいます。
セクション2では「HTML」を徹底的に学びます。
コーディングの勉強がうまく進められない原因の一つに、HTMLとCSSをいっしょくたに考えてしまうというものがあります。
もちろん、HTMLとCSSを連携させてコーディングがなされるわけですが、両者の役割は明確に切り分けて捉える必要があるのです。そうしないと、バグに強いコーディングができるようになりません。
「情報は構造を持っている」を合言葉に、適切なHTMLの書き方を習得しましょう。
ここで初めてCSSを触ります。
コーディング初心者が最もつまずきやすいポイントなので、解説動画ではかなり丁寧にCSSの説明がされます。と言っても、眠たくなるような学術的な話ではなく、CSSを「イメージで捉える」ことに重きを置いています。
例えば、「マージン（margin）は自分の周囲に空間を作るイメージ」とか、「パディング（padding）は中の要素に『ここから出るな』と命じるイメージ」とか。こういう雰囲気で、イメージが湧きやすいような解説がされます。
また、雛形の解説では、外部CSSや画像ファイルの置き場所について解説します。ここで話されるのは絶対のルールではなく、業界でよく見られる「慣例」です。
課題では、昨今のコーディング界隈で重要な「コンポーネント」という概念を習得してもらいます。ここをクリアできればコーディングは半分以上習得できたと言っていい。それほど重要な概念です。
セクション3のコンポーネントレッスンに、画像の扱いを加えた課題を提供します。
凝ったデザインを実装するときは、この「画像の扱い」が非常に重要になります。
PhotoshopCC及びIllustratorCCから効率的に画像パーツを書き出す方法を解説します。また、現代的なコーディングをする上で、画像を扱うちょっとしたコツを伝授します。
セクション3とセクション4でコンポーネントの学習を終えたら、今度はその外側の「ブロックの書き方」を学んでいきます。デバイスによるカラム数変動など、コンポーネントの特性を活かしたリキッドレイアウトの概念をお話します。「外枠のレイアウト方法」と捉えてもらえればOKです。
HTML/CSSで、Webサイトの典型的な3階層をコーディングしていただきます。
「典型的な3階層」の解説は設計に関わることですが、コーディングを担当する者も知っておくべき概念です。
多くの受講者はここで「1つめの自信」を手に入れます。今まで学んできたある意味で断片的な知識やテクニックが、ここで1つに繋がるのです。快感です、はい。
javascriptやjQueryはとても奥が深いものなので、深入りしすぎると帰ってこれなくなるリスクが少なからずあります。本講座では、そうはならない程度のjQueryの知識を提供します。
あくまで「バランス型」のコーダーとして、jQueryをどう使いこなし、どう習得していくかの手引をさせてもらいます。
ただ、jQueryがわかり始めたときの面白さは保証します。深入りしたければ止めはしません。
セクション3で一度雛形の解説をしたわけですが、ここで便利なプラグインを積極使用することを前提に、再度雛形を解説します。もちろん、紹介するプラグインは全て、使用方法まで解説します。
プラグインは色々ありますが、例えばアイコンフォント、CSSアニメーション、カルーセル、ライトボックスなどです。
受講者はここで「2つめの自信」を手に入れます。「モダンなUIが自分でも実装できるんだ」ということを、身を持って体感するのです。
サーバー上にファイルをアップして、Webサイトを公開する方法を解説します。サーバー環境は受講者本人で用意していただくことになります。（ただし、別途料金がかかることですので、用意できなくても学ぶこと自体はできるようになっています。）
また、「共通部品のインクルード」などの簡単なPHPについても解説し、課題を出します。
さらに、クライアントワークを想定し、テスト環境と本番環境の運用についても解説します。ここを知らないまま仕事を取ってしまうと「大きなトラブルを起こすかもしれない」という、業務上絶対に外せない知識です。
受講者はここでも「自信」を手に入れるでしょう。ここまでがわかれば安心して「副業」を開始できるからです。
Photoshopのデザインカンプからコーディングする練習をしてもらいます。題材はランディングページ（略してLP）。
LPの運用はスピード感が求められるので、コーディングもスピーディーでなければなりません。その理由や背景、そしてそれを乗り切るコツを伝授します。ここだけの話、実はものすごく簡単なんです。
さあ、ここが集大成です。
100ページをゆうに超える大規模サイトを想定し、コーディング「設計」に挑んでいただきます。ここまでの10のセクションで学んできたことを総動員すれば、必ず乗り切れるミッションです。
あなたがUI KITをコーディング設計し、他のコーダーがそれを元に一気にページを量産していく・・・。そういうワークフローをシミュレートします。
これができればあなたはどこからどう見ても「コーディングのプロ」。どこに出しても恥ずかしくない一人前のコーダーが完成を見ます。
さて、いかがでしょうか。
以上11のセクションが、メンバーサイトに公開されます。これがコーディング学習の「最後の冒険」になるわけです。
このカリキュラムでは以下の3つのポイントを押さえる意図があります。
これらはどれも、“普通は”現場経験でしか手に入らないものですが、本講座のカリキュラムを真面目に順序どおりにこなしてもらえれば、これらの力を全て手に入れることができます。
コーディングクエストに添削はありません。添削をやっているとこちらの負担がどうしても大きくなってしまい、結果的に学習の進行が遅くなるからです。
今もコーディング教習所の生徒さんを見ていますが、僕のキャパの問題で、これ以上添削を受け付けることができないので、その点ご了承ください。
「課題」と「模範ソースコード」があれば十分に勉強を進めていくことが可能なので、このような形になりました。
ただ、添削をしないからと言って、受講者を完全に放置するわけではありません。サポートの一環として、“補足教材”をメンバーサイトに順次追加していきます。
コーディング教習所を受講した多くの人が、課題をこなす中で引っ掛かったところ、理解に苦労した点がいくつかあります。コーディングクエストの課題は教習所の課題と全く同じものなので、クエストの受講者も同じように引っかかることが予想されます。それらを重点的に解説した補足教材をアップしていきます。
コーディングクエストの最大の売りは、学習環境として進化し続けることです。
今、教習所を受講してくれている人たちの様子を見ながら、必要に応じてコンテンツが追加されていきます。参考までに、現時点で予定されている補足教材の内容を紹介しておきます。
教習所を運営してみて驚いたことは、「みんなline-heightの正しい使い方を理解していない」ということです。line-heightとは、CSSのプロパティで、文章の行間を設定するものです。
美しいWebデザインを作る（コーディングする）上で、line-heightの値は非常に重要度が高いんですね。そのあたりを解説します。
CSSのフレックスボックスは便利です。しかしながら、高機能過ぎて最初は扱いに手こずるのも事実です。これは、教習所受講者の人たちを見て思ったことでもあるのですが、実を言うと僕自身も、フレックスボックスの扱いを覚えるのには苦労しました。
その僕の経験も踏まえて、「これさえ覚えておけば大丈夫」というものを解説します。
よく勘違いされるのですが、コーディングはプログラミングの領域ではありません。デザインの領域です。コーディングをするということは、デザインをするということとほぼ同義なのです。
必然的に、コーダーにはデザインの知識が求められます。もちろん、プロ級のデザインの技術は必要ないですが、最低限コーディングするのに必要な基礎知識というものは存在します。
ここでは、デザイナーから受け取ったデザインカンプを、コーダーがどういう視点で分析すべきか、どうやってデザインのロジックを捉えるのかを解説します。
HTMLの改行。brタグですね。では、「空行」はどう実装するのが適切なのでしょうか？
コーディングの基礎が理解できていない人は、結構な割合でここに引っかかります。「HTMLにおける適切な改行の解釈」について解説します。（こちらは既に動画収録済みです。）
クラス名の付け方は色々な記法が紹介されています。どれを採用しても構いません。というのも、基本的な考え方はどれも同じだからです。
ここでは、「どの記法がいいのか」ということよりも、もっと手前の原則になる「クラス名の付け方・考え方」を解説します。
htmlの書き方やcssの書き方を覚えることは大事なのですが、それと同じくらい大事なのが「作業効率化」です。後からaltを入れる時に便利なツール、複雑な表組みをコーディングする時の段取り、ソースフォーマット、検索・置換など、コーディング作業を効率化する方法はたくさんあるので、それらを解説します。
以上、一例です。
他にも予定している補足教材がありますので、順次メンバーサイトにアップし、「場」そのものの価値をどんどん高めていく予定です。
さて、価格の話に入りましょう。
まず整理しておいてもらいたいのは、本やネットの情報だけでコーディングスキルが身につくのであれば、無理に申し込む必要はないということです。
しかし、それでも書籍代やソフト代は発生しますよね。パソコンを持っていない人はそこから用意しなければいけません。
つまり、コーディングスキルはどう頑張ってもタダでは身につかないということ。
独学で習得できるなら、その費用が最小限に抑えられるだけだということです。
ここに、「独学だと確実に習得できる気がしない」とか「なるべく早く身につけたい」とか「質問できる環境が欲しい」とか、そういう意向が入ってくるなら、20万円くらいする学校や通信講座に入ることが検討されるわけです。
以前募集したコーディング教習所の位置付けはここになるんですね。
そして、今回のコーディングクエストの位置付けも同じです。（添削はつきませんが・・・）
テキストはご自分で買っていただく必要がありますし、Creative Cloudもご自分で契約してもらう必要があります。（コーディングクエストの参加費とは別です。）
もちろん、コーディングクエストは世にある学校や通信講座ほど高くはありません。
では、コーディング教習所と比べるとどうでしょう？
クエストは教習所よりも提供されるコンテンツが増えます。その上、メンバーサイトも用意するのですから、学習環境としては随分グレードアップしています。だから、教習所より高くなってもおかしくはありません。
しかしながら、今回のコーディングクエストに「添削」はありません。その分、こちらの運用の手間は下がります。これは僕の「もっと多くの人に提供したい」という個人的な想いが含まれているからです。
だから、教習所よりは安くすることにしました。
・・・
1万円。
・・・
はい、1万円です。
月額費用ではありません。1万円払いきりでOKです。これは、「メンバーサイトへのアクセス権」だと思ってもらったので構いません。これだけの費用で、全ての動画セミナー・音声セミナー・補足教材にアクセスできます。いつでも、好きな時に、です。
これを高いと思うか安いと思うかはあなたの感性次第ですが、いずれにしても、教習所受講者のことを考えると、これ以上下げることはできません。
コーディング教習所の30人の受講者、彼らがいなければ実現しなかった環境であり、価格です。もし、安いと思ってもらえるのなら、教習所受講者の人たちに目一杯感謝してください。
先人の知恵、努力の結晶がここに詰まっていますので。
Web業界という極めて混沌とした世界を快適に生き抜くために、「個の力を高める」ことが重要視されています。それも、特定のスキルに固執するのではなく、マルチに能力を広げておくことが大切な視点です。
なぜなら、そういう人は常に時代に合わせてポジショニングできるので、負けることがないからです。
コーディングができない人は、立入禁止区域が多いんです。
何かに挑戦しようと思っても、「でも俺コーディングできないしなー」と言ってそこに入っていけない。諦めなきゃいけない。
しかし、コーディングを習得すると見える世界は変わります。
「ちょっと勉強すれば俺にもできるかも」と思える範囲が広がります。例えばWordPress、スマホアプリ、在宅、起業・・・。チャレンジできる分野は山ほど出てくるわけです。
Web制作だけを取ってみても、細かく見れば8つくらいの分野に分けることができます。これらは当然、人によって向き不向きがあります。
デザインの才能がある人もいれば、プログラミングに情熱を注げる人もいる。広告の運用に向いてる人もいるでしょう。はたまた、ひたすらWeb解析をしてるのが幸せという人もいるでしょう。
「どこを主戦場とするか」で、自分がどれだけ輝けるかが変わってきます。自分らしく輝けるポジションを選ぶべきなんです。
コーディングを習得すれば、その選択肢は飛躍的に広がります。それなのに、コーディングの勉強をする前に「俺には何が向いてるんだろう？」と考えるのは、ちょっと早いと僕は思います。
だからコーディングには挑戦してほしい。
その後に、自分らしさを追求してほしい。
そう思います。
何度も言うようですが、コーディングの勉強は大変です。でも、習得したら見える世界がガラッと変わります。
だから、一番大変なところを乗り越えるための「場」を用意しました。あなたには埋もれている才能があるかもしれない。コーディングを覚えることで、それが花開くきっかけになるかもしれない。そんな可能性に密かに期待しています。
コーディング教習所受講者の中には、既にWebの仕事を受注し始めた人もいます。
「WordPressも勉強しようと思ってます！」と意気込んでいる人もいます。
本気になった人が目一杯頑張れる環境がここにあります。この機会に、新しい扉を自分の力で開いてみませんか？
今回の講座は、11の課題と模範ソースコードが習得までの道筋を示しているだけで、本質的には独学の域を出ません。（どれだけ丁寧でわかりやすい解説がされていても）あなた自身が課題に一生懸命取り組むこと、模範ソースコードからセオリーを読み解くことが前提になります。
独学は右往左往することもあるから苦しさはあります。しかしその分、誰かに手取り足取り教えてもらうよりも、応用力がつきます。一時期の孤独と引き換えに、壁を乗り越えることが習慣化されます。独学の良さはそこにあります。
乗り越えるべき壁は明確になっています。だから是非、歯を食いしばって頑張って欲しい。
そしてここで一つ、約束があります。
コーディングクエストは、あなたをひとりにしません。
これを忘れないでください。
あなたが一生懸命取り組んでいる課題と同じものを、遠いどこかの誰かもやっています。
何度も言うように、コーディングクエストは単なる教材ではなく「場」です。そこには仲間がいると思っていいです。
僕だってそうです。添削こそできませんが、メンバーを見守っています。
孤独を感じる必要はありません。いや、感じさせません。
そのために、参加者限定のボーナス特典をご用意しました。
コーディングクエストのメンバーになった方に、メールマガジンを配信させていただきます。
内容はコンテンツの補足やモチベーションの維持を目的としたもの、新コンテンツのお知らせなど、様々です。
定期的にメールさせてもらいますので、自分なりに学習に役立ててください。
なお、模範ソースコードはこのメルマガから送らせていただきます。
以前にやっていたコーディング習得メール講座で配ったレポート・動画一式を、メンバーサイトにアップしておきます。直接的なコーディング教材と違い、コーディングに臨む際の心得や時代の流れについての考察が中心です。
クエストの課題の合間に、息抜きがてら触れてみてください。
超超超ぉ〜一部の方にお配りしたレポート、「Webデザインのファーストステップ」をプレゼントいたします。これはコーディングの教材というよりは、DTPからWebの世界に参入する人に向けて書いたものです。
Photoshop及びIllustratorでのWebデザインデータの作り方や、ディレクションの知識について触れています。
コーディング習得後に生きてくる内容になるので、是非一読ください。
コーディングを習得した後、どんな技術を身につけるべきか。
僕なりにリストにまとめました。そちらをプレゼントいたします。
僕のメルマガを読んでくれた人は知っていると思いますが、新しい技術を効率的に取り入れるには「概念理解→実践→実案件」の順で勉強を進めていくのが良いとされています。
まず新技術の概念を理解し、どこでどう役立つのかを知る必要があります。
次に、実際に手を動かして実践し、体に覚え込ませます。
最後に実案件で、「仕事として」その新技術を使ってみるのです。
ここまでやると、どんどん技術が「定着」していきます。
この中の3つめ、「実案件」は環境を整える必要があるので、意外と難しいんです。
なので、新技術の紹介と実践方法、それを仕事にするための環境づくり、この3つをセットで解説したものをプレゼントします。
是非、コーディングスキルを土台に、自分に必要な関連技術を獲得していくのに役立ててください。コーディングスキルの展開力、その幅広さにきっと驚くと思います。
さて、以上の内容で、「是非参加したい」という方は、以下よりお申し込みください。
上記から申し込みいただくと、クレジットカード／銀行振込での決済が可能になっています。
では、まとめます。
さてさて。心の準備はできましたでしょうか？
あなたがコーディングを習得するための環境は、既に整っています。一歩踏み出していただければ、進化が加速することが実感されると思います。
最後に、コーディング習得後、Web制作という現場に出た後、「どんな人がコーダーとして支持されるのか」をお話しておきます。この視点があるかないかで、自分自身の評価、はたまた成長度合いが変わってきます。講座に参加するしないに関わらず、これだけは知っておいて欲しいと思います。
現場で支持される人、成長し続ける人には、ある共通点があります。それは、
仕事の中で成長できる
ということです。
コーディングスキルは、どんなに追求しても終わりはきません。100点満点のソースコードなんて、この世にないのです。それはコーディング技術というものが、デバイスの進化やトレンド、人々の心理、リテラシーなどの不確定なものを前提として成り立っているからです。
この先、新しい案件に直面した時、「自分にできるだろうか？」と不安になったり、怖さを感じることが必ずあります。その時に、「勉強しながらやってやろう」と思えるかどうかが大事なのです。
「今の自分にはできないから」「やったことがないから」という理由でその仕事を断ってしまうのはナンセンスです。そうやって殻に閉じこもってしまうと、チャンスが回ってこなくなります。
逆に、要求されたことに対して「やったことないですけど、まあ調べながらやるんで大丈夫っす」と言える人が評価されます。わざわざ言わなくても「任せてください」と言って水面下でバシャバシャやれる人が評価されます。これは僕の経験から言って、間違いありません。
現時点のスキルがどうこうではなく、常に伸びしろを持てているかどうか。
ここが技術者の価値を測る指標になっているのです。
世間では仕事を受ける条件として「実績」とか「制作体制」とか「責任感」とか、色んなことが言われますが、本質的にはここです。「伸びしろ」なんです。
実績だのなんだのは、後からついてくるものです。
「誰かに教えてもらわないと成長できない」という人は、すぐに伸びしろを失ってしまいます。絶えず努力し、工夫し、成長し続けることができる人は、「自分で頑張る」ことに慣れているわけです。自分の可能性に天井を設けていないということです。
というか、わざわざこんな説得的な言い方をするまでもないですね。
単純に、自分の努力で「できないことができるようになる」のは気持ちいいですよ。苦しい瞬間もありますが、全体としては充実を感じられるはずです。
もし、まだその感覚を感じたことがないのなら、今回のコーディングクエストを1つのきっかけにして欲しいと思います。
あなたのご参加、お待ちしております。
PS.
繰り返しになりますが、本講座に添削はありません。添削がない代わりに、模範ソースコードの配布と補足教材があります。
PPS.
コンテンツのボリュームと価格がマッチしてないので信じられないかもしれませんが、嘘はありません。安心してご参加ください。
Copyright© 笑うWebデザイナー, 2017 All Rights Reserved.
越智さんがコーディングを教えてくれるのなら、簡単にコーディングを習得できるだろうと思っていました。
しかし、実際に課題をこなし、添削を受けてみると、「これは自分の頭でしっかり理解しなきゃいけない」という思いを強くしました。
だから、当初想定していたより学習のペースが遅くはなるのですが、焦らずじっくりと、しっかりと時間をかけて、コーディングの本質を理解することに専念しようと思います。