期間限定でWordPress開設が41%OFF!11/8まで

【難易度別】初心者にもオススメな模写コーディングにうってつけなサイト9選

【難易度別】初心者にもオススメな模写コーディングにうってつけなサイト9選

模写コーディングをこれから始めようと思うのですが、おすすめのサイトってありますか?
初心者から脱初心者まで網羅して、難易度別に模写用のサイトを教えて欲しいです!

こんな悩みに答える記事になっています。

HTML・CSSの基礎が終わったら模写コーデイング!というのは、かなりオススメされている手順です。

しかし、世界には数え切れないほどのWebサイトがあり、模写コーディングをするには難しすぎるものまで含まれています。

そこでこの記事では、初心者・中級者・上級者の3段階に分けておすすめの模写コーディングサイトを紹介していきます。

最初は初級 or 中級に取り組み、最後に上級の模写に取り組めばHTML,CSSの学習は卒業です。

上級の模写も終えた辺りで簡単なWeb制作の案件は受注できるレベルになるかと思います。

この記事はこんな人におすすめ
  • HTML・CSSの基礎学習を終えて、実践的な練習がしたい人
  • 模写コーディングをしたいが、良いサイトが見つからない人
  • 効率よくHTML・CSSの学習を進めていきたい人

なお、模写コーディングのための準備編として、『【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】』も参考にしつつ進めてみてください!

【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】 【準備編】模写コーディングの具体的なやり方【自分もこれで鬼成長しました】 模写コーディングのやり方を、具体的に解説します。必要なものの準備から実際に書き出すまでをしっかりサポートするので、これから模写コーディングを始める方はこの記事を参考にして模写コーディングを始めてみましょう。

Ken

公開しない場合は自由ですが、公開する場合は著作権などに十分注意して、練習として取り組んでください!

不安な人はここから!初心者向け模写コーディング

初心者向けの模写コーディングでは、以下の2サイトを紹介していきます。

  • クナイプのLP
  • FLOWER(花のサブスクリプションのLP)

対象者としては、HTMLとCSSの基礎を終えた人ですね。

例えば私はProgateで基礎を学習したのですが、道場コースにはまだ挑戦していない or 道場コースを1周したくらいの人が対象者になるかと思います。

クナイプのLP

クナイプのLP

まず最初に紹介するのはクナイプのLP(ランディングページ)ですね。

参考 クナイプ バスソルト ユズ&ジンジャーの香り
ランディングページって?

ランディングページとは、簡単に言えば「商品を売るためのページ」ですね。

その商品だけに特化したページでして、シンプルなものも多いです。
「売るためのデザイン」についての勉強にもなりますね。

こちら、素材を入手するのが多少大変(右クリック→名前をつけて画像を保存)なのですが、ページのほとんどが画像でできていまして、難易度も低いです。

ボタンや背景も画像で表現していますし、ボーダーさえも画像で表現。

一応PC/スマホで切り替わるようにレスポンシブなサイトなのですが変化も少なく取り組みやすいですね。

要素の配置など、定番の技術をサクッと学べる初心者向けのサイトです!

FLOWER(LP型)

FLOWER

こちらは花のサブスクリプションのサイトですね。

参考 FLOWER

レスポンシブデザインで、PC・スマホでの差が非常に分かりやすいです。

特に3列→1列への変化や2列→1列への変化を両方学べるので、レスポンシブの基礎を学習するならうってつけです。

他には、アプリDLボタンがスマホの場合常にフッターに出てくるので、要素を固定する方法も学べますね。

画像も多く、ページ自体もシンプルなので初心者向けです。

ちょっと難しいかも!中級者向けの模写コーディング

続いて中級者向けの模写コーディングを紹介していきます。

ここからスタートしてもいいのではないかと思います!

時間はかなりかかってしまいますが、練習量は多くなります。

PAS-POL(コーポレート型)

PAS-POL

こちらは企業サイトとなっていまして、ホバーしたときの挙動なども学習できます。

参考 PAS-POL -旅のモノづくりブランド-

一点、ハンバーガーメニューにはJavascriptが用いられています。

しかし、nav要素のclass名を変更しているだけでして、jQueryをちょろっと学べば実装可能です。

Ken

画像が自動で変わるのもJavascriptでの実装ですが、練習の際は固定で良いかと思います!

難しくないので、挑戦してみてください。

コーディング内容としては非常にシンプルでして、中級者向けの中でも簡単な方ですね。

