⚠️記事内に広告を含みます

デイトラWebサイトの模写の答えを探しているあなたへ。大切なことをお伝えします

デイトラサイトを模写して答えを確認するには右クリック「検証」で確認できます。

って、そもそも闇雲に模写してませんか?

大事な2つのこと

模写コーディングはやった方がいいの?

模写はどれくらい実力がつくの?

この2つを理解せずに模写の答えを探している場合は、まずこの記事を読んでください。

ボクはデイトラが無料だった時代に学習し5ヶ月で5万円の案件を受注することができました。

無料時代のデイトラはProgateやドットインストールを使って最短で稼ぐ学習手順を教えてくれていました。

今のデイトラよりも独学色が強いイメージです。

独学だったので当時のボクは、他のTwitterアカウントやブログの情報もミックスして学習していました。

当時はWebサイト模写が流行っていて、模写ができれば一人前的な空気感さえありました。

模写すべきWebサイトをレベル別に紹介している個人ブログも多くあり「模写ができる=稼げる」ような錯覚を起こしていました。

模写することで知識はたまりますが、それだけでは稼げるようにはなりません。

稼ぐために必要な練習は「デザインカンプからのコーディング」です。

なぜなら本番の案件に模写はないからです。

前置きが長くなりましたが、この記事の内容を先にお伝えしておきます。

この記事で分かること
  • デイトラサイトの模写。答えを見る方法
  • 模写の良いところ
  • 模写の悪いところ
  • 模写は実力がつくのか?
  • デザインカンプからのコーディングに切り替えよう

現在、デイトラで学習しながら模写の答えを探している「あなただけに」、遠回りをしない学習方法をお伝えしておきますね。

デイトラサイトの模写。答えを見る方法

とはいえ模写の答え合わせがしたい人のために。

Webサイトの答えである「検証」の見方を解説しておきます。

「検証」ではWebサイトのHTMLとCSSを確認することができます。

自分で模写したサイトと、実際のWebサイトを見比べることで自分の制作した模写が正しいのかを確認できます。

もちろん実際のWebサイト以外の方法でも同じ表示を作ることができます。

模写の良いところ

模写は初学者にとっては有効な学習手段です。

理由は以下の3つです。

3つのよいところ
  • 答えがある
  • 自分のコードと違う場合は、考えることができる
  • 知識が増える

答えがある

答え合わせができるのは大きなメリットです。

初学者のうちは、何が正しいのか分からないまま模写をすることになります。

自分で再現したサイトが実際のWebサイトと同じなら自信になります。

自信や嬉しいと感じることが、知識として定着するのを助けてくれます。

コードが違う場合は「考える」ことができる

なぜこうゆう書き方をしているのか?

どんな意味があるのか?

考えて自分なりの仮説を持つことが大事です。

知識が増える

正解のパターンをより多く目にすることで、実際のWebサイトの書き方を学ぶことができます。

最初のうちは表示できなくても繰り返すことで自分の知識になっていきます。

模写の悪いところ

模写の悪いところは1つです。

イマイチなところ
  • 実績として公開できない

独学者にとって有効な学習方法に見える模写ですが、模写は実績として公開できません。

「漫画を丸写しして、ボクの作品です」と言っているのと同じです。

「ポートフォリオは模写サイトです」とプロフィールに書いたところでクライアントは模写の意味を知りません。

例えばLINEのWebサイト(模写)をポートフォリオに載せていれば、クライアントは本当にLINEのWebサイトを作った人として認識するでしょう。

最悪の場合は、LINEから勝手に掲載したと告発を受け、クライアントからは詐欺だと告発を受けることになるかもしれません。

結構なキズを負うことになります。

模写は実力がつくのか?

とはいえ模写は実力がつくのか?というと

学習初期には勉強になるが、続けても身にならない。

これがボクの個人的な意見です。

参考までに、ボクの学習手順を乗せておきますね。失敗例として覚えておいてください。

学習手順をザックリ紹介
  1. ボクは旧デイトラ(無料時代)にプログラミングの学習
  2. HTML/CSSの学習を終了
  3. 6サイトを模写

期間にして2ヶ月くらいだったと思います。

確かに知識は増えましたし、実力もアップしたとのは間違いありません。

しかし2ヶ月かけて作った6サイトを実績としてポートフォリオに載せることはできないのです。

結局は「実績として公開できない」デメリットが勝ってしまいます。

その事実に愕然としていたときに、「デザインカンプからのコーディング」という言葉を目にしました。

デザインカンプからのコーディングに切り替えよう

「デザインカンプからのコーディング?なんだそれ!?」と思いました。

やってみると、あらかじめ用意されたデザイン(AdobeXDやFigma)と同じように、HTML/CSSを使って表示させる。という方法でした。

やっている作業は模写とほぼ一緒です。

用意されたデザインカンプ(完成したデザインと仕様書)を購入(無料で探すことも可能)する教材のようなものです。

もちろん答えとなるHTML/CSSも用意されていますし、実績として使うことができるものがほとんどです。

しかも、実案件はほぼ全てが「デザインカンプからのコーディング」です。

だったら最初から模写ではなく「デザインカンプからのコーディング」をしていれば2ヶ月間で6サイトが自分の実績として公開できたのです。

なので「あなた」はボクのように2ヶ月間を無駄にしないようにしてくださいね。

まとめ

この記事のまとめです。

まとめ
  • 模写は右クリック「検証」で答えを見ることができる。
  • 模写の良いところは、答えがあること。
  • 模写の悪いところは、実績として使えないこと。
  • 答えがあって、さらに実績として使えるのは、「デザインカンプからのコーディング」教材。

せっかく時間をかけてコーディングするなら実績として公開できるサイトを作るようにしましょう。