
コーディングの勉強はまずProgateをやる人が多いと思いますが、その次のステップとしておすすめなのはデザインカンプを使ったコーディングとなります。
実務でもデザインカンプを貰ってコーディングするので実践的となり、さらに配布されているデザインカンプは実績として利用可能な物も多いです。
昔は主流だった模写コーディングは実績として使えず、公開されているサイトを真似るだけなのでデザインカンプを使ったコーディングと比べたら実践的ではありません。
デザインカンプは無料・有料とありますが、今回は主に無料で配布しているサイトをご紹介していきます(有料の物もあり)
この記事がおすすめな人
- Progateが終わったからデザインカンプからのコーディングをしたい
- 無料で配布しているデザインカンプを探している
- おすすめのデザインカンプを教えて欲しい
注意ポイント
デザインカンプからのコーディングとは?
デザインカンプからのコーディングは、模写と違いデザインツールを使う必要があります。
Web制作のデザインカンプで使われるのは主に以下の4つになります。
デザインカンプで良く使われるデザインツール
- Adobe XD
- Adobe Photoshop
- Adobe Illustrator
- Figma
デザインカンプはどれで渡されるか分からないので、どれで来ても対応できるようにする必要があります。
当ブログでは上記4つのデザインカンプからコーディングする方法を解説しているので、参考にしてみて下さい。
-
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
続きを見る
-
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
続きを見る
-
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
続きを見る
-
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
続きを見る
【無料】コーディング練習におすすめのデザインカンプ配布サイト
まずは無料で配布しているサイトをご紹介します。
ここでご紹介しているだけでも相当なボリュームがあるので、間違っても全部やろうとは思わないようにしましょう。
未経験からWebデザイナーへ!(XD)
ねこポンさんが運営しているメディア『未経験からWebデザイナーへ!』が配布しているデザインカンプです。
デザインカンプとは別に完成版のコーディングデータも配布していて、リンク先には細かい解説もされているので、

