8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

【デザインカンプ配布サイトまとめ】ポートフォリオ掲載OK(無料有)

【デザインカンプ配布サイトまとめ】ポートフォリオ掲載OK(無料有)

お知らせ

当記事の元サイト「ダイブログ」は、8/30〜「PENGIN PLOG」と統合しました。
※元ドメイン(https://daib-log.com/〜)からはリダイレクト処理されます。

この記事ではデザインカンプを配布していただいているサイト(無料・有料)の中で、ポートフォリオ掲載可と明記いただいていることを条件に絞ってまとめています。

特にこれからポートフォリオを作成しようとしているコーダーや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は無料で使用できるツールです。実際に触ってみて使用感を確かめてみることが大切なので、まだ使ったことが無い方はまずはダウンロードしておきましょう。

>> Adobe ダウンロードページ(公式)

無料配布①

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

まずは当PENGIN BLOGのコンテンツから。

初級、中級、上級と用意されていて、実践的なボリュームでコーディング練習ができるうえに、配布だけでなくYoutubeでの解説なども用意してます。

有益な配信者様のコンテンツと並べて紹介している中で手前味噌な評価をするのも恐縮ですが、初学者のステップアップに適しているので、ポートフォリオ作成を考えている段階の方には特にオススメしています!

デザインツールの使い方やコーディングの必要知識、Webデザイナー転職者へのインタビュー記事など、役立つ情報をどんどん発信してますのでブクマしてチェックしていただけると嬉しいです!

無料配布②

ひらともや(@hiratomoya)さんのnoteから。

こちらはデザインデータがURLから確認可能なため、XDのソフトをインストールしていなくても大丈夫です。

基本的な使い方からコーディングの説明まで丁寧に説明していただいているので、模写に自信が無い方はここからスタートでもいいかもしれないです。

無料配布③

ねこポンさんの運営しているメディア「未経験からWebデザイナーへ!」からXDのデザインカンプが配布されています。

トップページを含めて8ページ、スマホ用のデザインもあるということで、無料とは思えないボリュームです。

更にSassなどを使ったコーディングデータもセットになっているというかなりお得な内容です。

無料配布④

Codestepさんの運営している学習サイトです。

「模写コーディング」や「デザインカンプコーディング」のデモサイトを用意してもらっていますが、掲載のデモサイトの数は紹介している記事の中でも一番多く充実しています。

デモサイトの質も高く、コーディングの簡易的な解説からソースコードまで掲載してもらっているので、かなり実践的な学習ができます。

このサイトだけでも十分に数をこなせるので、かなりオススメできます。

XDデザインカンプ:有料配布

有料配布①

フリーランスのWeb制作者shogo(@samuraibrass)さんの有料note。細かい仕様も決められている本格的なカンプです。

難易度別にさまざま用意されており、jsプラグインの使用やコンタクトフォームの実装など、実践的なスキルも経験できるカンプです!

リンク先の内容より難易度の高い(より実践的)中級や上級も用意されているので、気になる方はチャレンジしてみましょう!

有料配布②

ノマドフリーランスちづみ(@098ra0209)さんの有料noteです。

リンク先以外にも練習用カンプが用意されていて、とても充実しています。

ちづみさんのnoteでは、XDの使い方から解説されている記事もあり、僕もそちらを購入して勉強したんですがとても分かりやすかったのでオススメです!

有料配布③

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(@hiroki_web)さん作成のnoteから。

ダウンロードには条件があるのでしっかり確認しましょう(Twitterアカウント作成要)

対応させるブラウザの種類やブレイクポイントなど記載された要件定義書も確認できる本格仕様です。

オシャレで今風なレイアウトなので、コーディングのモチベも上がりますね!

無料配布②

XDでカンプ配布もされているねこポンさんのサイトから。こちらはファーストビューのみのデザインカンプになります。

無料配布ですが、コーポレートサイトやファッションサイトなどいくつかのジャンルがありますので、自身がまだコーディングしたことのないパターンを選ぶのが良いかと思います。

無料配布③

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かと思います!

デザインツールからのコーディング方法が学べる記事紹介

最後に各デザインツールからのコーディング方法が知れる記事を紹介します。

XDの導入と値の取得方法 〜コーディング課題に取り組む方へ〜

こちらははにわまん(@haniwa008)さんがまとめていただいているPhotoshopの記事です。

まとめ

僕たちの目的はスキルを学びたい方を応援することです。

本音を言えば、当メディアのコンテンツだけを紹介しておくでもよかったりするのですが、それだけでは初学者にとって本当に有益な情報にはなりません。

そこで今回は他にも素晴らしい教材はあるよ!ということをお伝えしたいという思いでまとめました。

有料・無料とありますが、どれも実践に近いスキルを学ぶことができるので、これを機にみなさんチャレンジしてみてください!

※PENGIN BLOGも引き続きアップデートしつ続けますので宜しくお願いします!!


また、当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

オススメ書籍紹介

【初学者向け】書籍でWeb制作を学ぶ!オススメ書籍をジャンル別に紹介! Web制作のおすすめ本24選!(コーディング・Webデザイン)

オススメUdemy講座紹介

Udemyオススメ講座まとめ 【2021年8月】Udemy×Web制作!オススメ優良講座を紹介!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA