こんにちは、こうだいです！
今回【中–上級編】XDカンプコーディングはJavaScriptとWordPressの実装までを想定したデザインカンプを作成しました。

PC版、SP版共にXDのデザインカンプからのコーディング、WordPress化までをしていきましょう！

WordPressの基礎部分に触れた実装を組み込んでいる為中級編でおこなったJavaScriptまでの動きの実装より少し難易度が高いですが、WordPressを初めて学ぶ方にとって役立つ構成としています！

中級編がまだの方はこちらから実践してみてください。

中級編も難しい！という方はこちらから進めてください。
参考コードとライブコーディングの動画を載せているので勉強しやすいかと思います。もし分かり難いという場合はコメントいただければと思います・・・。笑

コーディング目標物

【PC版デザイン】

【SP版デザイン】

XDデザインカンプのコーディングとPhotoshopデザインカンプからのコーディングが一気に勉強できる様にしました！

XDデザインカンプの詳細については下記イメージとなります。

より実務を想定したいと思っているため仕様書の方も作成していますので、実装前に確認の方が必要です。

Photoshopのデザインに関してはところどころデザインを変えています。（Photoshopデザインは少し難易度低め）
※PhotoshopについてはSP版の作成はありません

WordPressといっても最初は抵抗があり時間がかかる部分だと思うので、実装手順や参考資料、参考コード等追加していく予定です！
追加毎に【note購入者限定】公式LINEを活用して情報共有していきます＾＾

実装イメージ

購入者特典

①無料表示確認
②無料Zoom相談
③XDデザインカンプ
④Photoshopデザインカンプ
⑤購入者限定の品質CKシートの配布（notionで配布）
これから実務でも使用できる様に品質CKシートを購入者特典としてだしています。

⑥WordPress実装手順書の配布（notionで配布）
notionにてこちらの実装手順を解説しています。
下記画像は一部の実装手順をnotionでまとめたものとなっています

その他解説の具体的な内容は下記となっています。

【note購入者限定】公式LINEを作成しているので【note購入者限定】公式LINEチャットにて「デザインカンプ希望」と送っていただければデザインカンプの方をお送りいたします。

購入していただいた方には無料で表示確認のレビューをさせていただきますので、下記の購入から無料表示までの流れで表示崩れの確認依頼をしていただければ確認させていただきます。

購入から無料表示確認までの流れ

1. note購入者限定】公式LINE登録

2. 【note購入者限定】公式LINEチャットにて「デザインカンプ希望」と送る

3. XDデザインカンプ、Photoshopデザインカンプ受取り

4. トンマナ、仕様書を確認後に実装

5. 品質CKシートを元に品質CKを実施

6. 本番環境へのアップロードを実施

7. 【note購入者限定】公式LINEのチャットにて表示確認依頼を行う

8. feedback内容確認&修正

9. 再確認依頼

10. 修正実施後、ポートフォリオとして活用

完走者様の感想

よくある質問

Q；技術的な部分で躓いた場合、お教えしていただくことは可能でしょうか？

A；基本的に技術的な部分でお教えすることはできませんが、表示崩れの確認をさせていただき、どういったポイントで実装すればよいかフィードバックさせていただきます。

Q；設定納期以内に終わらせることができなくても問題ないですか？

A；問題ありません。ですが設定している初稿日は実案件を想定しているので、極力実践の意識をして取り組んでください。

Q；WordPressをまだ勉強中なのですが、取り組んでも問題ないレベル感でしょうか？

A；問題ありません。今回のデザインカンプでのWordPressを実装する箇所をかなり少なくしています。またWordPress実装の手順書もnotionで作成しているので、WordPressの実装方法を学ぶのに最適な課題としています。

Q；このデザインカンプからのコーディングを実装できれば実案件でも通用するスキルは身につきますか？

A；はい。こちらのデザインカンプからのコーディング〜WordPress化までができれば、実際にお仕事をもらって実務を遂行することは可能かと思っています。実務にも難易度は様々なので、なんでも可能とは言えませんが、実際に同等レベルのコーディング案件はあります。

返金保証有り

万が一思っていた商品と違う！
といったことがあるかもしれないので、返金保証をつけています。

購入前には必ずよくある質問を確認した上でご購入をお願いします。