WordPressテーマWriteのデモサイト(ブログ型)

Writeのデモサイト

WriteはWordPressテーマのデモサイトとなっていまして、ブログ型のデザインでコーディング練習ができます。

参考 Write

ハンバーガーメニューやヘッダーのメニュー内、検索ボタンにはJavascriptが用いられていまして、学習していない方は見た目だけ実装しましょう。

もしもJavascript・jQueryの学習をした人であれば、ハンバーガーメニューの実装くらいは取り組んでみても良いと思います。

非常にシンプルなのでコーディングレベルとしては正直初級レベルかもしれません。

ただ、今後のことを考えてハンバーガーメニューに取り組めるとレベルアップできますね。

Ken

headタグ内にdrawer.jsというものが読み込まれていまして、こちらがハンバーガーメニューを動かしているJavascriptですね。

ただ、この形式のハンバーガーメニューであればGoogleで検索すれば山ほど出てくるので、そちらを参考にして自分なりに実装したほうが簡単そうです。

中級者向けの中でも多少難しいのですが、「WordPressを使用しての模写コーディングをしたい」というのであれば最適ですね。

Ken

ちなみに、WordPressの立ち上げ方は『ポートフォリオを公開するならConoHa WINGで30分で完了!【HTMLやWordPressも】』の記事にて画像を大量に使いつつ紹介中です!

デイトラの無料の模写コーディング練習(LP型)

デイトラのLP

オンラインWebスクールのデイトラの「Web制作コース」での課題が無料で紹介されていまして、こちらも取り組みやすいです。

参考 【無料練習素材】あなたはできる?模写コーディング腕試し!

素材も上記リンク先からDLできまして、とっつきやすいのもポイントですね。

紹介されているページのキャプチャに沿ってコーディングしていく形となるので、真っ白な状態から構成していく力が求められます。

PCでの見た目とスマホでの見た目2種類が用意されていまして、レスポンシブになるように構成していく必要があります。

Ken

サイトを参考にすると、デベロッパーツールで答えを見れちゃうのですが、こちらはキャプチャなので不可能。
0からのコーディング力が試されるので、かなりの学習になりますね!

まさに実践形式になり、オススメです。

なお、デイトラの「Web制作コース」では、圧倒的なコスパで上記のような課題に取り組みつつ稼げる人材を目指せるスクールになっています。

詳しくは『デイトラの評判は?コスパ最強のスクール間違いなし!【運営者にインタビュー】』の記事にて紹介しています。

今後スクールに行こうか迷っているという人は候補の1つに入るスクールかと思いますので、記事を読んで判断してみてください。

関連記事
デイトラの評判は?コスパ最強のスクール間違いなし!【運営者にインタビュー】 デイトラの評判は?コスパ最強のスクール間違いなし!【運営者にインタビュー】 デイトラの評判について知りたい人に向けて、現役エンジニアの私が実際にデイトラの運営者にインタビューしたので、デイトラの内容をまとめます。結論から言うと、コスパ最強のスクール間違いなしです。

くりのすけさんのnote-デザインカンプからのコーディング練習(LP型)

くりのすけさんのnote

完全無料でデザインカンプからのコーディング練習ができる内容になっています。

参考 【完全無料-回答コード有り-】デザインカンプからのコーディング練習【超初級編】

ここから多少変更して自分なりのサイトに仕上げるのも良いでしょうし、素材も揃っているので取り組みやすいですね。

そしてなにより、デザインカンプからの模写コーディング(AdobeXDを使用)なので、より実務に近い環境で学ぶことが可能です。

Ken

Webデザイナーを目指す方は、ここでAdobeXDを使う練習をするのもいい機会になると思います!

デザインカンプからのコーディングをする際は・・・

デザインカンプからのコーディングと書いてあるものは、どれもAdobeXDが必須となります。

まずAdobeXDをダウンロードする必要がありますので、AdobeXDの公式サイトからDLしておきましょう。

AdobeXDでの模写を進める際に知っておきたいポイント
  • 画像を取得する際は、画像を選択した状態でCtrl+E
  • 要素を選択すると、文字の大きさや色、要素の幅など各種値を取得できる。
  • 要素を選択した状態でAltを押しながら他の要素にホバーすると、余白の幅を取得できる。

ざっくりと上記の内容だけ覚えておけば進められるハズ。

デザインカンプからのコーディングは当然サイトを見ながら模写するのとは全然違った知識も必要となるので、中級者向けとしてみました。

これができれば最高!上級者向け模写コーディング

