後楽エンブログ

「後」の人生を「楽」にするために「エン」ジニアにキャリア変更した私が初心者エンジニアを応援するブログです。

【プログラミング】初受注で稼ぐまでの中級者へのステップアップ~模擬コーディングの正しいやり方~

f:id:rikei-venture:20190515162327p:plain

HTMLとCSSを一通り学んだけど、、、そのあとどう学んでいいか分からない。。

このような壁にぶち当たる人は非常に多いと思います。(私もそうでした(笑))

 

本記事ではこのような悩みにどういった方法をとるべきかお答えします。

本記事テーマ

 HTML&CSS初心者が一人でサイト構築&初受注までの最短ステップを教えます。

ちなみに私はプログラミングというものを学び始めて、2ヶ月半で初受注&報酬月3万をゲットしました。

2か月半を遅いと感じる方、あるいはたったの3万かいと思う方もいるかもしれません。

 

ただ、右も左も分からない初心者にとっては初受注までがムズい!!

そこから月10~20万の利益を生み出せるようになるまではそこまで難しくありません。

それにお金を生み出せないと、このまま学習を進めて何か意味があるのだろうか?と不安に陥ってしまいますので、初受注がとても重要なのです。

 

初受注が一番難しいので、そこまでに至るにはどうしたらよいのか

自分の経験を元に、お伝えしますので、参考にして頂けたらと思います。

①目標:プログラミング(HTML&CSSコーディング)で稼ぐ

稼ぐことが目的。技術は後からついてくる

実はHTML&CSSはプログラミング言語ではなく、マーキング言語と呼ばれるものです。

が、ぶっちゃけそんなことはどうでもいいです(笑)

大事なことは、稼ぐこと

大事なことは、目的が「稼ぐこと」であって、「コードが書けるようになること」ではないということです。

 

つまり、稼ぐために必要なことを最優先でおさえて、そして実行に移していくという認識が重要になります。

稼ぐために必要が迫られたときに、その都度調べるなりしていくうちに、技術は身についていきます。

 基礎を固めるとかいう無謀な挑戦

よく陥りやすいミスとして、基礎を一通り一旦こなすという方法です。

基礎を何周もこなすというのは、時には必要な作業なのかもしれません。

しかし、何がどう必要とされていくのかという重要度を知らない状態で学ぶのは非常に効率が悪いです。

 

大学受験を経験している人ならなんとなくこの感覚は分かると思います。

私の苦い経験として、英語の勉強でまず文法をひたすら何周もするという愚行をしてしまいました。

目的は「英文を読めるようになること」なのに。。

結果は目的である英文は読めず、結局そんな使わないから文法もすぐ忘れるという結末です。

そしてなによりどれが優先度が高いかを知らないため、理解するスピードも遅かったです。

めちゃ効率悪い

プログラミングの話に戻しますと、PHP、JQueryの知識はある程度は必要になります。

しかし、最初のうちはゴリゴリコードが書ける必要もなく、どういうものかが理解できている程度で十分です。

これを知らずにこの辺を全力で学んだところで、いざ使うときにはだいたい忘れています。

目的は「稼ぐこと」であって「コードが書けるようになる」ではないことを意識しましょう。

②目標物の確認:敵を把握し、最低限の必要スキルを準備する

またまた大学受験で例えてしまうのですが、

大学受験では、結局のところ志望校に受かればいいのです。

ですから志望校の赤本やセンター試験の過去問に挑戦して、まず敵を知ることが一番大事。

 

受注の世界も同様です。

一番王道なのはランサーズから受注することですから、ランサーズのサイトにアクセスし、「コーディング」と検索し、何が必要かを知れば良いのです。

 

f:id:rikei-venture:20190514210734p:plain

例えば上記の案件なんかですと、参考サイトを見ると、画像を右にスライドさせる技術は調べるとして、後は大したことないなということが分かります。

こんな感じに、必要となりそうなスキルを先に把握することが大事です。

③対象者:基礎学習を終えた中級者

ここまでは最低限というライン

今は非常に便利な世の中でして、

「プログラミングって何?」

