初心者向けにLP模写のおすすめの法ほと無駄な練習を紹介します。
HTML・CSSのLP模写の解説をしているサイトは多いですが「みんながやりがちな無駄な練習」が何か気づいている人はいません。
効率的にLP模写をする方法を紹介します。
目次
LP模写コーディングで初心者におすすめしないやり方
まずはLP模写で「無駄な練習」をしないようにしましょう。
初心者のLP模写で無駄なのは単純作業
模写コーディングで無駄なのは、以下を見本と全く同じにする「単純作業」です。
LP模写コーディングの単純作業
- 色
- フォントの種類や大きさ
- テキスト内容
- アイコン
- 画像
- 幅や高さなどの細かいピクセル
LP模写で単純作業が無駄な理由
LPの模写制作は頭を使ってコーディングすることに意味があります。
方法がすでにわかっている無駄な単純作業をなるべく多く省きましょう。
それよりは「レスポンシブで見た目が崩れないようにする」など、難易度が高くつまずきやすい部分に時間をかけましょう。
初心者のLP模写で大事なこと
無駄な練習がわかったので、見本と同じにすべき部分を紹介します。
【模写制作で見本と同じにすべき部分は?】
1⃣レスポンシブ
witdh:◯◯px;の時の配置を同じにする2⃣全体の配置
余白などの見た目を同じにする(px単位で同じにしなくてもok)3⃣footer下の余白等、バグは起こさない
4⃣文字の改行を同じにする
記事に追加します!https://t.co/IaYHexv16c pic.twitter.com/IYUCM78MS4
— ふる🇹🇭iSara3期 (@guutenx) 2018年8月15日
1.レスポンシブが同じ
witdh:◯◯px;の時の配置を同じにする
2.全体の配置が同じ
余白などの見た目を同じにする(px単位で同じにしなくてもok)
3.バグを起こさない
footerの下に余白があるなどのバグは当然起こさないようにしましょう。
4.文字の改行を同じにする
レスポンシブで文字の改行が同じになるようにしましょう。
例えば、width:375px;の時の改行が同じなど。
あとは例えばレスポンシブで固有名詞「岐阜」の「岐」と「阜」の間で改行されているとおかしいので気をつけましょう。
【模写制作で見本と同じにすべき部分は?】
5⃣背景画像の位置
背景画像が中央にくるように等6⃣文字と画像の配置
見本通り文字と画像が被るように等7⃣アコーディオン/hover等の動きの機能の実装
コピペだけで動かないことが結構ある8⃣画像の透過/明度@shin_web_jp さんこんな感じです💡 pic.twitter.com/vRp0t6sVH8
— ふる🇹🇭iSara3期 (@guutenx) 2018年8月15日
5.背景画像の位置
レスポンシブでも背景画像が中央にくるようにしましょう。
6.文字と画像の配置
見本通り文字と画像が被るように配置しましょう。
7.アコーディオン/hover等の動きの機能の実装
コピペだけで動かないことが結構あるので気をつけましょう。
8.画像の透過/明度
画像の透過や明度も見本と同じになるようにしましょう。
初心者向けおすすめのLP模写コーディングのやり方
効率的な模写コーディングがわかったので、早速LPの模写コーディングの流れを紹介
- 模写コーディングするLPを選ぶ
- LPを模写コーディングする
- 模写が見本通りになっているか確認する
1.模写するLPを選ぶ
頻出のデザインパターンにすべき
例えば、以下のようなデザインはほとんどのLPで頻出です。
- レスポンシブ対応
- コンタクトフォームがある
- 固定ヘッダーがある
- fbやtwitterリンクがある
- 横並びの要素がレスポンシブで縦並びになっている
- お問い合わせボタンがある
LP案件に多い以下のLPサイトを見てどんなデザインパターンがメジャーなのかパターンを掴むのも良いでしょう。
そうすると特異なデザインの模写制作をして消耗することはありません。
例えば、コーポレートサイト、青汁などの商品サイト、塾や英語スクールなどのサービスサイト、歯医者や居酒屋、ゲストハウスなどの店舗サイトなどのパターンが挙げられます。
と言っても、面倒な人は2.でオススメな模写LPを用意したのでご覧ください。
オススメ模写LPはisara
isaraがLP模写にオススメの理由
- HTML/CSS/jQueryの基本〜応用までを学べる
- マイナーな実装があまりない(「」というデザインはマイナーです)
- この模写ができれば案件受注できるレベル
isaraのLP模写制作で学べること
- 固定ヘッダー
- お問い合わせフォーム
- レスポンシブ対応
- jqueryでの開閉ボタン
- jqueryでのpagetopボタン
- 要素の横並び→スマホで縦並び
- SNS連携
など。上記1の頻出のデザインパターンは全て満たしています。
2.LP模写する
次に実際にLPを模写コーディングしていきましょう。
以下に模写の流れを記載しましたが、順番や方法は好きなように決めて良いです。
- 同じ型のものを把握して使い回す
- HTMLでサイト全体の枠組みを作る
- 中身のHTMLを書いてcssで装飾する
1.同じ型のものを把握して使い回す
まず模写サイトの中で同じ型のものを把握して使い回しましょう。
ボタンや見出しのデザインが同じ
ボタンのデザインが同じ
PCで横並び→スマホで縦並びのスタイルものが同じ
パターン1
パターン2
2.HTMLでサイト全体の枠組みを作る
トップセクション、コンタクトセクションなどセクションごとの大きな枠組みを作っていきましょう。
その際、max-widthを指定したcontainerもつけておきましょう。例えばこんな感じです。(中身は適当)
1 2 3 4 5 6 7 8 9 10 11 12 |
<header> <div class="container"> </div> </header> <section class="top"> <div class="container"> </div> </section> <section class="about"> <div class="container"> </div> </section> |
3.中身のhtmlを書いてCSSで装飾する
例えばこんな感じです。(中身は適当)
1 2 3 4 5 6 7 8 9 10 |
<header> <div class="container"> <div class="header-top"> <h1>isaraで学ぼう</h1> </div> <div class="header-bottom"> <a href="#">お問い合わせ</a> </div> </div> </header> |
1 2 3 4 5 6 7 |
.container{ max-width:980px; } .header-top{ color:white; } |
3.模写したLPが見本通りか確認
最後に見本と同様になっておるか確認しましょう。見本通りになっているか確認するには、Googleの検証機能を使います。
これで、画面サイズ(横幅)を変えてみて、レスポンシブ対応したときに崩れていないか確認しましょう。
【LP模写制作で必須の検証機能の使い方】
1⃣Chrome開きサイト上で右クリック→検証クリック
2⃣CSSの適用状態を調べたい要素をクリック→右欄でCSS確認(見本サイトの中身を知りたければここまで)
3⃣Chrome上でCSS等を変更してみる(制作中サイトのCSSが上手く適応されない原因を知る場合) pic.twitter.com/eLztDGfeGr— ふる🇹🇭iSara3期 (@guutenx) 2018年8月14日
わからなかったら、ググる &見本サイトを検証機能で見て回答を見ましょう。
実際のサイト制作では「答えを見てもOK」なので、カンニングをしてOKです。
プログラミングは基本的にパクリ、コピペです。どうしてそうなっているのか理解できればコピペでOKです。
次回同じ実装をする時になったら、「あの時このサイトコピペして見てこんな風に実装したなあ」と思い出して、もう一度そのサイトからコードをコピペするのでOKです。
4.LPの模写しなくて良い部分を知る
以下の部分の実装はあまり頻出のデザインではないので、諦めてOKです。
1.カギカッコの実装
2.流れの線の実装
3.箱の線の上に文字が来る実装
このLP模写コーディングが難しい人は?
もっと簡単なLP模写コーディングサイトを紹介
コーディング模写サイトをレベルを1〜5にわけて紹介しています。
模写しなくて良い部分も一緒に紹介しています。
LP模写コーディングで躓いたら
isaraのLPを作っているときにつまずいたポイントをまとめているので、つまづいたら参考にしてください。
LP模写コーディングの次のステップ
LP模写が終わったら、実際の案件でLPコーディングをする方法を知りましょう。