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

模写にちょうどいい LPページ
  • URLをコピーしました!
※当ブログではアフィリエイト広告を表示しています

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

https://www.kneipp.jp/lp/yuzu/

KNEIPPユズのLP

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

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

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

キッズコレッチオ

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

キッズコレッチオのLP

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

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

モデル脚 美脚シート

https://modelleg.co.jp/

モデル脚美脚シートLP

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

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

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

初級のLP ~調べつつできる!~

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

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

PAS-POL

https://pas-pol.jp/

PAS-POLのLP

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

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

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

ロッテのど飴

https://www.lotte.co.jp/products/brand/nodoame/

ロッテのど飴LP

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

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

OKURU

https://okuru-photo.jp/

OKURUのLP

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

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

http://sones.cc/catering/

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

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

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

果汁グミ

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

果汁グミのLP

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

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

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

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

iSara

https://isara.life/

iSARAのLP

でました、iSara!!

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

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

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

いち髪

https://www.kracie.co.jp/ichikami/

いち髪のLP

最後は「いち髪」のLP!

川口春奈可愛い~

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

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

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

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

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

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

なものを選びました。

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

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

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

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

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

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

んじゃ、また~

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

関連記事

応援よろしくお願いします☆

この記事を書いた人

理系夫婦の妻のほうです。
大学、大学院(修士)で物理を専攻。
2016年に長女を出産、2021年に長男を出産。
フルタイム勤務ワーママ→休職→専業主婦。

コメント

コメント一覧 (2件)

【模写コーディング】 – soranomi blog|Webデザイナーになるための成長過程を記録 へ返信する コメントをキャンセル

目次