コーディング練習用のXDデザインカンプ配布します

こんにちは、現在web制作フリーランスとして2年ほど活動しているしょーご（@samuraibrass）です。

月収は70万程度、YouTubeでもフリーランス情報を発信しており登録者が3000人を超えています（しょーごログ）

実務未経験の方がポートフォリオとして提出できるレベル感のデザインカンプを作成しました。

もともとはyoutubeでライブコーディングを撮影するためにデザインを作成したのが始まりで、どうせなら配布しようと思い、そこから更にデザインに手を加え今回配布に至りました（アコーディオンとフォーム、記事一覧を追加）。

難易度的に少し難しいため、デザインカンプからのコーディングが初めての方には最初は以下がおすすめです。

こんな感じのデザインです

デザインはXDのURLカンプを配布します。

XD持ってなくても大丈夫です。

#実案件前の腕試しに！

実案件のスピード感を再現されたい方は、三日以内（20時間以内想定）の完成を目指してみてください。三日以内で終わった場合は普通に実務行けると思いますし、自信持っていいと思います。

ブログ記事一覧や制作実績一覧（スライダー）を追加しました。

どちらも案件に頻出のUIパーツになりますので、この際に練習しておきましょう！

スライダーでは頻出のSwiperも関わるので、いい練習になるはずです。

このカンプだけで最低限デザインカンプからのコーディングはこなせるようになります。

# 特典

利用していただければ僕が赤字になる特典を僭越ながらつけさせていただきます笑

特典１「Twitterで感想や完了報告いただければリツイートします」

これを特典と言って良いのかw

僕が確実に気づくため、@samuraibrassのメンションをつけてnoteのURLとともにツイートしていただければと思います。

全部拝見させていただきます‍♂️

特典２「表示崩れがないか、SPデザインは大丈夫か確認します」

赤字の原因です。

❶：このデザインをコーディング後、netlifyやGithub Pagesなど何らかの方法でwebページをアップロードされて

❷：本noteの感想をtwitterで流していただけた方はご報告いただければ、PC,SP表示の確認を無償で行います。

その場合はURLを送付ください‍♂️

実案件ではSPデザインがないことが多いのでどう実装するかはその人の感覚に左右されます。

この課題でその経験を積んでいただけたらと思います（コードレビューは行いません）

レビュー例（最近は制作最前線で使われるAUNで行っています）

https://aun.tools/

特典3「コーディングのポートフォリオに使用OK」

営業で提案時に、「XDカンプからのコーディング」ということで使用OKです。（デザインを自作だと偽らないようにお願いします）

# 価格

本noteは6/9日時点で￥500で販売しておりますが

500円で制作物の添削をAUNで視覚的にわかりやすく行っている

この価格でここまでやるのは、他のどの教材にもない特典だと思っているので、500円は自分でいうのなんですが頑張っています笑

書いて終わりでなく、最後に添削を受けられるのが実務前の腕試しにはいいよなと思い、提供しています。

# 身につくスキル

・XDデザインカンプからのレスポンシブコーディング

・JSを利用したハンバーガーメニュー、アコーディオン、スライダーの作成

・フォームの作成

・Googleフォームを用いて静的サイトのフォームを実際に動作させる（参考記事執筆済み）

・JavaScriptまたはjQueryでのフォームの入力確認

なお開発要件として下記をデザインカンプにも記載しています。

・SP版はPC版を参考に作成する（ハンバーガーメニュー設置など）

・アコーディオンはデフォルトは１つ目のみ開いている状態で

・AOS.jsなどで各々の要素をふわっと表示させる

・・制作実績部分はスライダーになるので、実務で一番使うswiperを利用（5秒おきに自動スクロールする処理）

・フォントはGoogle Fontsの「Noto sans jp」を利用

・「お問い合わせ」ボタンを押すと、お問い合わせフォームにスムーススクロールする

・お問い合わせフォームを動作するようにする（Googleフォームを利用する、自動返信メール送信まで可能）

・フォームの部分は全入力欄および「プライバシーポリシーに同意します」にチェックがないとsubmitできないようにする

以下有料になります