在宅ワークが増え、通勤時間を有効に使い独学でプログラミングを始め、副業しようと頑張っている人に向けて、具体的にどうやって副業するかまとめました。

→この記事を読むとできること

独学プログラマーの副業とは

プログラミングを学ぶ経緯はそれぞれですが、おおよそは副業や手に職を付けたいという理由が多いかと思います。私もその一人です。

では、ある程度の学習を終えたタイミングでいざ仕事をもらう、取りにいくとしたらどうすれば良いでしょうか。

結論としてはクラウドソーシングサイトでの受注になります。

クラウドソーシングサイトに登録

主なサイトは以下のサイトです。一度は聞いたことあるのではないでしょうか。

などです。

いずれも会員登録は無料です。

とりあえずランサーズ、クラウドワークス、ココナラあたり登録しておきましょう。

どのような案件があるかは後ほど紹介します。

ランサーズの評判は？特徴を解説

ランサーズの評判は？特徴を解説 プログラミングを独学したし、副業しよう！ 大手クラウドソーシングサイトの『ランサーズ』に登録しようかな。 評判とか特徴を知りたいな。 この記事を見ると ...

design-eight.com

2020.10.07

イスト【_ist】の評判は？特徴を解説

イスト【_ist】の評判は？特徴を解説 プログラミングを独学したし、副業したい！ クラウドソーシングサイト『_ist』に登録しようかな。 評判や特徴を知りたいな。 →この記事はこんな人にお...

design-eight.com

2020.10.14

ビズシーク【Bizseek】の評判は？特徴を解説

ビズシーク【Bizseek】の評判は？特徴を解説 プログラミングを独学したし、副業したい！ クラウドソーシングサイト『ビズシーク』に登録しようかな。 評判や特徴を知りたいな。 →この記事は...

design-eight.com

2020.10.21

最初は自分が受注できるレベルか不安

受注できたけどできなかったらどうしよう💦

最初のエントリーは緊張しますし、できるか不安です。最初はみんな同じ状況です。

まずは内容を読んで「あ、これなら出来そう」はぜひエントリーしましょう。7割り程度見当がつけば残りの3割りはググればなんとかなります。

その7割出来そうな案件レベルがあなたの受注レベルです。

勇気を持ってエントリーしましょう。

独学でプログラミングを習得してきた方なら自己解決能力は問題ないでしょう。実戦でどんどん成長できるのも大きなメリットです。フリーランスの先人たちもおおよそ見当をつけて、受注後にググりまくって仕事を完結させたそうです。そうやって前進、成長していくのです。

実戦が一番の成長できる経験です。

しかしながら、クラウドソーシング初心者の間は実績がなく受注しにくいのが現状です。

エントリーして選んでもらうまで

最初の難関は1件目の獲得です。

初めての依頼をこなせるかな・・・という心配より1件目を受注することがなかなかハードルが高かったです。プロフィールやポートレイト（簡単なもの。模写でもOK）はしっかりしましょう。

サイト登録後は必ず下記項目はチェックしましょう。

プロフィール写真

基本はあった方が印象は良いです。自分の画像を載せる人も多数おり、安心感、信頼感につながっています。ただ、アイコン画像や横顔などの方もいますので顔写真に抵抗のある方は必須ではないです。

自己紹介文

初心者はここがポイントです。受注実績がない分、発注者はここで判断します。ポイントとしては実績はないがスキルや決められた納期などはしっかり守るなど、相手に対し「誠実さ」「安心感」を与えるようにしましょう。それが「信頼」につながります。

初めてだからといって多めに見てください的なことは書くのはやめましょう。発注者にとっては良いものを作ってくれるプログラマーは多数いる中であなたを選ぶメリットがなくなります。

ポートレイト

エントリーする際に必ず「あなたのスキルがわかるものを見せてください」となります。自作したLPのフルスクリーンショットでもいいのですが、動きがあるサイト制作ができるならば自分のサイトを作っておいた方が◎です。スライダーやJQueryなどの実装はより効果的に見せてくれます。

練習がてらサーバーを借りてみて実際にUPすることをおすすめします。

実際にサーバーまでのUPを依頼されることもありますので、遅かれ早かれサーバーに慣れておくのがベターです。

サーバーに関しては下記の記事に書いてます。

【初心者向け】サーバーを借りるメリット

悩む人 プログラミングを独学して副業したい 知識としてサーバーも知っておいた方がいいかなぁ 全然わからないから不安だなぁ サーバーを借りることを検討している方に向けて、利用するメリットと必...

design-eight.com

2020.09.18

【初心者向け】エックスサーバーをレンタルする方法

【初心者向け】エックスサーバーをレンタルする方法 エックスサーバーを借りてブログを作りたい エックスサーバーってどうやって借りるんやろか 実際にサーバーを借りる際には初めてのことなのでわからない...

design-eight.com

2020.10.08

名前

本名の方が確かに安心感や信頼感につながりますが、変な名前じゃなければ本名じゃなくてもOKです。実際にフリーランスでバリバリやってる方も本名ではありません。

エントリー文章

いいなと思った案件にコメントを送ることでエントリーされます。基本的な定形分を作っておきましょう。ここにも安心感や誠実さ、しっかり取り組むなどの意気込みを簡潔に書きましょう。

あなたが依頼する立場だったらどういう人にお願いするかをイメージするといいでしょう。

料金設定

エントリーと同時におおよそのサイトでこの案件での金額を定時します。基本は発注者が「000円でお願いします」と書いてありますが、初心者のあなたはそれを下回らないと他の人と差別化できません。2〜3割は低い設定にしましょう。

最初は実績作りが優先です。金額は後からついてきます。ここは少しでも多くの案件を獲得し、しっかり実績を作る期間としましょう。

おすすめ案件

実際には様々な案件がある中で、似たような内容でも料金は結構違ったりします。

「ここまでやるのにこんだけ？」とか「これだけでこんなにもらえるの？」などなど。。

まずは比較的簡単な案件イメージ

実際の依頼内容です。これで2万程度の報酬提案です。

サイト制作依頼

こちらで8万〜15万程度の提示。

こちらは料金については相談したいとの案件。

このようにざっと見た感じ出来そうな感じではないでしょうか？

いずれも大体30〜50名程度の申込があります。あなたが選ばれるようにコメントやポートフォリオでアピールしましょう！

まとめ

いつまでも練習していても宝の持ち腐れです。スキルは後からついてくる！今大事なのは前に進む勇気です。どんな勉強法よりも実戦があなたを一番成長させてくれます。それで報酬がもらえるなんてすばらしいですよね！

早速サイトに登録して案件をチェックしましょう！

今日紹介したクラウドソーシングサイト

【初心者向け】サーバーを借りるメリット

悩む人 プログラミングを独学して副業したい 知識としてサーバーも知っておいた方がいいかなぁ 全然わからないから不安だなぁ サーバーを借りることを検討している方に向けて、利用するメリットと必...

design-eight.com

2020.09.18

エックスサーバー で独自ドメイン取得からWordPress設置

独学でプログラミングを勉強していくと、HTML ,CSS,JQuery次はなんの言語をとなった人、WordPress【ワードプレス】略してWPを学ぶタイミングです。 ぶっちゃけプログラミングの知識がなくてもできてしまうので...

design-eight.com

2020.09.16

ワードプレスでブログの始め方

【初心者向け】アフィリエイトは根気が大事

ブログで集客する方法　SEO対策

アフィリエイトをはじめるにはASPに登録

ASPとは、アフィリエイトサービスプロバイダの略で、アフィリエイトをやりたい人と広告主をつなぐ仲介役のような存在です。上場している会社もたくさんあり、大小合わせると100社以上存在しています。

初心者が登録すべきASP

どんなジャンルのプログラムがあるかを調べる際はまず、ASPに登録する事から始めましょう。ASPに登録して色々な広告、プログラムを眺めているだけでも勉強になりますので移動時間や寝る前の空き時間などにスマホで見たりして、その広告なら自分はどうやって売るのか、などイメージしておくと今後始めるにもスムーズです。また、同じ広告であってもASPによって条件や報酬額が違うことも多々あるので、いくつかのASPに登録することをおすすめします。

文章で購入欲を掻き立てる！セールスライティングについて

A8ネット

初心者はまずA8ネットにとりあえず登録しましょう。基本的には登録のハードルが低く、管理画面も見やすい、まずはA8netに登録して興味のあるジャンルやプログラムを探すのが良いです。A8.netはとにかく案件数が豊富で、あらゆるジャンルの広告を網羅している印象。会員数が多い点でも安心できます。

また、セルフバックの可能な案件も非常に多いので、アフィリエイト開始時の資金を作るのにも助かります。

A8.net

もしもアフィリエイト

もしもアフィリエイトの最大のメリットはAmazonアソシエイトと楽天アフィリエイトの報酬を簡単に現金できることです。Amazon,楽天は知名度もあり、比較的購入されやすいサイトでもあるので初心者としては使いたい媒体です。一応どちらももしもアフィリエイトを利用しなくてもルール上は現金化が可能なのですが、以下の通り条件が厳しめ設定なので初心者には相当ハードルが高いです。

Amazonアソシエイト現金化は最低支払額が5,000円以上から。また金融機関への振込時に手数料が300円必要。

楽天アフィリエイト月3,000pt以上稼ぐようになると貰える楽天キャッシュを手数料10%で現金化する

一方で、もしもアフィリエイトは報酬の振込先を住信SBIネット銀行に指定すれば1円から支払いしてくれますし、手数料も無料です。

もしもアフィリエイト

バリューコマース

東証1部に上場しているのでとても安定した大きな会社で大手企業の広告数も多いです。誰もが知っている様な商品を紹介できるのは読者にとっても安心で収入を得やすいです。また同じ案件でもバリューコマースの方が報酬が高くなっている場合があるので、他のASPと比較しながら広告案件を探してください。

デメリットとしてブログの記事が10本程度ないと審査が通りにくい事、また他のASPに比べて提携に時間がかかる場合があります。気になる案件があった場合、記事を書く前に事前に提携依頼申請を出すことをおすすめします。

バリューコマース

最後に

アフィリエイトは元手なく始められてノーリスクで始められる副業として広く知られるようになってきました。そして現在ではイチ個人だけでなく企業も参入してくるビジネスモデルへとなっており、中途半端な覚悟や気持ちでは一円も儲からないような副業へと変わりつつあります。

そんな厳しい条件でも、月に数万円のお小遣いが欲しい、独立したい、月に100万円稼ぎたい、という強い思いがあればまだまだチャンスがありますので、気合いいれて頑張りましょう！3ヶ月、6ヶ月、1年と利益が出なくても折れない鉄の心が必要です。

【初心者向け】アフィリエイトは根気が大事

今回紹介したASP

A8.net

もしもアフィリエイト

バリューコマース

また、これからアフィリエイトを始めようと考えている方には、レンタルサーバーの利用がおすすめです。

カゴヤのレンタルサーバー

通常は自分でサーバーを契約してWordPressのインストール・設定を行わなければなりませんが、『カゴヤ』であれば初めからWordPressがインストールされたサーバーを利用できるので安心です。さらに、初期費用無料かつ月額440円～と費用を抑えてアフィリエイトを始めることができるので、初心者の方にはメリットが大きいと思います。

カゴヤのレンタルサーバー

悩む人

サーバーを借りることを検討している方に向けて、利用するメリットと必要になる料金とを解説します。

サーバーを借りてWordPressのサイトを構築するまでの手順を知りたい方はこちらの記事をご覧ください。

【初心者でも安心】ワードプレスでブログをすぐ始める方法

【初心者でも安心】ワードプレスでブログをすぐ始める方法 ブログをはじめたいけどまず何をしたらいいんやろか ブログを始めたいと思った時、まず何をすべきか、ブログ初心者のかたが迷わず、確実に、簡単にできる...

design-eight.com

2020.10.10

サーバーを借りるメリット

サーバーを借りることは大きく2つのメリットがあります。

1. スペック的なメリット
2. 自分の知識、経験からの成長

独学でプログラミングを勉強しているといつのタイミングで、どのレベルになったら次のステップへという明確な指標はありません。なので『自分のレベルはまだまだだから』『サーバーなんてわからない・・』と自分に言い訳してませんか？

サーバーを借りることで、知識、経験として実際に自分で契約することで大きく成長できます。

サーバーを借りるべき3つの理由

