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

コーディング


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

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


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

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

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

  • なぜ模写が難しいのか・その解決法
  • 模写に使える便利ツール
  • 模写するサイトの選び方
  • 模写の次は何をすべき?

を解説します。

なぜ模写が難しいのか

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

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

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

  • とりあえず上から順番に作ろう(手順がわからない)
  • ヘッダーのmarginはこれくらい?(目測に頼ってしまう)
  • divが入れ子すぎるけど大丈夫?(標準的な構造がわからない)
  • マージンが効かないけどなんで?(タグの規則がわからない)
  • 不安になってきた
  • 何が書いてあるかさっぱりわからない
  • この通りに書けるようにならなきゃいけないの????
  • 無事挫折

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

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

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

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

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

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

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

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

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

  • ゴールとなるデザインが先に示されており、目標がわかりやすい
  • HTML書き起こしから細部調整まで、順に説明される
  • なぜこのコードが必要なのか、丁寧に補足が入る
  • レスポンシブ対応のための微調整までカバー

つまり、実際にゼロからサイトを構築する手順が、これ一冊でかなり具体的にイメージできるようになるんです。HTML/CSSの基礎はおさえている方であれば、この一冊をまるまる模写してみるだけで、格段にレベルが上がるはずです。めっちゃおススメ。

ひとつだけ注意

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

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

模写に使える便利ツール

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

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

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

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

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

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

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

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

模写するサイトの選び方

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

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

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

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

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

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

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

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

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

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

やってもOK!

  • 上記サイトを模写コーディングする
  • html/cssのソースを見て答え合わせをする
  • 模写したものをポートフォリオに載せる(必ず既存サイトの模写であることを明記してください)
これは禁止です

  • サイトやイラストの自作発言
  • ポートフォリオ利用以外の目的の二次配布

模写の次は何をすべき?

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


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

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

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

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

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

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

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

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

付加価値をつける

別のスキルを磨く

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

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

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

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

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

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

合わせ技

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

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

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

2019/11/7 追記

上記の通り、さらに勉強を進めてサイトを制作し、それをポートフォリオとして活動していたところ、ご縁がありましてWeb制作会社に就職することができました(2019年8月)。やはり行動あるのみです。

まとめ

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

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

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