見出し画像

模写コーディングで失敗したあとの学習方法〜経緯から実践まで〜

ユカリ

はじめまして。Webデザイン＆プログラミングを勉強中のユカリです。

Webデザインの勉強中、初めて模写コーディングをしたときに全くできず、見事に失敗に終わりました。全くできない＝基本となるレイアウトも作れませんでした。ある程度時間を掛けて勉強してきたのに、枠組みすらまともに作ることができなくて、とても自信を無くしました。

その後、学習方法を変えて、デザインカンプからコーディングできるレベルにまでなりました。ここまできて、ようやく中身を深く勉強する体勢が整った感じです。

私自身まだまだ勉強中で、アドバイスなどできるような立場ではないのですが、同じように自信を無くしてる方が居たら…そんな方たちの力に少しでもなれたらと思い、noteにまとめることにしました。


０．私が目指していた模写とは

ソースコードを写すのではなくて、自分で考えて作れるようになることです。ある程度作れて、分からないところだけソースコードを確認する、というのはアリだと考えています。


１．模写をするまでにやり終えていたこと

・Progate HTML/CSS 学習コース・道場コース
・30DAYSトライアル1st Day17まで
有料になる前のものなので、現在は詳細を見ることができませんが、「ゼロから始めるコーディング学習」・「コーディング基礎学習〜環境設定編」・「Bootstrapの基礎〜LP製作編」がDay17までの内容でした。
・くりのすけさんのnote


1-1. Progateと30DAYSトライアルで学習

ここまでの学習で、言われた通りにコーディングできるようになっていたし、作ったあとに多少のアレンジもできるようになっていました。…が、今思えば、できる気になっていただけでした。


1-2. くりのすけさんのnoteに挑戦

模写が不安だったので、くりのすけさんのnoteに戻ってみました。勉強を始めたころは全くできそうになかったものが、説明を見ながらだけど作ることができて、それだけでもすごい達成感！確実に成長してると感じて、模写もできそうな気がしてきました。


２．模写に挑戦して失敗

2-1. WordPressのWrireを模写

明日も頑張ろうって明るく終わってるけど、実はかなり心が折れていました。基本的なところをやり直そう…と思って、模索し始めました。


2-2. ぴか兄さんのツイート

大事なことに気づかせてもらいました。ここにたどり着くまでに4日。模索中も手を動かしていないと不安だったので、ProgateでJavaScript・JQueryの学習を進めていました。


３．レイアウトだけ背景色をつける練習

3-1. まずは模写で失敗したサイトからやり直し

まずレイアウトと背景色、それからoutlineをつけていきました。


3-2. HTML&CSS コーディング・プラクティスブック

Kindle Unlimitedで無料！登録者以外でも800円とお手頃！
デザインカンプと指示書に従い、Webページをコーディングしてみる実践シリーズです。
第１弾ではAdobe XDで作成されたコーポレート系サイトのデザインカンプを元に、カンプの解析、パーツの抽出を行い、「どうしてこのように設定するのか？」を踏まえながらコーディングしていきます。


3-3. しまぶーさんの拡張機能

とても便利で感動しました。まずは自分の手を使ってレイアウトを作れるようになって、それからこの機能を体験したので感動もひとしおでした！


４．デザインカンプからのコーディング練習

4-1. HTML&CSS コーディング・プラクティスブック

レイアウトの練習でも使った書籍で、引き続き中身まで作りました。


4-2. KROWL

デザインカンプからコーディングすることの楽しさを知り、続けることにしました。私が実践していたのは、完成サイトを印刷して、XDから得たサイズやパーツ間の距離、sectionやclassの割り振りを考えて記載することです。できるだけ少ない（無駄のない）記述で構成できるように考えました。

難易度別に課題が3つ用意されていて、それぞれの課題のポイント（学習目標）も記載されています。どんな技術を学ぼうをしているのか、事前に知ることで理解が深まりました。


ここまでできたら、そのあとの勉強がぐんと楽しくなります！！

初めてのnoteで、読みづらいところもあるかと思いますが、参考にしていただけたら嬉しいです。
最後まで読んでいただき、ありがとうございました。