LP模写コーディングのやり方！誰も気づいてない無駄な練習はコレ

LPの模写コーディングのやり方を紹介します。

HTML、CSSの模写コーディングの解説をしているサイトは多いですが「みんながやりがちな無駄な練習」が何か気づいている人はいません。

効率的にLP模写をする方法を紹介します。

LPの模写コーディングのやり方で無駄なこと

まずはLPの模写コーディングで「無駄な練習」をしないようにしましょう。

模写コーディングで無駄なのは単純作業

模写コーディングで無駄なのは、以下を見本と全く同じにする「単純作業」です。

模写コーディングの単純作業

模写コーディングで単純作業が無駄な理由

LPの模写制作は頭を使ってコーディングすることに意味があります。

方法がすでにわかっている無駄な単純作業をなるべく多く省きましょう。

それよりは「レスポンシブで見た目が崩れないようにする」など、難易度が高くつまずきやすい部分に時間をかけましょう。

LP模写コーディングのやり方で大事なこと

無駄な練習がわかったので、見本と同じにすべき部分を紹介します。

【模写制作で見本と同じにすべき部分は？】

1⃣レスポンシブ
witdh:◯◯px;の時の配置を同じにする

2⃣全体の配置
余白などの見た目を同じにする（px単位で同じにしなくてもok）

3⃣footer下の余白等、バグは起こさない

4⃣文字の改行を同じにする

記事に追加します!https://t.co/IaYHexv16c pic.twitter.com/IYUCM78MS4

— ふる🇹🇭iSara3期 (@guutenx) 2018年8月15日

1.レスポンシブが同じ

witdh:◯◯px;の時の配置を同じにする

2.全体の配置が同じ

余白などの見た目を同じにする（px単位で同じにしなくてもok）

3.バグを起こさない

footerの下に余白があるなどのバグは当然起こさないようにしましょう。

4.文字の改行を同じにする

レスポンシブで文字の改行が同じになるようにしましょう。

例えば、width:375px;の時の改行が同じなど。

あとは例えばレスポンシブで固有名詞「岐阜」の「岐」と「阜」の間で改行されているとおかしいので気をつけましょう。

【模写制作で見本と同じにすべき部分は？】

5⃣背景画像の位置
背景画像が中央にくるように等

6⃣文字と画像の配置
見本通り文字と画像が被るように等

7⃣アコーディオン/hover等の動きの機能の実装
コピペだけで動かないことが結構ある

8⃣画像の透過/明度@shin_web_jp さんこんな感じです💡 pic.twitter.com/vRp0t6sVH8

— ふる🇹🇭iSara3期 (@guutenx) 2018年8月15日

5.背景画像の位置

レスポンシブでも背景画像が中央にくるようにしましょう。

6.全文字と画像の配置

見本通り文字と画像が被るように配置しましょう。

7.アコーディオン/hover等の動きの機能の実装

コピペだけで動かないことが結構あ流ので気をつけましょう。

8.画像の透過/明度

画像の透過や明度も見本と同じになるようにしましょう。

LPの模写コーディングのやり方

効率的な模写コーディングがわかったので、早速LPの模写コーディングの流れを紹介

1.模写コーディングするLPを選ぶ

頻出のデザインパターンにすべき

例えば、以下のようなデザインはほとんどのLPで頻出です。

LP案件に多い以下のLPサイトを見てどんなデザインパターンがメジャーなのかパターンを掴むのも良いでしょう。

そうすると特異なデザインの模写制作をして消耗することはありません。

例えば、コーポレートサイト、青汁などの商品サイト、塾や英語スクールなどのサービスサイト、歯医者や居酒屋、ゲストハウスなどの店舗サイトなどのパターンが挙げられます。

と言っても、面倒な人は2.でオススメな模写LPを用意したのでご覧ください。

オススメの模写コーディングのLPはisara

isaraのサイトを見る

isaraのコーディング模写制作で学べること

など。上記1の頻出のデザインパターンは全て満たしています。

2.LPを模写コーディングする

次に実際にLPを模写コーディングしていきましょう。

以下に模写の流れを記載しましたが、順番や方法は好きなように決めて良いです。

1.同じ型のものを把握して使い回す

まず模写サイトの中で同じ型のものを把握して使い回しましょう。

ボタンや見出しのデザインが同じ

ボタンのデザインが同じ

PCで横並び→スマホで縦並びのスタイルものが同じ

パターン1

パターン2

2.HTMLでサイト全体の枠組みを作る

トップセクション、コンタクトセクションなどセクションごとの大きな枠組みを作っていきましょう。

その際、max-widthを指定したcontainerもつけておきましょう。例えばこんな感じです。（中身は適当）

3.中身のhtmlを書いてCSSで装飾する

例えばこんな感じです。（中身は適当）

3.模写が見本通りか確認する

最後に見本と同様になっておるか確認しましょう。見本通りになっているか確認するには、Googleの検証機能を使います。

これで、画面サイズ（横幅）を変えてみて、レスポンシブ対応したときに崩れていないか確認しましょう。

【LP模写制作で必須の検証機能の使い方】

1⃣Chrome開きサイト上で右クリック→検証クリック
2⃣CSSの適用状態を調べたい要素をクリック→右欄でCSS確認(見本サイトの中身を知りたければここまで)
3⃣Chrome上でCSS等を変更してみる(制作中サイトのCSSが上手く適応されない原因を知る場合) pic.twitter.com/eLztDGfeGr

— ふる🇹🇭iSara3期 (@guutenx) 2018年8月14日

わからなかったら、ググる ＆見本サイトを検証機能で見て回答を見ましょう。

実際のサイト制作では「答えを見てもOK」なので、カンニングをしてOKです。

プログラミングは基本的にパクリ、コピペです。どうしてそうなっているのか理解できればコピペでOKです。

次回同じ実装をする時になったら、「あの時このサイトコピペして見てこんな風に実装したなあ」と思い出して、もう一度そのサイトからコードをコピペするのでOKです。

LPの模写コーディングのやり方補足

LP模写コーディングで躓いたら

isaraのLPを作っているときにつまずいたポイントをまとめているので、つまづいたら参考にしてください。

プログラミング・コーディングができない？progate卒業後の初心者がしがちなエラー15

LP模写コーディングの次のステップ

LP模写が終わったら、実際の案件でLPコーディングをする方法を知りましょう。

LPコーディング案件の流れと作り方【初心者向けのやり方】