初心者がサーバーを借りるべき理由は以下の3点です。

それぞれ見ていきます。

絶対自分の成長につながる

最初はわからないのが当たり前。今から調べればいいだけの話です。先人たちがいろいろ足跡を残してくれてますのでググればすぐわかります。何より自分の知識が増えることが大きい。昨日知らないことが今日わかるのは大きな成長！プログラミングを学ぶならいずれは通る道。早めに学びましょう。

契約が発生するので継続するモチベーションになる

サーバーを借りるとちょっと自身がつきます。他の人ができないことをできたということ、そして何よりサーバーを借りたからにはそれを生かすということ、つまりモチベーションにつながります。

自分で作ったサイトをU Pするも良し、ワードプレスをやってみるもよし、学べることがたくさん増えます。サーバーにUPするという作業も大きな知識、そしてドメインなどの知識も自ずとわかってきます。新たな引き出しが増えます。

フリーランス、副業に向けての大きな1歩

自分のポートフォリオサイトを作ってUPできること。やはり仕事をとるにあたりしっかり自分のポートフォリオサイトがある方が取りやすいです。自分の実績として模写サイトを紹介するにも自分のサーバーに模写サイトをUPして依頼主にアドレスを教えることができます。スクショだけの実績公開よりスライドショーやホバーなどの動きが見えるサイト上での実績を見てもらった方がわかりやすいですからね。

有料レンタルサーバーのスペックメリット

有料サーバーは無料サーバーに比べ以下のメリットが挙げられます。

それぞれ見ていきます。

独自ドメインでサイトを運営できる

無料サーバーでサイトを作る場合は独自ドメインが使えません。

例えばはてなブログならサブドメイン（example.hatenablog.com のexampleを自由に設定でき、トッドの後ろは固定）での運用になります。

今後、ポートフォリオ作成やブログ作成など運用していくならば独自ドメインの方が印象的にも信頼性的に優位です。

ブログ・サイト作成サービスも有料プランなら独自ドメインを使えますが、料金を払うくらい本格的に運用していくなら、サーバーを借りてWordPressなどのCMSでサイトを構築した方が長期的にはおすすめです。

ブログを収益化できる

ブログを収益化したい場合は、自分で広告を掲載できる方式で作成する必要があります。

ブログ・サイト作成サービスだと自分で広告掲載ができないのが基本です。広告掲載はサービス提供会社の方でおこなっており、その分の収益があるからこそ、ユーザーに対して無料でサービス提供できるのです。

上述したように、無料サーバーだとサブドメインでの運用になるので、その会社が所有する基盤の上であなたのサイトを運営することになります。結果、そこで発生する広告収益は運営会社の方に行くという形になってしまします

無料サーバーよりもスペックが高い

当然ですが、有料サーバーの方がスペックにおいても安定性においても高性能です。そして無料サーバーはそもそも独自ドメインや収益化が不可のものも多いです。

コストは月額1,000円ほどでそれほど高額ではないことも踏まえると、無料のサーバーにするメリットはほぼありません。サーバーを自分で借りるのであれば有料のものから選ぶべきです。

初心者におすすめのサーバー

サーバー戦国時代です。様々なサーバーがありますが、今回は使いやすさ、信頼度、コスパのバランスを見て以下の3つに絞りました。

エックスサーバー

エックスサーバー
レンタルサーバー『エックスサーバー』は、 安心と快適さを兼備した高性能レンタルサーバー。 高い品質を誇るレンタルサーバーサービスを手ごろな料金でレンタルできる。 運用サイト数は180万件以上なので安定度がうかがえる。

筆者はこのサーバーからスタート。このサイトはエックスサーバー です。。。期間限定ですが定期的に独自ドメイン無料キャンペーンをやっています。

ロリポップ

ロリポップ！レンタルサーバー
マニュアルやライブチャットを完備しているので、ホームページ初心者でも安心。月額100円（税抜）～初められるととってもお得なサーバー。可愛い名前ですが、サーバーとしてのクオリティ、安定度はお墨付き。
もちろん無料のお試し期間も10日間あるので安心ですね。

▼ロリポップ！レンタルサーバーはこちら

お名前.com

お名前.com レンタルサーバー

1999年のサービス開始以来、登録実績2,400万件突破の国内シェアNo.1のドメイン登録サービス。独自ドメイン取得ついでにサーバーも併せてレンタル、そしてドメインが実質無料で使えるからオトク。東証一部上場のGMOインターネット株式会社が運営してるのも安心材料。24時間365日無料電話サポートでいざというときも安心。

まとめ

何事もやってみないとはじまりません。今後プログラミングをしていく上で必ず触ることになるサーバー。やるなら早く触っておいた方が間違いないでしょう。百聞は一見にしかず。ランニングコストはそれぞれかかりますが、それ以上のメリットをもたらしてくれます。一日でも早くその知識を手に入れましょう。今日より明日、成長できますように！

今回紹介したサーバー一覧

エックスサーバー

ロリポップ！レンタルサーバー

お名前.com レンタルサーバー

独学でプログラミングを勉強していくと、HTML ,CSS,JQuery次はなんの言語をとなった人、WordPress【ワードプレス】略してWPを学ぶタイミングです。

ぶっちゃけプログラミングの知識がなくてもできてしまうのですが、この先、サイト作成するにも必ずWP案件は出てきます。そして技術の割には高単価案件も多いのです。

ただし、WPはサーバー、ドメインが必要になりますので、先行投資として月サーバー代1000円程度、ドメイン代少々必要になりますが、後々回収できるほどのメリットがありますので飛び込んでいきましょう。ちょっと贅沢なランチ1食分と思えば安いもんです。

サーバーを借りる

サーバーはたくさんありますが初心者の私はいろいろ検討した結果エックスサーバー にしました。他のサーバーも含め料金プランはほぼ同じくらいなので有名なとこにしました。また独自ドメインが永年無料でゲットできるのも大きなメリットです。これは期間キャンペーンなのでHPで確認してください。

エックスサーバーの申込はこちら

エックスサーバー をレンタルする記事はこちら

【初心者向け】エックスサーバーをレンタルする方法

【初心者向け】エックスサーバーをレンタルする方法 エックスサーバーを借りてブログを作りたい エックスサーバーってどうやって借りるんやろか 実際にサーバーを借りる際には初めてのことなのでわからない...

design-eight.com

2020.10.08

エックスサーバー ではすぐにワードプレスを始めたい人に「ワードプレスクイックスタート」があります。こちらの記事から

【初心者でも安心】ワードプレスでブログをすぐ始める方法

【初心者でも安心】ワードプレスでブログをすぐ始める方法 ブログをはじめたいけどまず何をしたらいいんやろか ブログを始めたいと思った時、まず何をすべきか、ブログ初心者のかたが迷わず、確実に、簡単にできる...

design-eight.com

2020.10.10

料金プランはベーシックで【X10】でいいと思います。基本的には10日間無料キャンペーンをやってますので自ずとそのパターンになります。10日以内に支払登録しなければ10日間で終了、契約する場合は10日以内に支払登録をします。年払いがお得なのでおすすめです。

独自ドメインの取得

無料で独自ドメイン取得

聞いたことはあるけど実際に取得したことがある人は少ないのではないでしょうか。プログラミングの勉強を始めるにあたり、いずれは取得するとは思っていましたが。。

独自ドメインは実際にはいろいろなサイトで取得できますが、今回はエックスサーバーで独自ドメインが無料で取得できるのでここで取得しましょう。（期間限定キャンペーンのため、要確認）通常は年間700円〜1000円程度かかりますが永年無料だそうです。これはありがたいですね！

事前に取得できるかドメインを調べましょう。決定後、変更できませんのでご注意を。ドメインは『.com』など一般的なものがいいです。見慣れないドメインより、なんとなく信頼されやすいからです。【ムームードメイン】などのサイトでお好きなドメインを事前検索して使用可能かチェックしましょう。エックスサーバー でも調べられますが、調べるだけならドメインに特化したサイトの方が調べやすいからです。
ムームードメイン
お好きなドメインが決まったらエックスサーバー で独自ドメインを取得しましょう。

エックスサーバー で独自ドメインの取得方法

独自ドメインは「Xserverアカウント」からの申し込みになります。エックスサーバー の管理画面の左に【サービスお申し込み】がありますのでここから入ります。

その中のエックスドメインにキャンペーン対象の無料サービスの独自ドメイン取得があります。キャンペーンがない場合は新規申し込みになります。

独自ドメインを使うための設定

エックスサーバーで独自ドメインを用いたWordPressを設定、公開するためには、「独自ドメインを使うための設定」が必要になります。エックスサーバー の管理画面の『サーバーパネル』と呼ばれる管理画面に入り『ドメイン設定』を行います。

「Xserverアカウント」の右下にある「ご契約一覧」のなかにある、「サーバー管理」をクリックします。以上でサーバーパネルにログインできます。

サーバーパネルのトップページに並んでいるメニューのなかから、「ドメイン設定」をクリックし,「ドメイン設定追加」をクリックします。取得したドメイン名を「.com」「.net」などまで入力し、「確認画面へ進む」をクリックします。

WordPressを設置する

引き続きサーバーパネルから、「WordPress簡単インストール」をクリックします。

「ドメイン選択画面」が表示されたら、先ほど追加したドメイン名の右にある「選択する」をクリック。

「WordPressインストール」をクリックします。

「サイトURL」を選択・入力します。
その後、「ブログ名」「ユーザー名」「パスワード」「メールアドレス」を入力し、「確認画面へ進む」をクリックします。

確認画面へ進むと「インストールを行うと、インストール先ディレクトリ内の「index.html」が削除されます。ご注意ください。」と表示されますが無視でOK。

管理画面URLが発行されるのでさっそくログインしてみましょう。WordPressの初期ページが表示されれば、WordPressブログの設置は完了です！

ワードプレスの初期画面。これが表示されれば設置完了！

まずはサーバーをレンタルするところから始まります。プログラミングをはじめる前は無縁だった物を今はレンタルして活用しているなんて、感慨深く感じます。。。知らないことを自分で調べて知識にしていくことは何歳になっても必要。そして今はネットで全て調べられる。これを使わないてはないです。今後、より一層広がるネット社会に向けて必須になる知識、ツールです。この機会にぜひ学んで見ては。

今回レンタルしたサーバー、独自ドメインもキャンペーンで無料（期間制限あり。HPで確認してください）

エックスサーバー

FontAwesomeでアイコンが□(四角)で表示されない場合の解決法

原因１：CSSをヘッダーに読み込めていない

貼り忘れ、うっかり系のミスですね。もしくは貼られているリンクが古い可能性があります。

こちらをどうぞ（v5.0.13）

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.13/css/all.css” integrity=”sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp” crossorigin=”anonymous”>

原因２：’font-family’が設定されていない

これが必要最低限の正しい記述です。意外と見落としやすい３つの項目です。

まずは、font-familyの指定です。

font-familyの指定は、最後に必ずFREEと付けること、そしてフォント自体を””で囲います。

原因３：’font-weight’が設定されていない

次にfont-weightを指定する必要があります。FREE版の場合は、400か900のみしか指定でき内容です。400なのか900なのかは表示したいアイコンによって指定が異なりますので注意が必要です。

原因４：unicodeにバックスラッシュを付けていない

contentにUnicodeを記載して呼び出したいアイコンを指定するのですが、公式サイトからUnicodeをコピペするとバックスラッシュ（\）が付いていません。必ずバックスラッシュ（\）を付けるようにしましょう。

ちなみにMacでのバックスラッシュはoption+¥で打てます。

まとめ

1. ヘッダーにFontAwesomeのCSSの貼り付け
2. font-familyの指定
3. font-weightの指定
4. バックスラッシュのつけ忘れ

以上　皆さんもお気をつけくださいませ。。。

この記事では『ドットインストール』での学習方法を経験談を交えて紹介していきます。

プログラミングの独学はドットインストールから

独学するならば教材が必要です。今はブログやYOUTUBEなど様々なツールがありますが、まずは「ドットインストール」から学びましょう。現役エンジニアの方もほとんどの人がお世話になっています。

ドットインストールとは３分動画でマスターできるプログラミング学習サービスです。入門編は無料、それを体験していいなと思ったら月額1000円でより深堀できる有料版へ進める３分動画コンテンツです。

ドットインストールはこちら

最初にはじめるコンテンツはHTML,CSS

