見出し画像

デザインデータからコーディングできる練習素材まとめ【無料あり】

KojimaKohei

おはようございます

さて、本日はコーディング練習素材についてまとめました。


TwitterのTLを見てると、「模写しました！今日の積み上げ！！」みたいなツイートが流れてきます。

正直、ただ模写するだけでは正直あまり意味ないかなと思ってます


こちらの吉本さんのツイートは本質を突いてるなーと思っていて、既存サイトを模写するのなら、デザインデータを元にコーディングする方が実践的で力がつくはず。


※コードレビューしてもらえると更に良い


そこで、実際にデザインデータからコーディングできるnoteをまとめてみたので、ぜひ挑戦してみてください。（一部無料あり）


個人の主観で、入門〜初級〜中級〜上級の順で書いてますが、僕の感覚値のため、リンク先で詳細をご確認いただければと思いますm(__)m

記載している内容は、執筆時点のものです。
金額が変更になったり、非公開になる場合があります。


【無料】KROWL


レベル別に３つ。コード解説付きなので、初心者でも安心かも。ただし、レスポンシブの記載がないのが不安要素です。



【無料】あなたはできる？模写コーディング腕試し！


プログラミング学習アプリ「#デイトラ」の課題の一部が無料で練習できます。

ボク個人としてコーディング学習するなら「#デイトラ」を推してます。


このnoteも「難しすぎず簡単すぎず」の難易度で、初心者にぴったりの素材になっていますね。

※デザインカンプではなく、画像キャプチャからのコーディングです



【無料】XDデザインからのコーディング練習【無料です】

入門者向けのコーディング教材を無料で公開されています。

まずはここから始めてもいいかもしれません。


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

XDの使い方や、参考コードの記載もあり、とっても丁寧に解説されています。これで「無料」は、素晴らしいです。


デザインもシンプルなデザインで簡単そうに見えてボリュームもあり、少し難しく設計されているので、Progate終わりの初学者には良い教材です。


元々のデザインはあかねさん（@omsss22）が作ったものみたいです。


追記


「コーディングのポートフォリオに使用OK」と追記していただきました！


【800円】【初級Ex】 XDデザインからのコーディング練習【複雑なレイアウト】

ある程度HTML、CSSの基礎がわかってきた人向けで、総復習コーディング練習。

レスポンシブでも崩れないよう、HTML、CSSを駆使してコーディングしていきます。


表示確認、添削の特典があるので、初心者には嬉しいですね！

①表示確認特典　添削あり（2回まで）
②ポートフォリオ使用OK


【980円】XDデザインからのコーディング練習【JavaScript導入】

イケてるデザイン。さらに、特典が3つあるので、コスパ良いなーと思います。

・Twitterで感想や完了報告いただければリツイートします
・表示崩れがないか、SPデザインは大丈夫か確認します
・コーディングのポートフォリオに使用OK


【800円〜】ちづみさん コーディングの練習をしよう！シリーズ


僕もお世話になりました。

入門編から上級編までの4つのnoteを作られており、少しずつステップアップしつつ練習したい人におすすめかなと思います。

ちづみさんらしく、可愛らしいデザインで楽しく学べます。


ポートフォリオとして掲載OKなので、ポートフォリオを増やしたい人にも。

ポートフォリオとして掲載OK



【1900円】くりのすけさん　コーディング練習note



Twitterでよく流れてくるかなり人気のnoteです。

Progate終わりの初心者からすると、コーディングのバリエーションが増えたり、「学びが多い」と評判です。


【1280円】【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】

複数ページで構成された架空の温泉旅館のサイトをコーディングします。

実務でよくあるJavaScriptを使った制御や複数ページならではのコーディング、CSSアニメーションを学ぶことができると思います。


また、和風レイアウトの練習にもいいですね。

特典
表示確認特典（条件あり&二回まで）
ポートフォリオ使用OK


【1980円】コーディング模写【実務が体験できるpsdデザインカンプからのコーディング】


他のnoteと比べて値段は高めな印象ですが、 デザインを見て納得しました、実案件レベル。


初心者がいきなり取り組むと、シンプルに挫折する内容になっていますが、これを作れるようになれば大きな自信につながります。


加えて、XDではなく、PhotoShopデータというところ。

確かにトレンドはXDですが、現場では、PhotoShop（PSD）でデザインカンプが作られてることが多いです。

つまり、PSDも練習しておいた方が得策というわけですね。


【2180円】【上級】XDデザインからのコーディング演習【WordPress実案件レベル】

レベル感的には、既出noteの「初級編」「中級編」を完走し、「WordPressレッスンブック」を終わらせた人向けのレベル感となっております。

実務レベルのWordPressサイトの構築が体験できます。

トップページ、お知らせページ、ブログページなど、よくあるコーポレートサイトの構成です。


これが構築できれば、実務でも通用するだろうなーと思いました。

特典
①表示確認
②ポートフォリオとして利用可能
③ポートフォリオとしてアピールする際のお手本文章を同梱


デザインカンプをコーディングするとき、「誰かにチェックしてもらう」のは超重要だと思ってます。

その点、ShogoさんのNoteには必ず「表示確認」の特典があり、素晴らしいなーと思いました！


コーディング練習素材は溢れてる

こう見てみると、練習用のデザインカンプってたくさんありますね。

上級編まで完走できたら、十分実務でもやっていけると思います。


初心者向けコーディング教材って、同じようなデザインになりがちなので、

できるだけいろんなパターンのコーディングを自分の頭で考えてするのが良さそうです。


くれぐれも言っておきたいのは、価格設定は販売者の自由ですし、買った人が満足ならそれでOKだと思います。


以上、
今回は昨今のコーディング教材について気になったので、まとめ記事にしてみました。


スキ、フォローしていただければ嬉しいです。


※おすすめのWeb制作オンラインスクール
→　#デイトラ

サポートいただければ嬉しいです。