「どうやって勉強し始めたらいいの?」

というプログラマーを志す未経験の方に対して、簡単に始められるサービスが充実しています。

とりあえずここまではやっといてくださいというラインを記述します。

〇Progate

・HTML 全レッスン

・CSS 全レッスン

・JavaScript 全レッスン

・JQueary 全レッスン

・PHP 全レッスン

〇ドットインストール

・はじめてのHTML (全15回)

・はじめてのCSS (全17回)

・詳解HTML 基礎文法編 (全30回)

・詳解CSS 基礎文法編 (全37回)

・実践!ウェブサイトを作ろう (全16回)

・実践!スマートフォンサイトを作ろう (全22回)

最低限ここまではやっといてください。

多い!と感じるかもしれませんが、正直これ自体は指示された通りにやるだけで道しるべがあるので全く苦労せずにこなせるものです。

 

また、Progateとドットインストールは両方こなすことを強くオススメします。

一長一短があるので。

Progate

〇長所

一つ一つが丁寧。理解しやすい。

〇短所

Progateの中でしかやり方が身につかない。

コードの一部をコピペしていくだけ。実践的ではない。

ドットインストール

〇長所

Atomエディタの使い方が分かる。

実際にどのようにコードを書いていくか体感できる

〇短所

雑な時がたまにある

Progate→ドットインストールと学習を進めていくことを強くオススメします。

本記事の対象者は基礎学習を終えた方

正直、基礎学習までは良い調子で学習を進められるものです。

ただ問題はここから。

こっから実践的な練習は何から取り組んでいいかわかんないよ~

という方に向けて、実際に私が取り組んでみて効果的で大正解であったと感じるものをお伝えします。

④問題点:プログラミング中級者向けの教材が充実していない

 私がプログラミングを勉強し始めたころに感じた事は、中級者向けの教材が充実していないという事実です。

実際このステップが一番ツラく、不安になりました。

基礎を勉強したものの、この後どうしたら??

 調べても、「実際に模擬コーディングしてみよう」と書かれたものばかりです。

 

ですが、事実ここからは模擬コーディングor実践しかありません。

ただ、参考ページを見つけて、闇雲に模擬コーディングしていくのはちょっと生産性に欠ける気がします。

どうせ模擬コーディングしていくならば、ある程度「自分の型」を決めるべきだと思うんです。

毎回一から作るの大変ですもんね。

⑤最重要:統一性とテンプレート化

 デザインとはBoxを並べることである

正しい方法を身につけるべき

Progateやドットインストールの手法は

1、とりあえずHTMLに使用する文を書いていき、そこにclassをあてる。

2、一つ一つCSSを適用させていく

というざっくりとした流れしかなく、毎回壮大な敵と戦わなくてはいけない感覚になります。

私がオススメする手法は「ボックスを並べる」というものです。

目的のサイトをBox化のレイアウトを考える

次のサイトのレイアウトを考えてみましょう。

 

【PC版】

f:id:rikei-venture:20190515134902p:plain

 

【スマホ版】

f:id:rikei-venture:20190515140050p:plain

 


上記画像をBoxでざっくりとレイアウトしてみましょう。

次のようになると思います。

【PC版】

f:id:rikei-venture:20190515141839p:plain

【スマホ版】

f:id:rikei-venture:20190515141907p:plain

どうでしょうか?ざっくりボックスの考え方でレイアウトすると上の画像のようになります。

ポイントとしましては、Box4に注目してください。

スマホ版で縦に羅列しているレイアウトをPC版では横に表示させています。

Box5も同様です。

ですので、サイトを作成する際、

①スマホ版で表示させたいようにBoxを用意する。

②PC版だけ横並びにさせたいところのボックスを横並びにする

当たり前といえば当たり前な話ではあるのですが、これだけなんです。ほんとに。

ボックスにコンテンツを入れるという考えでいれば、中身を変えることなくボックスごと移動できるのでスッキリとスマートなレイアウト変更が可能になります。

 ボックスレイアウトについて詳しく説明した記事がコチラになります。

HTML&CSSの基礎文法をおさえている人でも、レイアウトの基礎をおさえられていない方は意外と多いと思います。

サイト作りの基礎中の基礎で、土台となる考え方となるので、是非目を通しておいてください。

ここまでくれば、ざっくりとした作戦を立てやすい
サイト作りの流れ

①Boxで基本枠組みを作る。

②コンテンツを入れる。

③レスポンシブ対応させる。

④margin,padding,font-sizeなどの調整

⑤特殊パーツの追加など

これらを意識して模擬コーディングしていくかどうかで今後の効率が全く異なってきます。

効率を上げるにはテンプレート化

プログラマーってみんながみんなゴリゴリにコードを書けなくちゃいけないわけじゃないんです。

それこそ、タッチタイピングが出来なくても効率さえよければ、それを上回る速さで作成することができます。(タッチタイピングができるに越したことはないです。)

効率を上げる方法、それはテンプレート化です。

class名を変えるだけですぐ適応できるようなパーツのテンプレートを用意しておきましょう。

例①、Boxの横並び化

先ほどの例で言うと、Box4のBoxを横並びさせます。

この作業はよく出てくるので、テンプレート化させておきます。

f:id:rikei-venture:20190515155121p:plain

3つの横並びなら、一つ当たりの幅を33.3333%、4つなら25%。

Boxの間に隙間を入れたいなら、box-sizingの設定なら、その都度自由にmarginを入れてあげれば良いだけになります。

 例②、メニュー(縦表示ver &横表示ver )

 これもしょっちゅう出てきますね。

メニューバーは横表示が多いけど、サイドバーは縦表示ですもんね。

どっちのパターンにも対応できるよう用意しておきましょう。

 

このようにテンプレート化しておくと便利なパーツがいくつかあります。

それについてまとめた記事がコチラになりますので是非上手く活用しちゃってください。

⑥模擬コーディング:正しい手法を身につける

さあ、プログラミング中級者の壁「模擬コーディング」です。

大事なことは「正しい手法を身につける」です。

HTML&CSSの基礎文法を身につけてた方は多いと思われます。

ですが、「サイトデザインの基礎」を身につけている人は意外と少ないと感じています。

基礎文法と同じくらい重要なサイトデザインの基礎。

サイトデザインの基礎は主に3つ

①ボックスデザイン

②レスポンシブ対応

③テンプレート化したパーツの利用

軸は、先ほどから口酸っぱく強調している「ボックスデザイン」です。

それにプラスしてテンプレート化したパーツの利用が入ってきます。

これらのノウハウを一気に身につけることができる「模擬コーディング」をご用意しました。

マネして作っていくだけで、サイト作りに必要な考え方から、頻出のデザインを網羅的に抑えられるようにしました!

基礎文法を終えて、模擬コーディングを始めていこうという方にオススメです!

こちらのサイトデザインの基礎をおさえて、今後上質な模擬コーディングをしていきましょう。

⑦実践:足踏みする必要なし。即受注提案

どれくらい模擬コーディングすればよい?

答えはないと思うのですが、個人的感覚だと3つ作ってしまったなら、もう実践にGo!だと思います。

 

 理由は簡単で、いくら模擬コーディングしたところで不安は取り除かれないからです。

練習をいくらしたところで、それがお金につながっていることなのかという実感が湧かない限り、ずっと不安ですし、モチベーションも維持できません。

ですので、もうランサーズに提案しまくるのがいいです。20件くらい(笑)

 

採用されるコツは、

・すぐに作業にとりかかれる

格安で引き受ける

です!

「格安」は超重要だと思います。

私の場合は3万円の案件を1万円で提案したところ、見事受注できました。

最初は経験と実績のためだと割り切って、とにかく格安で提案してみるのがいいと思います。

まとめ

ここまでの共通のポイントは効率です。

敵を予め把握するのも、Box化の考え方も、テンプレ化も、即受注も全て効率から来ています。

無駄に学習し続けたり、模擬コーディングをし続けるのはあまり意味がない行為です。

目的の「お金を稼ぐこと」を意識して、最短距離でたどり着けるように、効率の良い方法をとりましょう。