スライドショースライドショースライドショー

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

模写の基本3つを知って コーディング技術を磨こう

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

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

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

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

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

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

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

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

なぜなら実際にコーディングの仕事をする場合、参照するのは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.

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

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説