コーディング練習におすすめのデザインカンプ配布サイトまとめ【無料&実績OKあり！】

デザインカンプを使ったコーディングの練習をしたいけど、どうすればいいの？

コーディングの勉強はまずProgateをやる人が多いと思いますが、その次のステップとしておすすめなのはデザインカンプを使ったコーディングとなります。

実務でもデザインカンプを貰ってコーディングするので実践的となり、さらに配布されているデザインカンプは実績として利用可能な物も多いです。

昔は主流だった模写コーディングは実績として使えず、公開されているサイトを真似るだけなのでデザインカンプを使ったコーディングと比べたら実践的ではありません。

デザインカンプは無料・有料とありますが、今回は主に無料で配布しているサイトをご紹介していきます（有料の物もあり）

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

デザインカンプからのコーディングとは？

デザインカンプからのコーディングは、模写と違いデザインツールを使う必要があります。

Web制作のデザインカンプで使われるのは主に以下の4つになります。

デザインカンプはどれで渡されるか分からないので、どれで来ても対応できるようにする必要があります。

当ブログでは上記4つのデザインカンプからコーディングする方法を解説しているので、参考にしてみて下さい。

【無料】コーディング練習におすすめのデザインカンプ配布サイト

まずは無料で配布しているサイトをご紹介します。

ここでご紹介しているだけでも相当なボリュームがあるので、間違っても全部やろうとは思わないようにしましょう。

未経験からWebデザイナーへ！（XD）

ねこポンさんが運営しているメディア『未経験からWebデザイナーへ！』が配布しているデザインカンプです。

デザインカンプとは別に完成版のコーディングデータも配布していて、リンク先には細かい解説もされているので、

何から書き始めていいか分からない

という人はまずこちらから始めてみましょう。

ポートフォリオへの掲載が可能で、以下を含め全部で6種類のデザインカンプが配布されています。

【入門編】カフェサイトのコーディング練習 | 無料コーディング練習所

PENGIN BLOG（XD）

Web制作・プログラミング学習中の方向けに学習カリキュラムを公開している、PENGIN BLOGさんが配布しているデザインカンプです。

初級・中級・上級とあり、全て無料かつポートフォリオに掲載可能となっています。

難易度的にもまずはこちらの初級から始めるといいかと思います。

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

Codejump（XD）

コーディング学習サイトのCodejumpさんが配布しているデザインカンプで、同じデザインで2種類のコーディングが出来ます。

そして、

なども用意されています。

以下のデザインカンプ以外にもたくさんあるので、ここだけで十分な学習が可能となっています。

【HTML/CSS コーディング練習】入門編：プロフィールサイト／LP 

模写修行（XD）

駆け出しエンジニアのためのコーディング練習教材を配布している、模写修行さんのデザインカンプです（模写ではありません）

『初心者にとって分かりやすいこと』よりも『初心者にとって難しくても実践的なこと』を重視しているので、ワンランク上のスキルを身に付けたい人におすすめです。

また、

など用意されているので、ただデザインカンプが手に入るだけでなく、より実践的にコーディングを学べます。

以下のデザインカンプは無料ですが、有料の物もあり、他にも無料でポートフォリオ掲載可能な物もあります。

サービスサイトのトップページを作ろう！

未経験からWebデザイナーへ！（Photoshop）

再びねこポンさんの『未経験からWebデザイナーへ！』ですが、こちらはPhotoshopのデザインカンプとなります。

こちらはファーストビューのみとなりますが、無料で配布されているPhotoshopのデザインカンプは恐らく激レアです。

全部で7種類あるので、これでPhotoshopになれておきましょう。

【無料】コーポレートサイトのデザインテンプレート（PSD）

【有料】コーディング練習におすすめのデザインカンプ配布サイト

XDのデザインカンプについては無料でご紹介したもので十分だと思います（有料の物もありますし）

しかし、無料で配布されているPhotoshopのデザインカンプはほぼないので、ここで有料のものをご紹介します。

Photoshopのデザインカンプは非常に扱いにくいので、有料でも一度練習しておくといいと思います。

くりのすけさんnote（Photoshop）

