HTMLとCSSを本、progate、ドットインストールとかで１周して大体分かったので、サイト模写をやってみようかな。でも時間かかりそうだし、やってみないとどうなるかわからないし、時間のムダになったりもしたら嫌だな。
といった不安に応えるため、ボクがサイト模写を実際にやってみて浮かび上がった問題点や失敗だったなと思ったことをシェアします。
これから初めてサイト模写をするのならボクと同じような問題に直面すると思うので、参考にしてみてください。
サイト模写を思った以上にできないことを思い知る
お手本サイトをみます。そしてこれまでに学んだことを思い出したり、参考書やググったりしつつ、お手本サイトのコードは何も見ずに、ゼロからコーディングをします。すると、思った以上にコーディングが進まないことが分かります。
そこでコーディングを頑張って進めていく中で浮かび上がるのが、下記のような問題です。
- HTMLのクラス名の命名が予想以上に難しい。やけに悩む。
- 適切なHTML構造なのか不安がある。
- CSSの統一感がない、順序など、書き方がバラバラ、コード量がムダに多い。
- HTML、CSSにコメントを入れてないので、書いたコードが増えてくると、作業性、保守性が悪い。
- セクション毎のマージン、レイアウトが揃っていないので、統一感がなく、見栄えがかなり悪い。
- 要素の横並び方法のCSSをレスポンシブを考慮せずコーディングしてしまうので、レスポンシブ化の時にお手本通りにならなくて横並びの修正に苦労する。
進めてしまってからではもはや修正が大変すぎたりするので、上記の問題をサイト模写の準備段階と、サイト模写を始めてから早い段階で対策をしておくことが大切です。
見た目はなんとか再現できても、変な我流の癖が付いてしまったりもします。。
なので、サイト模写の前に、次の様なことに注意してみてください。
基本的なHTML構造をしっかり学習する。
HTMLの典型的な構造は割とパターン化されているので、ググってオーソドックスなHTML構造をメモっておく、コピペしておいて、テンプレとして持っておくのがおすすめです。
クラスの命名方法、規則もきちんと事前に理解しておく
クラスの命名規則も、パターン化されたHTML構造に大体含まれていて割とパターン化されているので、それを使う、参考にする。命名方法もググって学習しておきましょう。
事前にレイアウト、マージンなどを統一できるものは統一しておく
サイト模写を始める前にお手本サイトを見て、セクション毎にマージンやレイアウトがズレないように、マージンやレイアウトをある程度統一しておく。
手書きでデザインしておくか、Figmaのようなアプリでサイト模写前の設計をちゃんとしておきましょう。
サイト模写になかなか取りかかれないので焦るし面倒ですが、自分なりにちゃんとやっておくことで、後々修正に泣かされるよりも圧倒的にラクです。
はじめからレスポンシブ込みで書いていく
お手本サイトの画面幅を大きくしたり、小さくしたりして、レスポンシブの動きを確認し、その動きに合ったCSSを使い、同時にレスポンシブのCSSもメディアクエリに書いておきましょう。
サイトを上から順にコーディングしていくとして、例えばセクション１〜セクション３まであって、セクション１をコーディングする時、レスポンシブ化のコーディングも全て行ってから、セクション２のコーディングを進めるという流れです。
上記のようにせず、最初はパソコンサイズの見た目だけを模写し、一通りサイト全体をコーディングしたあとに、レスポンシブ対応のコーディングとしてメディアクエリを書いていくと、画面幅を少し狭くしただけでレイアウトが崩れたり、お手本サイトと全然違う挙動になったりするので、修正などがかなり煩雑な作業になります。
まとめると、サイト模写がちゃんとできるということは、お仕事として受注できるレベルで、学習としては最終目標に近いので、サイト模写の前にレスポンシブデザインを実習して手を動かしてしっかり学んでおくこと、マージンやレイアウトの設計をちゃんと準備しておくこと、HTMLのオーソドックスな構造を数種類テンプレとして持っておくことがサイト模写をスムーズに進める上で大切です。
また、サイト模写を何日か進めて、これはまだレベルがサイト模写できる状態じゃないなと思ったら、勇気がいりますが、思い切って中断して、今回取り上げた様なことを参考にして、自分の課題をメモなどに書き出して、しっかりとサイト模写に必要な学習や実習をして、またサイト模写にチャレンジしましょう。
それでは、サイト模写、とても大変ですが、頑張りましょう！
コメント