フリーランスが会社員収入を継続して得られないパターン7つ

LP(ランディングページ)の模写コーディングの方法

ウェブ制作で最短で稼ぐのにオススメなのは、LP制作をすることです。progateで基本をマスターしたら模写制作をしましょう。今回はウェブ制作初心者向けにLPの模写制作の方法をお伝えします。

 

LPの模写コーディングの流れ

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

 

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

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

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

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

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

・コーポレートサイト

・青汁などの商品サイト

・塾や英語スクールなどのサービスサイト

・歯医者や居酒屋、ゲストハウスなどの店舗サイト

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

 

 

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

理由

  1. HTML/CSS/jQueryの基本〜応用までを学べる
  2. 今後使わないようなマイナーな実装があまりない
  3. これを模写できるようになれば案件受注できるレベルになる

このLP制作で学べること

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

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

・レスポンシブ対応

・jqueryでの開閉ボタン

・jqueryでのpagetopボタンの実装

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

 

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

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

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

トップセクション、コンタクトセクションなどセクションごとの大きな枠組みを作っていきましょう。その際、max-widthを指定したcontainerもつけておきましょう。

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

2.中身のhtmlを書いていく

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

3.CSSで装飾する

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

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

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

 

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

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

 

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

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

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

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

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

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

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

 

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

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

 

 

Web制作初心者のためのLPコーディング方法