まずはHTMLから

日本語でいう平仮名を学ぶようなものです。これがすべてのベースになります。

動画を見ながら実際に手を動かして同じようにやっていきましょう。

そのためにはエディタが必要です。エディタとはプログラミングを書いていくテキストツールです。別の記事にダウンロード方法がありますので準備しましょう。この記事では無料かつ多くのプログラマーが使っているVisualStudioCode（ビジュアルスタジオコード）、通称VSコードを紹介しています。

入門者必見！おすすめエディタ【VSコード】ダウンロードの記事

最初は無料の初めてのHTMLを学習しましょう。その後は有料版の 基礎文法編　フォーム部品編を学習するのがおすすめです。

有料版は月額1000円程度なのでここは自分への投資として思い切って１ヶ月取り組みましょう。

ねこまる

有料版は30回分あり全て見ると約90分ですが、エディタに打ちながらじっくりやると結構時間がかかります。私は1本の動画で多い時は1時間くらいかけて、あれやこれやと試しながらやってました。ちょっとかけすぎですが。。。しかし手を動かすことは重要です。ここは基礎中の基礎ですので焦らず取り組みましょう。

1つ1つの動画をしっかり理解しながら行くのがベストですが、どうしても理解が難しい場合は次に進むのもアリです。

次に進んで、あとでもう一度見てみると意外とすんなり理解できることもあります。

HTMLを修了したら次はCSSです。

CSSをはじめよう

CSSはHTMLを装飾する言語です。文字の大きさや位置、色などを変えたりすることができます。HTMLよりパターンが増えコンテンツも多くなります。

これも初めてのCSSは無料ですが詳解CSS 基礎文法編 (全33回) 　など有料コンテンツがHTML以上に豊富で有益なのでこれも全部学習しましょう。

ねこまる

私は動画は３分だけでも内容が濃いので何度も見返し、エディタで実際に打ち込んだりしたので１ヶ月ほどかかりました。。。皆さんも焦らずじっくりやってみてください。。

もっと深めたいならProgate（プロゲート）同時進行

ProgateのHTML,CSSメニュー

Progate(プロゲート)では以下のコンテンツがあります。

上記のように一通りこなすと20時間程度かかります。

また道場コースとは中間テストです。ここで学んだ内容の復習ができるようになっています。

 

ねこまる

最初のうちはこの道場コースをPCでやることをおすすめします。なかなか出来ないですがそれを1つ1つ確認しながらこなすことで身につきます。

本から学べる？

本からも学べます。私が購入したものはHTML,CSSはもちろん、より具体的なデザインや実践に近い形での考え方などを記載しています。

全て習得する必要はなく、わからない部分やインデックスで辞書的な使い方もできます。

おすすめはこちらです。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

まとめ

ここまでこなしたら間違いなくHTML,CSSはほぼ問題ないでしょう。

有料サイト２つを使って１ヶ月2000円、普通にやれば２ヶ月4000円で終了できるはず。

そこで次の言語にいくのも良し、いったん解約してHTML,CSSの練習として既存のサイトを模写するのもいいでしょう。

これは模写コーディングと言われる手法で実際のサイトそっくりに自分の力だけで作成していきます。

模写コーディングに関しての記事はこちら↓

【初心者向け】模写コーディングのやり方

まだスタートラインにたったばかりですが人生の大きな一歩を踏み出せます。知ってるのと知らないのでは天と地の差。やるかやらないかの違いはめちゃくちゃ大きい。『明日やろう』を『今日から、今からやろう』に！

独学はやっぱり挫折しそうって方にはこちら

無料体験できるプログラミングスクールがあります。無料ですので一度試すのもありかもです。

プログラミングスクールTechAcademyの無料体験

プログラミングスクールのメリット、デメリットの記事はこちら

悩む人

プログラミングを学びたい人にとって必ず出てくる疑問です。この記事はそんな人に向けての記事になります。

プログラミングスクールのメリット

実際、プログラミングを学ぶ人はほぼ知識0からスタートします。そんな人にとってスクールは着実に身に付けられるようしっかりとしたカリキュラムがあります。

スクールのメリットとして

それぞれ見ていきます。

1、確実に習得できる

独学と違い、実績に基づいたカリキュラムがあります。きちんとした順序で確実に学んで行きます。ほとんどの人は基礎はしっかり習得できるでしょう。

2、習得期間の目安がわかる

学習プログラムによって期間設定されているのでいつまでに習得できるか、目安がつきます。いつまでに習得したいか、いつまでに必要か、期限が限られている場合はありがたいですね。独学の場合は個人のやる気で大きく習得期間は左右されますからね。。

3、先生がいるので挫折しない

一番のポイントですね。独学ではフォローされない人のフォローは大きいです。

絶対的につまづきポイントはいくつも出てくる中で、教えてくれる人がいるのはすごく強みですね。こういったフォローがあって期限内にきちんと習得できるのですね。聞けば5分のところも、一人で調べると何時間もかかるのは独学ではザラです・・・。

4、転職支援もある

副業はもちろん、転職したい方はスクールの方が確実です。一から探すより、スクールで紹介してもらう方が安全で早いですからね。

5、お金を払っているので怠けない

やっぱり安くない買い物です。払った分はしっかり吸収して身に付けたいです！

ただではないので1円も無駄にすることなくスクールを、先生を頼りまくって、全て吸収するつもりで臨むモチベーションになるはずです！

デメリット

スクールにはメリットも多いですが1つだけデメリットもあります。

これにつきます。

スクールはたくさんありますが、コースや学習スタイルによって金額は様々です。

おすすめプログラミングスクール

プログラミングのスクールって検索するとたくさん出てきてどこが良いか迷います。

正直費用面では前述したようにコースや学習スタイル（オンライン、オフライン）で差があります。

ここでは大手含めてスクールを比較します。

１、TechAcademy：オンライン完結でプログラミングを学びたい方
２、テックキャンプ：プログラミング教室でプログラミングを学びたい方
３、DMM　WEBCAMP：オンライン、教室両方で学べる

それぞれ見ていきます。

TechAcademy

厚切りジェイソンがCMやってますね。ここは完全オンラインスタイルです。

TechAcademyのメリットは

それぞれ見ていきます。

価格がお得

完全オンラインスタイルということもあり、料金設定は他社より低い設定になっています。

