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

サイト模写Web Development
2020.10.24

サイト模写

コーディングの基礎学習（HTML&CSS）が終わったら、実在するサイトを模写するのが実力をつけるためにオススメですが、難しいのを選んでしまうと挫折してしまいがちです。

この記事ではサイト模写前の準備から、初心者にオススメの挫折しにくい模写サイトを５つ紹介します。


スポンサーリンク

サイト模写前の準備

HTML&CSSの基礎勉強が終わって、実践練習として模写を始める前の準備の一通り紹介されているオススメ記事です。

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

Webサイトをコーディング模写するやり方と使用するツール | HPcode（えいちぴーこーど）
コーディング上達の近道にサイト模写があります。コーディング模写は公開されているWebサイトを見て、ソースコードを見ずに似たようにコーディングすることですね。 実際に公開されているサイトですので、実践力を身につけるには最適な方法かと思います。
haniwaman.com

シンプルな基本のカタチ

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

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

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

note ご指定のページが見つかりません
note.com

可愛いLP

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

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

 

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

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

FLOWER｜ロスレスブーケ販売中！かわいいが届くお花便
ボリュームたっぷりのかわいいブーケが送料込み2,200円から。ブーケ・花束・花器の通販アプリ。
flowr.is

ブログ型

ブログでよく使われているデザインのサイトですが、やっておくと幅が広がると思います。

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

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

Write
書くためのテーマ
demo.themegraphy.com

BootStrapを使ってみる

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

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

これができたら脱初心者!「iSaraのLP」

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

ページも比較的長くてコーディング量も多めになりますが、このサイトをレスポンシブで模写できたら、初心者からは抜け出せているので頑張ってチャレンジしてみてください。

iSara[イサラ]｜バンコクのノマドエンジニア育成講座
iSaraとは「稼ぐこと」にフォーカスしたエンジニア育成講座です。なお、iSaraで「基本的なプログラミングスキル」は教えません。基礎的なプログラミングスキルは無料で学べる時代。iSaraでは、基礎知識学習は事前課題とチャットサポートのみ。今なら月15万円稼げるまで永久サポート付きです。
isara.life

まとめ

初めてのサイトを模写であれば、難易度を落として「少し頑張ればできると思える様なサイト」から模写にチャレンジするのが挫折をせずにできるのでおすすめです。

初めから難易度の高いサイトに長い時間をかけるより、簡単めなサイトの模写を数多くこなして経験値を付けていきましょう。数をこなすことで、模写のスピードも速くなって自分なりやり方なども確立できるので頑張っていきましょう★