[プログラミング初心者におすすめ]LP模写 やる理由、おすすめ素材

css

こんにちは、タカフミです!

今回はプロゲートをやり終わった後に初心者が挑むであろうLP模写について書いていきます。

LP模写をやる理由、どんなサイトを模写すれば良いか、どのようにやったら良いかなど解説していきます。

LP模写をやるべき理由

『LP模写ってみんなやっているけどやった方がいいの!?』

って思う方、絶対にやった方がいいです。

ほとんどの人に当てはまると思いますが、プロゲートを卒業した瞬間にウェブページを作れるかって言われたらそうでもないんです。

プロゲートの道場コースをやったことのある方ならわかると思いますが、目標物を決めて一から自分でコードを書いていくのって相当難しいんですよね。

実際やろうとしても

「あれっどこからをつけたらいいんだろう」

みたいな感じで手が動かない経験のある方もいると思います。

そんなわけで実際に自分の手でコードを書く練習として模写は非常に有効な手段だと思います。

僕はこれまで4つほどやってきましたが一つ目は全然手が動かなくて進歩がほとんどありませんでした。

しかし、2、3、4、枚目と進んでいくにつれて、どのようにやれば効率が良いかとか、ここはこのように書けばうまくいきそうだなとかがわかるようになってきました。

どんな素材を使うか

参考までにいままでに僕が行った模写の素材リンクを貼っておきます。

ねこぽんさんという方の素材です

https://webdesigner-go.com/template/

この中で

  • コーポレートサイト
  • ファッションサイト
  • パーソナルジムのサイト
  • 幼稚園のサイト

以上の4つです。

※写真は取り除いてあります。わかりにくくてすみません、、、

コーポレートサイト

一つ目のコーポレートサイトです。

基本的なことの詰め合わせみたいな感じでした。

一点だけ、Newsのあたりで配置の仕方がわからず少し戸惑いました。

ヘッダーの楽な置き方についての記事を下から是非

ファッションサイト

二つ目はファッションサイトです。

これはメインの部分のスライダーと呼ばれる矢印を押して次の写真を表示する技術が使われています。

これの実装にまる丸一日かかったのでその時間を短縮するためコピペでできるまとめ記事を貼っておきます。

パーソナルジムのサイト

三つ目はパーソナルジムのサイトです。

上の二つと比べて文字が多いため配置にとても苦労しました。

縦書きや回転も学べました。

また、グラデーションがとても綺麗なサイトだと思います。

グラデーションのやり方はこちらからどうぞ。

幼稚園のサイト

4つ目は幼稚園のサイトです。

特に、このサイトは写真がないと意味不なので達成感があまりありません笑

ただ、2、3時間ほどで完成したため成長を感じる一枚にはなりました。

ヘッダに仕切りを入れる方法は学べました。

詳しくは下の記事をご覧ください