無料オンライン勉強サービス10選おすすめ

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

SHARE

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

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

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

 

LP模写コーディングで初心者におすすめしないやり方

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

初心者のLP模写で無駄なのは単純作業

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

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

  • 色
  • フォントの種類や大きさ
  • テキスト内容
  • アイコン
  • 画像
  • 幅や高さなどの細かいピクセル

 

LP模写で単純作業が無駄な理由

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

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

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

 

初心者のLP模写で大事なこと

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

1.レスポンシブが同じ

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

2.全体の配置が同じ

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

3.バグを起こさない

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

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

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

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

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

 

5.背景画像の位置

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

6.文字と画像の配置

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

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

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

8.画像の透過/明度

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

 

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

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

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

1.模写するLPを選ぶ

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

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

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

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

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

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

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

 

オススメ模写LPはisara

 

isaraのサイトを見る

 

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

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

 

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

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

 

2.LP模写する

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

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

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

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

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

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

ボタンのデザインが同じ

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

パターン1

 

パターン2

 

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

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

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

 

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

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

 

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

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

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

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

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

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

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

 

このLP模写コーディングが難しい人は？

もっと簡単なLP模写コーディングサイトを紹介

コーディング模写サイトをレベルを１〜５にわけて紹介しています。

模写しなくて良い部分も一緒に紹介しています。

コーディングの練習模写サイト！無料素材あり【頻出】

 

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

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

Progate卒業後の初心者がしがちなエラー15

 

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

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

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

 

前の記事

プログラミングスクールiSaraに参加したい人がやるべきこと、…

次の記事

フリーランスがWordPress制作で仕事ができるレベルになる…