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

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

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

Airbnbのサイト模写チャレンジしてたけど、想像以上の難しさに脳みそがとけそうなので一旦休憩、、まだヘッダーも未完成だけど大丈夫なのか？？謎過ぎます

— ガタガタ@webクリエイター (@gt_gt_gl) May 1, 2019

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

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

Airbnb LP模写にリベンジしました。2日ほどかけてレスポンシブ対応まで再現できるまでになりました✊✊
いよいよ実務に入ってみようかな。ドキドキです pic.twitter.com/2skqjEpA37

— ガタガタ@webクリエイター (@gt_gt_gl) July 15, 2019

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

を解説します。

なぜ模写が難しいのか

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

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

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

考えてみれば当たり前なのですが、家を建てるのにいきなり土台を作って柱を立てて壁を作って……と、端から順番に完ぺきに仕上げていく大工はいませんよね。

まず大まかな全体像を作って、細部は調整しながら作り上げていくのが、ものづくりの常です。

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

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

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

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

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

つまり、実際にデザイナーさんから受け取ったデザインをもとに、サイトを構築する手順にかなり近いのです。これ一冊でかなり具体的にコーダーの仕事がイメージできるようになっちゃいます。

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

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

模写に使える便利ツール

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

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

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

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

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

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

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

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

模写するサイトの選び方

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

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

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

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

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

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

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

2019/11/23

※上記で紹介したAirbnbのサイトが、ログインしなければ見られなくなってしまいました。。似た感じのデザインで、初心者でもできそうなページを見つけてきましたので、こちらをぜひ使ってみてください。
Airbnb – 出張
背景に動画を使っているところがありますが、適当な写真やキャプチャで代用してもOKです。

2019.10.31補足：私の作ったサイトは模写OKです！

私の自作したイラストお仕事募集サイトは、模写OKとします。また、模写コーディング成果物としてポートフォリオに使用するのも可とします。下記条件を厳守の上、ご活用ください。

模写の次は何をすべき？

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

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

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

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

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

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

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

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

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

付加価値をつける

別のスキルを磨く

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

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

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

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

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

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

合わせ技

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

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

まとめ

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

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

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

あわせてどうぞ

【お金をかけない】html/css初心者から模写コーディングまでの全学習工程

私はhtml/css学習を始めて4ヶ月で、未経験ながらwebデザイナー＆コーダーとしてweb制作会社に就職しました。自分なりに情報を集め、お金をかけず効率的に勉強したおかげです。その学習方法を紹介します。実録ですので、再現性はかなり高いはずです。

【web制作を】模写コーディングができるようになったら、次にすべきこと【仕事にする】

html/css勉強の仕上げとして模写コーディングを行う人は多いですが、その次に何をするか考えていますか？この記事では、模写コーディングができるようになったらやっておくといいことを挙げます。この中から2つくらいは実践しておくと、各段に実力がアップするはずです。興味のあることを選んで、やってみてください。

初心者HTMLコーダーは無理にJavascript・PHPを学習しなくてOK！既成プログラムを上手に活用しよう

「HTML/CSSはなんとなく書けるようになったけど、Javascriptとか勉強しなきゃいけないのかな」…焦って学習し始める必要はありません。先人たちが作ってくれた、簡単にサイトに導入できるスクリプトを上手に使い、制作物の幅を広げましょう！既存プログラムに触れることは、初学者にとってはメリットです。

【実力をつけて】コーディング模写ができるようになったら、どんな自作サイトを作ればいい？【案件獲得に繋げる】

html/css学習者がコーディング模写の次にやることとして、よく「自作サイトを作ってみること」が挙げられますが、どんなサイトを作ればよいか分からない人もいるはず。そこで、コーディング初心者が初めてサイトを自作するときのポイントを紹介します。