デザインカンプからのコーディングを練習しようと思った時にぶつかる課題として、
なるべく最初はお金をかけずに、無料のデザインカンプがいいなぁ。
とはいえたくさんネット上にはあるし、どれがいいんだろう？
という疑問があるかと思います。
このサイトでは以前、コーディング練習に最適なサイトをまとめた記事を書いています。
しかし、この記事で紹介していたのは一部有料も含んでいました。
そこで今回は「完全無料」で配布されている数多のデザインカンプから、個人的におすすめなもののみを精選してお伝えしていきます。
またデザインカンプにも様々あるので、実案件で多い形式である、
- Figma（初学者はこれだけでOK）
- Photoshop（Figmaをいくつかこなしたら挑戦）
- Illustrator（Figmaをいくつかこなしたら挑戦）
この順に紹介をしていきます。
これを話している私自身はフリーランスエンジニア歴6年でコーディング案件を200件以上納品している実績があり、現役でWeb制作のスクールメンターも行っています。
今回の記事を見ていただくことで、「どのデザインカンプを選べばいいのか分かるようになる」ので、是非最後まで御覧ください。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Figmaの無料デザインカンプ
Figmaからのコーディングは行いやすく、初学者が練習するには最適のデザイン形式です。
2023年まではAdobe XDもよく使われましたが、現在は開発が止まっていていつ消えるか分からないので、基本的にはFigmaからのコーディング練習をおすすめします。
このサイトではFigmaデザインからのコーディング方法も解説しているので、こちらを参考にしつつ挑戦してみてください👇
❶しょーごログ【入門】デザインカンプからのコーディング練習(難易度★☆☆)
このしょーごログで出しているFigmaデザインカンプになります。
【入門】無料デザインカンプからのコーディング練習では、初めてデザインカンプからのコーディングを行う人に向けてデザインを制作しており、
無料のライブコーディング動画も公開しています。よって一緒に手を動かして頂ければ誰でも最後までコーディングができます！
Codejumpさま配布のFigmaカンプ（難易度★★☆）
Codejumpではたくさんのデザインカンプが揃っていて、Figmaに関しても20種類ものデザインカンプを無料配布しており、圧巻です。
様々なレベル帯の課題が並んでいるので、お好みの課題を選べばいいかと思います。
とにかく課題の量が多いので、たくさん練習ができますね！
Photoshopの無料デザインカンプ
Photoshopからのコーディングはまだ結構あります。
特に制作会社の案件だと今もPhotoshopが一番多いのではないでしょうか。Figmaでデザインが来たことない人もまだ一定いるはずです。
このPhotoshopからのコーディング、Figmaに比べて結構面倒くさいです。。。直感的じゃないし、そもそもデザインカンプ（UI）を作るためのソフトじゃないので。
よってPhotoshopからのコーディングは実務前に経験しておくべきだと個人的には思っているのですが、一つ懸念点があります。
それは「Adobe CC
」が必須であるということです。
詳しくは以下の記事を見てみてください。
結論「Adobe CC」に課金しないとPhotoshopは開けませんが、Web制作では必要経費になります（私も5年ほど課金しています）
❶ウェブスペさま配布のPhotoshopカンプ（難易度★☆☆）
無料のPhotoshopデザインカンプを探すのは中々大変なのですが、見つけました・・・
とても簡単なデザインでPhotoshopからのコーディングを練習することができます（デザインカンプは以下のサイトよりダウンロード）
これをこなせば最低限のPhotoshopからのコーディングは大丈夫かと思います。
Design WorksさまPhotoshopカンプ（難易度★☆☆）
もう一つ、ネットの奥底より無料のPhotoshopカンプを見つけてきました・・・
こちらもとてもシンプルなデザインカンプになっていて、Photoshopに慣れるのにいいかと思います。
これら2つをこなせばPhotoshopからのコーディングは最低限大丈夫かと思います。
Photoshopデザインカンプは割と頻繁に出会うので、是非練習しておきたいですね。
イラストレーター(Illustrator)の無料デザインカンプ
イラストレーターからのコーディングは非常に難しく、それなのに実案件では意外にお目にかかる機会も多い曲者です。
地方の案件とかは全然イラレでカンプが来たりしますね。
イラストレーターも「Adobe CC」が必要になってきます。
❶ウェブスペさま配布のイラレカンプ（難易度★☆☆）
安定のウェブスペさま。こちらのデザインカンプも同様のデザインで、とても簡単です。
イラストレーターへの初挑戦にはうってつけの難易度になっています（デザインカンプは以下のサイトよりダウンロード）
イラストレーターからのコーディング方法も丁寧に解説されているので、まずはこれに是非挑戦してみてください。
❷ステップバイワークさま配布のイラレカンプ（難易度★★☆）
こちらのデザインカンプでは、もう少し難し目のイラレのカンプからのコーディングを練習することができます（デザインカンプは以下のサイトよりダウンロード）
基本的なイラストレーターの操作方法を学ぶには十分なレベル感のデザインになっているので、2作品目に挑戦するといいかと思います。
練習課題とポートフォリオ利用課題は”分ける”
無料と有料の違い
今回は「無料デザインカンプからのコーディング題材」に関して紹介してきましたが、これをそのままポートフォリオに利用するのは個人的には厳しいイメージです。
理由として、
- コーディングに慣れてもらう役割だったり、無料なのでデザインや機能が割と簡素
- レビューなどの添削が無い
こういった成約がどうしてもあります。
なので、ある程度実力がついたら有料で良質なデザインカンプを使用するのがおすすめです。
自分は絶対にお金払わずに勉強したいんですよね〜
という方がいますが、駆け出しが多い昨今でわざわざ修羅の中に行く必要は無いと考えます。
例えば私は「【プロの添削付き】デザインカンプからのコーディング練習課題」という有料コーディング課題を出しています。
この課題では、
- 現場レベルのコーディング課題7つ
- 制作物はポートフォリオとして利用可能
- 他者と被りにくい、定期的なデザインアップデート
- 現役エンジニアからのレビュー
これらの特徴を持って、実務未経験の方が一歩を踏み出すのを強力にサポートしています。
初級Ex以降の課題はすべて私のレビューがついているので、しっかり実力もつけることができますし、良い緊張感の中で取り組めます。
題材が少ないPhotoshopに関しても、ポートフォリオとして使えるレベルのものを用意しています。
これらすべてのコーディング課題を包括した「全部盛り」が一番オトクになるので、興味のある方は見てみてください。
とはいえ、無料カンプからの挑戦をまずはすべき
コーディングが楽しいと思えるかどうかは相性もあるので、まずはここで紹介した無料カンプからのコーディングを試してみて、
よし！！本気でコーディングに向き合うぞ！！
という覚悟が決まった場合に有料デザインカンプに挑戦すればいいかと思います。
買ってそのままおいておくのが一番もったいないですからね。
コーディングの独学方法に関しては、以下の記事にまとめているので是非こちらも参考にして、独学を成功させてください。
もしスクールに通うなら、現役エンジニア視点だと「デイトラ」に通えば大丈夫です。私は完走した上で記事を執筆しているので参考になるはずです。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
