学ぶプログラミング言語を間違えると悲惨な話

LPの模写コーディングの方法は無駄な作業をしがち!効率的に行う方法【初心者向け】

LPの模写コーディングの方法は無駄な作業をしがちです。模写コーディングの解説をしているサイトは多いですが、非効率なものが多いです。

初心者向けに、無駄な部分は省いて効率的にLPの模写をする方法をお伝えします。

 

初心者向けLPの模写コーディングの流れ【初心者向け】

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

 

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

模写コーディングするLPを選ぶポイントは頻出のデザインパターンであること

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

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

LP案件に多い以下のLPサイトを見てどんなデザインパターンがメジャーなのかパターンを掴むのも良いでしょう。そうすると特異なデザインの模写制作をして消耗することはありません。

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

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

 

 

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

isaraが模写コーディングのLPにオススメの理由
  1. HTML/CSS/jQueryの基本〜応用までを学べる
  2. 今後使わないようなマイナーな実装があまりない
  3. これを模写できるようになれば案件受注できるレベルになる
isaraのLP制作で学べること

・基本的なHTML/CSSのコーディング

・お問い合わせフォームの制作方法

・レスポンシブ対応

・jqueryでの開閉ボタン

・jqueryでのpagetopボタンの実装

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

 

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

次に実際にLPを模写コーディングしていきましょう。以下に模写の流れを記載しましたが、順番や方法は好きなように決めて良いです。

  1. HTMLでサイト全体の枠組みを作る
  2. 中身のHTMLを書く
  3. cssで装飾する

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

トップセクション、コンタクトセクションなどセクションごとの大きな枠組みを作っていきましょう。その際、max-widthを指定したcontainerもつけておきましょう。例えばこんな感じです。(中身は適当)

中身のhtmlを書いていく

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

CSSで装飾する

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

 

見本のLPと同じようにコーディングすべき部分は?

見本と同じように実装するために気をつけるポイントは以下です。まずは、細かいピクセルを揃えるより、見た目が崩れることのないようにしましょう

 

LP模写で無駄なコーディングの努力をしないためには?

LPの模写制作は頭を使ってコーディングすることに意味があります。方法がすでにわかっている無駄な単純作業をなるべく多く省きましょう。

 

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

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

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

具体的な検証方法が知りたければ、こちら

わからなかったら、ググる &見本サイトを検証機能で見て回答を見ましょう。実際のサイト制作では「答えを見たらだめ」なことはないため、カンニングしまくりましょう。

プログラミングは基本的にパクリ、コピペです。どうしてそうなっているのか理解できればコピペでOKです。次回同じ実装をする時になったら、「あの時このサイトコピペして見てこんな風に実装したなあ」と思い出して、もう一度そのサイトからコードをコピペするのでOKです。

 

LP模写コーディングでエラーや実装がわからない場合は?

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

LP模写コーディングが終わった次のステップは?

 

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

LPコーディング制作方法と稼ぎ方【Web制作初心者向け】