2つ目のLP模写を完成させました

プログラミング

おはこんばんちわ

valです

 

今回2つ目のLP模写を完成させたので

今回の成果とつまづいたポイント等について書いていきます

 

1回目のLP模写に関してはこちら

【初心者】初めてのLP模写のやり方と所感
今回LPを初めて模写したので そのやり方と模写するにあたって感じたことを書いていきます これからLP模写するぞという方やどうやってやるのかわからない といった方の参考になれば幸いです 結論だけ先に言ってしまうと まぁじで難しいけどすげぇ成長できた気がします

 

今回の成果

今回模写したのはこちらのサイトになります

Dooonut
動画専門のマーケティング支援・戦略ツール「Dooonut(ドーナツ)」なら、SNS連携、エンゲージメント分析、動画メディアのCMS機能などインバウンド型の動画マーケティングに必要な機能がすべて使えます。

 

そして模写した結果がこちら

 

こちらは画像なので実際にページとして作成したものは

Googleドライブの方に上げておきます

よろしければ見てやってください

DOOONUT – Google Drive

 

LP模写の際に気をつけたこと

前回はレスポンシブ対応はさせなかったので

今回はしっかりとレスポンシブ対応したコーディングをしました

 

またなるべく共通したCSSを複数回記述することが無いようにしました

単純にコードが長くなって見づらいですしね

 

大まかには上記の2点になります

 

つまづいた所

今回つまづいたところとしては

  • クラス名の付け方
  • レスポンシブ対応

の2点になります

 

クラス名の付け方がクッソムズイ

クラス名をつける際はクラス名だけでできるだけ内容がわかるように

というのは前回から心がけているのですが

今回はそれに加えて何回も同じスタイルの記述を避ける

というルールというか心掛けを追加したのでどうしようかと悩みました

 

悩みに悩んだ挙げ句

もうテキトーでいいや!

と開き直ってclass=”section1″

とかやりだしましたw

動けばいいんです動けば

 

レスポンシブ対応めんどくさすぎ問題

今回LP模写を始めてから完成まで約40時間かかったのですが

大半がこのレスポンシブ対応に苦慮した結果になります

 

はじめにPCでの表示の内容を完成させて

それからスマホサイズの実装という流れでコーディングしたのですが・・・

 

後からレスポンシブ対応させるのめんどくさすぎる!!!!

 

この部分のCSSはどこだ~って探してる時間がとても長い・・・

あっちにいったりこっちにいったり

書く場所間違えたりなんだりしてる間にソースがぐっちゃぐちゃになってしまったので

一度リセットしました・・・(泣)

 

ある程度小分けにコーディングして

同時にレスポンシブ対応させていくのが良さそうです

 

あとは後から知ったのですが

最近はスマホから見る人が多いからか

スマホ表示をベースとしてそこからレスポンシブ対応として

タブレット表示、PC表示とコーディンぐしていくのがトレンド?らしいですね

次からはそうやってやってみようと思います

 

まとめ

今回で2つ目のLP模写となりましたが

2つ目にしてなんとなく頻出の傾向がわかってきたような気がします

 

実際どうやるかわからなくてググる回数も減りました

もうあと1,2個模写してみたら

クラウドソーシングでLP模写の案件を受けてみようかなと思います

そもそも案件を取れるかは別として・・・

 

それでは

コメント

  1. […] […]

  2. […] […]