こんにちは。ヒサノアスカ（@AsukaHisano）です。
2017年の11月末に現地採用の仕事を辞めてから、あっという間に1年が過ぎました。
2018年中は仕事らしい仕事はせず、のんびり好きなことをやりたい放題やってきたのですが、銀行の残高を見るのがちょっとずつしんどくなってきたこともあって、新しいキャリア構築のためにようやっと重い腰を上げました。
そこでまずは小さなプロジェクトを獲得するべく＆自分の勉強のためにとLP模写を始めることにしたのですが、ググって得た知識ベースで試行錯誤したところ、いろいろと気づきがありまして。
せっかく気づいた・思いついたことがあるのなら今後しっかり役立てなければ損だ！ということで、忘れず活用するために備忘録として記事に残します。
そもそもLP模写って？
LP模写というのは、ネット上にあるサイトを、基本目視でそっくりに複製することを指します。
当然ですが、サイトをそのままダウンロードするのでは意味がありません。
手本となるサイトを睨み、自分の手でコードを打ってそっくりになるように頑張ることで、より実践的なHTML・CSS・JavaScriptの実装練習ができるというわけです。
LP模写の基本的なルールは以下のとおり。
- 画像は模写元サイトのものを使用する
- ソースは見ない
- でも色・フォント・サイズはチェックしてもいい
- 若干のズレや誤差は許容する
ピクセル単位でぴったりにできるのが理想ですが、そこまでするとソースを見てコピらない限り永遠に終わらないので、ある程度ざっくり進めればOK。
で、これらのルールを元に2日ほどかけてLP模写をやってみたわけですが、やっぱりはじめてということもあって、なんだかんだといらないことをやっていたり、逆にやるべきことをやってなかったりと実に無駄が多く、そのせいで時間のロスが大量発生していたことに気づきました。
というわけで、やってから気づいたことをベースにした、今後LP模写をする時に忘れちゃダメな手順やコツを一挙大公開！
素材が全部そろってることを確認する
サイトから画像を引っこ抜く系のツールで引っこ抜けるのは、基本的にimgで指定されているファイルのみ。
つまり背景画像(background-image)として指定されているファイルは引っこ抜けません。
背景画像はソースを確認して個別にDLする必要があります。
必要な素材が全部そろっているか否かで、模写作業がスムーズに進められるかどうかが分かれます。主に作業効率的な方面で。
たまにトラップ的に背景画像が仕込まれていることもあったりはするので油断はできませんが、初見で画像だとはっきりわかるものについては、きちんとすべての素材がそろっていることを確認する癖をつけましょう。
サイト構成をきちんと把握する
Webサイト作成はHTMLによるレイアウトがとても重要です。
なのでレイアウトを把握した上でサイトを作る必要があるのですが……今回はめっちゃざっくり頭の中で把握しただけでコーディングを始めたので、後から実に大変な目に合いました。
最近ではサイトのレスポンシブ対応は必須なので、PCとスマホそれぞれのレイアウトを把握する必要があります。
特にPCとスマホではどの要素がどう変化するのかをきちんと把握しておかないと、基本的なHTMLやCSSの設定すらできません。
というのも今回模写したサイトがブロック要素の高さをがっつり指定してる系（横幅や高さを変えても要素の縦の長さが変わらない系）だったのですが、それを理解してなかったために「え、これpaddingとか余白とかどうなってるの!?全然合わないんだけど!?」と変なところで右往左往する羽目になりました……
というわけで、事前に把握しておくべきは以下の2点。
- PCとスマホでのレイアウト
- どこのサイズが固定されているのか
- サイズ変化でどう変わるのか
で、このレイアウト把握、将来的に自分でLPサイトとか作る際の資料にもなるので、きちんと残しておけば役に立つんじゃないかと、後になってから気づきました。
というわけで、次回からはきちんとサイトのレイアウト考察も手元に残すことにします。
HTML構築が終わるまでCSSには絶対手を出さない
自作サイトを作る時もよくやらかしていた失敗ですが、HTML書いてる最中に「メニューの横並びだけ」とか「この要素のサイズ調整だけ」とか言い訳しつつCSSを書き出すと、絶対に対象ブロック全部を完成させたくなってしまいます。
で、そうすると1か所ずつ順番に作りこんでしまうので、作業効率が恐しく落ちる。
なのでどんなに気になっても、HTMLが終わるまでCSSには手を出さない鋼鉄の意志がまじめに必要。
何度も反省しているのにやらかしているので、多分そのうちPC画面にデカデカと「CSS禁止！」とか書く羽目になりそうだ……
かかった時間を計測する
今回一番の後悔は、時間を計らずにいた事。
どうせTimeCrowdをVAのお仕事で使っているんだから、個人タスクを使って計測しておけばよかったと、1日目が終わった時点で気づきました。
多分ですね、TimeCrowdのタスク名で作業内容を指定すれば、「今はHTMLに集中」「ここからCSS」と頭も切り分けられるんじゃないかな？
あと振り返りの際にも「ここに時間がかかっていた」「あそこで変なところに引っかかってた」と自己分析のいい材料になりそうだ。
ということで、次回からはTCを使って時間計測するようにします。
やっぱりJavaScriptの学習は必要
実はCSSで色々できるからとJSのお勉強サボりまくっているのですが、多分メニューとかhover動作とか、JS使えばすごい簡単にアレコレできるはずなんですよね……
でも勉強するのが面倒くさそうという一番ダメな理由から、より簡単にできることをCSSのみで面倒くさい事しながら実装してたりするので
あ、あとうちのJS忌避には大昔見かけたJS関連の各種不具合が微トラウマってる気がしなくもない。
しかし今後本気で仕事にするなら避けていては本末転倒が過ぎるので、次のLP模写までにDotInstallでお勉強します。
まとめ
ということで、はじめてのLP模写で得た知見は以下のとおり。
- サイト構成をしっかり把握する
- CSSにはHTMLが完了するまで手を出さない
- 作業時間を計測する
- ちゃんとJSを勉強しておく
というわけで、次のLP模写までにまずJSとjQueryの勉強しなければなりません。
最低限の目標は、年末までにお勉強終わらせる＆2サイト分の模写完成。
できれば合計5サイト分終わらせて年明けからクラウドワーク始めたいですね。
5サイトとかちょっと無理っぽい気配がしますが、志は高く持ってがんばります！
