模写でコーディングスキル向上!学習効率を爆上げする3つのポイント

こんにちは! Web制作ライターのナナミです。

HTMLCSSの基本を覚えてきたら、今度は実際に作ってみる作業をしたいですよね。

そんな時にオススメなのが模写、既存のサイトを再現するようにコーディングをしてみることです。

でもどんなサイトを模写すればいいの?
模写ってどうやればいいんだろう……

今回はこの疑問を解決すべく、いちばん勉強になる模写の方法を伝授したいと思います!

記事を参考にして、コーディングレベルをぐーんとアップしちゃってくださいね。

この記事の要約
  • Webサイトの模写はHTML/CSSの学習者に最適
  • 進め方のルールや積極的な情報収集は模写での学習効率を高める
  • 要素を分解しながら進めると模写がしやすくなる

なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。

受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。

\ オンラインで相談可能 /

また、次の記事ではそもそもプログラミング初心者は何から始めれば良いのか、その学習手順やおすすめの教材を紹介しているので良ければ参考にしてください。

プログラミング初心者が独学で0から学習を始められる完全入門ガイド

本記事の解説内容に関する補足事項

本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。

また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。

記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。

目次

模写だけでは実務レベルにならない

オススメって言ったのに実務レベルにならない? と思うかもしれないですが、実はそうなんです……。

なぜなら実際にコーディングの仕事をする場合、参照するのはPhotoshopやIllustratorで作られたデザインデータ。実際の業務では、そこから必要な画像を切り出したりする作業も含まれているからです。

模写の場合、参照するのはすでにでき上がっているものなので、必要な画像などはそこからダウンロードすればいいだけ。本来実務でやる部分をすっ飛ばしている状態です。

模写「だけ」では実務を完璧にこなすことはできません。そこは念頭に置いておきましょう。

それでも模写をする意味とは?

それでも! それでも模写は意味があるんです!

模写をすることにより、HTMLやCSSのコーディングの流れや、それぞれの言語のルールの確認、プロパティの種類を知ることができます。

PhotoshopやIllustratorのデータを用意するよりも手軽にできるし、何よりすでにでき上がっているので「答え」があります。

実務レベルの練習をする前の段階、HTML・CSS覚えたての状態での練習にはもってこいの方法なのです。決して無駄ではないんです!

模写での学習効果をUPさせる3つのポイント

模写は初心者の練習にもってこいですが、ただ単にコードを丸ごと写したり、なんとなくやってみたりするだけではなかなか上達しません。

下記の3つのポイントを意識して、模写でしっかりスキルを身につけていきましょう。

ルールを決める

やみくもにやるのではなく、ルールを決めましょう。一般的なコーディングのルールというより、これからやる模写でのルールです

例えば、「今回は流れを掴むために、細かい部分ではなくレイアウトだけを真似しよう」とか、「今回はさらにレベルアップするために完コピしよう」とかです。

模写は1px単位までぴったり合っていないと絶対ダメ、とは言いません(実務レベルではそこまで求められますが)あくまでもこれは練習です。その目的をしっかり持って取り組めば、たとえ1pxずれていたとしても無駄にはならないのです。

例として、レベル別の模写ルールを作ってみました。こんな感じで自分ルールをつけながら、段階的に厳しくしてレベルアップしていきましょう。

入門レベル

作成の流れを掴むために、レイアウトだけ真似をする。

  • 画像はダウンロードする
  • 文字などは「あああ」でもOK
  • ちょっとずれてても気にしない
  • 背景画像とか気にしない
  • レスポンシブは無視

初級レベル

CSSの練習をするために、細かい要素も真似していく

  • 画像はダウンロードする
  • 文字はコピペする
  • フォントの種類は気にしない
  • ちょっとずれてても気にしない
  • 背景画像もちゃんと入れる
  • 角丸やフォントの大きさも近くする
  • レスポンシブにする

中級レベル

実務レベルに近づくよう、完璧を目指す

  • 画像はダウンロードする
  • 文字はコピペする
  • フォントの種類はツールで調べる
  • 1px単位で真似する
  • 背景画像もちゃんと入れる
  • 角丸やフォントの大きさも完璧に同じにする
  • 要素の意味を考え、適切なHTMLタグを使う
  • レスポンシブも完璧に

要素を分解して考える

模写というよりコーディングそのものに言えることですが、デザインが何で構成されているのかを分解して考えるのが重要です。

それはこういうボタンの見た目だけでなく……

侍エンジニアの
サービス紹介を見る

下記のような、全体のレイアウトも同様です。

コーディング初心者にありがちなのが、ひとつひとつを丁寧に作り込みすぎてなかなか先に進まないパターンです。確かに最終的にそこまでの作り込みは必要ですが、最初からそれをやらなくてもOKです。

最初は全体をざっくりと分解して、そこからだんだん細かく分解していくのが、効率の良いコーディングの秘訣です。絵を描く時にアタリをつけるように、文章を書くときにプロットを作るように、少しずつ完成に近づけていくことを意識してみましょう。

わからなかったらググる

初心者ですから、どうやったらこのレイアウトを実現できるんだろう……とわからなくなることもたくさんあると思います。

そんなときはGoogle先生に頼りましょう。テストではないので、どんどん調べてOKです。

むしろこの調べる作業は、実務の練習につながり繋がります。コーディングは実務中にわからないことを調べながら進めていくものだからです。

HTMLやCSSの勉強の際、いろんなブログを見て「暗記しなくていい」と書かれていたことを思い出してみてください。調べることもスキルのうちと解説されていませんでしたか?

まさにそれが練習できるチャンス、どんどん調べて検索力を身につけていきましょう。

調べてもどうしてもわからなかったら、最悪「答え(模写しているサイトのソース)」もありますので、そちらを参照してみてもいいでしょう。ただし、次も同じような部分で詰まった時のために、どう調べれば出てくるのかを考えながら参照するとベストです。

課題にぴったり!レベル別模写サイト

模写のポイントがわかればあとはやるだけ!

ナナミオススメの模写課題サイトを選んでみたので、ぜひチャレンジしてみてくださいね。

なおこれらのサイトは、Webデザインの参考サイトから抜粋しました。自分で見てみて、お気に入りのサイトが見つかればそれをやってみるのもいいですね!

MUUUUU.ORG(ムーオルグ)

入門編

模写が初めてな方は、シンプルなレイアウトから始めるのが一番です。LP(ランディングページ)などのペライチサイトからはじめてみましょう。

こちらのLPはレイアウトがシンプルながら、positionなどのちょっとコツがいるCSSも使われているので練習にぴったりです。

鶴弥の防災瓦なら地震も台風も怖くない

初級編

LPでちょっとこなれてきたら、ザ・Webサイト!という感じのスタンダードなレイアウトにチャレンジしてみましょう。

こちらのサイトはまさにWebサイトの基本を抑えているな、というレイアウトでおすすめです。

大阪府豊中市 ヘンミ胃腸内視鏡・内科クリニック

中級編

基本のWebサイトに慣れてきたら、今度はちょっと癖のあるデザインにチャレンジ。ここまでくるともうHTMLやCSSだけでは完全再現は難しいかもしれないですね……。

JavaScriptの勉強もしつつ、こんなWebサイトの模写にチャレンジしてみると、超レベルアップが期待できます! レッツチャレンジ!

RINN Inc.

挫折なくコーディングスキルの上達を目指すなら

ここまでの解説を踏まえ、独学でコーディングスキルを上達させようと考えている人のなかには、

独学で模写を続ければコーディングが上達するのかな…
途中で挫折したらどうしよう…

と不安な人もいますよね。

実のところ、コーディングといったプログラミングの学習途中で挫折する独学者は多くいます。事実、弊社の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

87.5%の人がプログラミング学習時に挫折を経験
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

また、こうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では

  • 確実にスキルを身につけられると思ったから
  • 独学では不安がある
  • 効率よく学べそう

などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。

61%の人がプログラミングの勉強を始めるならスクールが良いと回答
確実にスキルを身につけられそうという理由でプログラミングスクールを選ぶ人が多い

調査概要:プログラミングに興味がある方の意識調査
調査期間:2021/11/19~2021/12/3
対象者:プログラミング学習を検討している10代~50代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。

上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。

いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「コーディングスキルを身につけるのって思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER(侍エンジニア)」です。

300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
300x300-samuraiengineer (1)
6
700x700_01 (1)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
previous arrow
next arrow
料金月分割4.098円~
実績・累計指導実績4万5,000名以上
・受講生の学習完了率98%
・受講生の転職成功率99%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

  • 現役エンジニア講師によるマンツーマンレッスン
  • 現役エンジニアに質問できるオンラインでのQ&Aサービス
  • 不安や悩み・勉強の進み具合を相談できる学習コーチ

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。

侍エンジニアのサポート体制_01 (1)
侍エンジニアのサポート体制_02 (1)
侍エンジニアのサポート体制_03 (1)
侍エンジニアのサポート体制_04 (1)
侍エンジニアのサポート体制_01 (1)
侍エンジニアのサポート体制_02 (1)
侍エンジニアのサポート体制_03 (1)
侍エンジニアのサポート体制_04 (1)
previous arrow
next arrow

侍エンジニアのサポート体制

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でも効率的に必要なスキルだけを習得可能です。

出典:httpscodecamp.jpcoursesmaster_design
5
出典:httpscodecamp.jpcoursesmaster_design (2) (1)
6
3
4
出典:httpscodecamp.jpcoursesmaster_design
5
出典:httpscodecamp.jpcoursesmaster_design (2) (1)
6
3
4
previous arrow
next arrow

侍エンジニアのカリキュラム例

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なぜ侍エンジニアが挫折せずコーディングスキルを上達できるのか気になる人はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る

模写を学んだら次は実務へ

模写をすることによって、コーディング自体の流れはしっかりと掴むことができます。

コーディング練習は楽しいのが一番。自分が好きなサイトや面白そうなサイトを模写するのはテンション上がると思うので、ぜひいろんなサイトを模写してみてください。

しかしそれではまだゴールとは言えません。次はPhotoshopやIllustratorを使いこなし、実務レベルでのコーディングの練習へとステップアップしていってくださいね。

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次