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

【フリーランスエンジニアとして最短で稼ぐのに無駄だった努力⑥】
✔️プログラミングの本をやたら買う
しつこいですがprogateだけやって、模写制作して分からないところはググればOK
大学受験と同じで頻出事項のみ覚えよう
本だとマイナー機能も丁寧に説明するので時間が勿体無い
(LP制作の場合)
— ふる🇹🇭iSara3期 (@guutenx) 2018年8月12日

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

LPの模写コーディングの流れ
1.模写コーディングするLPを選ぶ
- 1.模写コーディングするLPを選ぶポイントは頻出のデザインパターンであること
- 2.オススメの模写コーディングLPはisaraのLPです。
2.LPを模写コーディングする
3.模写が見本通りコーディングになっているか確認する
4.LP模写コーディングでエラーや実装がわからない場合は？

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

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

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

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

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

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

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

・コーポレートサイト

・青汁などの商品サイト

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

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

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

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

理由

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

このLP制作で学べること

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

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

・レスポンシブ対応

・jqueryでの開閉ボタン

・jqueryでのpagetopボタンの実装

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

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

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

1.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>

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

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

<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>

3.CSSで装飾する

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

.container{
  max-width:980px;
}

.header-top{
  color:white;
}

.container{

max-width:980px;

}

.header-top{

color:white;

}

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

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

【模写制作で見本と同じにすべき部分は？】
1⃣レスポンシブ
witdh:◯◯px;の時の配置を同じにする
2⃣全体の配置
余白などの見た目を同じにする（px単位で同じにしなくてもok）
3⃣footer下の余白等、バグは起こさない
4⃣文字の改行を同じにする
記事に追加します!https://t.co/IaYHexv16c pic.twitter.com/IYUCM78MS4
— ふる🇹🇭iSara3期 (@guutenx) 2018年8月15日

【模写制作で見本と同じにすべき部分は？】
5⃣背景画像の位置
背景画像が中央にくるように等
6⃣文字と画像の配置
見本通り文字と画像が被るように等
7⃣アコーディオン/hover等の動きの機能の実装
コピペだけで動かないことが結構ある
8⃣画像の透過/明度@shin_web_jp さんこんな感じです💡 pic.twitter.com/vRp0t6sVH8
— ふる🇹🇭iSara3期 (@guutenx) 2018年8月15日

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

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

【LPの模写制作する上で無駄だった努力】
💡以下を見本と全く同じにする
✔️色
✔️フォント
✔️テキスト内容
✔️アイコン/画像
✔️幅や高さ
これらは単純作業なので方法さえ知っていれば練習する必要なし
これ(https://t.co/TQPFMsoiCJ)制作するのに1週間くらいかかりました。 https://t.co/PMlT5Ebz3h
— ふる🇹🇭iSara3期 (@guutenx) 2018年8月14日

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

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

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

【LP模写制作で必須の検証機能の使い方】
1⃣Chrome開きサイト上で右クリック→検証クリック
2⃣CSSの適用状態を調べたい要素をクリック→右欄でCSS確認(見本サイトの中身を知りたければここまで)
3⃣Chrome上でCSS等を変更してみる(制作中サイトのCSSが上手く適応されない原因を知る場合) pic.twitter.com/eLztDGfeGr
— ふる🇹🇭iSara3期 (@guutenx) 2018年8月14日

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

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

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

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