サイト制作、LP制作などはこなせるレベルです。

無料体験あり

他のスクールでは無料体験はありません。実際に体験できるのは間違いないですね。

これで体験して決めるのもありですね。

TechAcademyの無料体験

転職サポート

全てのコースに転職サポートがついています。現役エンジニアの無料カウンセリングもあり。また学習で身につけたスキルを元に企業やコンサルタントからスカウトメッセージが届く「TechAcademyキャリア」というサービスもあります。受講開始後すぐに無料で利用できるTechAcademy受講生限定の転職サービスです。

TechAcademyの無料体験を申し込む

テックキャンプ

techcampのメリットは

それぞれ見ていきます。

専属ライフコーチが学習を徹底サポート

自分専属のライフコーチが対面でカウンセリングを行い、日々の学習スケジュールのアドバイスや不安の解消を行うので、挫折することがありません。

専属なので、どこが苦手な分野とか自分にあった適切なアドバイスがもらえそうですね。

600時間にも及ぶレッスン

未経験からエンジニアを仕事にできるようになるまでは、通常1000時間は学習が必要です。しかし、TechCampでは最高の学習環境を用意することでそのコンテンツを600時間まで圧縮しました。

これはたのスクールと比較してレッスン時間は多いです。

転職支援

国内最大級の未経験からのエンジニア転職成功実績として打ち出していますのでかなり転職成功事例が多いようです。専属のキャリアアドバイザーがつき面談やセミナーによって受講者のキャリア形成を支援してくれます。

料金

短期集中スタイルコースは平日は教室、土日はオンラインで学習し、わずか10週間でプロのスキルを身につける学習スタイルです。かなり詰め込んでいます。

これはすごく幅広い分野まで学べます。料金は高いですが内容はボリュームがあります。

無料オンライン説明会

スクールの仕組みやイメージがネットだとわかりにくい方は説明会があるそうなので聞いてから考えるのもありです。悩むなら聞いてみて判断しましょう。やるのもやらないのも前進です。悩んで進めないのはもったいないです。

完全無料のオンライン説明会

より具体的なイメージを掴みたい方はこちらでバシバシ質問してみましょう。無料ですが、これを申し込んでも入会しなくても大丈夫です。

無料カウンセリング申込

DMM　WEBCAMP

DMM WEBCAMPのメリットは

それぞれ見ていきます。

未経験者のために開発されたカリキュラム

プログラミング学習未経験が転職まで走り切れるのは、幾度もの改善を経て、未経験者の学習に最適化されたカリキュラムがあるからです。

オンラインカリキュラムのため自宅や移動中にも学習することができます。

現場で活きる実践的な開発経験

コードを書く技術だけではなく、企画から設計、実装まで、開発を行う上で必要な実践的な知識、技術を総合的に習得できるカリキュラムがあります。

専属のキャリアアドバイザーによる転職支援

専属のキャリアアドバイザーが自分でも気づいていない強みを引き出し、キャリアプラン、面接に対する対策を一緒に考えてくれます。また、キャリアアドバイザー仲介のもと、希望とスキルのマッチする企業との面接をセッティングします。紹介できる企業は300社以上！

料金

個人のスキルも必要ですが、チームで仕事をする環境を作っているのが魅力的ですね。

無料カウンセリング

無料のカウンセリングがあります。そんな感じなのか聞いてみるとよりリアルにイメージできます。

プログラミング未経験者でも安心のサポート体制があり、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職、就職を保証していただいていることで安心』という声を多くいただいています。

どこよりも高い「継続率」「修了率」「転職率」で
・実践形式
・多くのサポート
によって、受講者満足度も90%以上です。

「DMM WEBCAMP COMMIT」は転職、就職を本気で考えている方向けのプログラミングスクールです。
転職、就職を保証しているため、未経験からIT業界へ転職、就職を求めている方へおすすめです！

 DMM WEBCAMP無料カウンセリングはこちら

記事で紹介したプログラミングスクールリスト

TechAcademy　　オンライン完結、　無料体験あり

テックキャンプ　　無料オンライン説明会、無料カウンセリングあり

DMM WEBCAMP COMMIT　通学、オンライン両方可　無料カウンセリングあり

どのスクールも安くはないですが、実際にスキルを身につけることは今後の人生の大きな武器になります。

自分自身の大きな付加価値として自信が持てます。

この先の未来を考えれば安い投資ですね。悩んでるなら行動して、次に進んだ方が絶対に得です。

悩む人

ある程度学習を終えた方は、より実戦に近い「模写コーディング」を必ず行った方が良いです。しかし、教科書があるわけでもないので、実際、どういう手順で始めるべきかわからない人は多いですよね。

この記事はそんな方に向けた記事です。

模写コーディングのポイント

まず、模写コーディングですが今までの学習のやり方と異なります。今までは何かしらの教材で順序が決められ、指示をされながら進めてきたと思います。しかし、模写コーディングはサイトを丸々コピー製作します。やり方はあなたの自由です。これをこなして行くと今までの学習以上のスピードで知識や実力がついてきます。実戦形式ですので、わからなかったら調べるの繰り返し、知識がどんどんついていきます。

しかし、全くの最初はいきなりそういうお題を渡されても、まずはh1タグから・・・とかなり戸惑うはずです。

模写コーディングのやり方は人それぞれですので参考にしてもらえればと思います。

事前準備として拡張機能を取り入れる

悩む人

拡張機能ってなんやろか・・

簡単に言うと「Chromeの機能を増やしたり強化したりする専用の追加プログラム」と表現できるでしょう。しかも、ほとんどが無償で提供されていて、ボタンひとつでGoogle Chromeに追加することができます。いずれも後述の「Chromeウェブストア」から容易にインストールできるものです。

模写コーディングする際に文字の大きさや各セクションのwidth,heightなどが簡単にわかるGoogleChromeの拡張機能がありますので早速インストールしましょう。もちろん無料です。

おすすめ拡張機能

まず、width,heightなどが計測できる拡張機能『Page Ruler Redux』です。

Page Ruler Reduxをインストール

次に模写したいサイトを縦長にスクショできる『Full page simple screen capture』です。

Full page simple screen captureをインストール

使用されているフォントの種類、サイズがわかる『WhatFont』

WhatFont

模写したいサイトの画像を一括ダウンロードできます。『Image　Downloder』

Image Downloader

カラーを抽出できる『Color Zilla』

Color Zillaをインストール

この5つがあれば随分と模写サイトに近づけられます。

私はこの拡張機能を知らず、模写サイトと自分のページを何度も行ったり来たりして大きさを整えていました・・・。ぜひ活用してみてください。

インストール方法

まずは模写するそれぞれのコンテンツのwidthやheightなど計測できるツール『Page Ruler Redux』をインストールします。

インストールはこちらからでも行けます↓

Chromeウェブストア  

Chromeウェブストアのページから検索します。

1、左上の検索で『Page Ruler Redux』を検索

2、「CHROME に追加」をクリック

3、新しいウィンドウが出てきますので追加をクリックしましょう。

たったこれだけで使えます！

使いやすいようにツールバーにピン止めして置くと便利です。

エディターをインストール

すでにインストールしている方がほとんどだと思いますが一応書いておきます。

実際にコードを書いていくエディターをインストールします。エディターといってもいろんな種類がありますが大体みなさんは《Visual　Studio　Code》略してVSコードを使っていますのでこちらがいいでしょう。ダウンロードなどの解説は下記の記事からどうぞ。

●VSコードについての記事はこちら

模写コーディングする

次のステップには模写コーディングが必須です。模写コーディングとは既存のサイトを完全コピーしながら実践していくものです。より実戦に近く、今まで学んだこと以外の知識も必要になる部分もあるでしょう。その場合がググりましょう。知識に不安でドットインストールやProgateを何回も繰り返さなくてもOKです。くりかえしても２回までにしましょう。よくコードを暗記しようとする人がいます。しかし、無理に暗記しなくともOKです。やっていくうちに頭に入ります。わからなければググればいいのです。

模写の始め方

模写したいサイトをスクショする

先ほどインストールしたFull page simple screen captureで模写サイトをスクショしましょう。

この画像を見ながら模写していきます。

また、スクショしなくても実際のサイトをチェックしながらでもOKですが、模写サイトのボタンや画像を押してしまったりするのが面倒な人はスクショがいいでしょう。

画像をダウンロードする

ImageDownloderで模写サイトの画像を一括DLしましょう。その際、フォルダにまとめます。

この作業でDLできない画像は背景設定の画像です。その画像は検証ツールから入り、background-imageに設定されている画像をクリックし、別ウインドウを開きましょう。そうすると写真としてデータをコピーできますのでフォルダへ保存しましょう。

テキストからコピペ、タグ付する

次に模写したいサイトのテキストをコピーしてエディタに貼り付けます。macならコマンド＋A、Windowsならコントロール＋Aで全選択できます。

そうすると、文字だけの状態になります。

そこから見出しタグ、pタグなどを付けていきましょう。

フォントは無視してOKです。拡張機能のWhatFontでサイズなどは意識、リンクも忘れずaタグなどで表現しましょう。

CSSで装飾

カラーは模写なので適当でいいのですが、実戦ではきちんと指示しないといけないので、拡張機能を使って色を揃えましょう。

また、文字の配置、画像の大きななども拡張機能を使ってある程度合わせてみましょう。

アニメーション はサイトで確認

スクショではJQueryなどの動きがわからないので実際のサイトをチェックし、実装しましょう。ここではまだ学習していない物がたくさん出てきます。例えば「CSS　アニメーション 　フワッと」みたいな条件で検索してみましょう。ほとんどのサイトで簡単なアニメーションは実装されていますので、ここもきちんと抑えましょう。

レスポンシブ対応

現在のサイトでは必須です。練習のつもりでレスポンシブ対応させましょう。

実装後は必ず検証ツールか、自分のケータイで動作を確認してきちんとレスポンシブできているかかくにんしましょう。

おすすめ模写サイト５選

難易度が低い方から書いていきます。

簡単にポイントを解説します。

 1  WRITE

シンプルですがwidthの設定、プロフィールの画像など小技が必要です。

2　 haniwaman

ハニワマンさん作成のベーシックなコーポレートサイト。NAVメニューやサイドバーの設置、微妙なグラデーションカラーの使い方がポイントです。

3　AIR　BNB

ウィンドウの位置やスクロールしても動かない固定バーがポイント。レスポンシブ対応までできるといいですね。

4　JIN　demo

タイル型の配置と小技アニメーション などがポイント。リロードされるときにフワッと表示されるところまでできると◎です。

5 ISARA

模写サイトの登竜門ですね。これができれば一人前？アコーディオンなどのテクニックがポイント。

こんな感じでしょうか。TOPへもどるボタンや簡単なアニメーション、などドットインストールのアニメーションを勉強したり、ProgateのJQueryをやってみたりと知識を増やさないといけないでしょう。私もそうでした。

実際に躓いたら調べる、理解する、クリア、また躓く、調べるの繰り返しです。そうやって知識が増えていき、同じところで躓いても「前やったことあるな」となってきて徐々にできることが増えていきます。

最後までできれば大体のサイトは作れるはずです。

私はこの程度を終えた段階で副業サイトへチャレンジしました。

ちなみにサーバーなどは一応レンタルして模写サイトをポートレートとしてUPできるようにしました。副業で実績をアピールする際に、自分のURLがあると楽ですし、なんとなくある方がちゃんとしてるような気がします。（個人の感想です）

サーバーもいずれ触るべき道です。このタイミングでぜひトライしてみては。

まとめ

挫折は日常茶飯事

模写の中でわからない部分やテクニックなどが絶対出てきます。それをググって解決することが成長への近道です。私も１日中ぐぐってもわからず挫折しそうでしたが、ワードを変えて検索などいろいろ試すことでなんとか解決できました。みんながみんな最初からできません。試行錯誤の繰り返しで取得していくのです。実体験です。その忍耐力、必ず報われます！

悩む人

プログラミングを始めたい。

スクールはコスト的に難しいなぁ。

独学してる人多いけど、実際どうやって、どこまでできるんやろか？

そんな疑問に対して、私が独学し、その成果でできることをお伝えします。

この記事を読むと

がわかります。

結論：独学で副業レベルまで達成可能

プログラミングの勉強を始めて４ヶ月目で副業レベルまで到達できました。

