Web制作活動1年の軌跡（前半）

2021年4月から2021年9月までの活動履歴をご紹介します。

途中、楽しすぎて、分からなさすぎて発狂しながら進んできました。何回も叫びました。

学習ロードマップは途中から参照し、基本的に教材ベースで進んできました。具体的なhowtoは他の方々のを参考にしてくださいませ！

私は1年間で、大まかに

・学習半年（継続中）

・コミュニティ所属

・営業、初案件

・制作会社と業務委託契約

という軌跡をたどります。

こちらは学習期の振り返りです。

なお、後半版の記事では具体的な金額や取引先は伏せておりますので悪しからず。

2021年4～9月

学習メインの期間です。デイトラ「Web制作コース」で学習しました。

4月/5月　デイトラ初級

コロナで多忙を極めている夫のサポート、幼稚園の年少に転園した娘のサポートに明け暮れていました。我が家はコロナの影響をモロ受けてしまい、家の中はバタバタでした。

私はというと、4月中旬に「三井住友ビジネスオーナーズカード」を申請。

4月末に、デイトラ「Web制作コース」をカードで決済し、ついに具体的に学習が開始したのでした。

デイトラのカリキュラムは「day」で区切られており、順当に進めていけば3ヶ月程度で終わる総量です。日々カリキュラムが追加されているのでボリュームは増え続けています。

内容がかなりしっかりしていてスキルを網羅できること、質問できることなど、初学者の環境としておすすめです。たくさんのコースがあるのでぜひご覧になってみてください！

デイトラを申し込んだ私は、dayを気にせず出来るところまで進めていました。5月末までの1ヶ月で初級を終えるくらいのスピードです。

途中、別の仕事をこなしたり、ブログを書いたり、幼稚園の時間が午前中だけになってしまったり、時間の確保が課題に。

朝活や夜活を開始し、日々8時間は必ず取り組むように心がけていました。

ここで学んだことは

・スキマ時間にインプットする内容を決めておく

・毎日PCに向き合う

・嫌になったら潔く散歩/寝る

・家族に進捗を説明して理解してもらう

・他の仕事をおろそかにしない

です。

受験勉強だと分からない原因を探ると思うのですが、コーディングでは結構な頻度で沼にハマります。1人でやっているとハマる期間が長くなる傾向もあります。

答えを暗記して回答するイメージではなく、道筋が分かればOKとし、サクサク前進して全体像を把握していくと良いと思います。

6月/7月　デイトラ中級とWEBCHIKA

幼稚園の時間が短く、作業時間が減る一方。

他の仕事もストップしている状態で学習が思うように出来ませんでした。

肝心のデイトラは中級に打ちのめされます。

初級では「HTMLとは」など基本的な内容がメインでしたが、中級になるとコーディング内容が具体的になり、1つ1つの密度が一気に大きくなりました。

中でも大変だったのが「中級最終課題」。

LPのコーディングで、実案件では「5日以内」で完成させるとのこと。

私は、ここでは言えないくらいの期間をかけて完成させました。（2週間、いや3週間？）

どこに詰まったのかというと「ピクセルパーフェクト」

デザインカンプを見て大まかにコーディングし、最後にデザインカンプの画像と重ね合わせてズレをpx単位で調整する作業です。

こちら度々Twitterで議論されています。

個人的に「コレはきっと出来たほうが良いな」という感想でした。そのためパーフェクトにこだわり、時間が闇雲にかかってしまったのでした。

結論、ピクセルパーフェクトを実現させるには「CSS設計」を学ぶのが効率的である、と半年後に気づくことに。

ここではとりあえずデザインを再現できたものの、コードはぐちゃぐちゃで、時間をかけた割に全然ダメなものが出来て7月末は泣きながら作業していました。

ここで学んだことは

・デザインカンプからのコーディングは量をこなす（嫌でも慣れる）

・2~3つほどLPコーディングが出来れば、CSS設計の本を読んでみると発見がある

・他の人にコードを見てもらってフィードバックを血肉にする

です。

先輩からのフィードバックがめちゃくちゃ重要でした。私は課題提出がおろそかなタイプなので自己満足で書いてしまって、かなり時間をロスしています。

6月には、デイトラ以外に、あすま(@asuma_project)さんの「WEBCHIKA」という教材を購入。こちらで「FLOCSS」「タスクランナー」「ejs」について触れ、各々の機能に驚き、自分の学習がまだまだ発展途上であることを把握しました。

8月/9月 デイトラ上級とUdemyと書籍

幼稚園は夏休み突入。

やんちゃ盛りの娘が在宅することとなり、学習時間はほぼなくなりました！！！

デイトラは、中級最終課題に見切りをつけて上級に進むことに。

上級では「WordPress」が登場します。噂に聞いていたアイツです。

最初から難しそうなニオイがプンプンする中進めていましたが、卒業制作で完全にストップしました。

理由は「静的コーディングから動的にするイメージが分かりにくかったから」。

デイトラは分かりやすいのですが、残念ながら私のオツムがついて行かず、おそらくプログラミングそのものの概念で無意識に苦手意識を抱いたような感覚に陥りました。

そこで

・Udemy（動画教材）「ちゃんと学ぶ、WordPressテーマ開発講座」

・書籍「WorsPress 仕事の現場でサッと使える！デザイン教科書」

にシフトチェンジして学習することに。

上記2つを終えたことで大まかなイメージを掴むことができました。ここまでが9月上旬までの出来事です。

ここまでこなして、デイトラの卒業制作を再スタートしました。

静的コーディングからの動的化で、途中、デザイン崩れを起こしながら2週間ほど格闘。

メインループ、サブループを始め、主要なテンプレートタグはサクサクと書ける状態となっていました。

しかし、ピクセルパーフェクトにならず、課題提出までにまた力尽きるのでした。

（課題が途中で差し替わったため、2022年4月現在で課題提出はまだです。）

ここまでで約半年間は学習していた訳ですが、出来るようになってきた達成感はあるものの、1人で戦ってきた孤独感や比較対象が無いことで、あまり楽しく取り組めなくなっていました。自分のペースは遅いだろうし、このままだと具体的に仕事になるのはまだ先なのかもという絶望感も正直ありました。

そこで私は、コミュニティに所属して仲間を増やそうと試みたのでした。

以降の活動は、後半版の記事に綴ります。

ここで学んだことは

・HTML/CSSとWordPressは雰囲気が異なるので分けて考える

・HTML/CSSは最初に学習する部分だが、おそらく1番難しく、そして大切

・1人は挫折しがち。同じくらいの進捗の仲間と、程よく先に進んでいる人を見つけて真似すると良い

です。

JavaScriptを学習したいな、など色々思っていましたが、そんな時間的余裕は持てていませんでした。

まとめ

学習期は「続けること」が最重要だと感じました。

疑問点は基本的に自分で考えてから聞いていたのですが、自分で考える段階で頭の中が混乱しまくり、途方に暮れたことは数え切れません。

結局ネットに答えは落ちているのですが、ググるのにもコツがあり、答えを見出すまでの時間が日に日に短くなることを実感した時は、自分の学習が無駄ではないのだと感動したのを覚えています。

まだまだ要学習ですし一生続くとは思いますが、最初の段階は特に大変でした。

デイトラを始め、様々な教材やロードマップがあるため、自分に合いそうだと思ったものを数を絞って取り組むと良いでしょう。

ここを乗り越えたら、あとは行動力と勇気のみ。

部活でも仕事でも、続けないと見えてこない景色ってありますよね。飽き性の私でも続けてこられたので、皆さんであれば大丈夫だと思います！