【実録】HTML/CSSコーディング模写で挫折したけどリベンジ成功した方法

未分類 考えてること

こんにちは、ガタガタです。

2019年4月初旬からHTML/CSSの勉強を始めましたが、コーディング模写が難しすぎて1ヵ月で挫折してしまいました。


(このツイートで触れていた模写は、ほどなく諦めることになります、、)

しかし3ヵ月後、方法を変えて勉強を再開したところ、なんとなくコツをつかみ、サクサク模写できるようになりました。

この記事では「HTML/CSSの基礎は理解できたけど、模写が難しすぎて無理」という方向けに、

を解説します。

なぜ模写が難しいのか

そもそもどうして「HTML/CSSの基礎が分かるのに、模写ができない」という状態が起こるのでしょうか。

原因の大半は「サイト構築の具体的な手順が分からないから」「疑問を解決してくれる先輩がいないから」だと思われます。

私が挫折した模写コーディングの手順

とりあえず上から順番に作ろう
ヘッダーのマージンはこれくらい?(目測)
divが入れ子になりすぎるけど大丈夫?(困惑)
マージンが効かないんだけどなんで?(動揺)
不安になってきた(デベロッパーツール起動)
何が書いてあるかさっぱりわからない(混乱)
この通りに書けるようにならなきゃいけないの?(号泣)
挫折

私の場合は、上から順番に完璧にしようと思ってしまったのが一番の失敗だったと思います。

考えてみれば当たり前なのですが、

絵を描くときは、まず下書き
アニメを作るときは、まず絵コンテ
建築するときは、まず図面
ブログを書くときは、まず下書き

まず大まかな全体像を作って、細部は調整しながら作り上げていくのが、ものづくりにおいては一番効率的かつ確実な方法であるはずです。

頭のきれる方なら最初に気付けそうですが、私の場合、目の前のデザインを再現することばかりを意識してしまいうまくいかず、あっさり挫折してしまいました。

では、サイト構築の具体的な手順を知るにはどうすればよいでしょうか。

手順を見ながら模写してみよう

模写を再開する前に私が手に取ったのがこの一冊。

この本の優れているところは、

ゴールとなるデザインを示しつつ、
ゼロからHTML/CSSを書き起こし、
段組みの作り方から細部調整まで順を追って説明され、
なぜこのコードが必要なのか、書き足すたびに補足が入り、
レスポンシブ対応のための微調整までカバーされている

HTML/CSSの基礎はおさえている方であれば、この一冊をまるまる模写してみるだけで、格段にレベルが上がるはずです。

実際にゼロからサイトを構築するための手順が、これ一冊でかなり具体的にイメージできるようになります。オススメです。

ひとつだけ注意

この本では段組みを作るのにfloat:leftが採用されていますが、今はより簡単にレイアウトを構築できるBootstrapやFlexbox等を採用するのが主流です。float:leftの使い方を覚えておくのも悪くはないですが、段組みを作る方法だけはFlexbox等で読み替えてもよいかもしれません。

参考サイト:これからのCSSレイアウトはFlexboxで決まり!

模写に使える便利ツール

さて、上で紹介した本を模写したあなたは、すでに絶大な模写パワーを手中におさめているはず。Airbnb模写なんて2日もあれば完了できるでしょう。

ただ、画面上のマージンの広さや、使われているフォント、はたまたカラーコードを一目で理解するのは至難の業です。

そこで、Google chromeに下記のツールをインストールすることをオススメします。

カラーピッカー:サイト上の色のコードが一瞬でわかる!
定規:高さ、幅が何pxか一瞬でわかる!
フォント解析:文章のフォント、色、太さ、行間が一瞬でわかる!
画像一括ダウンローダー:使用画像が一瞬で手に入る!
※background-imageで設定されているものはDLできないので、デベロッパーツールから画像URLを取得して適宜DLしましょう。

模写にデベロッパーツールを使うべきか

基本的には使わないのが一番よいでしょう。実務では、デザインだけを見てコーディングできるスキルが問われるからです。

オススメは、一通りコーディングし終わってから、答え合わせ的に使用する方法です。

「仕上がりは同じだけど、全く違うコードで実装されてた!こんな実装方法もあるんだな」という発見があるかもしれませんよ。

