くまだどうも、くまだです。
Web制作の勉強する上でProgateなりドットインストールなり勉強して、それが終わったら何かしら次の学習をすると思います。その次にお勧めなのは、オリジナルのサイトを作るか、Webサイトをデザインカンプからコーディングすることから始めるのがいいです。
コードの写経とデザインカンプからのコーディングでは勉強のやり方の方法が違いますので、その辺は区別をつけてやるといいです。その理由としましては、以下のような理由があります。
写経と模写の勉強の違い
- 書き方・文法を知らなければ書くことはできない
- 書き方・文法を知る上では、写経は有効
- 写経よりは模写が有効（ただし、デザインカンプからの模写）
- 架空のオリジナルサイトor実案件が一番学べる
下の記事で、私が実際に通ったスクールの感想を述べていますので、こちらもよかったらどうぞ。
コードの写経のメリット・デメリット
コードの写経は、いわゆるテキストや教材などに書いてあるコードをそのまま書き写すことです。（人によって定義は違うかもしれませんが、私はそれが写経だと思います）
コードの写経は意味ないよーという人もいますが、個人的には、文法を知る上ではコードの写経は有効な学習だと思っています。
そもそも書き方が分からない、例えばWebサイトでよく使われるハンバーガーメニューだったりローディングアニメーションだったり、そういったものも学習すれば作れると思いますが、そもそも書き方が分からないと作りようがありません。
作り方が分からず、いつまでも前に進まないというのでは効率が悪いです。まずは見様見真似、すでに完成品があるものを写経でもいいからまずは書いてみる。
もちろんただ書くだけじゃなくて、なぜそのプロパティを使っているのかもちゃんと理解しながら作業するのがお勧めです。ただ漠然と書いてあるものを書くだけでは意味がありません。
コードの写経のメリット・デメリット
- Webサイトでよく使うパーツの作り方を学習には有効
- 基本的にインプット学習
- 写経は、漠然と書くと覚えられない
- そもそもインプット学習なので、実績にならない
デザインカンプからコーディングするメリット・デメリット
既存のサイトを検証ツールで開いて、模写するやり方でもいいのですが、個人的にはより実務に近い形でデザインカンプからのコーディングをお勧めしています。（ヒヤリングからデザインカンプ作成の流れを省略する形）
主なデザインツール
- PhotoShop
- Illustrator
- Adobe Xd
何でもいいのですが、それらのカンプから必要な数値を取り出してコーディングしていく流れは、実務でもよくある話です。
Google で探せば無料で使えるものがあるので探してみると良いでしょう。
デザインカンプの形式が、XD、Photosho、 Illustratorなどの形式である以上、同時に、XD、Photosho、 Illustrator など使えるようになっておかなければなりません。
最も、コーディングするだけであればデザインソフトの深い知識はいりませんが、基本的な操作は勉強しておくべきです。
ワイヤーフレームやデザインカンプなどの作成も、自分で作らなければならない時に備えてやはり使えておくことにこしたことはありません。
架空のサイトのデザインカンプがあるなら、それを何度も練習してこれぐらいのボリュームだったら、自分だったらこれくらい時間がかかる、というのも計ることができます。自分の実力も試せるし、おそらくコーディング途中で詰まるので、それの問題解決能力も養われます。
デザインカンプからのコーディングのメリット・デメリット
- デザインカンプからのコーディングが実践に近い
- 問題解決能力が養われる
- 時と場合によっては挫折する
- デザインソフトの基本的な使い方も学習しなければならない
デザインカンプからコーディングは実績にならない？
実績の定義によりますが、実際に Webサイトを作ってお金を稼いだ、というのを実績と定義するならば、実績にはなりません。
個人的には実績にする、というのはなかなか悩ましい点ではあります。実績がないからやる意味がない、というわけでは全くもってありません。自分はこれだけのWebサイトを作ることができるという証明になりますし、なにより自信になります。
それだけでは0から1を達成するのは難しいです。
ただ、全くデザインカンプからコーディングをしたことがない状態で案件をやるのと、何度も練習してから案件をやるのとでは天地ほどの差がありますので、実績にならなくてもやるべきです。
デザインカンプからコーディングが、なんのスキルの証明になるのかというと、デザインカンプやXD、illustrator形式はなんでもいいのですが、
デザインカンプからコーディングで必要なスキル
- デザインカンプから数値を読み取るスキル
- デザインツールの基本的な操作
- HTML CSS などを使ってコ―ディングするスキル
- WordPress化も想定するなら、WordPressのスキル
一口にカンプからコーディングするといってもこれだけのスキルを要することになります。
Webサイトを作ることができるのは、これらのスキルは最低限備わっているだろうという証明にはなります。（ただし、コードの中身はまた別の話ですが）
オリジナルのWebサイトをつくる
写経はインプット、そしてオリジナルのWebサイトを作るのは、完全アウトプットだと思います。
素材の選定やペルソナ設計からワイヤーフレーム作成、デザインカンプ作成などコーディングだけでなく、やることがたくさんあります。
静的サイトとしてコーディングするだけではなくて、そこからさらにWordPress化するなどして、データの管理は GitHub が使えれば、素材選定からデザインカンプ作成、WordPress化までの一連の流れを学習することができます。
より実践に近い形だと思います。
実際にはお客さんからヒアリングして～の流れがあるのですが、まあそういうものがあったと想定して作るのが一番アウトプットになるのかなと思います。
結論としては、写経と模写をする意味は、
- コードの写経は、コードの書き方、パーツの作り方を学ぶなどのインプット学習
- コードの模写（デザインカンプからのコーディング）は、アウトプット
ここまで読んでくださりありがとうございました。