フリーランスエンジニア営業なしで案件受注

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

SHARE

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

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

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

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

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

1.模写するLPを選ぶ

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

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

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

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

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

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

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

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

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

オススメ模写LPはisara

isaraのサイトを見る

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

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

 

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

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

2.LP模写する

模写の始め方を知る

まずは以下の動画を見て、基本的なファイル作成や設定の方法などを参考にしてみてください。

必要なツールを知る

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

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

効率的に模写する

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

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

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

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

ボタンのデザインが同じ

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

パターン1

パターン2

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

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

Googleの検証機能を使う

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

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

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

375pxのときの見た目

 

1042pxのときの見た目

 

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

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

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

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

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

 

LP模写コーディングで無駄な練習をしない方法

模写コーディングをしたときに、無駄な練習をしないためには、「自分が作ったサイトが見本と同じか」をチェックすることです。

ここで気になるのが「どこまで同じにすべきか」なので、今回はそのチェックポイントを紹介します。

本当はピクセル単位で同じにすべきですが、初心者はそこまでする余裕がないと思うので「ぱっとみて見た目が同じか」どうかをチェックしましょう。

1.レスポンシブが同じ

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

2.全体の配置が同じ

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

3.バグを起こさない

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

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

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

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

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

5.背景画像の位置

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

6.文字と画像の配置

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

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

アコーディオン、ハンバーガーメニュー、hoverなどの動きは忠実に再現しましょう。

特にアコーディオンやハンバーガーメニューは動かないこともあるので注意。

8.画像の透過/明度

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

この部分は見本サイトのコードを検証モードで見ないと正確なものはわからないですが、最初は見た目が似ているようになればOK。

 

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

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

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

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

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

 

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

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

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

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

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

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

前の記事

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

次の記事

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