こんにちは、らにです(*^▽^*)
目次
早いもので、コーダーとして働き始めてからもうすぐ3か月が経とうとしています。
もう新年度が始まるんだね…はやい…
少しずつですが、仕事にも慣れてきました。残業にも慣れてきました。
しかし、ここで一つの問題が・・・
コーディング、忘れてきてる・・・！！！
少し言い訳をすると、業務で使うコードは独自のフレームワークを使用していてクラスを付加すれば装飾が決まるんです。
だいたいこのクラスを付けるとこういうデザインになるよねって感じで分かるわけです。
なので、最近は自主的な学習も全くしておらず・・・
やっぱりフルスクラッチで書かないと忘れるね・・・
というわけで、初心に戻るためこれからカンプからWebサイトを作る練習をもう一度します！
Webサイトの制作過程ではカンプデータ（psd,xd,ppt何でもアリ）に沿って忠実にコーディングすることが重要視されているため、一から作成する練習をします。（会社によって差があると思いますが）
ピクセルパーフェクトは求められていないにしても、できるだけカンプをコードで再現するのが当たり前。
これがけっこう難しいんですよね・・・。
ありがたいことに、いろんな方々がネット上で練習用素材を公開しています。
しかも無料で！なんて神・・・！！
※そのサイトの利用方法等を読んだ後に使いましょう☆
【Adobe XD】デザインカンプを無料公開します【ポートフォリオ掲載可】
こちらのサイトでは、ポートフォリオのデザインカンプを公開しています。
とてもシンプルな構成なので、初めてカンプから作成する方におすすめです(*^^*)
AdobeXDでデータが軽いのも魅力的ですね♪
2023年2月からXDは無料ダウンロードできなくなりました(´；ω；`)Adobe CCの中にはあります。
コーディング練習用のデザイン～お花屋さんのLP編～
お花屋さんのサイトを作る練習素材です。このカンプもxdで作られています。
1カラム構成のページです。
noteにとても詳しい解説が載っていますので、初心者向けかなと思います。
コーポレートのようなかっちりしたサイトも、このような個人の店舗のサイトも作れると仕事の幅が広がりそうですね！
ECサイト作れる人は強いよね～
【無料配布】コーディング練習用デザインと完成版コーディングデータ
「未経験からWebデザイナーへ！」の、ねこポンさんのサイトです。
がっつり7Pある、コーポレートサイトです。
ただ、ねこポンさんも書かれていますが、
SassとBEMを使って書かれているため、HTMLとCSSを勉強し始めたばかりの方には難しい書き方に思われるかもしれません。。
【無料配布】コーディング練習用デザインと完成版コーディングデータ「未経験からWebデザイナーへ！」
SassとBEMが分かってある程度コーディングできる！という方向けのカンプです。
上記2つが分かってなくてもCSSを使って、コンバーターでSASS→CSSに変換して答え合わせをしてもいいかもしれません。
こちらの本でも詳しく解説されています！分かりやすくておすすめです。
【ポートフォリオ掲載OK】デザイン練習に使えるワイヤーフレーム配布します
こちらは上記で紹介した練習素材と少し違います。
スタートはデザインデータからではなく、指示書とワイヤーフレームからです。
私はワイヤーフレームからの制作はまだ経験したことがありませんが、これも実務でありそうだなと思ったので紹介します。
細かな指示がない分、自分で全体のバランスを見ながらコーディングする必要があるので、これもある程度コーディングをしてきた方向けかなと思います。
デザインカンプ＆データを無料で公開している4つのサイトをご紹介しました！
有料でも全く問題ないレベルの素材をタダで配布しているのは、本当に頭が下がりますm(_ _)m
私もネット上の無料のものにいつも助けられているので、いつか役に立つものを配布できるようになればいいな・・・とあこがれています。
有料で配布されているデータもありますが、数百円程度の安価なものが多いので気軽に買えますね！
参考になるものがあれば購入して、レビュー記事を書こうと思います(*^▽^*)
最後までお読みいただきありがとうございました！