iSara[イサラ]の模写コーディングでつまづくポイントを解説！

iSaraの模写コーディングは模写コーディングの定番でいろんなところでおすすめされていますよね。

僕も何種類か模写コーディングをしていてそろそろいけるかな？と思いiSaraの模写コーディングを行いました。

約1ヶ月、40～50時間ほど使いましたがなんとか満足いくものが完成しました！

模写をしていく中でつまづくポイントがいくつかあったので、これからiSaraの模写コーディングをする人が参考になるようこの記事ではつまづくポイントを解説していきます！

iSaraの模写コーディングとは

iSaraとはバンコクで行われているノマドエンジニア育成講座のことです。そのiSaraのLPが模写コーディングにいいと言われているんですね。

https://twitter.com/Keisukexlife/status/1068728920931856385?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1068728920931856385%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fkyoto-itsuki.com%2Fdesign%2Fisara_trace_programing_day1%2F

代表のケースケさんがツイートしてくれていますが、ルールを守れば模写コーディングをポートフォリオとして掲載できるという点も人気の秘訣です。

模写コーディングをしている人の多くは脱初心者を目指している人です。初心者でもできるレベルで、かつレベルアップするために必要な要素が網羅されてるのがiSara模写コーディングです！

iSara模写の難易度

完全な初心者には難しい

初心者にもできるレベルのLPと言いましたが、本当に勉強したての初心者には少し難易度が高いです。

具体的に言うと、ProgateのHTML、CSSの講義を全てクリアした程度だとまだ早いと思います。

Progateの講義を終えてから、難易度が低めな模写コーディングをいくつか自分の手で作ってからiSaraの模写コーディングに挑戦するのがいいと思います。

解決できないほどの難易度ではない

iSara模写は難易度が高めですが、技術的には基礎的なことを忠実に実装しているレベルですので挫折するほどではありません。

僕のレベルは実務経験なしProgate修了、模写コーディングやカンプ模写をいくつかこなした程度です。そのレベルでも、調べながら一通りの実装をこなすことができました。

ただ、知識は分からないことがあっても大丈夫ですけど、調べる力がないと進めることが難しいかもしれません。コーディングは調べることができればたいていの答えはあるので調べる力はしっかりとつけておきたいですね。

iSara模写にかかった時間

難易度よりも時間がかかることが大変

難易度は慣れてしまえばそこまでではないのですが、とにかくLPのボリュームが多いです。大体の人が初めてやるレベルのボリュームだと思います。

正直、何度か途中で挫折しそうになるレベルの量でした。進んではいるのにやってもやっても終わりが見えなかったのできつかったですね。

僕は期間は1ヶ月ぐらいで土日に3時間、平日週2ぐらいで2時間のペースで進めていました。合計で40～50時間ほどかかった計算になります。

進め方は一気かコツコツがおすすめ

これだけボリュームがあるので模写コーディングの進め方はしっかり考えておいた方がいいと思います。

一気にやる場合は1週間ほどがっつり時間をとってやるといいと思います。かなりしんどいと思いますが集中して取り組めるので一番早く終えられると思います。

コツコツやる場合は毎日ノルマを決めて着実に進めるといいですね。課題を設定してそれを達成できるとモチベーションにつながります。

毎週末だけで進めていくのはあまりおすすめではありません。期間が空くほど挫折する可能性が上がりますし、内容を一度忘れて思い出すと効率が悪いからです。

iSara模写でつまづきやすいポイント

前提条件を決める

まずはどこまで妥協するかをしっかり決めておきましょう。もちろん、ピクセルパーフェクトを目指すのもいいですが、合わないとこだわり続けているよりは進めた方が成長が早いです。

僕はこの辺りをルールとして決めて進めました。

フォントや文字幅、余白はできる限りピクセルパーフェクトにしていました。しかし、フォント、文字幅、余白で時間の半分とられたような気がするので少し緩くした方がいいかもしれません。

素材集めと模写コーディングの用意

まずは、素材となる画像を集めましょう。普通にimgタグで載ってる画像はすぐ手に入りますが背景に設定されている画像を手に入れるにはひと手間かかります。

例えば、最初の背景画像が欲しければデベロッパーツールを使って該当するHTMLタグに適用されているCSSまでたどるとURLが分かります。そこにアクセスすると画像が保存できます。

あとは、模写コーディングに必要となるChromeの拡張機能は一通り準備しておいた方がいいですね。

Bootstrapの使用

ところどころBootstrapが使われているようなので、模写コーディングでもBootstrapを導入してみました。

しかし、Bootstrapをあまり理解できていなかったために、どう組み込んでいいか分からず結局ほとんど使わずじまいでした。

Bootstrapを使わずとも実装はできるので無理に使う必要はないかと思います。使うのであればグリッドはわかりやすいので使ってもいいかもしれません。

PC版、タブレット版、スマホ版

iSaraはレスポンシブ対応していてPC版、タブレット版（2段階）、スマホ版の大きく4つに分かれます。

僕は一応4つともデザインは合うようにしました。ですが、コーディングの仕方によってかなり無理やり実装したとこもあり今思えばそこまでしなくても良かったかなと思ってます。

PC版とスマホ版は作った方がいいと思うので、その間のタブレット版は表示が大きく崩れなければ大丈夫とするのがよいのではないかと思います。

つまづきやすいデザインとアニメーション

CSSで言うと円の作り方、タイトル部分のカッコ、下向き三角形あたりが初見でつまづきましたね。

アニメーションはアコーディオンとスムーススクロールでもれなくどちらもつまづきました。

こちらの記事で実際に僕が実装したコードを載せてあるのでもしどうしても分からないとなった時は参考にしてみてください。

iSara模写で学べたこと

効率的なコーディング方法

iSaraの模写をしていく中で何度も何度も同じコードを書いている場面がありました。そういったコードは適用場所を変えてあげればコード量を減らしてげることができます。

また、wrapperなど要素を包む要素の使い方をあまり理解できていませんでしたが、ここで使うとうまく調整できるというのが理解できるようになりました。

このようにひたすら模写していったことで無駄の発見や不明瞭な点の理解が進んだので今後はもっと今回以上に効率を上げてコーディングできます。

要素を微調整する技術

iSara模写をしていく中でいたるところで微調整が必要になり、方法も何種類か使っていきました。

ちょっと要素を動かしたいなという時の引き出しが2倍ぐらいになった気がするので今後のコーディングでも役立ちそうです。

ボリュームのあるLPを作りきる忍耐力

これだけのボリュームのあるLPを模写コーディングとは言え作れたということはかなりの自信になります。

単体のページでiSaraを超えるようなボリュームのコーディングはそうそうないでしょう。（ないと思いたい）

時間はかかっても根気強く取り組めばやり切れるという忍耐力が付いたのは今後にプラスになりそうです。

まとめ

以上、iSaraの模写コーディングの解説でした。

想像以上に大変で何度か挫折しそうでしたが、少しずつ進めてモチベーションを上げ気合で何とか完成させることができました。

模写コーディングは知らなかった表現方法を学べるほかに、要素の制御の理解が深まったり、自分のコーディングのムダな部分が見えてきたりするのがいいと実感しました。

大変だと思いますが、iSaraは評判通り一度は模写しておいて損はないLPだと思うので、迷っているならぜひ挑戦してみてください！