Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【初心者向け】オススメ模写サイト

スポンサーリンク

サイト模写

Web製作(HTML&CSS)の基本を学んだら実在するサイトを模写するトレーニングがオススメです。

私が実際に模写を行って初心者にオススメの模写サイトをご紹介します。

 

 

模写の準備

HTML&CSSの基礎勉強が終わって、実践練習として模写を始める前に準備として読んでおくことをオススメする記事があります。

 

模写をするポイントや流れ、サイト模写をするにあたって役に立つ便利なツールが紹介されています。

 

私もこの記事を参考にツールを導入しました。

 

haniwaman.com

 

シンプルな基本のカタチ

KROWL というWeb業界への転職や就職をサポートサービスが提供しているコーディング課題のひとつです。

シンプルな構成ながら、Webサイトに必要な基本的な要素が含まれているので、初めてのサイト模写にオススメです。

 

またコードの解説記事も用意されているので、途中で手が止まってしまったら解説記事を読んで理解してから進めるので挫折せずに終わらせることができると思います。

 

note.mu

 

可愛いLP

シンプルな構造のLPサイトなんですが、写真や色合いがかわいいのでワクワクしながら模写ができます。

あまりにも可愛かったのもあるのですが、模写をする前に各サイズ(PC・タブレットスマホ)サイト全体の写真を取ってFigmaを使ってボックス構造がどのようになっているか理解する行程も行いました。

 

 

サイト全体の写真は- FireShot - というツールを導入すると簡単に取れます。

タブレットスマホサイズの写真はデベロッパーツールでサイトサイズを調整してから撮ることができますよ。

 

flowr.is

 

ブログ型

ブログでよく使われているデザイン構成のサイトも始めのうちにやっておくと幅が広がると思います。

 

WordPressのテーマのひとつ「Write」というシンプルなブログ型のサイトです。

ご紹介してるのはデモサイトなので、ページ内のリンクをクリックすると他のページ飛びますが、私が模写をしたときはトップのページのみコーディングしました。

 

demo.themegraphy.com 

BootStrapを使ってみる

BootStrapが少し使えるようになったらオススメなのがAirbnbのギフトページの模写です。

ページ上のNavigationの検索ボックス部分が一番難しいのでうまくできなかったらとりあえず飛ばして先に進のもアリです。

 

 

 

これができたら脱初心者!?

多くの先輩方が模写初心者向けにオススメされているサイトで、jQueryアコーディオンやトップページへ戻るボタンなども含まれているので今までご紹介したサイトより難易度が高いです。

でも、このサイトをレスポンシブで模写できたらもうなにもわからない初心者ではなくなっているはずです。

 

ページも比較的長くてコーディング量も多めになりますが脱初心者目指して頑張りましょう。

 

isara.life

 

私が模写する時に参考にしたサイトです↓

LP模写コーディング初心者におすすめの方法と無駄な練習 | フリーランスで稼ぐ方法まとめ

 

まとめ

コーディングの基礎学習が終わったら実在するサイトを模写するのがオススメされていますが、始めから難易度の高いサイトに時間をかけるより、少し頑張ればできると思える様なサイトから模写を始めて、多くの経験値を付けていきましょう。

 

サイト模写の感想記事はこちら↓

 

treatmyself.hatenablog.jp

 

 

treatmyself.hatenablog.jp