Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

この記事がおすすめな人

  • Progateが終わったからデザインカンプからのコーディングをしたい
  • 無料で配布しているデザインカンプを探している
  • おすすめのデザインカンプを教えて欲しい

注意ポイント

多くのブログで『模写サイト』と『デザインカンプ教材』がごっちゃになっていますが、ここでは『デザインカンプ教材』におすすめのサイトのみご紹介しています。

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

コーディングの時給アップにはこちら!

累計1100部突破!レビュー570件!

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

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

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

デザインカンプで良く使われるデザインツール

  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator
  • Figma

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

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

あわせて読みたい
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe XD編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Photoshop編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【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になれておきましょう。

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


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

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

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

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

 

くりのすけさんnote(Photoshop)

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

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

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

 

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

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

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

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

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

あわせて読みたい
【徹底比較】ポートフォリオ用おすすめレンタルサーバー3選と選び方を解説
【徹底比較】ブログ・ポートフォリオにおすすめレンタルサーバー3選と選び方を解説

続きを見る

レンタルサーバーは、

  • ポートフォリオを公開
  • 実務でテストサーバーとして利用
  • WordPressブログを開設

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

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

注意ポイント

ポートフォリオに実績として載せるにはベーシック認証などで公開したサイトにアクセス制限をかけたり、他にも配布サイトによってルールがあったりするので、よく確認しておきましょう。

 

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

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

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

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

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

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

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

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

デイトラは、

  • 業界最安級の圧倒的コストパフォーマンス
  • オンラインなので自宅で受講可能
  • Twitterでの評判が抜群に良い
  • 現場レベルのスキルが身に付く
  • 買い切りなので追加費用0
  • 随時アップデートされていくカリキュラム

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

デイトラ一択

と言い切れます。

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

あわせて読みたい
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】
デイトラのサービス内容・コース料金・評判・口コミをまとめて紹介【Web制作におすすめのスクール】

続きを見る

 

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

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

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

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

あわせて読みたい
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

あわせて読みたい
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】
【Figma編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】

続きを見る

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

まとめ

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

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

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

以上になります。

あわせて読みたい
コーディングとWordPressで月収30万円目指すWeb制作ロードマップ【独学のプログラミング学習方法から営業まで】
コーディングとWordPressで月収30万円目指すWeb制作ロードマップ【独学のプログラミング学習方法から営業まで】

続きを見る

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

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

-Web制作