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

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

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

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

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

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

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

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

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制作をやるには必須なので、早めに契約してサーバーの扱いに慣れておいた方がいいと思います。

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

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

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

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

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

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

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

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

デイトラは、

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

デイトラ一択

と言い切れます。

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

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

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

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

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

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

まとめ

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

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

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら