【Web制作】サイト模写のやり方を徹底解説【スキル向上におすすめ】
Web制作・ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ
※本サイトはアフィリエイト広告を利用しています。
【サイト模写のやり方を知りたい人】
「サイト模写をやりたいけど、どこから手を付けたら良いのか分からない。具体的なやり方・手順が知りたい。」
こういった疑問に答えます。
本記事の内容
- サイト模写のやり方を徹底解説
- サイト模写のおすすめサイトを紹介【初心者向け】
- サイト模写をする際の注意点
この記事を書いている僕は、
Web制作会社へのエンジニア転職
を過去に成功させた経験があるのですが、
それが上手くいったのは間違いなく、
本記事のやり方で、サイト模写ができるようになったおかげ。
ちなみに、サイト模写とはその名の通り
ネット上にあるWebサイトを模写する（まねて写し取る）こと。
この記事を読み終わる頃には、
サイト模写の具体的なやり方が分かるようになっていますよ。
サイト模写のやり方を徹底解説
結論、以下の手順で進めていきます。
- 手順①：HTML・CSSの基礎学習
- 手順②：サイト模写に必要なツールを準備
- 手順③：これまで学んだ知識をもとに、ググりつつサイトを模写
手順①：HTML・CSSの基礎学習
HTML・CSSの知識があまり無い状態で
いきなりサイト模写をやるのは
ぶっちゃけ難易度が高いので、まずは基礎学習から。
手順としては、以下の順番がおすすめです。
- その①：ProgateのHTML&CSSコース
- その②：Web制作の参考書で知識を増やす
- その③：YouTubeでさらに知識を補完
その①：ProgateのHTML&CSSコース
まずは、Progateというサービスで基礎をおさえます。
これをやるに当たっての注意点
がいくつかありまして、それが以下のとおり。
- 注意点①：Progateの課金は必須
- 注意点②：『float』は理解できなくてOK
- 注意点③：『道場コース』はやらなくてOK
- 注意点④：Progateはやっても2周まで
注意点①：Progateの課金は必須
Progateは無料だと
学習できる範囲に限界があるので、
迷わず課金はするようにしましょう。
月額で1,000円程度なので
正直これから稼いでいきたいなら
これぐらいで渋っていたらダメです。
1ヶ月もあれば
十分ひと通り学習できるので、
サクッと学んで解約しましょう。
注意点②：『float』は理解できなくてOK
floatという概念が出てきますが、これは理解できなくてもOK。
なんなら飛ばしてしまっても良いぐらい。
僕も学習を始めた当初は
理解するのに苦労した記憶がありますが、
それ以降、実務でもほとんど使っていません。
現在はその上位互換的な
flexboxを使うことがほとんどなので、
こちらを押さえておけば、ほぼ問題ないです。
注意点③：『道場コース』はやらなくてOK
こちらもやらなくてOK。
やったとしても、
分からない箇所は答えを見て問題なしです。
注意点④：Progateはやっても2周まで
勉強をしているうちに、段々と
最初の頃にやった内容を忘れてきますが、
Progateはやっても2周までにしておきましょう。
勉強を進めていくと分かりますが、
Progateで扱っている内容は
ホントに基礎の基礎なので、
同じ教材を何周もやるぐらいだったら
違う教材で新しい知識に触れる方がまだ良いです。
また、よく言われることですが、
プログラミングに暗記は不要なので
そのことはしっかり頭に入れておきましょう。
ここまでが、Progateで勉強をする上での注意点です。
その②：Web制作の参考書で知識を増やす
この段階で模写に進むのは
正直まだキツいと思うので、
Web制作の参考書で知識を増やすのをオススメします。
おすすめ本①：HTML＆CSSとWebデザイン
おすすめ本②：CSS設計完全ガイド
上記の2冊はかなり有名な良書で、
これらを読んで実際に手を動かせば、かなり力がつきますよ。
その③：YouTubeでさらに知識を補完
観ておくべき動画が、以下の3つ。
最後の『しまぶーのIT大学』は
どれも良質な動画ばかりなので、
HTML・CSSの動画を中心に
気になる動画にはなるべくたくさん
目を通してみることをオススメします。
手順②：サイト模写に必要なツールを準備
基礎学習が終わったら、
次にサイト模写で使うツールを準備します。
カラーやフォント、画像などの
そのサイトで使われている情報がないと
サイト模写をすることはできないので、
そのために必要なツールについて、以下の記事で解説しました。
≫【無料】Webサイトの模写に必須のツール5選【これさえあればOK】
【無料】Webサイトの模写に必須のツール5選【これさえあればOK】
Webサイトの模写に役立つツールが知りたいですか？この記事ではサイト模写をする際に必要な、色やフォントなどの情報を取得するのに役立つツールをまとめました。これからWebサイトの模写に挑戦される方は是非ご覧ください。
手順③：これまで学んだ知識をもとに、ググりつつサイトを模写
必要なツールが準備できたら、
あとはひたすらググりつつ、実際に模写をしていくだけ。
とはいえ、
ここまでの手順を踏んでも
始めからなかなかスムーズにはいかないもの。
僕自身も実際そうでしたし、
周りでWeb制作をされている方も
「はじめは全く出来なかった」
と皆さん口を揃えて言います。
なので「自分には向いてない」
などと悲観的に考えず、
今までの教材を参考にしたり
必死にググるなどして、
1つずつ着実に進めていきましょう。
このあたりの
マインドや勉強法に関しては、
以下の記事で解説しているので
こちらをぜひ参考にしてください。
【独学でも可能】プログラミングの勉強法【注意点あり】
プログラミングの独学での勉強法を知りたいですか？この記事では、これからプログラミングの勉強を始める方にオススメの勉強法や、その際に注意しなければならない点について解説しています。これから独学でプログラミングを勉強しようと考えている方はぜひご覧ください。
サイト模写のおすすめサイトを紹介【初心者向け】
「サイト模写の準備・やり方は分かったから、初心者向けのサイト模写におすすめのサイトがあれば知りたいなぁ。」
こういった声が聞こえてきそうなので、合わせて紹介します。
ちなみに、「このサイトを模写したい」
というサイトが既にある方は、
当然そちらを選んでいただいて大丈夫です。
『難易度』と『やっていて楽しいか』
この2つを満たせられると評判のサイトが、以下の2つ
どちらのサイトも、
僕が駆け出しの頃から
オススメだと言われているので、
初心者には取っ付きやすいと思います。
サイト模写をする際の注意点
最後に、サイト模写をする際の注意点についてです。
それが、以下の2つ。
- 注意点①：パーフェクトピクセルは意識しなくてOK
- 注意点②：分からなければ『検証ツール』を使ってOK
注意点①：パーフェクトピクセルは意識しなくてOK
見出しの通りですが、
始めからパーフェクトピクセルは意識しなくてOK。
『パーフェクトピクセル』とは、
デザインカンプと全く同じように
（1mmもズラさず）再現するもので、
案件によってはごく稀に要求されますが
初学者のうちから気にすることではない。
大切なのは、まずは大体でいいので
ある程度のレイアウトを組めるようになること。
パーフェクトピクセルのような微調整は、
ある程度思い通りサイトを組めれば
特に難しいことではなくなるので、
まずは形にすることを意識して取り組みましょう。
注意点②：分からなければ『検証ツール』を使ってOK
『検証ツール』とは、
Google Chromeなどのブラウザに
標準で搭載されている開発者向けのツールのこと。
僕が駆け出しの時には、
「分からなくても検証ツールは使うな」
と言われていましたが、今となっては、
このツールの使い方を覚える意味でも
むしろ積極的に使用するべきだなと。
というのも、僕自身が
分からない箇所があっても
検証ツールに頼らない
ということを実践してきた結果、
検証ツールの使い方を覚えるのが
とても遅くなり、後々苦労したから。
このツールは、今後の実務でも
かなり頻繁に使うことになるので、
早めに使い方を覚えておくことを強くオススメします。
◆
◆
◆
ここまで見ていただいたら
サイト模写の一連のやり方を
理解していただけたかと思います。
始めのうちは大変だと思いますが、
このサイト模写をやると
Web制作スキルがかなり向上するので
ぜひ諦めず頑張ってください。
