【Web制作超初心者向け】模写にちょうどいいLPページ

HTML/CSSを勉強しようと思い立ち、Progateで勉強してみました。

HTML/CSS、Javascript、jQuery、PHPを一通り学んだのですが、Progateを学んだからと言っていきなりWeb制作案件を受注できるほどの技術力は身についていません。

ではどうしたらいいか？
調べたら、実際にあるLP（ランディングページ）を模写して練習していくのがいいとのこと。

そこで、いろんなサイトで模写に良いと紹介されていたiSaraの模写をしてみようと思ったのですが、なんか難しそう。。。

もっと簡単なLPはないの？

ついでに、もっと可愛くてオシャレなLPはないの？

と思いまして、超初心者向けで可愛いLPを集めてみました！

LPを探したのはこちらのサイトから↓
https://lp.webdesignclip.com/

簡単そうで、可愛いorおしゃれなLPと、オーソドックスなLPを10個まとめました。

まず初めに何を模写すればいいのか悩んでいるあなたの参考になれば嬉しいです☆

【超】初級のLP　～これはできる！～

超初心者向けのLPです。

超初心者向けの模写を1つ完成できたら、自信がつくので、次の「初心者向け」に取り組めますよ！

KNEIPPゆず

kneipp（クナイプ）

クナイプ バスソルト ユズ＆ジンジャーの香り 全身にぬくもり巡る発汗バスタイム | Kneipp（クナイプ）待望の“発汗できる”ユズのバスソルトが新登場！ 爽やかでほろ苦いユズに、ピリッとスパイシーなジンジャーをブレンドした香りで、体の芯からじんわり発汗できるリフレッシ...

ほとんど画像でできているLP。

画像を配置していけば完成しちゃいます。

私も模写してみましたが、慣れない超初心者でも4～5時間で完成しました！

キッズコレッチオ

https://kids.colleccio.jp/lp/stuffed-toy.html

子どもの絵を縫いぐるみにするサービスのLP。

ボリュームは多いけど、難しい部分はなさそうな印象。

モデル脚　美脚シート

https://modelleg.co.jp/

おしゃれで可愛いLP。
でもシンプル。

JSなしで作れちゃいそう。

こういうおしゃれなLPが作れたら、自信が付きますね！

初級のLP　～調べつつできる！～

オーソドックスな、ザ・初級のLPです。

Progateを学び終えて取り掛かると、ちょっとつまづくかも。
ググりつつ模写していけば、時間がかかっても完成できるLPです。

PAS-POL

PAS-POL -旅のモノづくりブランド-｜TABIPPO

PAS-POL -旅のモノづくりブランド-｜TABIPPOPAS-POLはTABIPPOのモノづくりブランドです。 ⾃分と世界を繋げる新しい時代のパスポートのようなモノを作りたいと思い、PAS-POLという名前をつけました。

いろんなサイトで、「初心者の模写におすすめ！」と紹介されているPAS-POLです。

実際私も模写してみて、まぁなんとか完成させることができたので、初心者向きと断言できます！

ただ、Progateやっただけで挑むと、挫折しかねない。
できるだけ上記の超初心者向けをやってからPAS-POLに挑むのがいいと思います。

ロッテのど飴

ロッテ のど飴｜お口の恋人 ロッテ

ロッテ のど飴｜お口の恋人 ロッテロッテ のど飴は、国産カリンエキスと厳選ハーブエキスの、こだわりの「のど飴」。

ロッテのど飴のLP。大企業のLPとしてはシンプル！

ページをスクロールしていったら「ほわっと」製品写真が出現するのが、ちょっと難しいかも？
ググりつつチャレンジしてみましょう。

OKURU

フォトギフトサービス OKURU - 子供の写真でフォトギフト作成

フォトギフトサービス OKURU - 子供の写真でフォトギフト作成スマホの中の写真を選ぶだけで、オリジナルフォトギフトがお手元に届きます。お子さまの写真でおしゃれなフォトギフトを作ってみませんか？

典型的なLPといった印象。
特に難しそうな箇所は無いけど、ボリュームが多めなので、途中で飽きちゃいそう。

ソネスのケータリングサービス

あわせて読みたい

世界でここだけのパーティーを。 | 福岡のケータリング SONES世界中で、今ここにしかないケータリングを。

見ているとお腹がすいてくるLP。

固定ヘッダーや、サイドも固定しているので、ちょっとテクニックが必要。

果汁グミ

https://www.meiji.co.jp/sweets/candy_gum/fruits_gummi/gelee/

石原さとみ可愛い！というかLPが全体的にカラフルで可愛い！！！

ページ飛んでもらうと分かりますが、JSが大変そうなLPです。
ボリュームは少ないんだけどね。

中級よりの初級のLP　～頑張ればできるはず！～

私の体感的に、「これって初級というより中級では？」と思うLPです。

iSara

iSara[イサラ]｜バンコクのノマドエンジニア育成講座 -

iSara[イサラ]｜バンコクのノマドエンジニア育成講座 -iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べ...

でました、iSara！！

いろんな人が模写すべきページとして「iSara」を紹介しています。

典型的なLPで、特に難しい箇所もなさそうですが、とにかくボリュームが多い。
途中で飽きちゃいそうです。
実際、私はiSaraを途中まで模写した状態で止まっています（汗）

iSaraのLPは、条件を満たせばポートフォリオとして提示していいそうなので、ぜひ模写しておきたいLPです！
（ポートフォリオにする場合は、自分でルールを調べてくださいね）

いち髪

いち髪｜クラシエ

いち髪｜クラシエほどきたくなる絹髪へ。いち髪のブランドサイトです。

最後は「いち髪」のLP！

川口春奈可愛い～

動画埋め込みとか、スライドショーとか、いろいろ大変です。

大変な分、この「いち髪」のLPが模写できれば、もう初心者を卒業して中級者になれるのでは？

私はiSara模写が終わったら、いち髪に取り組む予定です！

自分好みのLPを見つけて模写しよう♪

今回紹介した模写したいLPは、

・超初心者でも模写できそう
・可愛い or キレイ

なものを選びました。

やっぱり、模写して完成したときにテンションが上がるようなLPのほうが、やりがいがありますもの。

女性向けになってしまったかもしれません。
男性でも、自分好みのLPを探してみてください！

LP探しページ：https://lp.webdesignclip.com/

模写に挫折したら、もっと簡単なLPを探して、それを完成させて自信を付ける！
これに付きますね！

私はまだiSaraの模写の途中なので、早く完成させて、実際にWeb制作案件を受注できるようになりたいと考えています！

私と同じような超初心者のあなたも、諦めずに頑張りましょう☆

んじゃ、また～