こんにちは！Takeshi(lhZJlNpUPZ1iCfR)です！
LP（ランディングページ）の模写に挑戦してみたいけど最初はどんなサイトを模写すればいいの？
今回はコーディング初心者の方に向けて、最初にLPの模写をするのにオススメのサイトを難易度別に紹介したいと思います。
今回は全部で3つのサイトを紹介しておりまして、下にいくほど難易度が高いページになっております。
初心者の方は是非簡単なページからトライしてみてください！
初心者がLP模写をするときのオススメのサイト
初心者が模写をするときに最適なLPとはどんなサイトなのか？
個人的に考えてみたところ以下を意識しました。
- 画像ばかりでなく、しっかりコードが書かれている
- HTML/CSS、jQueryの基本が分かれば可能
- レスポンシブの練習になりそう
この辺りを厳選してオススメのサイトを3つまで絞りました。
こちらのサイトの模写ができれば基本的なHTML/CSSの基礎はバッチリなはずです！
それではご覧下さい〜
模写にオススメのLPサイト①
最初に紹介するページはこちらです！
※画像をクリックすると該当のページに飛びます。
FLOWER｜かわいいが届く、ずっと無料のお花便
アプリのダウンロードを促すLPページです。
とてもシンプルな構成でかつ、おしゃれなページですね。
模写の難易度的にはこの中では一番簡単な部類になりまして、初めての模写にはとても最適なページだと思います。
特に最初のうちは上手くいかなくてイライラすることもありますよね。
そんな時にこのような簡単でオシャレなページを模写するとモチベーションも上がって楽しくなってくるのでオススメです。
模写にオススメのLPサイト②
次に紹介するページはこちら！
圧倒的に安い英会話スクール・英会話教室のリンゲージ
レッスン生の募集をしている英会話教室のLPです。
LPは画像を多用するページが多いですが、このサイトは比較的最低限の画像で、CSSなどでしっかりレイアウトされたページになります。
横並びなどの基礎的なレイアウト、LPならではの画像とテキストを組み合わせたレイアウトなどなど。
初心者が最初に模写をするにはとても参考になるページだと思います。
模写にオススメのLPサイト③
最後に紹介するのはこちらになります！
能開センター 小学英語 │ 株式会社ワオ・コーポレーション
こちらは小学生向けの英会話スクール受講を促すLPですね。
難易度的にはこの中だと一番難しめなページです。
HTML/CSSだけでなく、jQueryを使ったアコーディオンメニューやLPサイトによくある「スクロールしたらフワッと要素が出てくる」ような要素がところどころ使われています。
この部分のアニメーションは多くのWEBサイトで使われているのでこの機会に是非習得したいですね！
スクロールしたらフワッと要素が出てくるjQueryの書き方が分からない…
そんな人は是非そのままGoogleで「スクロールしたらフワッと」で調べて見て下さい。
コピペでも実装できるようなコードを紹介、解説してくれている方が沢山います。
基本的に分からない部分はググれば何とかなることが多いので分からない部分が出たらすぐGoogleで調べる癖をつけましょう！
それにしても本当に便利な時代ですね…。
模写する時に参考にするLPページの探し方
最後に自分で模写する時に参考にするLPページの探し方を紹介します。
今はLPページをまとめて紹介してくれているサイトが多いので、今回はその一部のサイトを紹介します。
参考になるLPのまとめサイト
Web Design Clip [L] | ランディングページWebデザインクリップ
様々なLPサイトを紹介してくれているサイトです。
商品系のLPよりは企業のキャンペーンページ的なものが多い印象です。
上で紹介した3つのサイトもここで発見したよ！
ランディングページ集めました。
カテゴリ別に探せるのでとても便利です。
模写の練習だけでなく、自分でLPをデザインする場合も参考になるようなサイトが沢山掲載されています。
とんでもなく量が多いので見てるだけでも楽しめます。
商品系のページも沢山あるので自分でデザインする時はとても参考になるよ！
気に入ったページがあれば画像をクリックすると該当のLPに飛べますので、是非色々見てみてください！
LPの模写がうまくいかない時は
プログラミングの勉強を始めて間もないと、「思ったように模写できない…」という壁に確実にぶち当たります。
ただ、ここでプログラミングの勉強を諦めてしまうのは、非常にもったいないです。LPの模写がうまくいかない時は、
- コードに変な半角スペースが入っていないかどうか
- 自分の不明点を充分にGoogleなどで検索したか
- コードにスペルミスはないかどうか
- 実際のコードをGoogleの検証ツールで確認⇨知らないコードがあればググる
- 聞ける人がいる場合は質問する
この５つを徹底すれば必ず最終的に理想の形で模写できるようになるので、根気よく頑張りましょう！
また、独学している方の中で「どうしても模写できない…身近に質問できる人もいない…」という方は、いっそプログラミングスクールに通うのも一つの選択肢としてはありです。
今はオンラインで受講できて、無料体験コースもあるTechAcademy [テックアカデミー] などのプログラミングスクールもあるので、挫折してしまいそうな方は試しに利用してみてください。
ちなみに、こちら【無料体験あり】初心者におすすめのプログラミングスクール3社を紹介【WEB制作】の記事でも、おすすめのプログラミングスクールを紹介しているので、気になる方はどうぞ！
最後に
今回は難易度別に3つのLPページを紹介しました。
これから模写を始める方は是非参考にしてみてください！
ちなみに参考にするLPが探せるLPまとめサイトも紹介しましたが、これ以外にも沢山のLPまとめサイトがあるので気になる方は、ググってみてください！
よーし模写してみよう！！と思ったけど最初のページすら上手くできない…
なんて方はこちらの記事に模写を始めるのに必要なProgateのコースは3つだけ【WEBサイト】模写する為の勉強方法なんかも書いてますので是非参考にしてみて下さい。
また、「LPの模写ができるようになってきたけど、これからどう勉強を進めていいか分からない…」という方は、プログラミングで稼げるようになるまでのロードマップ【完全独学】こちらの記事もどうぞ。
プログラミングで稼げるようになるまでのロードマップ【完全独学】
それでは今回はこの辺で失礼します！
最後まで読んで頂いてありがとうございました！