【html・CSS】Progateの次はサイト模写でスキルアップを目指そう

初学者向けのプログラミング学習サービスProgate。

PCとネット環境があればすぐにプログラミングの勉強が始められ、レッスンの進捗が見える化されてるのですごく楽しく勉強が進められます。

【評価】無料でどこまで？Progateに未経験の主婦がチャレンジ

国内外に会員数を増やしてきているプログラミング学習サービスProgate。未経験者でもできる？無料でどこまでできる？などをまとめました。

でもそんな初心者に優しいサービスだからこそ、

「Progateから一歩出れば何をどうやったらいいかわからない」
「学んだことをどう活かせばいいかわからない」
「これで稼げるようになるのか不安」

という思いになるのはあるあるだと思います。というか、わたしがまさにそうでした。

そこで、Progate→実務までの課題として取り組んだのがサイト模写。この記事ではProgateのhtml・CSSのレッスンを修了した人向けに

サイト模写のメリット
サイト模写で深まるスキル
サイト模写をする時の注意点
オススメのサイト模写サービス

をまとめました。

【html・CSS】サイト模写のメリット
サイト模写で深まるスキル
サイト模写をする時の注意点
サイト模写のオススメレッスン
まとめ：【html・CSS】Progateの次はサイト模写でスキルアップを目指そう

【html・CSS】サイト模写のメリット

Progateのhtml・CSS道場コースでは「指示書」に従ってコーディングをしていきました。

指示書だけではわからないところはディベロッパーツールを使ってコードを確認して進めていきましたが、この作業がサイト模写に近いです。

つまりサイト模写とは、すでに出来上がっているwebページをhtmlで再現していくことになります。

ディベロッパーツールを使えば、普段PCやスマホで見ているWeb上のページがどうやって作られているのか？htmlやCSSはどう書かれているのか？を簡単に確認できます。

なので、このコードの通りに書いていくだけで同じページが出来上がります。サイト模写をすると、

Webページのデザイン構造
表示やリンクの仕組みや設計方法
細かい調整のために施されている工夫

などを学べるメリットがあります。

へぇぇぇ～～！こういうふうに設計されてるんだ・・・！

というわけで、普段見ているサイトのトップページやLPなどをひとまず模写してみるのがいいかと思います。

サイト模写で深まるスキル

Progateでは「答え合わせ」があったけど、実際のコーディングでは「正解」は用意されてないです。なので、

合っているのか、間違っているのか
どうやればイメージ通りになるのか
どう調べれば解決に近づくのか

という問題解決能力がものすごく試されます。なので身につくスキルとしては

デザインの観察力・俯瞰力
html構造への理解
padding調整のpx感覚
プロパティの理解
ググった時によく出てくるサイト情報
どういうワードで検索すればいいかという「ググり力」

がものすごく上がったなぁという実感がありました。

サイト模写をする時の注意点

とはいえ、実際にWeb公開されてるページを模写しようと思うと、ついつい「F12キー」を押して「正解のコード」を見てしまいがちなんですよね・・・

そうなると、なんでここで<div class=”container”>を入れているのか？とか、paddingはコピペで済ませちゃったりと「思考停止」のままでもそれなりに完成まで持っていけちゃいます。

なので、サイト模写をする時は

ディベロッパーツールは使わない
とにかく試行錯誤してみる

意識が大事。やっぱり自分の頭をしっかり使って考えながらやらないと身につかないんですよね。

そこでオススメなのが、ページからではなくデザインからコードを書いていくスタイルのサイト模写です。

サイト模写のオススメレッスン

Adobeが提供しているAdobe XDというサービスを使うと簡単にデザインやサービスのプロトタイプをつくれるそうです。

そこで作られた「デザイン」をhtlmとCSSで実際に表現していく模写がめちゃくちゃ勉強になりました。

わたしが利用したのはmasaya(@masa_THA)さんが、Progate修了者向けに作った模写レッスンです。

先ほど、ProgateのHTML&CSS修了者向けのコンテンツをリリースしました😁
今回のコンテンツは、
しみー@TechBaton(@shoot4343)さんに協力して頂き何とか辿り着きました！
本当にありがとうございました！
ぜひ多くの方に使って頂き、FBを頂けますと幸いです。https://t.co/t2ijdYQOZe
— masaya @Singapore / Progate(Lv.191) (@masa_THA) 2018年10月20日

https://note.mu/masaya_m/n/n30e91ab09e54

見るからにオシャレなサイトデザイン・・・果たして同じように作れるだろうか・・・！

サイト模写に挑戦！自分の実力のなさを突き付けられる。

正解コードもないしヒントもない。とにかく提示されたデザインを作るために試行錯誤の嵐です。

というか、今まではProgateのサイト上でコードを書いていたので、まず作業環境を整えなきゃいけない。

最初はこのWordpress上でやってみようとしたけど、もともと使ってるCSSとけんかしちゃったりで上手くいかなかったのでCode Penで模写練習。

ブラウザ上でhtml・CSS・jsの挙動チェックができるのでめっちゃ便利でした！

Attention Required! | Cloudflare

サイト模写レッスンを終えて

このh2はdivの中に入れるの入れないの？
っていうかこれh2で合ってるの？
うまく中心寄せにならない・・・
というかフォントが変わらない・・・
オシャレな画像も用意しないと・・・
背景画像はどこからアップロードすれば！？

などなどマジで30時間くらいかかってなんとか形に・・・

masaya（@masa_THA)さんの模写サービスと格闘すること数日。Wordpressでアップするのはひとまず断念、（フォントが変わらないとかいろいろ不備あるけど）Codepenでなんとか形にできた！やればできる！
（アイコンがポップで浮いたｗ）
独学でHTML・CSSを勉強している方へ https://t.co/Rl49RyWU3d pic.twitter.com/xbaBGh9tQx
— みてみて@Progate中 (@look_mam_look) 2018年10月28日