サイト模写をするのにオススメなサイトをレベルごとに分けてみました

サイト模写におすすめなサイト

サイト模写でもっとHTMLとCSSを勉強したい

勉強用のオススメサイトはないかな?

この疑問にお答えします。

WEB制作やコーディングに興味があって独学しようと考えている方は増えています。

そんななかで一番最初に思いつく方法が、サイト模写ではありませんか?

ですが、どのサイトを模写すればいいのか決められていなかったり、サイト模写の準備が終わっていないパターンもあるでしょう。

ということでこの記事では、サイト模写をしたい方向けに『サイト模写にぴったりなWEBサイト』をご紹介しています。

サイト模写とは

サイト模写におすすめなサイト

具体的にサイトを紹介する前に、そもそもサイト模写とはなんなのでしょうか?

サイト模写とは写経とも呼ばれており、サンプルコードや既存のWEBサイトを完全にコピーして勉強する方法です。

綺麗なWEBサイトや企業のWEBサイトは完成度が高く、それらのWEBサイトを完全にコピーをしていく作業です。

もちろんメリットデメリットはこれだけではありませんが、特筆するべきポイントを書いています。

また、本記事ではサイト模写のやり方は書いていませんが、『プログラミングにおいて写経することは最適な上達法であるのか?』という記事でやり方を書いています。

サイト模写のメリットもより深く解説しているので、ぜひ読んでみてください。

サイト模写の前の準備

サイト模写におすすめなサイト

では、サイト模写に入る前に準備をしましょう。

サイトと模写を始めるためには、コードを書くエディタと、最低限の知識が必要となります。

それぞれ解説をしていきますね。

コードを書くエディタ

まず、プログラミングのコードを書くのであれば絶対に必要になるエディタという存在。

エディタを簡単にいうとコードを書くツールのことで、これを使わないとコードを書くことができません。

エディタを知らなかった方や、サイト模写を初めて練習するという方には、Amazonが提供している『Cloud9』というサービスをオススメしています。

Cloud9のインストール方法などは『アプリ作りたい人必見!Cloud9でプログラミングの開発環境を作ろう』という記事をみていただければわかりやすく解説を加えています。

最低限の知識を身に付ける

前提となりますが、サイト模写を始められるのはある程度のスキルを身につけてからになります。

オススメな勉強サイトはProgateで、Progateをやればサイト模写レベルの勉強はできると思います。

レベル1:ランディングページ

それではサイト模写のためのWEBサイトをご紹介していきます。

まずはじめにご紹介するのはランディングページ(LP)で、「商品やサービスを売るための縦に長いページ」です。

縦に長く、一つ一つのパーツが大きいのが特徴です。

比較的簡単な部類のサイトなので、しっかりと勉強しておきましょう。

iSaraLP

isara

オススメのWebサイトは、バンコクのプログラミング講座「iSara」のLPです。

サイト自体は複雑なCSSやjQueryが必要なく、レイアウトもシンプルで難易度は結構低めです

Progateを終わらせてからしっかりと時間をかけて模写を進めれば、絶対に作りきることができるレベル感です。

ですが、LP全体に言えることでもありますが、縦に長いためコードの分量がとても多くなります。

時間がかかってしまうということを留意して、勉強に取りかかれるといいと思います。

ちなみに、このサイトは条件付きでポートフォリオに掲載可能です

実績がないor少ないコーダーにとってはありがたいですね。

>>isaraのページへ飛ぶ

レベル2:企業様ページ

一言で言うと、企業のホームページのことです。

商品を売ることに重きを置いていないため、ランディングページとは異なり縦長ではありません。

しかし、企業の紹介ページやランディングページに飛ばせるようなメニューバーが取り入れられていることが多いです。

japan taxi

japantaxi

オススメのWEBサイトはjapantaxiです。

japantaxiは日本のタクシーを支配している会社です。

intertekのページには、実務の時によく使われるJavascriptやデザインがグッと詰まっていて、実践的です。

技術の要求レベルが上がった一方で、分量自体は少なくなったのであまり時間は使わないかもしれません。

また、このページはたくさんのナビゲーションバーがでてくるので、aタグのリンク先をたくさん設定しますが、すべて#で設定してもらえれば大丈夫です。

サイト模写するのは、以下のリンク先の1ページだけでOKです!
ぜひ確認してみてください!

>>japantaxi

レベル3:おしゃれページ

最後にご紹介するのは、機能性よりもデザインを重視しているおしゃれなWEBサイトです。

AIAD

AIAD

オススメのサイトはAIDAという会社で、日本で唯一のファッション領域に特化したソリューション・グループです。

今回ご紹介するページは、コードの分量は少ないですが一歩進んだCSSやjQueryがたくさん使われています。

このサイトの良いところは、『このような魅せ方もあるんだ!』ということに気づけることができる点です。

特に、ページを開いたときに出現するファーストビューは、かなりオシャレなので確認しておくと良いでしょう。

コード自体は少ないので、やる気がある人はこのWEBサイトを全ページ模写することも可能だともいます。

時間との兼ね合いをみつつ、できるだけ再現をしていきましょう。

>>AIDAのページへ飛ぶ

まとめ:サイト模写でレベルを上げろ!

サイト模写をするのにオススメなサイトをレベルごとに分けてみました

いかがでしたか?

サイト模写は独学をする上で最高の勉強方法の一つであると言えます。

サイト模写することでプログラミングスキルは絶対に向上しますし、ポートフォリオとして転用することも可能です。

今回ご紹介したWEBサイトを順番に模写していき、サイト模写が終わるころには十分スキルが身についているでしょう。

しっかりと成長したい方は、ぜひ挑戦してみてください!