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

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

ブログで集客する方法　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の無料体験

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

悩む人

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

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

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

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

しかし、全くの最初はいきなりそういうお題を渡されても、まずは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の無料体験はこちら