こんばんは、Yukiです。
今回は「模写コーディングをした方がいいよ〜ってよく聞くけど、実際どうゆう手順でやったらいいかわかりません。教えてパイセン！」
こんな疑問に答えていきます。
【本記事の内容】
- 模写するサイト選び
- 模写コーディングの流れ
を解説したいと思います！
Progateなどで基礎を終えたらwebサイトの模写をしたほうがいいってよく聞くけど具体的にどうやったらいいのか？ってあまり聞きませんよね。
僕も最初何していいのか分からなくてかなり調べました。。。
なので今回は模写コーディングの情報を共有していきたいと思います！
スポンサードサーチ
模写するサイト選び
まずは模写するサイトを選びます。
しかしいざ選ぶとなるとどうゆうサイトを選んだらいいのか難しい。。。
そこで模写するサイトを選ぶポイントを３つお教えします！
- 評価されているLPを見つける
- ランサーズでよくある案件を探す
- 見た感じ７割くらいコーディングできそうなものを選ぶ
では詳しく見ていきましょう。
評価されているLPを見つける！
まずは評価されているLP（ランディングページ）を選びましょう。
＊LPとは縦長1ページのWebページのことです。
なぜ評価されているLPが良いのかというと２つ理由がありまして
１つ目が評価されているLPというのは、ソースコードが綺麗です。ソースコードが綺麗なサイトの模写をしていると細かいHTMLタグの適切な使い方が分かってきて非常に勉強になります。
２つ目は下層ページが大量にあるホームページよりも、縦長の1ページで完結するLPの方が学習の効率が良いからです。
＊LPのコーディングに慣れてきたら、ホームページのコーディングもやるのが良いです。
じゃあその評価されているLPはどこで選べばいいのか？と言うと下記のサイトにまとまっていますので、下記のサイトから選びましょう。
ランサーズでよくある案件を探す
ランサーズなどのクラウドソーシングでよくある案件を探すのも１つの手です。
理由としては、業種ごとによく使うHTML、CSSの型みたいなのがあるので、最初はある程度業種を絞ってコーディングするのが効率が良いからです。
クラウドソーシングだと特に美容系、広告系、ECサイトのコーディング案件なんかは非常に案件数が多いです。
この方法はフリーランスを目指してる方には特にオススメですし、Web制作会社で働きたいと考えてる方も何度かクラウドソーシングで実務をこなす経験を積むのは非常に価値のあることなのでオススメです。
見た感じ７割くらいコーディングできそうなものを選ぶ
模写コーディングする際の選ぶ基準として、非常に重要なのがこの「見た感じ７割くらいコーディングできそうなものを選ぶ」ということです。
なぜなら、難しすぎるものを選んでも挫折してしまう可能性が高いですし、かと言って簡単すぎるものを選んでも成長できない。。。
じゃあどこを基準に選んだらいいんだよ！という基準として「見た感じ７割くらいコーディングできそうなものを選ぶ」のが最適なんです。
見た感じ７割くらいコーディングできそうなものというのは具体的言うと、模写するサイトを見た時に「ここまでがheaderでここまでがmainだなー。ここはflexbox使って横並びにして、ここはposition:absolute;使えばいけるかな」
みたいなのが７割くらい分かるといった感じです！
模写コーディングの流れ
では次に模写コーディングの全体的な流れを押さえておきましょう。
- 模写するサイト選び
- レイアウトをざっと紙に書き出す
- コーディング
- 最後に見本のソースコードを見て答え合わせ
全体の流れはこんな感じです。
模写するサイト選びは先ほど解説したので、２番から詳しく解説していきます。
レイアウトをざっと紙に書き出す
模写するサイトを決めたら、紙にざっとレイアウトを書き出しましょう。
こうやって紙に書き出すことで、頭の中でどこに何を使えばいいのかの情報が整理できてコーディングの作業が捗ります。
ここまできたら実際にコードを書いていきましょう！
コーディング作業
コーディング作業では「見本と全く同じにする」ということを意識してください。
わからないところはできるだけ見本のソースコードは見ずに、技術書やググって調べながら作りましょう。
こうすることでコーディングの力と共に調べる力がつきますし、実際のコーディングの案件をこなすのと近い形で模写コーディングを行うことができて非常に勉強になります。
先ほど見本と全く同じにすると言いましたが例外がいくつかあります。
- padding,marginはなんとなくあってればOK。（最初のうちは多少の余白のズレは気にしなくていいです）
- 色も同じっぽければOK（模写では完全に同じ色にしなくていいです）
- 字体（font-family）もそれっぽければOK（模写では気にしなくてOK）
今あげた３つは模写を始めたばかりの頃は気にしないで進めましょう。
はじめの頃はこうゆう細かいところよりも大まかなコーディングの技術を学ぶ方が大事です。
模写５個くらい終えてきたら、細かいことにも気を使ったら良いかなと思います。
＊ちなみに実際のコーディングの案件では余白や色、字体は完全にデザインと同じにしないといけないので注意してくださいね。
最後に見本のソースコードを見て答え合わせ
模写コーディングを終えて、だいたい見本と同じようにできたなと思ったら最後に見本のソースコードを見て答え合わせをしましょう。
模写をやっている人でも、コーディングした達成感から答え合わせをせずに終えてしまう人が多いのですが、これは非常にもったいないです。
なぜなら、先ほどもお話しした通り評価されているLPは基本的にソースコードが綺麗です。
そしてコーディングをするならただデザインと同じ通りに作れるだけでなく、HTMLタグを適切に使うなどの綺麗なコードを書けることが大事になってきます。
そこで、実際に自分が書いたコードと見本のコードを見比べると「ここは本当はこうやって書くのが良いのかー。とか、divばっかり使うのは良くないんだなー」などが分かり非常に勉強になるのです。
なので、めんどくさがる気持ちを押し殺してコーディングを終えた後はぜひ見本のソースコードを見て答え合わせをしましょう！
スポンサードサーチ
まとめ：模写コーディングは超大事
最後に記事のポイントをまとめます。
- 評価されているLPを選ぼう！
- 選ぶときの目安は７割くらいコーディングできそうなものを選ぶ
- 模写が終わったら見本のソースコードを見て答え合わせ
こんな感じです。
模写コーディングはWeb制作をやっていく人にとってはとても重要になってきます。
ここでしっかりと知識やスキルを蓄えれると、実際のコーディング案件もそこまで苦労せずにこなせるようになるかと思います。
逆にここで手を抜くと後で苦労するので、模写コーディングはしっかりやりましょう。
理想としては8〜10くらいのサイトを模写するのが良いかと思います！
大変ですが頑張りましょう！
今回は以上です。
[…] ＞Webサイト模写のやり方とポイント […]