中級者向けの模写コーディングができた人は、大抵のコーディングはできるようになっているかと思います。

上級者向けの模写コーディングでは、さらに難しい内容であったり、コーディング量が多いものを紹介していきます。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

模写コーディングするならうってつけの本ですね。

参考 1冊ですべて身につくHTML & CSSとWebデザイン入門講座

内容的には中級レベルなのですが、1冊を通すと量が膨大になるので上級と中級の架け橋というレベルでしょうか。

Ken

入門書、という立ち位置の本ではありますが、一旦簡単な模写コーディングをやったあとで挑戦した方がよさそうなレベル感です。
レビューでも「始めて間もない時に読んでもわからない」という声もありました。

最終的に、以下の画像のようなページを作ることができます。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

解説アリで学習できるので、模写コーディングで苦手意識を持っている人にとってもよさそうです。

初級編のコーディング終わりに、こちらの本の内容を学んで上級編への架け橋とするのが良いかと思います!

クリスタさんの課題(中規模サイト)

クリスタ

デザインカンプから、中規模サイトのコーディング練習ができます。

参考 【コーディング課題】XDからコーディングをしよう【上級編】

クリスタさんが作成された未経験からWebデザイナーを目指している方向けのコーディング課題です。

こちら、ポートフォリオの掲載も許可されています!(詳しくはクリスタさんのサイトをご確認ください)

解答・解説もついていまして、不安な人でも安心して取り組める形式になっています。

難しいポイントはいくつかあるのですが、このレベルのコーディングができるようになれば簡単なコーディング案件くらいであれば受注できるレベルと判断してもいいでしょう!

なお、WordPress型のサイトという事もあるので、ここまで出来たらWordPressでのデザイン作成を学習するステップに入っても良いと思います。

【ステップ別】WordPress初心者が独学でテーマを自作するための学習方法を解説 【ステップ別】WordPress初心者が独学でテーマを自作するための学習方法を解説 WordPressの学習方法について、目標を自作テーマの作成として解説します。これができるようになるとどんな案件でもどんとこい!という感じになります。ステップ別に自作テーマ作成までの流れを紹介。

ISARA(LP型)

ISARA

バンコクで開催されているノマドエンジニア育成講座のISARAのLPです。

参考 ISARA

圧倒的なボリュームがあり、かなりの学習量になります。

模写サイトは探すのでさえ大変なのですが、ISARAであれば1ページで数サイト分の学習に匹敵するのではないかと・・・。

また、ルールに従えばポートフォリオとしての掲載も許可されています。

他にもISARAの模写は多くの人が挑戦しているため、先人の知恵も借りられます。

分からない部分があっても、ググれば同じような悩みを持った人からヒントを得られるのでやりやすいですね。

その他サイト制作に欠かせない知識も身に付きます

jQueryによるアコーディオンメニュー
アイコン部分のfontawesomeの使い方
bootstrapやtwitterとfacebookボタンの挿入などですね。

時間はかかってしまいますが、できたときはかなりの自信になりますので挑戦してみましょう!

ある程度学べたら、オリジナルのサイトも作ってみよう

模写コーディングで目指すべき場所は

分からないところがあっても調べたらどんな見本出されてもコーディングできるな

というレベルです。

そのレベルまで達したら、デザインも自分でやってみて、オリジナルのサイトも作成してみてください。

かなり頭を使いますし、デザインの勉強にもなって一気に成長できます。

今回の記事でおすすめした9サイトですが・・・

  • 初級者向け1つ、中級者向け0~1つ、上級者向け1つ
  • 中級者向け1つ、上級者向け1つ

くらいの組み合わせで学習して、自分の到達レベルを確認しつつ進めてみてください。

なお、この後の流れですが「月5万円稼ぎたい」という人向けのロードマップを作成していますので、そちらもご覧ください!

【目標月5万】大学生がプログラミングで稼ぐ全手順【バイト以外で稼ぐ】 【目標月5万】大学生がプログラミングで稼ぐ全手順【バイト以外で稼ぐ】 大学生がプログラミングで稼ぐ手順を全公開します。半年で達成可能でして、それでバイト以外でもガッツリ稼げるようになります。プログラミングを学んでからWordPressを学習し、案件を取得するまでを解説していきます。

「大学生が」というタイトルではありますが、全員参考にできるかと思います。

私も模写コーディングで鬼成長できました。

初心者の最初の難関でもありますが、うまく乗り越えていきましょう!