初学者向けのプログラミング学習サービスProgate。
PCとネット環境があればすぐにプログラミングの勉強が始められ、レッスンの進捗が見える化されてるのですごく楽しく勉強が進められます。
でもそんな初心者に優しいサービスだからこそ、
- 「Progateから一歩出れば何をどうやったらいいかわからない」
- 「学んだことをどう活かせばいいかわからない」
- 「これで稼げるようになるのか不安」
という思いになるのはあるあるだと思います。というか、わたしがまさにそうでした。
そこで、Progate→実務までの課題として取り組んだのがサイト模写。この記事ではProgateのhtml・CSSのレッスンを修了した人向けに
- サイト模写のメリット
- サイト模写で深まるスキル
- サイト模写をする時の注意点
- オススメのサイト模写サービス
をまとめました。
【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日
見るからにオシャレなサイトデザイン・・・果たして同じように作れるだろうか・・・！
サイト模写に挑戦！自分の実力のなさを突き付けられる。
正解コードもないしヒントもない。とにかく提示されたデザインを作るために試行錯誤の嵐です。
というか、今まではProgateのサイト上でコードを書いていたので、まず作業環境を整えなきゃいけない。
最初はこのWordpress上でやってみようとしたけど、もともと使ってるCSSとけんかしちゃったりで上手くいかなかったのでCode Penで模写練習。
ブラウザ上でhtml・CSS・jsの挙動チェックができるのでめっちゃ便利でした！
サイト模写レッスンを終えて
- この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日
正直、こんなに時間がかかるなんて思ってなかった。マジで舐めてました。それだけにやりがい・取り組みがいに溢れたレッスンでした。
Progateが至れり尽くせりだった分、自分にたりないところ・理解があいまいだったところがみるみるあぶり出されていく感じで、ものすごくスキルアップに繋がったと思います。
せっかくなので Code Penの埋め込みにもチャレンジしてみる。
See the Pen サイト模写練習 by みてみて@Progate中 (@look_mam_look) on CodePen.
こうやって公開すると他の受講生とも書いたコードをシェア出来そうですね！
あれ？ブラウザ上ではちゃんとFavoriteが3つ横並びだったのにズレてる・・・！勉強しなおしだな・・・！
まとめ：【html・CSS】Progateの次はサイト模写でスキルアップを目指そう
- 問題解決力があがる
- webページの観察力があがる
- htmlとCSSの理解が深まる
- 「わかる」から「できる」へ自信がつく
と、Progateの後の腕試しとしてはピッタリのサイト模写。
まずは既存のWebページを模写する→デザインからのコーディングに挑戦など、自分のスキルに合わせてうまく組み合わせてみるのもいいですよね。
デザインが得意な人はAdobe XDでデザインを起こして製作してみるのもポートフォリオに使えるかと。
クラウドワークスやランサーズで案件を取るにもポートフォリオは必要になるので、収益化に向けても一石二鳥のレッスンだと思いました。
みなさんもぜひサイト模写やってみてください！
コメント