こんにちは、ゆっちおじさんです！
未経験からWeb制作の学習を始めていきなりフリーランスに挑戦している既婚子持ち29歳(2022年1月時点)です！
Web制作で月に20万円を受注出来るようになったので、それまでに学んだ事や気を付けるべきポイントをまとめていきます！これから副業で稼ぎたい方、副業を始めたい方、スキルを身につけて稼いでいきたい方向けの記事です！
軽く自己紹介
宮城県生まれHIP HOP育ち、偏差値の低い高校に入学して
卒業もギリギリの学年ワーストの成績でなんとか卒業し、美容専門学校に入学。
美容師として頑張って稼いで独立するぞ！٩( ‘ω’ )و
みたいな勢いで上京しスタイリストになって半年で美容師を引退する(美容師歴3年4ヶ月)。笑
その後都内でゴミ収集ドライバー(契約社員)をしながらパチンコ屋でホールスタッフ(アルバイトを5年半)ほど続ける。
毎朝早く家を出て家には寝る為に帰る状態に絶望し、Web制作の勉強を開始。
半年ほどの学習期間を経てフリーランスとして独立。毎日生きる為に奮闘中
副業としてWeb制作は本当に稼げるの？
いきなり結論からですが。。。稼げます！
稼げますが簡単ではないということは理解してください。
「それなりに学習し、ひたすら営業する」
を挫けずに続ければ再現性は割と高いです。
ここで重要なのが「何をどれくらい学べばいいのか」が重要になってきます。
Web製作といえどさまざまなCMS(WordPressのようなもの)やツールがありますので
最低限これだけはやっておけ！と思うものをピックアップして
解説していきます！
Web制作はオワコンって聞いたけど実際どうなの？
たまにTwitterとかで目にしますよね。
わたしの感覚ですが需要はまだまだあるかなと思います。
コロナ禍で実店舗販売にプラスしてオンラインで販売する店舗が増えていますので
Shopifyの案件なんかは今後伸びる分野だと思います。
Web制作スキルがあればオンラインストアの構築も出来るようになるので、
オワコンという感じは全然しませんね。
実際未経験から始める方もいますし、しっかり学んで営業を頑張れば稼ぐことは全然可能です！
スキルを身に付けて稼ぎたい方は諦めずに頑張って行きましょう！
環境を構築する
お使いのパソコンにコーディングする為の環境を作ります。
環境構築はドットインストールのレッスン内で親切丁寧に解説してくれています！(お世話になりました)
なので。。。ここでは環境構築について割愛しますが、VScodeにいれると捗る拡張機能は後日まとめます！
HTML CSSを学ぶ
Web制作をやっていく上で基本中の基本になるのがHTMLとCSSです。
HTMLとCSSをしっかり勉強すればこれだけでコーディング案件受注できます。
ではどこまで勉強すればいいのか見て行きましょう。
HTMLの場合
Progateとドットインストールをやりましょう！とりあえず一周すれば充分だと思います。
順番としてはProgateを一周したらドットインストールをやるという流れの方がすんなり頭に入ってくると思います。
Progateは主にテキストで解説されており、理解しやすい内容になってます。
一方ドットインストールは動画を見ながら環境構築をして実際にコードを打つので
「理解する」というよりは実践向きな内容になっています。
どちらもよく出来てますので順番もそこまでこだわらなくても問題ないです！
わたしのオススメはProgate→ドットインストール！
学習しても覚える必要はない！
これもよく言われる話ですが理由を解説すると、
HTMLの構造をある程度理解した上ですんなりと覚えられるタイミングがあります。
それが内部SEOを意識したタイミングとW3Cチェックをしたタイミングだからです。
どちらも説明すると少し長くなりそうなので後日解説します！
CSSの場合
こちらもProgateとドットインストールをやりましょう！HTMLと同じで一周ずつ終わらせれば問題無いかなと思います！
CSSに限らずですがわからない事があれば調べればすぐに答えが出るので頑張って覚える必要性は無いです！
Bootstrapはやるべき？
Bootstrapを学習するべきかしないべきか論争あるけどぶっちゃけどうなの？
結論としては使えると便利！
案件によってはBootstrapを使用しても良い案件があったりするので、
そういった案件をこなす時に使えると爆速で納品できます！
でもマストではないので必要と感じた人だけ学びましょう！
HTMLとCSSを学習していく上で大切なこと
CSS設計を意識する！これに尽きます！
CSSのメンテナンス性や作業の効率化のためのHTMLクラス名の規則と、CSSのコードの管理方法の考え方です。 良いCSSの条件として「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」の4つがあげられます。
CSS設計を意識するについては後日詳しく解説します！
CSS設計を意識する上での一番のメリットは予測のしやすさにあるかなと思います。
予測しやすいクラス名を付けることでローコードでもどこにCSSを当てているのかが分かり易いです。
案件対応していく中でCSS設計を無視したコードの編集を任されたりすると地獄です！笑
自分が触りにくいと感じるコードは書かない方が良いと案件対応していて痛感しました。
JavaScript jQueryを学ぶ
こちらも覚える必要は無く、Progateとドットインストールを一周すれば充分です。
まずは調べながら実装できるレベルになれば案件対応できるので自力で書けるようにならなくても大丈夫です！
(覚えなくても良いと書いてますが、自力で書けた方が得します笑)
JavaScriptもjQueryも日本語での記事がたくさんあるのでわからない事があったら調べればすぐに答えや実装方法に辿り着きます。
ですが慣れていないと実装までに時間が掛かってしまうので時間を掛けたく無い方は一度実装したものはNotionなどにコードや参考サイトをまとめておくとめちゃめちゃ捗ります！
案件対応で使う代表的なJavaScriptライブラリにSwiper.jsがあるのですが使用頻度は高めなので使い方を覚えておいて損はないです！
SCSSを使える環境にする
ここまで学習を進めたら次にやるのは「SCSSを使える環境」にしていきます！
SCSSってなんやねん？CSSと違うんか？
SCSSは簡単に説明するとCSSの上位版！
CSSを効率よく記述する為にRubyで開発されたメタ言語。
要するにCSSのスーパーサイヤ人(語彙力
習うより慣れろということで簡単にどんな物か触れるSassmeisterをどうぞ！
例文のコードもコピペできるように置いておきます。
下記をHTMLにコピペ
<div class="footer__sns">
<ul class="social-nav">
<li class="social-nav__icon"><a href="#">あ</a></li>
<li class="social-nav__icon"><a href="#">い</a></li>
<li class="social-nav__icon"><a href="#">う</a></li>
<li class="social-nav__icon"><a href="#">え</a></li>
</ul>
</div>下記をSCSSにコピペ
/* フッター */
.footer__sns {
text-align: center;
margin: 0 auto;
width: 100%;
ul {
display: flex;
text-align: center;
margin: 0 auto;
li {
&:nth-child(n + 2) {
margin-left: 20px;
}
list-style: none;
}
}
}そうするとCSSにSCSSに記述したCSSが反映されます。
毎回クラス指定していたCSSが入れ子状に書けるようになるので早くCSSに書けます。
他には変数が使えたりミックスインが使えたりコレだけで1記事以上は書ける程奥深いので先人の記事を参照して下さい！
詳しく学習したい方はSassの教科書という書籍を購入することをお勧めします！
わかりやすくて細かいところも解説してくれてます！
カンプからコーディングをする
ここまで来たらいよいよデザインカンプからコーディングをします！
上記の2サイトは無料でデザインカンプを提供してくれてます！
デザインカンプを見ながらHTMLとSCSSとJavaScriptを駆使して
自分で考えながらコーディングしていきます。
ここまで学習しても最初は全然自力でコード書けないです笑
ですが考えて答えを見てを繰り返すことによって自力で乗り越える力が身に付きます！
模写はやるべき？やらないべき？
模写に関しても結構意見が割れるところだと思いますが、私の経験上やらなくても良いと思います。
模写をすることを無駄だとは思っていませんが、模写する案件が無いのも事実です。
模写をするのではなく、色々なWebページでデベロッパーツールを使い
上手な人のコードを見て真似をするのが一番勉強になって上達に繋がります！
記事が長くなってきたので営業編は別記事で！
