【無料】自分で練習!デザインカンプを配布しているサイト5つ

webデザイン Webデザイン
この記事は約4分で読めます。

あれ…コーダーなのにコーディング忘れてきてる…?!

こんにちは、らにです(*^▽^*)
早いもので、コーダーとして働き始めてからもうすぐ3か月が経とうとしています。

アメ猫
アメ猫

もう新年度が始まるんだね…はやい…

少しずつですが、仕事にも慣れてきました。残業にも慣れてきました。
(例:1時間だけ残業→普通、残業なし→天国)
しかし、ここで一つの問題が…

コーディング、忘れてきてる…..!!!

た、たいへんだ…..!!

少し言い訳をさせてください(ノД`)・゜・。
業務で使うコードは、クラスを付加すれば装飾が決まるBootstrapみたいなものor基本のHTML&CSS(font-sizeとかflexboxとか)のみ。
最近は自主的な学習も全くしておらず…

くたヒヨ
くたヒヨ

触れてないんじゃ忘れますわな…

というわけで(どういうわけ)、初心に戻るため、これからカンプからWebサイトを作る練習をもう一度します!
「カンプから」というのが大事だと思います。
なぜなら、Webサイトの制作過程ではカンプデータ(psd,xd,ppt何でもアリ)に沿って忠実にコーディングすることが重要視されているからです。
ピクセルパーフェクトは求められていないにしても、できるだけカンプをコードで再現するのが当たり前。
これがけっこう難しいんですよね…。


ありがたいことに、いろんな方々がネット上で練習用素材を公開しています。
しかも無料で!なんて神…!!
※お互いそのサイトの利用方法等を読んで使わせていただきましょうね☆

無料練習用素材提供サイト

【コーディング課題】XDからコーディングをしよう【初級編】

よく他の方のブログやTwitterにも出てきますよね。
作りこまれているデザインカンプです。
本当に無料でいいのだろうかと申し訳なくなるレベルです。
クリスタさんのサイトでは、レベルに応じてサイト作成の練習用素材がダウンロードできます!
私は初級編からしようと思います(;´∀`)

【コーディング課題】XDからコーディングをしよう【初級編】ークリスタ

【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】

こちらのサイトでは、ポートフォリオのデザインカンプを公開しています。
とてもシンプルな構成なので、初めてカンプから作成する方におすすめです(*^^*)
AdobeXDでデータが軽いのも魅力的ですね♪

【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】

コーディング練習用のデザイン~お花屋さんのLP編~

お花屋さんのサイトを作る練習素材です。このカンプもxdで作られています。
1カラム構成のページです。
noteにとても詳し解説が載っていますので、初心者向けかなと思います。
コーポレートのようなかっちりしたサイトも、このような個人の店舗のサイトも作れると仕事の幅が広がりそうですね!

アメ猫
アメ猫

このサイトにECショップ要素を入れられるとめちゃ強い

コーディング練習用のデザイン~お花屋さんのLP編~

【無料配布】コーディング練習用デザインと完成版コーディングデータ

「未経験からWebデザイナーへ!」の、ねこポンさんのサイトです。
がっつり7Pある、コーポレートサイトです。

ただ、ねこポンさんも書かれていますが、

SassとBEMを使って書かれているため、HTMLとCSSを勉強し始めたばかりの方には難しい書き方に思われるかもしれません。。

【無料配布】コーディング練習用デザインと完成版コーディングデータ「未経験からWebデザイナーへ!」

SassとBEMが分かってある程度コーディングできる!という方向けのカンプです。
上記2つが分かってなくてもCSSを使って、コンバーターでSASS→CSSに変換して答え合わせをしてもいいかもしれません。

SCSS to CSS

【無料配布】コーディング練習用デザインと完成版コーディングデータ

【ポートフォリオ掲載OK】デザイン練習に使えるワイヤーフレーム配布します

こちらは上記で紹介した練習素材と少し違います。
スタートはデザインデータからではなく、指示書とワイヤーフレームからです。
私はワイヤーフレームからの制作はまだ経験したことがありませんが、これも実務でありそうだなと思ったので紹介します。
細かな指示がない分、自分で全体のバランスを見ながらコーディングする必要があるので、これもある程度コーディングをしてきた方向けかなと思います。

【ポートフォリオ掲載OK】デザイン練習に使えるワイヤーフレーム配布します

まとめ

デザインカンプ&データを無料で公開している5つのサイトをご紹介しました!
有料でも全く問題ないレベルの素材をタダで配布しているのは、本当に頭が下がりますm(_ _)m
私もネット上の無料のものにいつも助けられているので、いつか役に立つものを配布できるようになればいいな…とあこがれています。

有料で配布されているデータもありますが、数百円程度の安価なものが多いので気軽に買えますね!
参考になるものがあれば購入して、レビュー記事を書こうと思います(*^▽^*)

最後までお読みいただきありがとうございました!

コメント

タイトルとURLをコピーしました