30DAYSトアイアル2ndのまとめ【DAY0】

30DAYSトライアルの1stが終了したので、2ndに入っていきたいと思います。

まずはDAY0として2ndの目標などの説明が説明されています。

DAY0課題

1stでは東京フリーランスのショーへーさん(@showheyohtaki)が課題を出していいましたが、2ndではフリーランスのWebコーダーであるはにわまんさん(@haniwa008が課題を出してくれます。

自分のブログにも度々登場するはにわまんさん(@haniwa008はWebエンジニアに約立つ情報を多数掲載しているHPCodeというWebサイトを運営しており、色々と助けてもらってます。

30DAYSトライアル2ndの目標
Webコーダーの仕事内容
Webコーダーとして必要なスキル
Webコーダーの仕事の流れ
感想・まとめ

30DAYSトライアル2ndの目標

2ndでは「Webコーダーとして仕事できるようになる」を目標に30日の課題に取り組んでいきます。

1stの目標は「初心者からサイト制作で月5万円を稼ぐため」ためということで、HTMLテンプレートを使用して簡単なLP制作を販売できるようなスキルを学習してきたので、2ndでは一歩進んでWebコーダーと本業とできるようしていくためのスキル習得というところでしょうか。

そのため1stのDAY25ぐらいまでの知識があることを前提とされています。

Webコーダーという基準がどうかわかりませんが、自分はとしてはHTMLテンプレートを使わずともゼロからWebサイトを作成できるというイメージを持っています。

Webコーダーの仕事内容

Webコーダーの「仕事内容は「Webデザイナーさんが作成したデザインカンプをWebサイトとして再現すること」とのことです。

デザインカンプは「Webデザイナーがクライアントに対して完成イメージを共有するための見本図」となり、クライアントはデザインカンプどおりにWebサイトが完成するとい認識を持つことになります。

それを忠実に再現するのがWebコーダーの仕事となるわけですね。ここでの再現度の高さがWebコーダーとしてのスキル(質)の高さになります。

再現するためにどんな手段(テンプレート、フレームワーク）は使用しても良いですが、デザインカンプを再現できるというのが最低条件ということです。

Webコーダーとして必要なスキル

最低条件のスキルであるデザインカンプを再現できるというものを具体的に分解すると以下の3点とのこと。

デザインをWeb上で再現するスキル
デザインカンプからコーディングできるスキル
動きを再現するスキル

これらを習得するための学習方法は以下のようになります。

デザインをWeb上で再現するスキル

Webに公開されている実際のサイトをゼロから再現する。これは模写コーディングのことですね。Webに公開されているWebサイトが作成できればスキルとしては申し分ないというこで、極端に言えばdivやh1などのタグの意味を知らなくても、見栄えが再現できればOKとのこと。

なのでHTMLやCSSのスキルが必要になってくるということですね。

自分が模写コーディングをするとめちゃくちゃdivが多くなりますが、それでもOKなんです(もちろんタグを少なく、すっきり書けたほうが良いというのは分かっています)。

DAY0課題にも記載されていますが、「コーディングに答えはない」ので、Webサイトを再現できればなんでもいいってことです。

以前自分がTwitterで模写コーディングのゴールをに対する疑問をつぶやきましたが、ここに答えがありましたね。

模写コーディングしているといつもゴールが分からなくなる。
ソースを完コピするのが目的じゃなくて、目標物を決めてコーディングできるという実践力をつけるのが目的だよね。#プログラミング学習 #模写コーディング #駆け出しエンジニアと繋がりたい

— Jyu2@ミニマルなWebエンジニアを目指す (@Jyu210) October 3, 2019

大事なのは答えを求めるのではなく、「答えを作る(導き出す)」こと。

模写コーディングをしてみて分からなかったことがあれば、ググったりして解決策を見つけて理解する。そしてそれを次の模写コーディングで試すということを繰り返していけば、おのずとスキル(コーディングの引き出し)がついていき、Webコーダーとしての実力が上がっていくということですね。

ほんと気持ちのモヤモヤが取れた感じがします。

デザインカンプからのコーディング

模写コーディングでは実際のWebサイトからコーディングを行っていきますが、実際の仕事ではデザインカンプからコーディングを行っていく必要があるので、そこからHTMMLやCSSを導きだしてコーディングしていく必要があります。

デザインカンプはPhotoshopやIllustrator、XDなどのツールを使って作成されるので、実践する教材というものは中々ないの実情のようですが、はにわまんさん(@haniwa008も含めて、何名かの方が教材(デザインカンプ)を提供してくれているので、それを利用してみると良いですね。

実際に自分は、はにわまんさん(@haniwa008が提供してくださっているPhotoshop、Illustrator、XDからのコーディングに慣れよう！を購入してやってみました。

【HTML&CSS】Wwbページ模写コーディングの有料noteを購入してみた(初心者の学習履歴)

必要なスキルはPhotoshopやIllustrator、XDなどのツールからHTMLやCSSを導き出すスキルですが、Webコーダーとして仕事を行っていくとなるとこれらのツールの購入は必須ということなんでしょうかね・・・。

初期投資は仕方ないと思いますが、できるだけ節約はしたいので何か良い方法があれば嬉しいところです。

動きを再現する方法を知る

スライダー(画像がスライドして変わっていくやつ）やドロワー(メニューがペローンで出てくるやつ)などの動きまで再現するのがWebコーダーの仕事に入ります。

闇雲に動きの付け方を学習していくよりも、よく出てくる動きから順に覚えていくで効率よく学習できるとのことなので、 LPサイトを仕事でコーディングするために覚えておきたいjQueryやCSSの構成要素を21個！で必須レベルの動きを紹介してくれているので、まずはここから入っていき未知の動きに遭遇したら、そこで引き出しを増やしていくというやり方が良さそうです。

あとは動きをつけるものもゼロから作る方法もあれば、便利なライブラリなども存在するのでライブラリの使い方やライブラリが存在することを知っておくことも大事ですね。

有名な「車輪の再開発をするな」ってやつですね。

Webコーダーの仕事の流れ

Webコーダーの仕事の流れも紹介されています。

見積もり＆スケジュール
デザインデータの受け取り
コーディング
納品
請求書の作成
振込

これはWebコーダーの仕事の流れをイメージしておこうぐらいのレベルで、まずはWebコーダーとしてしっかりとしたコーディングのスキルを身に着けることが大事ですね。強いていえば、2ndの内容や模写コーディングを行っていくにあたって、こんなレイアウトだったらこれぐらいで作れるという感覚をきちんと身につけておくっていうことでしょうか。そうでないと適正に見積りができずに、割に合わない仕事ばかりになってしまい消耗してしまいますから。

まぁこれもしっかりしたコーディング力を身につけて仕事を受け続けていけば、見積りの精度も上がっていくはずなので、焦る必要はないかなとも思いますけどね。