
こんにちは、みゆです!
「侍テラコヤ」に入学をして、テラコヤ生になりました。
侍テラコヤとはサブスク型オンラインITスクールのことで、HTML/CSS、JavaScript、PHP、Webデザインをはじめ、たっぷり40種類以上の教材が用意されています。
Webサイト制作に挑戦してみたいという方に、この「Webサイトの模写コーディングをしよう」の教材は、かなりおすすめできます!
この記事では侍テラコヤの「Webサイトの模写コーディングをしよう」を実際に受講したわたしの感想をご紹介するので、教材の内容をもう少し詳しく知りたい!という方はぜひ参考にしてください。
\初月50%オフの特別クーポン配布中!/
クーポンコード:GIFT50
>> 侍テラコヤの公式サイトをみる

※侍テラコヤについてもっと詳しく知りたい方は、下記のまとめ記事をご覧ください!
侍テラコヤ「Webサイトの模写コーディングをしよう」の概要

「Webサイトの模写コーディングをしよう」の教材では、こんなことが学べます。
ちなみに模写コーディングとは、 「デザインカンプを参考にして、自分で考えてコーディングする」という意味です。
- 自分でソースコードを考えて、コーディングする実践力
- Webサイトのレイアウトを組み立てるスキル
- 試行錯誤するスキル
- 知らない技術や突然のエラーなどに対応するための自走力
「Webサイトの模写コーディングをしよう」各章の内容
「Webサイトの模写コーディングをしよう」は全2章に分かれていて、ポートフォリオサイトを作ることがゴールとなります。
- 模写コーディングの概要と方法を知ろう
- ポートフォリオサイトを模写コーディングしよう
実際に作るポートフォリオサイトは、こんな感じのイメージです!
https://miyublog.github.io/samurai-mosya/
「Webサイトの模写コーディングをしよう」の感想

デザインカンプを見て自分で考えながらコーディングをしていくので、3〜4時間くらい時間がかかります…!
このコーディングはどうやってやればいいんだ?という状況が常に続くので、10分くらい考えて分からなければ、Q&A掲示板を確認して、それでも解決しなければ質問するといった流れで進めたほうがいいと思います。
1章:模写コーディングの概要と方法を知ろう
1章では、下記のようなことを学習します。
- 模写コーディングについて
- 模写コーディングの手順・ルール
- 模写コーディングで利用するツールについて
- デザインカンプについて
模写コーディング
模写コーディングと聞いて、「模写コーディングって何?どうやってやるの?」と思う方が多いと思います。
1章では、模写コーディングの概要・方法・利用するツールなどを学習し、模写コーディングはこういうものだよ。ということを学習します。
デザインカンプ
デザインカンプはデザインの完成見本図のことです。
あらかじめデザインカンプが用意されているので、Figmaというツールを使って自分で画像をダウンロードしたりします。
2章:ポートフォリオサイトを模写コーディングしよう
2章では、ポートフォリオサイトのデザインカンプをもとに、レスポンシブの対応ありの模写コーディングをします。
コーディングは「PC用レイアウト→スマートフォン用レイアウト」の順番に行い、文字色・文字サイズなどの仕様はFigmaや教材に記載されているので、それを参考にコーディングを進めていきます。
「コーディング中につまずいた時のアドバイス」が教材に書いてあるので、途中で悩んだりしたらアドバイスの確認をすることをおすすめします!
だけども、むずかしい…!
まとめ
侍テラコヤの「Webサイトの模写コーディングをしよう」について、実際に受講した感想をご紹介しました。
Webサイトをゼロから自分で考えてコーディングを行うので、難易度がかなり高いです。
模写コーディングを完走できれば自信に繋がるはずなので、自分のペースで進めていき、わからないことはその都度調べながら取り組んでみてください!
\初月50%オフの特別クーポン配布中!/
クーポンコード:GIFT50
>> 侍テラコヤの公式サイトをみる