という人はまずこちらから始めてみましょう。
ポートフォリオへの掲載が可能で、以下を含め全部で6種類のデザインカンプが配布されています。
【入門編】カフェサイトのコーディング練習 | 無料コーディング練習所
PENGIN BLOG(XD)
Web制作・プログラミング学習中の方向けに学習カリキュラムを公開している、PENGIN BLOGさんが配布しているデザインカンプです。
初級・中級・上級とあり、全て無料かつポートフォリオに掲載可能となっています。
難易度的にもまずはこちらの初級から始めるといいかと思います。
【デザインカンプ無料配布】未経験からのコーディング学習ステップ
Codejump(XD)
コーディング学習サイトのCodejumpさんが配布しているデザインカンプで、同じデザインで2種類のコーディングが出来ます。
- デモサイトによる模写コーディング
- デザインカンプからのコーディング
そして、
- コーディングの仕様
- コーディングのヒント
- ソースコード
なども用意されています。
以下のデザインカンプ以外にもたくさんあるので、ここだけで十分な学習が可能となっています。
【HTML/CSS コーディング練習】入門編:プロフィールサイト/LP
模写修行(XD)
駆け出しエンジニアのためのコーディング練習教材を配布している、模写修行さんのデザインカンプです(模写ではありません)
『初心者にとって分かりやすいこと』よりも『初心者にとって難しくても実践的なこと』を重視しているので、ワンランク上のスキルを身に付けたい人におすすめです。
また、
- スタイルガイド
- 指示書
- 制作の手順
- CSS設計を意識した書き方
など用意されているので、ただデザインカンプが手に入るだけでなく、より実践的にコーディングを学べます。
以下のデザインカンプは無料ですが、有料の物もあり、他にも無料でポートフォリオ掲載可能な物もあります。
新規登録してログインしないと利用できません
未経験からWebデザイナーへ!(Photoshop)
再びねこポンさんの『未経験からWebデザイナーへ!』ですが、こちらはPhotoshopのデザインカンプとなります。
こちらはファーストビューのみとなりますが、無料で配布されているPhotoshopのデザインカンプは恐らく激レアです。
全部で7種類あるので、これでPhotoshopになれておきましょう。
【有料】コーディング練習におすすめのデザインカンプ配布サイト
XDのデザインカンプについては無料でご紹介したもので十分だと思います(有料の物もありますし)
しかし無料で配布されているPhotoshopのデザインカンプはほぼないので、ここで有料のものをご紹介します。
Photoshopのデザインカンプは非常に扱いにくいので、有料でも一度練習しておくといいと思います。
くりのすけさんnote(Photoshop)
くりのすけさんの有名なnoteで、Photoshopのデザインカンプでポートフォリオに掲載可能となっています。
料金は1000円なので、気軽に購入できると思います。
コーディングしたサイトをポートフォリオの実績に載せて公開する方法
ここまででコーディングしたものは自分のパソコンでしか見れません。
その理由はインターネット上に公開されていないからで、つまり誰も見ることは出来ません。
勉強段階ではそれでも大丈夫ですが、ポートフォリオに実績として載せるときなどはサーバーにアップして公開する必要があります。
それにはレンタルサーバーを契約する必要があるので、まだ契約していない人はこちらの記事を参照下さい。
-
【徹底比較】ブログ・ポートフォリオにおすすめレンタルサーバー3選と選び方を解説
続きを見る
レンタルサーバーは、
- ポートフォリオを公開
- 実務でテストサーバーとして利用
- WordPressブログを開設
など、様々な用途があります。
少なくともWeb制作をやるには必須なので、早めに契約してサーバーの扱いに慣れておいた方がいいと思います。
注意ポイント
独学が難しいと感じたらプログラミングスクールの利用もアリ
ここまで終われば1つの山を超えたという感じですが、それでも実務をこなすにはまだいろいろと足りないので、ここまでクリアできればプログラミングスクールを利用するのもおすすめです。

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

ということになりかねません。
しかし、ここまでクリアできれば向き不向きの問題はクリアしてるはずなので、あとは課金して一気にステップアップするのがおすすめです。
そしてWeb制作・コーディングを学ぶのにおすすめのスクールはデイトラです。
デイトラは、
- 業界最安級の圧倒的コストパフォーマンス
- オンラインなので自宅で受講可能
- Twitterでの評判が抜群に良い
- 現場レベルのスキルが身に付く
- 買い切りなので追加費用0
- 随時アップデートされていくカリキュラム
と『もし今からWeb制作を学ぶならどうしたら良いですか?』と聞かれたら、
デイトラ一択
と言い切れます。
いろいろとコースがありますが、コーディング・Web制作ならWeb制作コースがおすすめです。
-
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】
続きを見る
IllustratorとFigmaのデザインカンプについて
残念ながらIllustratorとFigmaのデザインカンプは無料・有料ともに見たことがありません・・・
Figmaに関してはXDと似ていて、XDを使ったことがあればほとんど直感的に使えると思います。
問題はIllustratorですが・・・これがPhotoshopと同じくらい扱いにくいので、冒頭でも載せましたが以下の記事を参考にして頂ければと思います。
-
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
続きを見る
-
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
続きを見る
もし見つけたら追記しておきたいと思います。
まとめ
これでコーディング練習におすすめのデザインカンプ配布サイトのご紹介は以上になります。
恐らくProgateから一気に難易度が上がって心が折れそうになった方もいるかも知れませんが、ここを乗り越えれば一気に案件獲得が近付きます。
当ブログでは営業や案件獲得についての記事も書いているので、ぜひ参考にしてみて下さい。
以上になります。
-
コーディングとWordPressで月収30万円目指すWeb制作ロードマップ【独学のプログラミング学習方法から営業まで】
続きを見る
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ!5大無料特典あり🎁