XD以外の無料デザインカンプ配布サイトまとめ【Figma】

以前はHTML、CSSの基本文法を学んだ次におすすめの学習法に、サイトの模写がありました。

最近ではデザインカンプからコーディングするほうが実用的だし実績にも使えることが多いので、模写よりもおすすめされているようです。

練習用デザインカンプを無料で配布しているサイトもありますが、そのほとんどがAdobe XDです。

Adobe XDは2023年に単体での無料ダウンロードが終了しているため、現在はコンプリートプランを購入しないと手に入れることができません。（月額税込み 6,480円）

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

今回は、無料でデザインカンプからコーディングの練習をしたい人向けに、XD以外のデザインカンプ配布サイトを紹介していきます。

現在、デザインカンプでよく使われるツールは以下の４つです。

現在この中で無料なのはFigmaのみです。

上の３つ（Adobe製）は、先述したAdobeコンプリートプランを購入することで手に入れることができます。（有料）

2023年よりも前にXDをインストールした人はいいのですが、最近からWEB制作の勉強を始めた人にとっては、無料でデザインカンプからのコーディングを練習するのはFigma一択になってしまいました。

というわけで、以下ではFigmaの無料デザインカンプを配布しているサイトを紹介します。

「未経験からWebデザイナーへ！」のねこポンさんが運営している無料コーディング練習所です。

サイト内ではほとんどのデザインカンプがXDで配布されていますが、一つだけFigmaのものがありました。

videoタグやaudioタグを使って動画や音声を扱ったり、画像を意図的に傾けて位置を微調整したりと、難易度は高めですがさまざまなテクニックを学べるのでおすすめです。

ヤスダ【WEB×稼ぐ】さんのFigmaの使い方講座（Youtube動画）です。

概要欄から学習素材をダウンロードすることで、企業のWEBサイト風のFigmaのデザインカンプを手に入れることができます。

僕はFigmaを勉強するために最初にこの動画を見ましたが、とても分かりやすく解説してくれていますので、Figmaを使ったことがないという人にも視聴することをおすすめします。

動画は、すでに完成しているデザインカンプを参考にワイヤーフレームからデザインカンプを完成させるという内容です。

動画ではコーディングまではしませんが、よく見るLPのデザインなので自分でコーディングすることでスキルを磨けると思います。

Mayuko SogaさんのFigmaの使い方講座（Youtube動画）です。

概要欄のFigmaへのリンクからデータをダウンロードできます。

デザインは、会社のLPサイトで、レスポンシブ対応のためのスマホ用のカンプも用意されています。

コーディングについてはボリュームも多くないので、レスポンシブ対応の練習をしたい初心者の方におすすめです。

無料デザインカンプはXDがほとんどで、Figmaを探すのはかなり困難でした。

今後はXDよりもFigmaが主流になるとの話もあるので、この際に使い方も含めて勉強したほうがよさそうですね。