模写するサイトの選び方

一度Airbnb模写に取り組んで挫折した人はもしかすると、「Airbnbのサイトって実はめちゃめちゃ難易度高いんじゃね?」と疑いの目を向けているかもしれません。私がそうでした。

が、一度模写に成功するとわかるのですが、Airbnbのサイトは極めてプレーンなつくりになっており、初心者のコーディング模写には最適と言えます。ちなみにプロコーダーの方は2~3時間くらいで模写できるそうです。恐ろしすぎる……。

初心者が模写すべきサイトの特徴は、

カラムが単純で、大まかなパーツごとに分けやすい
動き(アニメーション)が少ない
レスポンシブ対応である(ウインドウを小さくするとデザインが変わる)
パッと見て「だいたいできるかも……」と思える

肝心なのは、「95%できる」ではなく「だいたいできる……ここはちょっと分からないけど、ぐぐればいけるかな」くらいのサイトを模写することです。わかりきっていることを何度も繰り返しても、あまり成長が見込めないためです。

とりあえず3サイトくらい模写してみると、使える武器の幅がかなり広がるはずです。

参考までに、私が模写を行ったサイトを紹介します。

株式会社松風屋
Airbnb
ライターステーション
※このサイトはちょっと大きいし、動きが多め。でも調べればなんとかなります。私はなりました。

模写の次は何をすべき?

模写ができるようになったらとりあえずクラウドソーシングサービスでお仕事を探す方も多いかと思います。が、ちょっと待ってください。


こちらはLancersで見つけた案件ですが、プログラミング人気の高まりからか、最近はHTML/CSSコーディングのみだと50件~の応募が殺到する事態になっています。

もちろん数を打ってなんとか案件を獲得するのも一つの方法ですが、実績のある経験者もたくさん手を挙げている中に、実績もなく突入しまくるのは、少々非効率的です。

私も現在、この問題にぶち当たって悩んでいるところです。思いつくかぎりの打開策を紹介します。

SNSやブログからお仕事を募集する

クラウドソーシングサービスで実績のない人が案件を獲得できない理由は、信用がないからです。

逆に言えば、普段からあなたのSNSやブログを目にしている人であれば、あなたのことを信用し、仕事を依頼してくれるかもしれません。

もしくは、拡散されている情報を見て「この人が拡散しているなら、信用できるかも」と思って、覗いてみてくれるかもしれません。

練習がてらお仕事募集ページを作成し、SNSやブログから誘導してあげれば、案件をつかむチャンスは十分にあるはずです。

付加価値をつける

別のスキルを磨く

コーディングのみ案件では応募が殺到してヤバイことになっていますが、例えば「Wordpress導入」「デザイン込みで」「Javascriptも扱える方」「SEO対策込みで」のような条件だと、応募人数は格段に少なくなります。
Lancersを見てみる

勉強を重ねて別のスキルを取得するのも大いにアリでしょう。HTML/CSSを理解できたなら、Wordpress導入やJavascriptも、さほど苦もなく習得できるはずです。

もとからあるスキルを活かす

私はイラストが得意です。当サイトで使用しているイラストはすべて自作です。

「あなたのPRサイト作ります!イラスト料込み!」のようなアピール方法もできそうですし、イラスト制作で培ったセンスを生かし、デザインを勉強してみるのも面白そうです。

その他、文章が得意な方なら「あなたの魅力をアピールできるテキスト制作込み」など、自分のもともと持っているスキルを掛け合わせてみると、独自性も出て良さそうです。

合わせ技

私は合わせ技で行きます。つまり、

WordPressやJavascript、PHPの勉強を進め、
自作イラストを盛り込んだPRサイトを構築し、
それを「制作例」としてSNSやブログから売り込む

これでお仕事が見つからなければちょっと泣きますが、ただのコーダー見習い(実績なし)で終わるよりはマシかなと思いつつ、行動あるのみです。

まとめ

模写コーディングは最初は難しいですが、コーディングに慣れてパターンをつかめば、楽しいエクササイズみたいなものです。

ここで挫折する人が多いのも納得ですが、乗り越えれば確実に世界が広がります。

コーディングを諦めてしまったあなたも、もう少しだけ頑張ってみませんか?