こんにちは。今回は模写コーディングに使える「ポートフォリオ化OKのデザインカンプ」をまとめているサイトをまとめました。
ポートフォリオ化OKのデザインカンプまとめサイトの総集
PENGIN BLOGのPENGIN LLC.さんがまとめた無料配布サイト集
301 Moved Permanently
crestadesign.org
PENGIN BLOGのPENGIN LLC.さんが配布しているデザインカンプ
301 Moved Permanently
crestadesign.org
Codestepさんがまとめたデザインカンプ
【XD、Figma デザインカンプ無料】コーディング練習用【入門編～上級編】
コーディング練習用のXDとFigmaのデザインカンプ教材を無料で配布します。レベル別に入門編から上級編までそろっているので、スキルにあったものからチャレンジしてみてください。全ての練習課題に、コーディングのヒントと、解答例のソースコード、デモサイトを用意していますので、皆様のコーディング練習にお役立てください。
code-jump.com
3つのページの紹介となりますが、ここにほぼ詰まっているので、ここから探せば間違いないかと思います。
私が初心者にちょうどいいなと感じたデザインカンプまとめ
コーディングOKのデザインカンプもそれぞれレベルがありますが、私が勉強し始めの時に「これいいなぁ」と感じたサイトをご紹介します。
１．くりのすけさんのKuricafeのコーディングサイトです。
デザインカンプからのコーディング練習【初級編】｜くりのすけ
くりのすけです。 今回はデザインカンプを提供したいと思います！！ このように、デザインカンプからのコーディングは実務では必須スキルですので、コーディング練習をしてみてください！！ その名も、#くりカンプチャレンジ です！ 先日投稿しましたが、嬉しい声が届いていますので、いくつか紹介します。
...
note.com
よくある基本的なデザインで、比較的簡単な作りになっているため、「これができれば最低限のサイトが作れるようになるな」という印象です。
初心者の方にはとてもいい教材になると思います。
２．ひらともやさんの「お花屋さんLP」
コーディング練習用のデザイン~お花屋さんのLP編~｜ひらともや
Webデザイナー&コーダー3ヶ月目のひらともやです。 お花屋さんのLPのデザインをAdobe XDで作りました。コーディングを勉強している人の練習になればと思い、シェアします。 元々のデザインはあかねさん（@omsss22）が作ったものです↓ 大変遅くなりましたが、、レスポンシブ化の練習ができるPCとS...
note.com
こちらも練習で使わせていただきました。
このコーディング教材はXDで作られているので、XDのデザインをもとにコーディングするという練習にもなりますのでお勧めです。
他にも3つ以上は模写コーディングしたことを覚えていますが、どのサイトのものを作ったのか忘れてしまいました(^^;)
ただ、模写コーディングをすると一気にレベルが上がるのと、「自分でサイトが作れる」という自信にもつながりますのでお勧めです。
コメント