見出し画像

学習半年で月20万達成したWEB制作未経験者による案件受注までのロードマップ

※本noteはすべて無料で読めます。
有料部分では細々まとめたスプレッドシートを共有しております。

「特典を参考にして自分の活動に活かしたい」
「更新情報を即座に確認したい」
「これだけのボリュームをありがとう(感謝)」

という方のご購入お待ちしております。(お願いします🙇‍♂️)


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


🐮更新情報🐮
   7/1:1にEmmet練習ツール・スニペット生成サイトについて追記しました
6/30:8に「サーバーについて」の情報を追記しました


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


こんにちはたんしお(@tanhshiokoki73)です🐮

僕は2019年10月中頃に公務員を脱するべくWEB制作の勉強を始め、
公務員を退職後すぐにお仕事を獲得することに成功し、フリーランスとして独立いたしました。

ありがたいことにWEB制作に関して質問をいただくことが増え

「どのくらい学習したらお仕事取れますか」

といった類の質問をよくいただきました。

確かに独学などで技術をつけた人にとっては、仕事ができる技術の明確な数値化などがないので、
どこまでできるようになったら仕事としてやっていけるのかの判断で不安に感じると思います。


実は僕自身非効率的でかなり遠回りな学習工程でここまでやってきました。

『”最速で”WEB制作で案件を獲得する』をコンセプトにしていたら
もっと効率よくこう勉強していただろうな・・・
と質問に回答しながらしばしば考えたりしました。


そこで本noteは
僕自身の体験を基に

生まれ変わってもう一度WEB制作を勉強する時に
効率よく学習を進めて最短で稼ぐためのロードマップ

という観点で作成いたしました。

もちろんこれは学習ロードマップという名の僕だったらこうするという持論
であるため誰もがこの通り進めれば成功することを保証したものではありません。
なので本noteでは全ての道筋を無料で読むことができます。

自分が途中でWEB制作をやめるかもしれないのに数万円もするロードマップや学習教材に手を出すのはかなり勇気がいると思います。

まずは僕のnoteを参考にどれだけ学習すれば稼げるようになるかの基準にして欲しいです。

そして学習の深度や道筋を知り、
「たんしおのように稼ぐにはこうしたら良いのかー」
という参考にしていただければ幸いです🐮


僕自身学習を始めるまではWEB関係はど素人でした。
それどころかもはやIT業界とはなんたるかすら知りませんでした。

こんな僕でも必死に続けてできました。
だから大丈夫。
あなたにもできる。
このnoteがあなたの踏み出す一歩に役立てるよう
頑張って書きました。



1 HTML&CSSを勉強しよう


まずはWEBサイトの表示の基本となるHTMLとCSSの学習から入ります。

僕は学習にProgateドットインストールを利用しました。
どちらも有名な学習コンテンツで今後の単元でも使用しますので有料会員登録は惜しまずしてしまいましょう!!

なおProgateとドットインストールはぶっちゃけ両方やる必要はないです。
僕が当時の僕に声をかけるなら「Progateだけでもいいぞ」といいます笑
ただドットインストールの「学習環境を整えよう」と「フレックスボックス編」だけはやってもいいかもですね🙆‍♀
あとは苦手だと感じる単元をかいつまんでやりましょう!

✅ 僕の学習経緯参考です
・Progate:約5日間
HTML&CSS初級編 → 中級編 → 初級編道場 → 上級編 → 中級編道場 → 上級編道場

・ドットインストール:約5日間
学習環境を整えよう → 初めてのHTML → 初めてのCSS → HTML基礎文法編 → フレックスボックス編


「学習環境を整えよう」をやっていただければ問題はないのですが
自分のPCで開発を行うにはエディタが必要になります。

僕はVisual Studio Code(通称VSCode)を使用しています。おすすめ🐮
特に理由がなければ脳死でVSCodeをインストールすることをおすすめします。(VSCodeは2で記述します、Sassの使用でかなり強みを発揮すると思っております。)

なお、便利な拡張機能がたくさんあります。
拡張機能参考サイトも乗っけておきますので自分の使いやすいエディタに作り上げましょう🙆‍♀️

ついでにChromeの拡張機能も追加しちゃいましょうか。
(WEBサイト制作には基本GoogleChromeをご利用ください!)


----------------🐮気をつけること🐮----------------


※暗記しようとしてはいけません※

重要なことです。
おそらく必ず初めて直面したCSSを暗記しようとします。
ただ、それはしてはいけません

理由はCSSは恐ろしく種類がたくさんあり全てを覚えるのは不可能なんじゃないかと思えるからです。