くりのすけさんの有名なnoteで、Photoshopのデザインカンプでポートフォリオに掲載可能となっています。

料金は1000円なので、気軽に購入できると思います。

デザインカンプからのコーディング練習【初級編】

コーディング演習課題・全部盛り

こちらはWeb制作スクールで有名なデイトラのメンターをやられているしょーごさんが販売している、コーディング初心者にとって鉄板の教材です。

レベル別に個別に販売もしていますがやり残した教材があると後悔するかも知れませんし、全部盛りの場合は個別で買うより25%も安くなるので、最初から全部盛りを購入するのがおすすめです。

正直、説明が不要なくらい有名な教材なのですが、以下のような内容となっています。

このように段階を踏んで実務レベルのコーディングを練習することができ、レビューも受けられ、さらに営業で必須なポートフォリオについても対応されています。

ポートフォリオはスクールの場合だと他の人と被ってしまうことが良くありますが、この教材では他の人と被らないようにオリジナルのポートフォリオを作れるようになっています。

正直、自分が学習中にこの教材があったらどれだけ心強かっただろうと悔やまれますｗ

当然実務レベル&即戦力を目指す教材なので、後半はかなり難易度が高く苦戦すると思いますが、自信を持って初案件に望みたい方はこの教材で完走を目指してみて下さい。

完走した頃には『実務レベルのスキル』と、営業で他の人と差別化できる『オリジナルポートフォリオ』が手に入るよ！

コーディングしたサイトをポートフォリオの実績に載せて公開する方法

ここまででコーディングしたものは自分のパソコンでしか見れません。

その理由はインターネット上に公開されていないからで、つまり誰も見ることは出来ません。

勉強段階ではそれでも大丈夫ですが、ポートフォリオに実績として載せるときなどはサーバーにアップして公開する必要があります。

それにはレンタルサーバーを契約する必要があるので、まだ契約していない人はこちらの記事を参照下さい。

レンタルサーバーは、

など、様々な用途があります。

少なくともWeb制作をやるには必須なので、早めに契約してサーバーの扱いに慣れておいた方がいいと思います。

独学が難しいと感じたらプログラミングスクールの利用もアリ

ここまで終われば1つの山を超えたという感じですが、それでも実務をこなすにはまだいろいろと足りないので、ここまでクリアできればプログラミングスクールを利用するのもおすすめです。

それじゃ最初からスクールに通えばいいんじゃない？

と思うかも知れませんが、完全に0の状態でスクールに通ってしまうと、

Web制作とかコーディングは全然自分に向いてなかった

ということになりかねません。

しかし、ここまでクリアできれば向き不向きの問題はクリアしてるはずなので、あとは課金して一気にステップアップするのがおすすめです。

そしてWeb制作・コーディングを学ぶのにおすすめのスクールはデイトラです。

デイトラは、

と『もし今からWeb制作を学ぶならどうしたら良いですか？』と聞かれたら、

デイトラ一択

と言い切れます。

いろいろとコースがありますが、コーディング・Web制作ならWeb制作コースがおすすめです。

また、デイトラのWeb制作コースは10万円台前半と格安ですが、

10万円台でも厳しい・・・

という人は、無料で30日間Web制作を学べるZeroPlus Gateがおすすめです。

IllustratorとFigmaのデザインカンプについて

残念ながらIllustratorとFigmaのデザインカンプは無料・有料ともに見たことがありません・・・

Figmaに関してはXDと似ていて、XDを使ったことがあればほとんど直感的に使えると思います。

問題はIllustratorですが・・・これがPhotoshopと同じくらい扱いにくいので、冒頭でも載せましたが以下の記事を参考にして頂ければと思います。

もし見つけたら追記しておきたいと思います。

まとめ

これでコーディング練習におすすめのデザインカンプ配布サイトのご紹介は以上になります。

恐らくProgateから一気に難易度が上がって心が折れそうになった方もいるかも知れませんが、ここを乗り越えれば一気に案件獲得が近付きます。

当ブログでは営業や案件獲得についての記事も書いているので、ぜひ参考にしてみて下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！