初心者向けLP模写のおすすめのやり方！無駄な練習はコレ

初心者向けにLP模写のおすすめのやり方を紹介します。

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

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

初心者のLP模写でおすすめしないやり方
- 初心者のLP模写で無駄なのは単純作業
- 初心者のLP模写で大事なこと
初心者向けおすすめのLP模写のやり方
このLP模写が難しい人は？

初心者のLP模写でおすすめしないやり方

まずはLP模写で「無駄な練習」をしないようにしましょう。

初心者の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の模写コーディングの流れを紹介

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

1.模写するLPを選ぶ

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

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

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

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

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

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

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

オススメ模写LPはisara

isaraのサイトを見る

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

HTML/CSS/jQueryの基本〜応用までを学べる
マイナーな実装があまりない（「」というデザインはマイナーです）
この模写ができれば案件受注できるレベル

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

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

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

2.LP模写する

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

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

同じ型のものを把握して使い回す
HTMLでサイト全体の枠組みを作る
中身のHTMLを書いてcssで装飾する

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

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

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

ボタンのデザインが同じ

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

パターン1

パターン2

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

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

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

<header>
  <div class="container">
  </div>
</header>
<section class="top">
  <div class="container">
  </div>
</section>
<section class="about">
  <div class="container">
  </div>
</section>

</div>

</header>

</div>

</section>

</div>

</section>

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

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

<header>
  <div class="container">
　　　　　<div class="header-top">
           <h1>isaraで学ぼう</h1>
      </div>
 　　　　　<div class="header-bottom">
           <a href="#">お問い合わせ</a>
      </div>      
  </div>
</header>

<h1>isaraで学ぼう</h1>

</div>

<a href="#">お問い合わせ</a>

</div>

</header>

.container{
  max-width:980px;
}

.header-top{
  color:white;
}

.container{

max-width:980px;

}

.header-top{

color:white;

}

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

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

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

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

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

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

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

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

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

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