そもそも僕たちの目的はWEBサイトを作り、その技術の対価にお金をもらうことなので、頻出でないCSSプロパティを覚えようと時間を割くのは無駄です

初めのうちは何が頻出かなんてわからないと思いますが、何度も出てきたらいやでも覚えますので
「文字のサイズを変えれた気がする」
「要素を横並びにするCSSがあるんだ」
「どこかの要素を基準に位置を動かせるCSSがあったはず」
くらいの記憶でいいでしょう。


※floatで悩みすぎない※

初学者が苦しむ代表例がfloatです。Progateでも出てきますね。
おそらくわけ分からなくてProgateでも躓きます。

ざっくりfloatのできることを説明すると
通常縦に並んでいくブロック要素を横並びにさせたりできちゃうよって感じですが
ただ、ぶっちゃけfloatは実案件でもほとんど使いません

基本はフレックスボックスによって解決しますのでこっちを力入れて学習しましょう🙆‍♀️

フレックスボックスの学習コンテンツもProgateドットインストールにありますのでそちらを使いましょう!

また、どこかのタイミングで是非読んでおいてほしい記事もあるのでこちらもどうぞ🙆‍♀️


----------------🐮おまけ🐮----------------
※ここから下は次のSass・JavaScript等の学習と同時並行でもいいかもです


🖥ディベロッパーツールを学ぼう🖥

学ぼうは大袈裟ですね笑
ディベロッパーツールは、WEBサイトのHTMLやCSSを覗き見できちゃうよみたいな超絶便利毎日使用するツールです。

Macは「シフト+コマンド+C」
Windowsは「F12キー」で起動できます。

これは正直使いながら慣れるしかないですが、毎日使ってればなんとなく理解できてきます。
また、どんなに弄っても更新をすれば元に戻るので、弄ってるそのサイトが壊れちゃうなんて心配なく好きなだけ弄り倒せます。

念のため参考サイトです!


🖥Bootstrapを学ぼう🖥

ここはおまけといたします。
Bootstrapは多くの人が推奨している「高速でWEBサイトのUIを完成させる便利なCSSフレームワーク」といった感じです。わかりにくいですね?

簡単に説明すると
特定のクラス名やID名を使用し、指定通りの記述をすると簡単にスマホ対応にできたり、難しいナビゲーションを作れたり、ボタンが作れる
といった感じです。

え?便利そうだから絶対やるべきじゃん!って?
ここからはあくまでも僕の持論ですが、Bootstrapは高速で十分な見た目を作れますが自由度が低いため
バッチリ作られたデザインをBootstrapで再現するのはほぼ不可能じゃないかと思います。

将来的にデザイナーさんが作ったデザインを再現する仕事をすることになった時、Bootstrapでの開発しかできなかったら結構迷惑なんじゃないかと。

ですので個人的にサイトを作る際に取り入れるのならいいかもしれませんが
そこまで力を入れる必要はないかなと。
あとはECサイトやアプリなどデザインより機能面で工数割きたい時などはいいかもしれないですね。

やるのであればドットインストールに講座がありますのでこちらで🙆‍♀️

なお、Bootstrapはグリットレイアウトというシステムを理解
あとはチートシートで使いたい機能をコピペする感じだと思うので
学習するとしてもそこまで時間を割く必要もないです!


🖥Emmetを学ぼう🖥

Emmetとはコードの省略記法ことです。

WEB制作のお仕事は出来上がった成果物に対して報酬が出るので、時給という概念では捉えづらいです。

1万円の成果物に対し
1時間で仕上げたなら時給1万円
10時間で仕上げたなら時給千円

作業時間が長くても報酬には比例しませんので、もちろん作業時間を短縮できれば単価向上に繋がります。

タイピングそのものの速度を向上させることも大切ですが
それ以上にEmmetを使いこなすことは重要なんじゃないかと思います🙆‍♀️

Emmetの練習をできるツールを作成された方がいるのでそちらも載せておきますね!


ついでにスニペットという
よく使うコードを登録しておいて簡単に呼び出せるシステムもあり、そちらも併用するとさらに早くなります🙆‍♀️

上記リンクをご覧いただいて、登録方法が少し特殊だなって感じるかもしれません。自分で手打ちして作るにはめんどくささがあるんですよね。

なんと上記Emmetのツールを作成された方が、このスニペットのコードを自動生成してくれるツールも作成してくださってるんですよね・・・
すごいです。

ご興味お持ちの方は是非使ってみてください💁‍♀️


----------------🐮必ずやること🐮----------------


🖥同じサイトを自力で作成🖥

Progateで作ったものとまったく同じものでいいので
自分のエディタで自力でサイトを作りましょう!
何度教材を見返してもいいので、自分で作るというのを実現してください!

なおここで作成したサイトは後々機能を追加していくので是非残しておきましょう💁‍♀️


🖥サイト模写🖥

次はサイト模写をしましょう。
模写とは、WEBサイトを見て、全く同じ見た目のものを自分で作る。みたいな感じです。

おそらく最初は難しくて手が止まってしまうでしょう。
そんな時はディベロッパーツールを開いてコードを見てしまって構いません。
悩みすぎても時間の無駄ですし、おそらく誰もがこのフェーズでつまづきます!
30分くらい悩んでわからなかったら迷わず答えを見ましょう!


僕はProgateを終えた後以下を行いました💁‍♀️
(これは答えコードがついているのでおすすめです)

Progate終了後にはちょうどいいレベルなのでこちらもおすすめしておきます!

模写サイトをレベル別に分けてくれたサイトがあったのでこちらも載せておきます!

なお模写をより実践的にやる方法5の「コーディング案件を受注するために」のフェーズで紹介してますのでそっちも是非読んでください!!



2 Sassを使いこなそう


続いて、Sassというものを使えるようにしましょう!

大概の場合においてここでJavaScriptの学習に入るかもしれないですが
僕は今回あえてSassを先に入れます。

まずSassとは何かってところですが下記記事を参照ください。

簡単にまとめるとCSSを書きやすく・管理しやすく・わかりやすくしてくれるものみたいな感じです!

CSSのstylesheetが1000行を超えてしまいどこに何が書いてあるかわからなくなった・・・

そんなことがよくあるかと思いますが
そういう悩みを解決できる優れものです!

そんなにすごいなら採用しよう!
となりますがここで問題が。

上記リンクをご覧になった方は気づいたかもしれませんが
SassはCSSに変換するためにコンパイルというものを行わなければならず、そのための環境を整える必要があり若干敷居が高いです。

しかしここでVSCodeを採用した人には嬉しいお知らせが。

VSCodeにはSassを簡単に導入できるEasy Sassというプラグインがあり、それを利用するとコマンド操作などほとんど要らず簡単にSassを利用できます!!
(もしかしたら他のエディタにもあるのかもしれませんが)

またおぼろげな記憶ですが、上記サイトを参考にSass導入を図りましたがうまくいかず、こちらも参考にしたような記憶があります。

なお僕が上記方法でSassを導入したとのこともあり
ここではそれ以外での導入方法については言及しないでおきます・・・
(gulpやwebpackを用いるなどとよく聞きますが、すみません。いつか更新するかもしれません。)

Sassの学習もProgateでカバーできます!(強いですねーProgate)
こちらも有料会員でないと学習しきれないので是非有料のうちに全工程学習しましょう🙆‍♀️


------------🐮覚えておきたい使い方🐮------------


Sassで個人的に重要と感じる使い方は以下の4つ。

✅ 覚えておきたい機能
・ファイル分割
・変数
・mixin
・ネスト(入れ子構造)


■ ファイル分割

適切なファイル分割を行うことでどこになんのスタイルが書いてあるかをわかりやすくでき、修正等をしやすくします

僕は大体下記サイトを参考に「setting」「mixin」「base」「module」「page」にファイルわけをします。


変数

変更可能性のある数値や値を変数で管理し、後の大きな変更に対応できるようにします
(これらは上記で言うsettingsで管理してます。)

例)
✔︎作成したサイトのメインカラーを突然変更する必要が生じた。
✔︎各セクションのフォントを突然変更することになった。
✔︎一般的なデバイスサイズが変わりブレイクポイントを変える必要が生じた。

こういった事態に陥ったときに1000行を超えるCSSの中から必要な要素を探し出して一つ一つ変更していく面倒くささを考えてください・・・
変数で管理していたら、settings内のひとつのみ変更すれば修正作業が終了します🙆‍♀️

僕がよく変数で管理するのは「breakpoint」「color」「fontfamily」「innersize」この辺ですかね!


mixin

引数に応じて値を可変できる要素を定義して、使いまわせるようにします。(説明が難しい)
同じスタイルを使いまわせるって感じです。

@mixin btn($color1: #fff, $color2: #000){
 width: 250px;
 height: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: $color1;
 border: 1px solid $color1;
 background-color: $color2;
}

.btn1{
 @include btn();
}

