見出し画像

デザインカンプからのコーディング練習【初級編】

くりのすけ



くりのすけです。

今回はデザインカンプを提供したいと思います！！

このように、デザインカンプからのコーディングは実務では必須スキルですので、コーディング練習をしてみてください！！

その名も、#くりカンプチャレンジ です！


先日投稿しましたが、嬉しい声が届いていますので、いくつか紹介します。

ありがとうございます！少し物足りないかもしれませんが、基本的なことは学べて復習にも最適かと思います！


そうですね。シンプルな構成なので、画像などもお好きなものに変更して、カスタマイズしても良さそうですね！


XDからのデザインカンプの提供は、結構ありますが、PSDからはあまりないので、貴重だと思います。カンプからのコーディングは必須スキルですので、経験しておきましょう！


#くりカンプチャレンジ で、進捗報告してくれた方もいます！ありがとうございます！！

そうですね。自分なりに下層ページを作っていって、それをWordPress化しても良さそうですね！


このように、報告して頂けると本当に嬉しいですね^ ^


どんなサイトを作るかと言いますと、カフェサイトで、レイアウトもそこまで難しくないかと思います。
ただ、結構勉強になるのではないかと思います。

くりnoteの1弾と2弾ををやったことのある人は、簡単にできる内容かなと思います。
くりnoteでも似たようなパーツがありますので、思い出しながらコーディングするのにも良いかと思います。
また、レスポンシブのカンプも作りましたので、そちらにもチャレンジしてみてくださいね。

まだくりnoteをやったことない人は、まずは本記事のコーディング練習にチャレンジしてみてください！
どこまで出来るか腕試しです！！

やってみてどうしても、難しそうであればくりnoteで腕を磨いてみてください。

これは、簡単だぞという方は、

こちらの中級編にチャレンジしてみてくださいね！！


▼ このnoteがオススメな人
・Progateの後、挫折せずいい感じのレベルのサイトをコーディングしてみたい方。
・PSDデータからのコーディングを実際にしてみたい方。（実務での流れはPSDデータをもらって→コーディング）なので、その流れが身に付きます。
・ポートフォリオを増やしたい方。（掲載OKですが、練習用としてください。）
・PSDデータ付きなので、デザインの勉強をしたい方もオススメです。

※ 質問等やコーディングの答え合わせ等はありませんので、ご了承ください。

頑張って、自力でググりつつ取り組んでみてください。

ただ、自力で出来ればかなりの達成感を得られ、次につながるはずです！！


▼ PSDからコーディングのやり方


▼ ピクセルパーフェクトについて

そこまで、ピクセルパーフェクトにこだわらくて良いですが、出来る人は限りなく近い数値までやってみてくださいね。

ある程度再現できればOKです！！

チャレンジしたい方は、下記よりダウンロードして下さい。



ここから先は

263字 / 1ファイル
この記事のみ ¥ 1,000

ログイン

この記事が気に入ったらチップで応援してみませんか？