どうも、ダイチです。
この記事ではデザインカンプを配布していただいているサイト（無料・有料）の中で、ポートフォリオ掲載可と明記いただいていることを条件に絞ってまとめています。
特にこれからポートフォリオを作成しようとしているコーダーやWebデザイナー志望の方には、有益なサイトが掲載されていると思います。
こちらで新しい情報が入り次第、掲載サイト情報は随時更新していく予定です！
多くのWeb制作会社がAdobe社のツールを使用していますので、今回はAdobe社のツールで作成されたデザインカンプの配布サイトをまとめています。
デザインカンプとは？
デザインカンプとは、簡単に言えば「デザインの完成見本図」のことです。
クライアントと制作者との間で、色やフォントなどのイメージをすり合わせるために作成されます。
https://nandemo-nobiru.com/web-6206
使用されるデザインツールはAdobe社の「Photoshop」や「XD」、「Illustrator」などが多く、その他では「Sketch」や「Figma」も有名どころです。
Webデザイナー、コーダーのポートフォリオについて
Web制作で就職や副業、フリーランスを目指し勉強している方の多くがポートフォリオを作成します。
ポートフォリオにはスキル・力量をアピールするために自分の作品や実績を掲載する訳ですが、実務未経験の方はそもそも掲載できるものがないですよね。
勉強中にコーディングした作品を掲載するにしても、模写サイトは基本的に掲載できません。
つまり実務未経験の方でも、ポートフォリオに掲載できる資料はとても貴重で、掲載するなら実務を想定したスキルアピールが重要になります。
そこでこの記事で紹介する内容は下記2点の条件に絞ります。
- ポートフォリオに掲載できる教材であること
- 実務に近いスキルを証明できること
デザインやコーディングをするうえで、デザインツールには必ず触れることになります。
つまり、転職志望であろうと、副業・フリーランスであろうと、デザインカンプからのコーディング実績やデザインツールの使用スキルを証明できるようにしておく必要があるわけです。
僕もコーディング代行などを始めて感じていることですが、Adobe製品が使えるかどうかは実務で本当に重要になります。
デザインカンプ 配布サイトを探しても、基本的にAdobe社のツールで作成されたものが殆どですので、真剣に案件受注や転職を目指す人は、これを機に契約して環境構築しておくことを強くオススメします。
\ 2021.03.05 まで！ /
現在年に数回しか無いAdobe製品のSALE中です！
購入検討中の方はこの機会を逃さないように！！
ポートフォリオ掲載可：デザインカンプ配布サイトまとめ
それではデザインカンプの配布サイトご紹介していきます。
ここではXDとPhotoshopのデザインカンプが配布されているサイトをそれぞれまとめています。
リンク先にあるのは「ポートフォリオ掲載可」と明確に記載いただいているところのみです。
ポートフォリオ掲載条件が載っている場合もありますので、必ず目を通した上で、掲載する場合は作成者様の定めたルールを厳守しましょう。
XDデザインカンプ：無料配布
まずXDのカンプ配布から紹介します。
XDは無料で使用できるツールです。実際に触ってみて使用感を確かめてみることが大切なので、まだ使ったことが無い方はまずはダウンロードしておきましょう。
無料配布①
ひらともや（@hiratomoya）さんのnoteから。
こちらはデザインデータがURLから確認可能なため、XDのソフトをインストールしていなくても大丈夫です。
基本的な使い方からコーディングの説明まで丁寧に説明していただいているので、模写に自信が無い方はここからスタートでもいいかもしれないです。
無料配布②
「masa blog」さんから。こちらもデザインデータで用意されているのでXDをインストールしてなくても確認できます！
無料配布③
Web業界への転職・就職をサポートするKROWL（@KROWL_JP）さんのサイトから。
実際のXDデータをダウンロードして確認できるため、より実務に近い形でのコーディングができます。難易度別に3種類用意されているので、無理なくチャレンジができるようになっています。
無料配布④
Webデザインやコーディングの学習メディア、クリ★スタ（@cresta_design）さんから。（実は僕も少し運営に携わらせていただいてます・・・！）
こちらもXDデータがダウンロードできます。リンク先は「初級編」ですが、これより難易度が高い中級編や上級編も用意されています。上級編は下層ページまでしっかり用意されているため、より実践的なボリュームでコーディングできます。
デザインツールの使い方や、コーディングの必要知識、Webデザイナー転職者へのインタビュー記事など、役立つ情報が多く掲載されている有益メディアですので、特に初学者の方はチェック推奨です！
XDデザインカンプ：有料配布
有料配布①
フリーランスのWeb制作者shogo（@samuraibrass）さんの有料note。細かい仕様も決められている本格的なカンプです。
今後条件が変更になる可能性もなりますが、データ提出すればご本人様がデザイン崩れの有無など確認していただける特典もあるようです。また、Youtubeでのライブコーディングもあり実際の動かし方も学べます。
jQueryやプラグインの使用、コンタクトフォームの実装など、実践的なスキルも経験できるオススメカンプです！
また、リンク先の内容より難易度の高い（より実践的）中級や上級も用意されているので、気になる方はチャレンジしてみましょう！
有料配布②
ノマドフリーランスちづみ（@098ra0209）さんの有料noteです。
リンク先以外にも他に3つ練習用記事でカンプが用意されていて、とても充実しています。
ちづみさんのnoteでは、XDの使い方から解説されている記事もあり、僕もそちらを購入して勉強したんですがとても分かりやすかったのでオススメです！
有料配布③
Web制作会社でWebデザイナー業に携わられているakaneさんのnoteから。
色合いやデザインがオシャレで、レイアウトは汎用的なパターンがコーディングできます。
PC版のデザインデータだけだと無料、SPサイズまでセットになったカンプは有料となりますが、掲載時点（2020年11月）では400円とかなりお安いです！
僕も購入して見させていただきました、hoverに関する指示やセクション毎の挙動の指示がわかりやすく丁寧に記載されているので新設設計でコーディングもやりやすいので、この値段なら躊躇わずにチャレンジする価値はかなり高いと思います！
また、note内にはPhotoshopのデザインカンプ もダウンロード可能となっているでの、そちらはPhotoshopカンプ紹介で記載します。
Photoshopデザインカンプ：無料配布
次にPhotoshopのデザインカンプ配布サイトを紹介します。
クラウドソーシングなどを見ると、デザインカンプ はPhotoshopで作成されている事も多いです。また、実際の製作会社やデザイナーさんもPhotoshopを使用しているケースは多いです。
Photoshopは有料ツールですが、自身の目指す先がWeb制作関連なら（デザイナー志望の方は特に）、必要投資として使えるように契約しておきましょう。
無料配布①
HI-ROKI（@hiroki_web）さん作成のnoteから。
ダウンロードには条件があるのでしっかり確認しましょう（Twitterアカウント作成要）
対応させるブラウザの種類やブレイクポイントなど記載された要件定義書も確認できる本格仕様です。
オシャレで今風なレイアウトなので、コーディングのモチベも上がりますね！
無料配布②
ねこぽん（@webdesigner_go）さんのサイトから。こちらはファーストビューのみのデザインカンプになります。
無料配布ですが、コーポレートサイトやファッションサイトなどいくつかのジャンルがありますので、自身がまだコーディングしたことのないパターンを選ぶのが良いかと思います。
無料配布③
XD有料配布でご紹介したakaneさんのnoteから（同記事）
XD無料配布の章でご紹介したひらともやさんのXDカンプデータですが、実はこちらを作成されたのがakaneさんで、同じカンプのPhotoshop版がこちらからダウンロード可能となっています。
しかもダウンロードデータにはIllustrator版も同梱されているかなりお得な内容となっています。
ツールの使い方を学びたいなら、同じカンプでXD→Photoshop→Illustratorと使い比べしてみるのもいいかもしれませんが、それが実現できるカンプを配布していただいているakaneさん凄いです、、、！
Photoshopデザインカンプ：有料配布
有料配布①
初学者に寄り添った情報を発信しているくりのすけ（@kurinosuke32）さんのnote。
Twitterでは沢山の方がハッシュタグ付きでチャレンジ内容を投稿されている人気noteのシリーズです。
詳細解説はありませんが難易度もそこまで難しくなく、初めのPSDカンプコーディングには丁度いいのでは無いでしょうか。
初級編とあるように、難易度が少し高めの他のカンプも用意されています！
他noteではコーディング学習を主としたシリーズも展開されていますので、気になるかたはそちらも見てみましょう！
有料配布②
webデザイナーこばやす（@kobayas_s）さんの有料noteです。
こちらはデザインカンプを自分で作るという内容になっており、コーディング用教材というものではないです。
ただ、Photoshopでのカンプ作成方法を学べるということは、Photoshopの操作練習にもなります。
デザイン→コーディングで一気通貫のスキルが身に付けられるという意味では、特にWebデザイナー志望の方には有益noteかと思います！
デザインツールからのコーディング方法が学べる記事紹介
最後に各デザインツールからのコーディング方法が知れる記事を紹介します。
はにわまん（@haniwa008）さんがまとめていただいている記事。XD、Photoshopどちらもあります。
こちらはふる（@guutenx）さんの記事。Photoshopからのコーディング方法が網羅的に説明されているのでとてもわかりやすいです！
\ 2021.02.22更新 /
現在年に数回しか無いAdobe製品のSALE中です！
購入検討中の方はこの機会を逃さないように！！
まとめ
有料・無料とありますが、Giveの精神に溢れた素晴らしい先輩方等のおかげで実務未経験でも実践に近いスキルを学ぶことができます。感謝の気持ちをもって使用させていただきましょう！
また、この記事に辿り着いた方はコーディング学習中の方も多いかと思います。
デザインやコーディングの基礎知識を学びたい方向けに、書籍とUdemy、それぞれのオススメ教材をまとめてますので良かったら参考にしてみください！
UdemyではXDやPhotoshopの動画教材も紹介しています！
それでは今回はこのへんで！
コメント