近年様々なツールで、しかも無料でプログラミングが学べます。WEBサイト、youtubeなどでかなり細かいところまで学べます。しかし、独学とは疑問点があっても自分でググって調べるなど自己解決しなければならず、『絶対習得してやる！』という強い心を持ってください。独学の挫折は自己解決ができないから生まれるのです。ググれば必ず解決できます。それを前提に臨んでいきましょう。最初はみんなそうやってスタートしているのです。知識0ベースの私は現にぐぐりまくりました。

これからはじめる人にとって全くの知識０からどこまでできるようになるか目安としてもらえれば幸いです。

最初にやるべきこと

勉強をはじめるにあたり、まず独学かスクールかの２択があるかと思います。私は在宅ワーク中の空き時間や通勤時間が丸々浮いた分でコツコツ独学でやることにしました。もちろんスクールの費用も安くはないので独学一択です。

※０円のプログラミングスクールという近道
最近はプログラミングスクールも増えており、最初の基礎ベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは無料体験があるので、これを使ってプログラミングの基礎を学ぶのもありですね。
 » TechAcademyの無料体験はこちら

まずは最初に学ぶべきことにはHTML／CSSがあります。すべてのWebサイトのベースとなる知識でこれを知っていないとなにも始まりません。

とはいえ、HTML／CSSの基本を学ぶことはとても簡単です。今は無料である程度学べる環境が整っています。

ドットインストールを使おう

プログラミングを始める方にとっては絶対的な信頼の、とても有名なドットインストールを使います。

ドットインストールとはプログラミングを動画でわかりやすく解説しているサイトで、私もかなりお世話になっています。無料で基礎的なHTML,CSSが学べてしまいます。

» HTML入門 (全14回) – プログラミングならドットインストール

» CSS入門 (全15回) – プログラミングならドットインストール

有料コンテンツもあり月額１０００円程度なので私は有料プランでお世話になりました。有料コンテンツは無料の内容をさらに深堀したものになっています。スクールに比べたら安いので即入会です。

ドットインストールの始め方についての記事はこちら↓

【独学】ドットインストールの始め方

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
この本１冊でWEBサイトの仕組みや構成、制作までの道のりを最低限の知識でこなせるような内容です。より実戦に近い情報があるのでWEBだけでは補えない部分もこれでフォローしました。

PROGATE（プロゲート）

プロゲートも独学ツールとして必ずあげられるサイトです。これはゲーム感覚で進められるアプリ、WEBサイトです。携帯アプリからの勉強だと単語の穴埋め的な作業で進めていくので簡単に進めていけます。WEB上での勉強方法は実際に単語を打ち込んで行きますのでより実戦にちかい勉強方法です。これも有料プランが月額１０００円程度なので私は入会しました。ドットストールとは違った形でのアプローチなのでHTML,CSSの理解がより深まるはずです。

ねこまる

私はドットインストールとプロゲートを同時に進行していきました。あとはどうしても理解ができない部分はググって見ていろんな角度からの説明で理解しました。HTML CSSに関してはこれで大体内容は掴めるようになりました。

ここまで来れば簡単なホームページは作れるようになってます。あとは小技としてJQueryを使用して動きのあるサイトにしていきます。

JQueryについて

jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。CSSでは表現できないアニメーションなどの動きを実装できるプログラムです。

これもProgateやドットインストールで学習可能ですが有料プランです。またググってみても多くのサイトで説明されてますがベースを把握していないとやや理解に時間がかかるかもです。

ねこまる

私はまずProgateで基礎を学んだ後、足りない部分はググって調べていきました。

模写サイトコーディングでまとめ

ここまできたら実際のサイトを真似して作ってみます。これを模写コーディングといいます。いろんなレベルがあるのですが、これができたら大体のもは制作できるレベルのサイトまで模写できるようになりました。

模写サイト実績１はこちら

模写サイト実績２はこちら

平均学習時間は？

悩む人

勉強する時間がないよ

いつすればいいのか・・・

仕事をしながら勉強で何かを新しく習得することはなかなかできることではありません。だからこそ、取り組む人が少なく、取り組んだ人こそが副業などの選択肢が増え、生活を豊かにできるのです。

時間はいかに作るかがポイント

勉強する人としない人の差は0か100の差です。1日10分でもいいので取り組むことが大事です。

ねこまる

在宅ワークの日は通勤時間が丸儲け！往復2時間程度の時間を有効に使えたよ。

やはり通勤時間は有効です。ドットインストールやProgateなどはスマホでも勉強可能です。他の人が映画や漫画を読んでいる間に勉強してさを付けましょう！

また就寝前は余裕があるときにしましょう。眠い時はあまり頭に入らないので、コンディションによって決めましょう。

個人的には早起きしてからの勉強がおすすめです。やはりフレッシュな状態での取り組みは一番効果的です。もし可能ならば1時間でも30分でも早起きして取り組むことで時間が作れますのでぜひ一度試してみてください。

早起きかぁ

厳しいなぁ

そういう人はほとんどですが、強い気持ちがないとそもそも独学は無理です。

個人によりますが4ヶ月での勉強時間は平均的に1日1〜2時間、月に50時間ほどは取り組むことが1つ指標です。もちろん、それより早く習得する人もいれば、もう少し時間がかかる場合もあります。

結果的に、模写サイトを作れれば問題ないので、2ヶ月目でも作れるスキルがあればOKです！

まとめ

独学での勉強は強い気持ちが大事です。私は4ヶ月でおおよそのLP制作の知識は得る事ができましたが、勉強できる環境は様々です。期間はあくまで目安として、本質はしっかり習得することです。

自分でサイトを作成できることがゴールならば、それに向かって確実に焦らずに進めていきましょう。

次のステップは

次のステップは案件獲得です。これがまたなかなか取れずに苦戦中です。。。知識０の私でもサイト１つ作れる自信がつきました。皆さんも必ずできるようになりますのでぜひ頑張ってください。

関連【独学プログラマーが副業】すべきタイミング

※０円のプログラミングスクールという近道
前述しましたが最近はプログラミングスクールも増えており、最初の基礎ベースを身につけるならTechAcademyの方が早いかもです。TechAcademyは無料体験があるので、これを使ってプログラミングの基礎を学ぶのもありですね。
 » TechAcademyの無料体験はこちら