LP模写コーディング初心者におすすめの方法・無駄な練習をしない方法

初心者向けにLP模写のおすすめの方法と無駄な練習をしない方法を紹介します。

ちなみにここで言う模写とは、コードをそのまま書き写すのとは違い、自分で回答を見ずに既にあるサイトを実装してみると言うことです。

動画で見たい方は以下をどうぞ

初心者向けおすすめのLP模写コーディングのやり方

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

模写コーディングするLPを選ぶ
LPを模写コーディングする
模写が見本通りになっているか確認する

1.模写するLPを選ぶ

本当はphotoshopデータからコーディングするのが実務に適しており良いのですが、無料で使えるphotoshopデータがあまりに少なすぎるので

今回はLPサイトそのものを紹介します。

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

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

レスポンシブ対応
コンタクトフォームがある
固定ヘッダーがある
fbやtwitterリンクがある
横並びの要素がレスポンシブで縦並びになっている
お問い合わせボタンがある

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

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

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

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

オススメ模写LPはisara

isaraのサイトを見る

iSaraがLP模写にオススメの理由

HTML/CSS/jQueryの基本〜応用までを学べる
マイナーな実装があまりない（一部あり）
この模写ができれば案件受注できるレベル
運営者が模写に使ってOKと言っている

iSaraのLP模写制作で学べること

固定ヘッダー
お問い合わせフォーム
レスポンシブ対応
jQueryでの開閉ボタン
jQueryでのpagetopボタン
要素の横並び→スマホで縦並び
SNS連携

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

2.LP模写する

必要なツールを知る

iSaraなどサイトから模写コーディングするときに必要な便利ツールを知りましょう。

色やフォント、要素の大きさなどを知るツールです。

効率的に模写する

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

効率的に模写するポイントは同じ型のものを使い回すことです。

模写サイトの中で同じ型のものは把握しておきましょう。

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

ボタンのデザインが同じ

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

パターン1

パターン2

3.模写したLPが見本通りか確認

最後に見本と同様になっておるか確認しましょう。

Googleの検証機能を使う

見本通りになっているか確認するには、Googleの検証機能を使います。

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

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

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

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

例えば1042px（iPad Pro）→375px（iPhone6/7/8）サイズにした時に崩れていないか確認すると言うことが挙げられます。

375pxのときの見た目

1042pxのときの見た目

わからない場合回答を見る

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

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

プログラミングは暗記というより、どうしてそうなっているのか理解できればOKです。

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

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.全体の配置が同じ

余白などの見た目を同じにする

3.バグを起こさない

footerの下に余白がある、サイト全体の横に余白があるなどのバグは当然起こさないようにしましょう。

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

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

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

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

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

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

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

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

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

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