質問: ### 前提・実現したいこと LPの制作案件獲得に向けてLPのサイト模写を行っているものです。 「LP模写にあたっては、初めの段階では正確性を重視するといい」というアドバイスをいただいたのですが、どの程度まで正確だといいのでしょうか? 現状でいうと、見た目やレスポンシブ時のレイアウトはできる限り似せて、レスポンシブ時の動作なども再現できているつもりです。ただし、空白まで1px単位での調整や、ウィンドウ幅を動かした時の動作やレイアウトまで同じにすることは難しく、半ば諦めています。 LP案件獲得の実績として模写を使うなら、やはりその程度、あるいはそれ以上まで正確だといけないのでしょうか? ### 現状をgifで説明します 現在制作している模写を使って、自分の今の出来具合の参考にしていただければ幸いです。 今行っているサイト(トップ部分のみ)を例に挙げると、ウィンドウの左端と動画サイトリンクとの距離が見本と微妙に違います。次に、トップ底辺とボタンとの距離が見本ではウィンドウ幅と比例して距離が開いているのに対し、私の模写では一定です。 両方とも容量の都合で操作が早く、一致していないです。申し訳ありません。 ![見本のサイト](https://teratail.storage.googleapis.com/uploads/contributed_images/ca5a3da8f808123a7652fbea2c897e6d.gif) ![[模写中のサイト](https://teratail.storage.googleapis.com/uploads/contributed_images/2add04a9944eba8ccaece70d409fb62c.gif) ### 試したこと あまりに一致しないので、CSSコードを見本のサイトで一部見てしまっています。 現在手がけている模写を例に挙げると、positionを使って中央揃えにしている場合 ``` left: 0; right: 0; margin: auto; ``` のようにleftとright両方に0を指定することでmargin:auto;での中央揃えが有効になることだけは理解できました。 でも、上で挙げた問題まで解決してピクセル・動作パーフェクトまで目指すのは難しいです... ### 補足情報(FW/ツールのバージョンなど) ブラウザ:chrome(最新のバージョン) テキストエディタ:atom(ver:1.32.2)
回答: 「初めの段階では正確性を重視する」は、CSSコードをきっちり見て、使用コードはモチロンですが、ブレイクポイント等での最大値・最小値等をしっかり把握する事で「再現度」が上がります。 デザインにより、各要素のブレイクポイントをどこに設定するのかしないのか(フルリキッドか)等で、各要素の位置が明確に定められないと、「1px単位で揃える」は、「難しい」よりも「無理」だと思います。