この記事の監修者
この記事ではデザインカンプを配布していただいているサイト（無料・有料）の中で、ポートフォリオ掲載可と明記いただいていることをまとめています。
※ 一部掲載不可なサービスもありますが、コーディング学習にオススメなところは紹介させていただいています！
特にこれからポートフォリオを作成しようとしているコーダーやWebデザイナー志望の方には、有益なサイトやサービスばかりです。
新しい情報が入り次第、掲載サイト情報は随時更新していきます！
多くのWeb制作会社がAdobe社のツールを使用していますので、今回はAdobe社のツールで作成されたデザインカンプの配布サイトをまとめています。
デザインカンプとは？
デザインカンプとは、簡単に言えば「デザインの完成見本図」のことです。
クライアントと制作者との間で、色やフォントなどのイメージをすり合わせるために作成されます。
https://nandemo-nobiru.com/web-6206
使用されるデザインツールはAdobe社の「Photoshop」や「XD」、「Illustrator」などが多く、その他では「Sketch」や「Figma」も有名どころです。
Webデザイナー、コーダーのポートフォリオについて
Web制作で就職や副業、フリーランスを目指し勉強している方の多くがポートフォリオを作成します。
ポートフォリオにはスキル・力量をアピールするために自分の作品や実績を掲載する訳ですが、実務未経験の方はそもそも掲載できるものがないですよね。
勉強中にコーディングした作品を掲載するにしても、模写サイトは基本的に掲載できません。
そこでこの記事で紹介する内容は下記2点の条件に絞ります。
- ポートフォリオに掲載できる教材であること
- 実務に近いスキルを証明できること
デザインやコーディングをするうえで、デザインツールには必ず触れることになります。
つまり、転職志望であろうと、副業・フリーランス志望であろうと、デザインカンプからのコーディング実績やデザインツールの使用スキルを証明できるようにしておく必要があるわけです。
僕もコーディング代行などを始めて強く実感しましたが、Adobe製品が使えることが実務では必須になります。
デザインカンプの配布サイトを探しても、基本的にAdobe社のツールで作成されたものが殆どですので、真剣に案件受注や転職を目指す人は、これを機に契約して環境構築しておくことを強くオススメします。
ポートフォリオ掲載可：デザインカンプ配布サイトまとめ
それではデザインカンプの配布サイトご紹介していきます。
ここではXDとPhotoshopのデザインカンプが配布されているサイトをそれぞれまとめています。
ポートフォリオ掲載条件が載っている場合もありますので、必ず目を通した上で、掲載する場合は作成者様の定めたルールを厳守しましょう。
XDデザインカンプ：無料配布
まずXDのカンプ配布から紹介します。
XDは無料で使用できるツールです。実際に触ってみて使用感を確かめてみることが大切なので、まだ使ったことが無い方はまずはダウンロードしておきましょう。
無料配布①（PENGIN BLOG）
まずは当PENGIN BLOGのコンテンツから。
初級、中級、上級と用意されていて、実践的なボリュームでコーディング練習ができるうえに、配布だけでなくYoutubeでの解説なども用意してます。
有益な配信者様のコンテンツと並べて紹介している中で手前味噌な評価をするのも恐縮ですが、初学者のステップアップに適している難易度で、ポートフォリオ作成を考えている段階の方には特にオススメしています！
デザインツールの使い方やコーディングの必要知識、Webデザイナー転職者へのインタビュー記事など、役立つ情報をどんどん発信してますのでブクマしてチェックしていただけると嬉しいです！
無料配布②（模写修行）
駆け出しエンジニアのためのコーディング練習教材を配布する「模写修行」さん。（※ポートフォリオの掲載は不可です）
リンク先は無料提供のページですが、有料配布されているデザインカンプも含めれば、さまざなサイトパターンのコーディング学習ができます。
『初心者にとって分かりやすいこと』より『初心者にとって難しくても実践的なこと』を意識された超実践的教材であることが類似サービスとは一線を画しています。
PENGIN BLOGのデザインカンプでコーディングに慣れた後、次のステップとして選択するのにオススメです！
※サービス紹介記事
無料配布③（未経験からWebデザイナーへ！）
ねこポンさんの運営しているメディア「未経験からWebデザイナーへ！」からXDのデザインカンプが配布されています。
リンク先は入門編ですが、コーディング手法の紹介や、HTML／CSSで使用するタグやプロパティの紹介など、かなり細かく解説されています。
他にも難易度別に6つのデザインが配布されており、どれもボリューム満点です。
完全な初学者から少し慣れてきた方まで、楽しんで学習ができる良教材です！
無料配布④（Codestep）
Codestepさんの運営している学習サイトです。
「模写コーディング」や「デザインカンプコーディング」のデモサイトを用意してもらっていますが、掲載のデモサイトの数は紹介している記事の中でも一番多く充実しています。
デモサイトの質も高く、コーディングの簡易的な解説からソースコードまで掲載してもらっているので、かなり実践的な学習ができます。
このサイトだけでも十分に数をこなせるので、かなりオススメできます。
無料配布⑤（ひらともやさんnote）
ひらともや（@hiratomoya）さんのnoteから。
こちらはデザインデータがURLから確認可能なため、XDのソフトをインストールしていなくても大丈夫です。
基本的な使い方からコーディングの説明まで丁寧に説明していただいているので、模写に自信が無い方はここからスタートでもいいかもしれないです。
XDデザインカンプ：有料配布
有料配布①（模写修行）
無料配布のパートで紹介した模写修行さんですが、有料でもデザインカンプを配布されています。（※ポートフォリオの掲載は不可です）
- CSS設計や命名規則の考え方
- クロスブラウザ対応について
- スマホファーストのコーディング解説
- SCSSのサンプルコード確認（中級編以上）
上記はほんの一部ですが、模写修行さんでは実践的な知識に触れることができます。
実は僕も教材を購入しチャレンジしていますが（学習歴2年程度）、他教材では触れづらい、絶妙な難易度とテクニックが丁寧に解説されており、かなり良い勉強になりました…！
質の高さは間違いないので、コーディング技術を磨きたい方、自分の知識が実務に対応できるレベルか確認したい方は、ぜひチャレンジしてみてください！
※サービス紹介記事
有料配布②（しょーごさんnote）
フリーランスのWeb制作者shogo（@samuraibrass）さんの有料note。細かい仕様も決められている本格的なカンプです。
難易度別にさまざま用意されており、jsプラグインの使用やコンタクトフォームの実装など、実践的なスキルも経験できるカンプです！
リンク先の内容より難易度の高い（より実践的）中級や上級も用意されているので、気になる方はチャレンジしてみましょう！
有料配布③（ちづみさんnote）
ノマドフリーランスちづみ（@098ra0209）さんの有料noteです。
リンク先以外にも練習用カンプが用意されていて、とても充実しています。
ちづみさんのnoteでは、XDの使い方から解説されている記事もあり、僕もそちらを購入して勉強したんですがとても分かりやすかったのでオススメです！
有料配布④（akaneさんnote）
Web制作会社でWebデザイナー業に携わられているakaneさんのnoteから。
色合いやデザインがオシャレで、レイアウトは汎用的なパターンがコーディングできます。
PC版のデザインデータだけだと無料、SPサイズまでセットになったカンプは有料となりますが、掲載時点（2020年11月）では400円とかなりお安いです！
僕も購入して見させていただきました、hoverに関する指示やセクション毎の挙動の指示がわかりやすく丁寧に記載されているので新設設計でコーディングもやりやすいので、この値段なら躊躇わずにチャレンジする価値はかなり高いと思います！
また、note内にはPhotoshopのデザインカンプ もダウンロード可能となっているでの、そちらはPhotoshopカンプ紹介で記載します。
Photoshopデザインカンプ：無料配布
次にPhotoshopのデザインカンプ配布サイトを紹介します。
クラウドソーシングなどを見ると、デザインカンプ はPhotoshopで作成されている事も多いです。また、制作会社のデザイナーさんもPhotoshopを使用しているケースも多いです。
Adobe Creative Cloud コンプリートプランにも入ってますが、「Photoshopだけ必要」という方はこちらのフォトプランを選んでおくと割安です。
Photoshopは有料ツールですが、自身の目指す先がWeb制作関連なら（デザイナー志望の方は特に）、必要投資として使えるように契約しておきましょう。
無料配布①（HI-ROKIさんnote）
HI-ROKI（@hiroki_web）さん作成のnoteから。
ダウンロードには条件があるのでしっかり確認しましょう（Twitterアカウント作成要）
対応させるブラウザの種類やブレイクポイントなど記載された要件定義書も確認できる本格仕様です。
オシャレで今風なレイアウトなので、コーディングのモチベも上がりますね！
無料配布②（未経験からWebデザイナーへ！）
XDでカンプ配布もされているねこポンさんのサイトから。こちらはファーストビューのみのデザインカンプになります。
無料配布ですが、コーポレートサイトやファッションサイトなどいくつかのジャンルがありますので、自身がまだコーディングしたことのないパターンを選ぶのが良いかと思います。
無料配布③（akaneさんnote）
XD有料配布でご紹介したakaneさんのnoteから（同記事）
XD無料配布の章でご紹介したひらともやさんのXDカンプデータですが、実はこちらを作成されたのがakaneさんで、同じカンプのPhotoshop版がこちらからダウンロード可能となっています。
しかもダウンロードデータにはIllustrator版も同梱されているかなりお得な内容となっています。
ツールの使い方を学びたいなら、同じカンプでXD→Photoshop→Illustratorと使い比べしてみるのもいいかもしれませんが、それが実現できるカンプを配布していただいているakaneさん凄いです、、、！
Photoshopデザインカンプ：有料配布
有料配布①（くりのすけさんnote）
初学者に寄り添った情報を発信しているくりのすけ（@kurinosuke32）さんのnote。
Twitterでは沢山の方がハッシュタグ付きでチャレンジ内容を投稿されている人気noteのシリーズです。
詳細解説はありませんが難易度もそこまで難しくなく、初めのPSDカンプコーディングには丁度いいのでは無いでしょうか。
初級編とあるように、難易度が少し高めの他のカンプも用意されています！
他noteではコーディング学習を主としたシリーズも展開されていますので、気になるかたはそちらも見てみましょう！
有料配布②（こばやすさんnote）
webデザイナーこばやす（@kobayas_s）さんの有料noteです。
こちらはデザインカンプを自分で作るという内容になっており、コーディング用教材というものではないです。
ただ、Photoshopでのカンプ作成方法を学べるということは、Photoshopの操作練習にもなります。
デザイン→コーディングで一気通貫のスキルが身に付けられるという意味では、特にWebデザイナー志望の方には有益noteかと思います！
デザインツールからのコーディング方法が学べる記事紹介
最後に各デザインツールからのコーディング方法が知れる記事を紹介します。
- XDコーディング方法
- >> 【保存版】AdobeXDからのコーディング方法を徹底解説！【初心者必見】
- Photoshopコーディング方法
- >> 【保存版】Photoshopからのコーディング方法徹底解説！【初心者必見】
まとめ
僕たちの目的はスキルを学びたい方を応援することです。
本音を言えば、当メディアのコンテンツだけを紹介しておくでもよかったりするのですが、それだけでは初学者にとって本当に有益な情報にはなりません。
そこで今回は「素晴らしい教材はたくさんあるんだよ！」ということをお伝えしたいという思いでまとめました！
有料・無料とありますが、どれも実践に近いスキルを学ぶことができるので、これを機にみなさんチャレンジしてみてください！
※PENGIN BLOGも引き続きアップデートしつ続けますので宜しくお願いします！！
また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。
デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください！
オススメ書籍紹介
オススメUdemy講座紹介
