皆さんこんにちは。俺は大学を卒業してからメーカーのエンジニア職として勤務してきた。一人で生活していくには困らない程度に稼げているが、もっと収入を増やして貯金や投資、趣味に時間を使いたいと思って副業始めることにした。なんの副業をするか考えた結果、Web制作ができるようプログラミング（HTML , CSS , JavaScript）を勉強した。なぜ、そう思ったかと、半年ほど勉強してきた記録を書こうと思う。
この記事の目次（クリックでジャンプ可能）
なぜ、プログラミングを勉強しようと思ったか
現在会社員として働いているが、今のまま会社員をずっと続けるのは面白くないなと思い、何か勉強して副業できないかと考えた結果、web制作をするためにプログラミングを勉強し始めた。もともとWeb制作に興味があって、自分で企業やショップのサイトが作れたらいいなと思っていた。初期投資が少ないし、パソコンは持っていたので、手軽に始められるし、ネット上に教材がたくさんあるので、そこまでお金をかけなくても勉強できるかなと思った。
実際に勉強してみて少額で勉強できたし、半年くらい勉強して、独学でも中級者くらいになれたと思う。パソコンさえあればどこでも作業できるし、空いた時間に勉強することで継続できている。
最初に学ぶ言語を選ぶ
俺はWeb制作をしたいという目的があったので、HTML、CSSを勉強することにした。HTMLはウェブページを作成するためのマークアップ言語だ。主に文章の構造を定義し、見出し・段落・リスト・リンク・画像などを配置する役割を持っている。
HTMLは タグ（要素） を使って記述する。基本的なHTMLの構造の例を以下に示す。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>こんにちは、HTML！</h1>
<p>これはHTMLの基本的な構造です。</p>
<a href="https://example.com">リンク</a>
</body>
</html>
主なHTML要素
| タグ | 説明 |
|---|---|
<html> | HTML文書全体を囲む |
<head> | メタ情報（タイトルやCSSの読み込みなど） |
<title> | ページのタイトル（タブに表示される） |
<body> | 実際に表示される内容を記述 |
<h1> 〜 <h6> | 見出し（数字が小さいほど大きな見出し） |
<p> | 段落（文章を表示） |
<a> | リンクを作成 |
<img> | 画像を表示 |
<ul> / <ol> | 箇条書き・番号付きリスト |
<table> | 表を作成 |
HTMLだけでは不十分？
HTMLはページの構造を決める言語ですが、デザインや動きはつけられない。そこで、以下の言語と組み合わせて使う。
- CSS（Cascading Style Sheets）：デザインやレイアウトを調整する
- JavaScript：動的な動作（アニメーション、データの取得など）を追加する
HTMLはウェブページの骨組みを作るための言語だ。CSSやJavaScriptと組み合わせることで、より魅力的でインタラクティブなサイトを作成できる。
学習の進め方
- 平日（仕事がある日）：1～2時間
- 休日：3時間
作業する場所は自宅やカフェで、場所を選ばずパソコンとインターネット環境があればどこでもできるのが良い所。作業する時間は食事の後や午前中などある程度決めてルーティーンワークにした。
- まず、Progateを毎日やりHTMLの基礎を徹底的に行う。実践問題もあるので繰り返し行う。目安として4週くらいは繰り返し学習する。
- 模写コーディング練習用のやり方を調べて準備する。
- いきなり模写コーディングでページ全部を作成するのではなく、headerやTop-pageなど一部作成してみる。
- 慣れてきたらページ全体の模写コーディングをする。俺は練習のため複数パターンのサイトを10サイトくらい作成した（コーポレートサイトやショップサイト、ブログサイトなど）。
- 作成した模写コーディングのサイトをアピールするポートフォリオを作成する。
基本的なサイトが作れるようななったらCSSでアニメーション作成したり、JSのJQueryを勉強してより見た目の良いサイトが作れるようにしたいと思っている。JSはHTMLやCSSと比べて勉強時間がまだまだなのでこれからも継続して勉強していくつもり。模写コーディングやポートフォリオを作成方法は別記事で書いていこうと思う。
最初の壁にぶつかる…
最初はコーディング覚えるだけで大変。文法を覚えたり、CSSのプロパティー覚えるのに時間がかかる。最初の頃、「Progate」で勉強していてもつまづくことが多かった。ここでめげずに、「まあこんなもんだよな」と思えることが継続するのに重要だと思う。自分を成長させるために勉強しているんだけど、自分を追い込むとすぐに挫折してしまうと思うので、そこは焦らずにやっていこう。1日1時間と学習時間を決めてたけど、時にはできないこともあるので10分だけやるなど小さく積み重ねていくことが大切。
効率的な解決策は最初わからないので、ネットで調べる、人に聞くなどやってみて自分でやりやすい方法を模索しよう。勉強が進むとネットで同調べれば良いかわかってくる。そのために、HTML、CSSの基礎を勉強することが大切だなと思う。
小さな成功体験を積む
ある程度勉強していくと、自分の知識になっているなと感じる時が来る。「Progate」みたいなドリルなら、自力でできたとか、わからないことを自分で調べて解決できたなど小さな成功体験ができるとやる気がアップすると思う。まずは1週間続けてみて、成功体験を感じよう。そして、1ヶ月、2か月と続けていくと習慣化できるはず。習慣化すると、何も作業しないと落ち着かなくて、何かしらしたくなるはず。作業や情報収集、読書、調査など…。
学習を続けるためのモチベーション管理
モチベーションを保つために、学習記録やSNSで活動記録を残す。記録したことで自分の実績が見えるかされて、何をどのくらいやったかわかりやすくなる。また、SNSで記録するとほかの人に発信しているので、一人だとさぼりがちな人にはおすすめ。ちなみに俺は特に活動記録はつけないで、平日、休日の活動時間を決めてコツコツやっていくことができた。この辺は人それぞれなので、記録付けたほうがいい人はやってみて良いと思う。
また、目標はわかりやすくステップ化すると良い。今日はドリルをここまでやるとか、この範囲のコードを完成させるとか何でもよい。そして節目の目標として、ページ1枚コーディングするなど少し大きな目標を立てよう。あとはそれに向かって毎日継続していくのみ。
まとめ & これからの挑戦
これからは、今まで学んだ事を実践して収益化できるようにしたい。具体的には、今会社員で稼いでいる学と同額を目標に副業をしていきたい。ジャンルはWeb制作だけでなく、事務作業やマーケティング、デザイン、編集などできることはすべてやっていきたい。そして、どんどん人と会って人からの紹介で自分の副業を広げていきたい。
そして、副業で学んだことを記事にして自分の体験を発信していきたい。それではまた別の記事で。
コメント