サイト模写はどの程度正確ならいいのでしょうか？

Question

前提・実現したいこと

LPの制作案件獲得に向けてLPのサイト模写を行っているものです。
「LP模写にあたっては、初めの段階では正確性を重視するといい」というアドバイスをいただいたのですが、どの程度まで正確だといいのでしょうか？
現状でいうと、見た目やレスポンシブ時のレイアウトはできる限り似せて、レスポンシブ時の動作なども再現できているつもりです。ただし、空白まで1px単位での調整や、ウィンドウ幅を動かした時の動作やレイアウトまで同じにすることは難しく、半ば諦めています。
LP案件獲得の実績として模写を使うなら、やはりその程度、あるいはそれ以上まで正確だといけないのでしょうか？

現状をgifで説明します

現在制作している模写を使って、自分の今の出来具合の参考にしていただければ幸いです。
今行っているサイト（トップ部分のみ）を例に挙げると、ウィンドウの左端と動画サイトリンクとの距離が見本と微妙に違います。次に、トップ底辺とボタンとの距離が見本ではウィンドウ幅と比例して距離が開いているのに対し、私の模写では一定です。
両方とも容量の都合で操作が早く、一致していないです。申し訳ありません。

![模写中のサイト

試したこと

あまりに一致しないので、CSSコードを見本のサイトで一部見てしまっています。

現在手がけている模写を例に挙げると、positionを使って中央揃えにしている場合

  left: 0;
  right: 0;
  margin: auto;

のようにleftとright両方に0を指定することでmargin:auto;での中央揃えが有効になることだけは理解できました。
でも、上で挙げた問題まで解決してピクセル・動作パーフェクトまで目指すのは難しいです…

補足情報（FW/ツールのバージョンなど）

ブラウザ:chrome(最新のバージョン)
テキストエディタ:atom(ver:1.32.2)

Comments

[m.ts10806]

LPは「ランディングページ」ですか？ちょっと一瞬なんのことか分かりませんでした。あまり略す場面にでくわしたことがないもので(私だけかもしれませんけど)

[kaoru-drosera]

はい。それで合っています。ランディングページです。こちらを参考にしました。https://haniwaman.com/replication-coding/

Answer 1

「初めの段階では正確性を重視する」は、CSSコードをきっちり見て、使用コードはモチロンですが、ブレイクポイント等での最大値・最小値等をしっかり把握する事で「再現度」が上がります。

デザインにより、各要素のブレイクポイントをどこに設定するのかしないのか（フルリキッドか）等で、各要素の位置が明確に定められないと、「1px単位で揃える」は、「難しい」よりも「無理」だと思います。

Comments

[yoshinavi]

PC画面の配置で、上の「見本」の方がボタンと背景が重なっているので、下の「模写」がその点は良い気がします。

[kaoru-drosera]

ご回答ありがとうございます。
今の回答に関して3つほど確認したいことがあります。

1．「ブレイクポイント等での最大値・最小値等をしっかり把握する」とありますが、「元サイトのブレイクポイントが767pxだとして、pc表示ならウィンドウサイズが1900pxの時と768pxの時のレイアウトが両方とも見本と同じになるように調節する」という理解でいます。
（同様に、スマホ表示では767pxから最小値までのレイアウトを両方とも模写と見本が同じになるように調節する）

2．「CSSコードをきっちり見て」とありますが、これは要するに「見本サイトのコードは見てもいい」という理解で合っているでしょうか？
「案件と同じように、見なくても理解できるようになる」ことを目標としているので、少し驚いています。

3．ほんの些細なことですが、『各要素の位置が明確に定められないと、「1px単位で揃える」は、「難しい」よりも「無理」』とありましたが、それは逆に言えば「各要素の位置を明確に定められれば、1px単位で揃えることは「可能」になる」と理解しています。正しいでしょうか？
それと、「各要素のブレイクポイントをどこに設定するのかしないのか（フルリキッドか）等で、各要素の位置が明確に定める」は少し分かりにくかったので、もう一度説明していただけると助かります。

ともあれ、回答していただき本当に助かります。

[yoshinavi]

1.「最大値・最小値等をしっかり把握する」はその意味合いで良いです。そこで注意するのは、各要素に「max-width」等が設定されているかも確認しておくと、必要以上に大きくなったり小さくなったりすることが無くなるので、注意しておくと良いです。

2.見ても良いですよ。質問者さんが参考にしているサイトでも、「目視だけでコーディングするのは、おそらく不可能です。」とあるように、どんなベテランでも不可能な個所はたくさんあります。ましてや、これから覚えようとする場合はなおさらです。

「デザイン配置」のコードは必ずしも1つとは限りません。数種類の方法がある場合も多々あります。

何故ここではこの指定方法なのか？何故アレではダメなのか？疑問も出てくると思います。他の要素や全体の管理も含め、効率良くする方法が最初は分かりません。

数多くこなしていくと、自分なりの方向性が見えてきます。見本サイトが必ずしも「最高の手段」を取っているとは限りませんので、「見る目を養う」意味でも、最初は数多くの配置の実践方法を見る事は勉強になります。そのための「模写」です。

3.そうですね。各要素の位置を把握してキッチリ揃える事が出来ると言う事は、要素と単位の指定に間違いが無いとも言えます。

案件での対応としても、デザインの持ち幅（ズレ）がどこまで可能なのか？どこは1pxでもズレてはいけないのかも、事前に確認する事は必須です。後で大きな問題にもなる可能性があります。

「各要素のブレイクポイントをどこに設定するのかしないのか（フルリキッドか）等で、各要素の位置が明確に定める」については変な言葉や言葉足らず、でスミマセン。

簡単に言うと、要素がデバイス幅により変化する過程において、最大から最小まで同じ割合か？変化する位置はどこか？が各要素で把握できないと、当然ながら100％同じ配置には成り得ないですよ、と、言いたかっただけです。

･･･個人的な見解なので、絶対ではなく、より効率的な考えや方法もあるかと思います。

[kaoru-drosera]

内容の濃いご回答、大変ありがとうございました！
ベストアンサーにさせていただきます！

[yoshinavi]

解決されて何よりです。
(^^)