.btn2{
 @include btn(#000, #fff);
}

スクリーンショット 2020-06-29 17.58.46

mixinに関しては「引数」や「戻り値」の概念が必要になるのでJavaScript学習後にしっかり使い方を抑えてもいいかもしれません🙆‍♀️


ネスト

クラス名を&で接続するなどして、CSSの記述を簡略化します。

例えば以下のようなHTMLに

<div class="tanshio">
  <div class="tanshio_container">
    <h2 class="tanshio_container_title">Hello World</h2>
    <p class="tanshio_container_text">たんしおをこれからもよろしくね</p>
  </div>
</div>

以下のようなスタイルの当て方ができるのです!

.tanshio{
  background-color: #fff;
  &_container{
    text-aline: center;
    &_title{
      font-size: 18px;
    }
    &_text{
      color: red;
    }
  }
}

少し言葉ではわかりにくいのですが上のように
どんどん{}の中に{}が重なっていくことを入れ子構造と言います。


Sassは本当にめちゃくちゃ重要な機能なので1のセクションの模写やオリジナルサイト作成時に利用して使いこなせるようにしておきましょう!



3 JavaScriptの基礎を勉強しよう


さて、次にJavaScriptという言語の学習をしましょう。

しかしあくまでも基礎のみで問題ないと思います。

JavaScriptはできることがとても多くしっかり理解しようと学習するとかなり時間がかかります。
ただし、当noteの対象者はWEB制作のスキルを素早く身に付けそれを活かしてお仕事をすることなはずです。
極力必要なところのみかいつまんでいきましょう。

じゃあ一体どれくらいの理解度を得ればいいか

正直ここはかなり意見が割れる気がしますが
個人的にここの範囲理解してるとこのあと楽になるかな
と感じるものを置いておきます。

✅ JS覚えておきたい内容
・基本的な記述方法を知る
・変数の仕組みを知る
・if文・while文・foreach文を使えるようになる
・関数を使えるようになる
・イベント処理を覚える

上記を抑えられる学習ツールはProgateでいうとJavaScriptⅠ〜ⅢでOKです!


----------------🐮心構え🐮----------------


※概念を勉強して欲しい※

Progateでは基本的な構文の書き方や使い方を学ぶ単元が多いため
おそらくこれまでの学習と異なり「なんのためにやってるの?」「これをやってなんになるの?」といった疑問が浮かびやすいと思います。

console.log(3 + 4);

上記のようなコードを書いて計算させて結局WEBサイトにどんな影響を及ぼしてくれるの?
というのは僕も初めの頃ずっと思っており学習に躓いていた原因でした。

「あれ、JavaScriptってWEBサイト上の見た目に変化や動きをもたらしてリッチなやつにしてくれるんじゃないの?」

そんな風に思っていたため、計算だの条件分岐だのコンソールだの勉強してもどう活きてくるかわかりにくかったんですよね。

結局のところ
WEBサイト上の見た目に動きをもたらす
というのは、JavaScriptでできる数多くの機能のうちのひとつでしかないんですよね。
しかしこれらの「基礎」いわゆるJavaScriptのできることの「概念」的な部分を抑えていないと、僕らがやりたいことを実現できないためなかなか学習が難しいです。

丸投げ状態で申し訳ないのですが、JavaScriptの学習方法については上記リンクを参考にすると良いかもしれません。

同じ方のnoteですがこちらもとても参考になるかと思います。

個人的に思うのは、基本的にWEBサイトの見た目上に変化をもたらしてくれる部分はイベント処理の学習フェーズです。

それ以外の部分の役割は、ブラウザやページで処理を変更する、データの量が変わっても変わらず処理を続けるためのものなどいわゆるサーバーサイド寄りの機能だなと感じるので、WEB制作をやる上ではまずはイベント処理の部分は何をしているのか理解できるようになりましょう!



4 jQueryを勉強しよう


WEB制作においてはこれが大事です。
jQueryとはJavaScriptのWEB制作でよく使うイベントを簡単に記述できるようにしたものです。
つまりjQueryを使えば、長ったらしいJavaScriptをより簡潔に表記できるわけです!(表現が粗雑ですみません。。。)

また、jQueryは世界のWEBサイトの35%以上を占めていると言われているWordPressに標準で備わっているため、WEB制作の領域ではまだまだ必須かと思います!

jQueryの使い方は超簡単で
①jQueryの公式などへ行き、必要ファイルをダウンロードもしくはCDNをコピー

②HTMLファイルのbodyタグのとじタグの直前に読み込ませる

<body>
  .
  .
  .
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- ここがjQueryを読み込んでる部分だよ -->
</body>

③jQueryのイベントを記述するファイルを作成しイベントを記述する

<body>
  .
  .
  .
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- ここがjQueryを読み込んでる部分だよ -->
  <script src="test.js"></script> <!-- test.jsというファイルを読み込んでるよ -->
</body>

$(function(){
  $(window).on('load', function(){
    .......
  });
})

以上です。


jQueryの学習もProgateで可能です!(本当につよいProgate)
上級編ではよく使うページ内スクロールアニメーションも取り扱うので是非全工程学習しましょう!
また、僕はドットインストールでも勉強しました。
こちらも自分の理解度に応じてやっておいてもいいでしょう🙆‍♀️

ちなみによくおすすめとして見かける書籍を載せておきます!

✅ jQuery使い方まとめ
①jQueryをダウンロード
②jQuery本体を読み込ませる
③イベントのjsファイルを作成し読み込ませる


----------------🐮必ずやること🐮----------------


🖥作ったサイトに機能を追加しよう🖥

さて1の単元でやっていたサイト作成模写はどれだけ進んでますでしょうか。

完成していても完成していなくても大丈夫です。
ここに好きなようにjQueryを追記して動きを付けましょう!

jQueryのメソッドなどはリファレンスを参考にみてもらえればいいかと思います!(ググってもいろんな実装方法が出てきます。)
日本語リファレンス載せておきます🙆‍♀️


----------------🐮よく使うやつら🐮----------------


あくまでも主観ですがよく出てくるサイト上の動きなどを参考までにまとめておきます。
この辺は実装できるといいかもです!

■ スライダー

画像1

■ アコーディオン

画像2

■ ハンバーガーメニュー

画像3

■ スムーススクロール

画像4

■ スクロールで登場

画像5

ここら辺はプラグインによって可能なものもあるので特典に書いておきます💁‍♀️
(僕はスライダーはswiperというプラグインを使いますがそれ以外は自力実装が多いです)



5 コーディング案件を受注するために


ここまでで学習項目としてはコーディングのお仕事は可能です。

よく「どれくらい勉強したら案件やっていいですか」の質問をいただきますが、コーディングであればこれくらいで受注できます。
(あくまでも可能なレベルというだけで、作業効率アップや可読性の高いコードを書くなどのトレーニングやお仕事受注するための営業術などは別途必要になりますが)

しかし実案件では、
これまでやってきたようなすでに完成しているサイトをみながらコーディングしていくなんてことはありません

基本はデザインカンプという状態で受け取って
デザイナーさんの作ったデザイン通りにルールに従って作成していく必要があります。

ということは必要最低限のデザインツールの使い方や、デザインカンプからのコーディング方法を学ぶ必要があります。

人様のデータですが参考になったので載せておきますが
このように制作会社等ではデザインはXDPhotoshopで作成することが多いようですね。
ということはXDPhotoshopの使用方法は最低限抑えておきたいですね!

なおXDは基本無料で使えますがPhotoshopは有料です。
コーディングでお金を稼ぎたかったら是非この機会にライセンスとっちゃいましょう!


----------🐮デザインカンプ抑えておくこと🐮----------


基本はこの3つのやり方を抑えておきましょう!

✅ 抑えるべき操作
1.画像の書き出し
2.文字情報の取得
3.余白や要素のサイズ取得

また上記とは別に案件ごとにコーディングルールがあるかと思いますのでそこの確認は忘れずに。



--------------🐮実践的な模写練習方法🐮--------------


個人的に模写はとてもいい練習にはなるけど、最初に述べたように実践的ではないんですね。

ですので、どうせ模写するならデザインカンプの状態にしてコーディングした方がより実践的で建設的な時間の使い方だと思うわけです。

で、それを可能にするFigmaというツールがございまして💁‍♀️

はっきり言ってめちゃくちゃ便利です。

これでデザインカンプから余白等の情報を読み取り、正確にコーディングする練習になるかと思いますので是非取り組んでみてください!!


\営業方法については別のnoteで詳しく書きます/



6 PHPの基礎を勉強しよう


はい。また基礎ですね。
理由はJavaScriptの時と同じです。

またWordPressの勉強のためにPHPを勉強するとかであったらなおのこと基礎の基礎で問題ないです。

WordPressは独自関数というものがあり、PHPで動いてるとはいえ別物な気がします...

ぶっちゃけWordPressやりたくてPHP学習して挫折しそうな人
ぶっ飛ばしていきなりWordPress先に学習しちゃって良いんじゃないかと思ってます😇

WEB制作でPHPを学習するメリットは以下の2つかと。

✅ PHP学ぶメリット
・WordPressがPHPベースなのでその導入の際の知識として
・コンタクトフォームのように入力情報を受け取り他ページに表示する

コーディングだけ以上の単価を期待するなら抑えておくべきですね💁‍♀️

では実際どのくらいの範囲を勉強しておけばいいでしょうか。
これもまた個人の主観で置いておきます。

✅ PHP覚えておきたい内容
・基本的な記述方法を知る
・変数の仕組みを知る
・配列・連想配列を知る
・if文・while文・foreach文を使えるようになる
・関数を使えるようになる
・ファイル分割を学ぶ
・セキュリティ対策を学ぶ

学習に関してはProgateはⅠ〜Ⅱ程度までで良いかと思います。
(Ⅱはかなり難しいしあまり今後使わないかもですが、PHPがWEBサイト上でどう利用されているのかを体感するのに良いかと思います)

抑えきれない範囲もあるのでドットインストールも是非!
#6悪意あるコードの実行を防ごうなんかは大事なんじゃないかなーと。

実際のWEB制作で最もPHPを活用する場面お問い合わせフォームの作成じゃないかと思うので「入力情報を受け取る」「受け取った情報を表示する」「害のある入力やアクセスを拒否する」「自動でメールを送信する」あたりはどんな構造でできているか理解はしておいた方がいいかもです!

✅ 知っておくと良いこと
・入力情報を別ページで表示する(POSTなど)
・スクリプトなどの入力を拒否する(htmlspecialcharsなど)
・意図しないリクエストを拒否する(CSRF対策など)
・自動メール送信設定(mb_send_mailなど)

ドットインストールの上記講座で掲示板の作成を経験しておくとかなり勉強になりますよ!!

ただ実際の案件においては自作のPHPではセキュリティ上不安があるので
お問い合わせフォームの実装まで頼まれたら下記のようなフリーシステムを導入すると良いかと思います🙆‍♀️

ただ、構造を理解しないと案件ごとにカスタマイズできないので、学習はしっかりしておきましょう!


----------------🐮注意🐮----------------


※ローカル環境を構築しよう※

PHPで記述されたファイルは.phpの形で生成されますが、このファイルはこれまでの.htmlのファイルのように、ブラウザにドラック&ドロップでは表示されません

ではどのようにして表示されるようにするかというと、ローカル環境というものを構築する必要があります。

ドットインストールではVagrantやDockerと言った技術を用いてローカル環境を構築していますが、割と学習コストも高く、敷居も高いため、MAMPXAMPPを使うと良いと思います!



7 WordPressでオリジナルテーマを作成しよう


おそらく多くの人がここまでできるようになることが目標かと思います!

実際に案件としても制作会社・エンドクライアントどちらに対しても数が多く、単価も高いです!
ただし「WordPressができる」といっても守備範囲が広すぎますね。

じゃあ実際に自信を持ってWordPress構築できます!と提案するためにはどんな知識が必要でしょうか。

実際に案件やってみたり、制作会社の人と話して感じた超勝手な考えです。

✅ WordPressできます!とは?
・テンプレート階層を十分に理解できている
・必要な場所に必要な種類の投稿を表示できる
・編集可能な入力欄を追加できる
・投稿機能を追加できる
・タグ、カテゴリー以外の投稿分類を追加できる
・お問い合わせ、スパム対策、SEO、サイトマップなど最低限の対応ができる
・指定のドメインへのアップロードができる

ざっくりとですが。最低限このくらいは知ってると良いかと思います。

プラグインによる対策が必須な部分も多いですが
特典でよく使うプラグインをまとめておいてあります🙆‍♀️

ちなみにWordPressのレベルについて解説されているサイトがありますのでこちらも参考にご覧ください💁‍♀️


個人的にサイトのコーディング終了後のWordPress導入の流れは以下の感じかと

✅ WordPress導入の流れ
1. ローカル環境にWordPressインストール
2. header / footerをファイル分割しget_headerなどで全ページに適用
3. CSS / JS / 画像をget_template_directory_uriで表示されるようにする
4. front-pageの固定ページを用意しトップページ表示されるようにする
5. ナビゲーションバーを動的にする
6. single.phpを編集して投稿内容を表示されるようにする
7. 投稿表示たいところにループを作成する(home.php / archive.phpなど)
8. 必要に応じて固定ページのテンプレートを分ける(page-〇〇.phpなど)
9. その他ループやプラグイン、フックなどを用いて必要な機能を表示(特定の投稿を表示・パンクズリスト・ページネーション・カスタム投稿...)
10. ローカル環境で構築が完了したら本番環境に移行

恐ろしくざっくりですが。
また案件によってめちゃくちゃ変わったりすると思いますが...

ここまでの内容で「ちょっと何言ってるかわからない」ってなった人は是非わかるようになるまで理解しましょう!


💡さて、ではどう学習していけば良いでしょうか。

ここまで愛用してきたProgateにはWordPressのコースはないですし、ドットインストールはあるにはあるけどバージョンが古いです。

僕が実際に利用して参考になったのは以下の書籍です🙆‍♀️

こちらの書籍のように、いちから完成までのプロセスを解説してくれている教材を基にとりあえず一度完成させてみるということが非常に重要かと思います。

これによりWordPressによってどんなことが実現できるか
また、教材を応用すればどんな機能が実装できそうか
を知ることができます。

他に現役のエンジニアの方にお勧めされた書籍では以下のようなものもあります!

ちなみに僕は利用しなかったのですが、自作テーマ作成をしっかり解説しているサイトがあったので念のため載せておきます💁‍♀️


また、たにぐちまことさんのYouTubeもかなり勉強になります。

たにぐちさんのYouTubeは、WordPress意外にもたくさんのWEB制作において必要な技術の解説をされているので是非みてみてください!!


----------------🐮補足🐮----------------


🖥ローカル環境について🖥

8のPHPのところではローカル環境としてMAMP・XAMPPを紹介しましたが
これらを圧倒的にしのぐ便利さの Local by Flywheelを紹介しておきます。

特徴をまとめると以下の通り

✅ Local by Flywheel特徴
・セットアップが簡単
・起動 / 動作が軽くて早い
・デフォルトで複数サイト構築できる

最近はWordPressはLocal by Flywheelで、PHPはMAMPでという使い分けをしてます💁‍♀️


🖥既存テーマのカスタマイズ🖥

上記の流れや理解については基本的に静的なコーディングを行ったものをWordPress化してテーマを自作する内容ですが、案件によっては既存テンプレートテーマをカスタマイズして作成するケースもあるかと思います。

基本的に必要な知識はあまり変わらないんじゃないかなとは思いますが、既存テーマのカスタマイズを行う際には子テーマというものを作成し、そちらを編集していく必要があります。

親テーマを編集してしまうとテーマ本体のアップデートなどがあった際に編集内容が全てリセットされてしまうからです!

詳しい内容はこちら💁‍♀️



----------------🐮注意🐮----------------


※教材のバージョンを気にする※

WordPressは2018年に大幅なアップデートがされ、ブロックエディターという機能が搭載されました。
管理画面の見た目も違えば、ブロックエディターを活かした構築方法も従来と異なるようなので、バージョンの古い教材を用いて学習すると戸惑うことがあるかと思うので、Gutenberg(ブロックエディター)対応となっている教材を使いましょう!


※jQueryの記述方法※

jQueryを下記のように書いているとWordPressで動きません🙅‍♀️

$(function(){
  $(window).on('load', function(){
    .......
  });
})

WordPressでは他の機能との衝突を避けるため「$」の記述は使用不可となっているのです。

いくつか解決方法はあるのですが、一番わかりの良い方法は「$」を全て「jQeury」に書き換える。それだけです💁‍♀️

jQuery(function(){
  jQuery(window).on('load', function(){
    .......
  });
})

一つでも書き損じがあると正しく機能しないので気をつけましょう!



8 案件受注のための準備を始めよう


ここまでできたら、制作会社にも自信を持って営業をかけて良いですし、エンドクライアントにもWordPressでサイト作ることを提案しちゃえるレベルだと思います!

ただそのスキルを証明できるものを用意しておかないといけませんね。

そう、ここでポートフォリオが必要になってきます。



ポートフォリオではぜひここまでの学習を詰め込んでこんな機能のものを作成してみてください!

✅ 目標ポートフォリオ
・レスポンシブ対応
・jQueryでサイトによく出てくる動きを入れる(4を参照)
・WordPress化
・過去の作品を投稿表示
・自己紹介ページや料金詳細などは下層ページに
・お問い合わせフォーム作成
・Google analytics / Search Console登録

あまり聞き慣れないGoogle analyticsGoogle Search Consoleなどが書いてありますね。

個人的に未経験者にとってホームページを作成〜公開までやるとき最も盲点になるのが公開前後の作業だと思います!

あまり経験できる工程じゃないのでぶっつけ本番でしくじらないようにポートフォリオ公開の際にバッチリ経験しておきましょう💁‍♀️

✅ 公開前やること
・ブラウザチェック(Chrome・サファリ・Firefox...)
・デバイスチェック(Mac・Windows・iPad・iPhone・Android...)
・リンク先は全て正しいか
・JSちゃんと動くか
・お問い合わせフォームちゃんと動くか
・テキスト、画像は本番用に差し替えてるか
・meta情報の記載は正しいか
・noindexの設定は正しいか
・Twitterカードの設定は正しいか
・faviconの設定は正しいか
・公開先のサーバー情報確認

✅ 公開後やること
・サイトマップ作成
・Google Search Console設定
・Google analytics設定
・各デバイスからちゃんとアクセスできるか
・Google検索でちゃんと表示されるようになったか(数日後)


\具体的な営業方法については別のnoteで詳しく書きます/


🖥サーバーについて🖥

これまではローカル環境という自分のPCないに本番のネットワーク環境と同じような環境を構築し、そこで作業を行ってましたが

実際に全ての人にみてもらうには本番のネットワーク環境にアップロードしなくてはいけません

一番手っ取り早い方法はレンタルサーバーというサービスでサーバーを借りることです!

サーバーだのドメインだのよくわかんねーよってなるかと思いますがこちらの記事で詳しく解説してくれています💁‍♀️

✅WEBサイト(家)を公開するには
・サーバーというWEBサイトを置く場所(土地)をレンタルしよう
・ドメインという個別のサイトの情報(住所)を取得しよう
・レンタルサーバー側の設定でドメインとサーバーを紐付けよう
・FTPソフトを用いて全てのファイルをドメイン上に配置しよう

ちなみに僕はレンタルサーバーはXサーバーを使っています💁‍♀️
(学習初期に契約したのですが、レンタル料金 約10000円/年を支払うのに勇気出した記憶があります)

またドメインの取得はお名前ドットコムで簡単に行えます!

ちなみにひとつのドメインに対してサブディレクトリサブドメインというものが存在し、実はひとつのドメインで複数のサイトをアップすることは可能なのです。

ただSEOやユーザーの信頼など様々な観点から、ひとつのドメインに全く異なる複数のサイトを紐づけるのは辞めておきましょう🙅‍♀️



9 最後に


ここまで読んでいただき本当にありがとうございます!!

最近

「WEB制作は稼げる」
「3ヶ月で即フリーランス」
「プログラミングを覚えて月収100万」

そんな夢のような嘘みたいなキャッチコピーが増えてますね。

僕は興味をもったなら始めるのはどんな動機でも構わないと思っています。
僕自身も「本当に稼げるのかよ」という気持ちで始めました。

独立して活動している今強く感じていることは
稼げるようになるには途方もない努力が必要で
そこに楽な方法はないです。

けれども自分の成功手順を、稼げるぞ〜と謳って有料情報として販売している人もいて
需要があるから売れるので問題はないのですが

「それ本当に有料で売るほど他にはない価値のある裏技的ものなの?」

「どれだけの深度の学習でどんなの案件が取れるのかくらいは無料で知れるモノがあっても良いんじゃないの」

と感じていた次第です。

結局最後は本人の努力が全てなので
自力での努力が無理なら継続して稼ぎ続けるのは不可能なのでスクール通うなりして就職したほうがいい
と僕は考えてます。

ただし、挑戦することは自由です。
やるからには時間とお金を無駄にせず効率よく必要な範囲だけ学んでいきたいものです。

だから僕は、誰でも無料でできるようこのnoteを書きました。

当noteをご一読くださり、参考になったなと思った方は

・この記事に「いいね」する
・Twitterでnoteの感想と「@tanshiokoki73」のメンションをつけてツイートする

をしてくださるとたんしおが喜びます🐮

任意ですので、してやってもいいよって方はよろしくお願いします。


次のnoteはWEB制作会社への営業について💁‍♀️
技術つけても仕事取れなきゃ意味ないのでね笑
お楽しみにー🐮



おまけ:特典


「いやお前結局有料部分作ってるじゃん!」

というツッコミはお受けいたします。笑

なにゆえこの有料枠を設けたかというと

時間かかったから参考になった方にはぜひサポートして欲しい(カス)

けどそれなら何か付加価値があった方がいいな

よしだったらおまけとして自分の情報メモをおいておこう

と言った具合です。

ですので個人的には
ここまでのロードマップがこのnoteの本体であるため
ここまでを参考にするだけでも本当に十分ありがたいので無理にご購入なさらなくても結構です。


以下特典項目です🐮

✅ 忘れがちなHTML/CSSなど
✅ Sassディレクトリ構成・読み込み順など
✅ jQueryよく使うプラグイン・メソッド・イベントなど
✅ GitHubコマンド集(メモ)
✅ WordPressよく使うプラグイン


この続きをみるには

この続き: 127文字

学習半年で月20万達成したWEB制作未経験者による案件受注までのロードマップ

たんしおの脳と

700円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
僕もスキです
551
元公務員のWEB制作フリーランスです。これまでの脳ハウをまとめてます。