【プログラミング初心者向け】サイト模写を進めるまでの手順を解説します！【大学生が語る】
こんにちはぶうぶうです。今回のテーマはサイト模写をする際の進め方について解説します！
このページを見ている方は以下の悩みを抱えている方だと思います
・プログラミングの勉強してるけどどの段階からサイト模写・オリジナルサイト制作を行えばよいか？
・サイト模写したいけどどういったサイトを模写したらいいか分からない？
・プログラミングの勉強じゃ一通り終えたけど次に何をすればよいか？
・最初プログラミング言語どれとどれを使えばいいか？
・プログラミング（サイト制作の勉強）どう進めればよいかわからないよー
以上の方の悩みを解決します。
｜目次
・ProgateとドットインストールでHTML、CSS、Bootstrapの項目をやった後に行う【基本二周】（基本学習時間は求めません）
（javascriptとPHPは案件一件あるいはサイト模写一つ終わるまでまず触れなくて可）
・模写サイトの決め方【こちらも三パターン紹介】
｜ProgateとドットインストールでHTML、CSS、Bootstrapをやった後に行う【基本二周】（あえて学習時間は指定しません）
タイトルの通りです。HTML、CSS、BootStrap最初はこれで十分です。
これで終わりでもいいのですが、具体的に解説します。
なんのせ、まず最初はprogate、ドットインストールでの学習から始める方が効率的です。
・Progate
・HTML・CSS 初級、中級、上級 道場コース３つ
進め方はProgateに従ってよい。
・ドットインストール
- HTML
- CSS
- Bootstrap
上記の項目を行えばよいでしょう。
基本progate、ドットインストール二周でしょう。
ぶっちゃけ分かるまでやっていいですが、それだとサイト制作を行うまで時間がかかりすぎてしまうのでお勧めしません。基本形を覚えてもらえばいいです。
※注意
思考停止しながら繰り返し行ってはいけません。手を動かして実際にコードを考えながら書いてみる。これは、どのエンジニアの方も述べている基礎中の基礎なので、守ってください。
一周目は思考停止でOkです。あくまで理解度は10～30％で。文章や画像を例と同じように配置できれば合格です。
二周目からは一周目で分からなかったところを思い出し、40～60％の理解を目指しましょう。
自分はまだ慣れてないなーと思ったら繰り返し、演習をしてもらっても構いませんが、これだけに3か月以上かけるのはNGです。繰り返しいいますが、これ以上やると、一歩も前に進まないし、サイト制作の実績も詰めれません。
目安として、三か月（一サイト模写込み）。大学生や社会人で仕事もなく一日中暇な人は最低でも一週間～二週間で回れるでしょう。
Progateとドットインストールどちらか好きな方で学習を行えばよいのですが、僕は両方やりながら、地道に馴染んでいきました。
参考に僕が行ったやり方は以下です
Progate 初級→中級→初級→中級→実践・・・・・スミマセンここからは記憶は曖昧です
上級→Flex-box
初級三週 中級四～五週 上級三週 flex-box二周 道場五週
ットインストール
HTML・CSS、Bootstrap 2周
Progateは合間にヒントを見ずにやったりしてたので計７週しましたが、はっきりいって時間のムダ。
見ずにしなくてもいいです。二～三周で十分。なぜなら、結局やったことの大半は忘れるからです（笑）
以上からprogate、ドットインストール二周ずつやってすぐにサイト模写に移るといいです。
分からない場合はまた、progateやドットインストールに戻る。それか、ググって検索しましょう。
一応補足
上記の言語以外のjavascriptとPHP等は案件一件あるいはサイト模写一つ終わるまでまず触れなくて可
これもですが、上記以外の項目を無理して覚えてからやろうとはけして思わないでください。やっても忘れますし。いきなり上記以外の言語も一緒に使いこなすは無理があります。
まずは、サイト模写と仕事を一件受けてみてからそのステップに行きましょう。
※デベロッパーツールを使えるようにしよう！
ここで模写コーティングにはいるまえにデベロッパーツールを使えるようにしましょう。
デベロッパーツール・・・サイトの形を見ながらコーティング可能。
詳しくは以下のサイトを参照でお願いします。
・ https://saruwakakun.com/html-css/basic/chrome-dev-tool
かなり、便利で必須ツールなので模写に入るまえにかならずマスターしときましょう。
｜模写サイトの決め方【こちらも三パターン紹介】
・Airbnbとisaraのサイトをそれぞれ一ページ模写してみる【見た目だけでOKです】
・クラウドワークスやランサーズにある案件のサイトを模写・制作をしてみる。
・すきなサイトを模写してみる。
・Airbnbとisaraのサイトをそれぞれ一ページ模写してみる【見た目だけでOKです】
個人的にオススメできるのがこの二サイトです。
というよりこのサイトを模写している方が多いのも理由ですが、一つ言えば、このサイトを完璧に模写することできれば、簡単な案件を引き受けることが可能です
BootStraptを使用していることから実際に自分の実力を測ることができます。
デザインもかっこいいですし、かなりよさげです。
特に、isaraのサイト模写ができた場合、約20万の案件を引き受けることが可能なそうです(根拠としてフリーランスエンジニアの方が述べてます)。
しかし、isaraサイトの一部分模写をする場合はjqueryを学んでおく必要があります。
でもこれを学んでなくても模写は可能なので心配はないです。
自分の実力を測る事も可能です。Airbnbやisaraサイトはポートフォリオとしての使用も可能なのでお得です。
※isaraサイト特定の条件
・模写したLPの画像キャプチャを掲載する形での公開をお願いします
・isara.lifeが元ページであると分かるように記載し、リンクの貼付をお願いします。（no followタグ禁止）
・画像キャプチャのタイトルは「isara.life模写制作LP」とし、読み手もしくはクライアントに模写制作と伝わるように併記してください。
・クラウドワークスやランサーズにある案件のサイトを模写・制作をしてみる。
深くは説明しませんが、実際に案件のサイトの模写を行うといいでしょう。
それを行えば、クライアント側に自分はあなた方のサイトの制作ができるだけのスキルがありますと案件提案の際に伝えることができるのでとても便利です。
クラウドワークスとランサーズのリンクを下記に貼っときますね
・クラウドワークス https://crowdworks.jp/login
・ランサーズ https://www.lancers.jp/user/login
・すきなサイトを模写する
すきなサイトありますよね～
例えば、アニメやゲームをしたり、みたり、調べることがただあるでしょう。その場合会社のホームページをみることがおおいにあると思います
そこでいいなと思ったサイトを模写する！それが一番かと
アニメやゲーム会社のサイトに限らず自分の好きなサイトを模写することで同じ制作スキルを自分が持ち合わせていると再認識することができますし
何より継続やモチベーションの維持に繋げることができるのでオススメです。
ということで今回は以上ですー
スポンサーリンク