【弊社スタッフがやってみた】模写レッスンのコーディングに何分かかる？

2024年3月18日 12:21

「Web制作の実務をこなせるレベルになるには、どのぐらい学習すればいいですか？」

そのようなご質問をよくいただきます。ただ、これはとても答えづらくて…日々の学習時間やタイピング速度、英語力などによって、かなりの幅があったりします。

そこでひとつの目安として、弊社スタッフ（Web制作会社での勤務経験あり）が、模写コーディングを実際にやってみた動画を公開してみます。このぐらいの速度で模写できたら…実務レベル！と言っても良いような気がしますね。

模写コーディングのルール

今回の「やってみた」では以下のようなルールで作業してもらいました。

ではその結果やいかに…。3つのサイトを模写してもらったので、順に結果を発表していきますね。

まずは最初の模写レッスンである「実践！ポートフォリオサイトを模写しよう」に挑戦していただきました。

ワンカラムでレスポンシブ対応も不要、フレックスボックスがなくても組める、シンプルなレイアウトですね。作業の様子は、数倍速の動画に仕上げてみたのでぜひご覧ください。

コーディング完了までの時間は…「29分55秒！」。ほぼほぼ30分での完成となりました。あくまでも目安ですが、1時間に満たないぐらいの時間で完成できると良さそうですね。

次に挑戦していただいたのは「実践！アプリのランディングページを模写しよう」のコーディング。

ポートフォリオサイトに比べると、フレックスボックスやメディアクエリーの知識が必要になるため、結構な時間がかかりそうなレイアウトです。

では作業の様子を数倍速の動画でご覧ください。

さて、その結果は…「1時間23分48秒！」でした。それなりの時間がかかりましたね。ご自身でもチャレンジしてみて、現時点でのレベル感を把握してみるといいでしょう。

なお、レッスンではモバイルファーストで組み上げていますが、弊社スタッフはPCサイトから組み上げていって、最後にモバイルへの対応をしていますね。このように HTML/CSS の組み方は一通りではないので「正解」にこだわりすぎずに、手を動かしながら学習をすすめていくと良いでしょう。

最後は「実践！ECサイトを模写しよう」のレッスンを模写していただきました。なお、レッスンでは「トップページ」と「下層ページ」の模写をしていますが、今回の企画では「トップページ」のみを仕上げていただきました。

トップページはヘッダーと商品一覧だけなので、フレックスボックスやグリッドレイアウトを理解していればささっと実装できそうなレイアウトですね。

では作業の様子を数倍速の動画でご覧ください。

コーディングにかかった時間は…今回最速の「18分18秒！」。最後に模写してもらったサイトなので多少慣れてきた、ということもあるようですが、20分弱での完成となりました。

動画をみると、VS Code のマルチカーソルを駆使して編集しているのがわかりますね。コーディングに慣れてきたら、エディタの便利機能やショートカットキーも多用していくといいでしょう。

最後に協力していただいたスタッフに感想を聞いてみました。

「実はがっつり模写をしたことがなくて…。自分はどのくらいかかるのだろう...と思っていたので、この機会に知識の復習や、実力を確認することができてよかったです！」

HTML/CSS の学習はそれなりに時間がかかるのですが、インプット過多になりすぎるのも問題です。ある程度まで来たら、今回のようなアウトプットをする機会を積極的に設けていくのが良さそうです。

今回は弊社スタッフによる模写コーディングの実際を紹介してみました。「どのぐらいのスピードで模写できればいいのだろう…？」と感じていた方はぜひ参考にしてみてください。

なお、今回と同じことをご自身で試してみた結果、今回の結果より遅くても気にすることはありません。大事なのは現時点でのレベルを把握することですね。

結果はひとつの目安として参考にしつつ、もし時間がかかってしまった人は、理解が浅かった箇所を洗い出すきっかけにしてもらえればと思います。

今回のような体験レポートはまた企画していきたいところです。お楽しみに！

この記事が気に入ったらサポートをしてみませんか？