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

Question

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

解決済

回答 1

投稿 2018/11/19 12:28 ・編集 2018/11/19 12:38

評価
クリップ 1
VIEW 1,513

kaoru-drosera

score 21

前提・実現したいこと

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)

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

2 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

m.ts10806

2018/11/19 13:11

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

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

キャンセル
kaoru-drosera

2018/11/19 15:28

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

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

キャンセル

回答 1 件

評価が高い順
新着順
古い順

同じタグがついた質問を見る

score 2 · Accepted Answer · 2018-11-19T12:53

ベストアンサー

+2

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

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

投稿 2018/11/19 12:53

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2018/11/19 16:15

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

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

キャンセル
2018/11/19 16:25 編集

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

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

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

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

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

ご回答ありがとうございます。今の回答に関して3つほど確認したいことがあります。 1．「ブレイクポイント等での最大値・最小値等をしっかり把握する」とありますが、「元サイトのブレイクポイントが767pxだとして、pc表示ならウィンドウサイズが1900pxの時と768pxの時のレイアウトが両方とも見本と同じになるように調節する」という理解でいます。（同様に、スマホ表示では767pxから最小値までのレイアウトを両方とも模写と見本が同じになるように調節する） 2．「CSSコードをきっちり見て」とありますが、これは要するに「見本サイトのコードは見てもいい」という理解で合っているでしょうか？「案件と同じように、見なくても理解できるようになる」ことを目標としているので、少し驚いています。 3．ほんの些細なことですが、『各要素の位置が明確に定められないと、「1px単位で揃える」は、「難しい」よりも「無理」』とありましたが、それは逆に言えば「各要素の位置を明確に定められれば、1px単位で揃えることは「可能」になる」と理解しています。正しいでしょうか？それと、「各要素のブレイクポイントをどこに設定するのかしないのか（フルリキッドか）等で、各要素の位置が明確に定める」は少し分かりにくかったので、もう一度説明していただけると助かります。ともあれ、回答していただき本当に助かります。

キャンセル
2018/11/19 21:11

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

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

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

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

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

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

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

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

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

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

1.「最大値・最小値等をしっかり把握する」はその意味合いで良いです。そこで注意するのは、各要素に「max-width」等が設定されているかも確認しておくと、必要以上に大きくなったり小さくなったりすることが無くなるので、注意しておくと良いです。 2.見ても良いですよ。質問者さんが参考にしているサイトでも、「目視だけでコーディングするのは、おそらく不可能です。」とあるように、どんなベテランでも不可能な個所はたくさんあります。ましてや、これから覚えようとする場合はなおさらです。「デザイン配置」のコードは必ずしも1つとは限りません。数種類の方法がある場合も多々あります。何故ここではこの指定方法なのか？何故アレではダメなのか？疑問も出てくると思います。他の要素や全体の管理も含め、効率良くする方法が最初は分かりません。数多くこなしていくと、自分なりの方向性が見えてきます。見本サイトが必ずしも「最高の手段」を取っているとは限りませんので、「見る目を養う」意味でも、最初は数多くの配置の実践方法を見る事は勉強になります。そのための「模写」です。 3.そうですね。各要素の位置を把握してキッチリ揃える事が出来ると言う事は、要素と単位の指定に間違いが無いとも言えます。案件での対応としても、デザインの持ち幅（ズレ）がどこまで可能なのか？どこは1pxでもズレてはいけないのかも、事前に確認する事は必須です。後で大きな問題にもなる可能性があります。「各要素のブレイクポイントをどこに設定するのかしないのか（フルリキッドか）等で、各要素の位置が明確に定める」については変な言葉や言葉足らず、でスミマセン。簡単に言うと、要素がデバイス幅により変化する過程において、最大から最小まで同じ割合か？変化する位置はどこか？が各要素で把握できないと、当然ながら100％同じ配置には成り得ないですよ、と、言いたかっただけです。･･･個人的な見解なので、絶対ではなく、より効率的な考えや方法もあるかと思います。

キャンセル
2018/11/22 13:58 編集

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

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

キャンセル
2018/11/22 14:17

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

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

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

現状をgifで説明します

試したこと

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

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

前提・実現したいこと

現状をgifで説明します

試したこと

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

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン