初心者向けにLP模写のおすすめの方法と無駄な練習をしない方法を紹介します。
ちなみにここで言う模写とは、コードをそのまま書き写すのとは違い、自分で回答を見ずに既にあるサイトを実装してみると言うことです。
動画で見たい方は以下をどうぞ
目次
初心者向けおすすめのLP模写コーディングのやり方
効率的な模写コーディングがわかったので、早速LPの模写コーディングの流れを紹介。
- 模写コーディングするLPを選ぶ
- LPを模写コーディングする
- 模写が見本通りになっているか確認する
1.模写するLPを選ぶ
本当はphotoshopデータからコーディングするのが実務に適しており良いのですが、無料で使えるphotoshopデータがあまりに少なすぎるので
今回はLPサイトそのものを紹介します。
頻出のデザインパターンにすべき
例えば、以下のようなデザインはほとんどのLPで頻出です。
- レスポンシブ対応
- コンタクトフォームがある
- 固定ヘッダーがある
- fbやtwitterリンクがある
- 横並びの要素がレスポンシブで縦並びになっている
- お問い合わせボタンがある
LP案件に多い以下のLPサイトを見てどんなデザインパターンがメジャーなのかパターンを掴むのも良いでしょう。
そうすると特異なデザインの模写制作をして消耗することはありません。
例えば、コーポレートサイト、青汁などの商品サイト、塾や英語スクールなどのサービスサイト、歯医者や居酒屋、ゲストハウスなどの店舗サイトなどのパターンが挙げられます。
と言っても、面倒な人は2.でオススメな模写LPを用意したのでご覧ください。
オススメ模写LPはisara
iSaraがLP模写にオススメの理由
- HTML/CSS/jQueryの基本〜応用までを学べる
- マイナーな実装があまりない(一部あり)
- この模写ができれば案件受注できるレベル
- 運営者が模写に使ってOKと言っている
iSaraのLP模写制作で学べること
- 固定ヘッダー
- お問い合わせフォーム
- レスポンシブ対応
- jQueryでの開閉ボタン
- jQueryでのpagetopボタン
- 要素の横並び→スマホで縦並び
- SNS連携
など。上記1の頻出のデザインパターンは全て満たしています。
2.LP模写する
必要なツールを知る
iSaraなどサイトから模写コーディングするときに必要な便利ツールを知りましょう。
色やフォント、要素の大きさなどを知るツールです。
効率的に模写する
次に実際にLPを模写コーディングしていきましょう。
効率的に模写するポイントは同じ型のものを使い回すことです。
模写サイトの中で同じ型のものは把握しておきましょう。
ボタンや見出しのデザインが同じ
ボタンのデザインが同じ
PCで横並び→スマホで縦並びのスタイルが同じ
パターン1
パターン2
3.模写したLPが見本通りか確認
最後に見本と同様になっておるか確認しましょう。
Googleの検証機能を使う
見本通りになっているか確認するには、Googleの検証機能を使います。
【LP模写制作で必須の検証機能の使い方】
1⃣Chrome開きサイト上で右クリック→検証クリック
2⃣CSSの適用状態を調べたい要素をクリック→右欄でCSS確認(見本サイトの中身を知りたければここまで)
3⃣Chrome上でCSS等を変更してみる(制作中サイトのCSSが上手く適応されない原因を知る場合) pic.twitter.com/eLztDGfeGr— ふる🇹🇭iSara3期 (@guutenx) 2018年8月14日
これで、画面サイズ(横幅)を変えてみて、レスポンシブ対応したときに崩れていないか確認しましょう。
例えば1042px(iPad Pro)→375px(iPhone6/7/8)サイズにした時に崩れていないか確認すると言うことが挙げられます。
375pxのときの見た目
1042pxのときの見た目
わからない場合回答を見る
わからなかったら、ググる&見本サイトを検証機能で見て回答を見ましょう。
実際のサイト制作では「答えを見てもOK」なので、カンニングをしてOKです。
プログラミングは暗記というより、どうしてそうなっているのか理解できればOKです。
次回同じ実装をする時になったら、「あの時このサイトコピペして見てこんな風に実装したなあ」と思い出して、もう一度そのコードをカンニングしてOKです。
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.全体の配置が同じ
余白などの見た目を同じにする
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等の動きの機能の実装
アコーディオン、ハンバーガーメニュー、hoverなどの動きは忠実に再現しましょう。
特にアコーディオンやハンバーガーメニューは動かないこともあるので注意。
8.画像の透過/明度
画像の透過や明度も見本と同じになるようにしましょう。
この部分は見本サイトのコードを検証モードで見ないと正確なものはわからないですが、最初は見た目が似ているようになればOK。
このLP模写コーディングが難しい人は?
もっと簡単なLP模写コーディングサイトを紹介
コーディング模写サイトをレベルを1~5にわけて紹介しています。
模写しなくて良い部分も一緒に紹介しています。
LP模写コーディングの次のステップ
LP模写が終わったら、実際の案件でLPコーディングをする方法を知りましょう。