こんにちは、フリーランスのweb制作エンジニアとして3年ほど活動しているしょーごと申します。

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

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

できるようになること

HTML,CSSに加え、jQueryやJavaScriptのライブラリの基本的な使用法がわかるようになる

お知らせ（2020/10/13更新）
現在添削を実際に現場で使われているレビューツールAUNの採用で強化しております！
書くだけで終わらず最後に確認してもらえる教材です！
更に中級Ex、上級編もリリースしました。

初級からの方向け↓

初級・初級Exをクリアされた方向け↓

【中級編YouTubeライブコーディング動画】

ご購入後、完走された方々の感想

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

デザインはXDのURLカンプを配布します。
XD持ってなくても大丈夫です。

実案件前の腕試しに！

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

-2020/05/09 追記-（ネット環境が不安定な方に向けて、XDファイルも追加しました）

【2020/03/30 追記】
ブログ記事一覧や制作実績一覧（スライダー）を追加しました。
どちらも案件に頻出のUIパーツになりますので、この際に練習しておきましょう！
スライダーでは頻出のSwiperも関わるので、いい練習になるはずです。
このカンプだけで最低限デザインカンプからのコーディングはこなせるようになります。

# 特典

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

##　特典１「Twitterで感想や完了報告いただければ搭載します」
これを特典と言って良いのかw
僕が確実に気づくため、@samuraibrassのメンションをつけてnoteのURLとともにツイートしていただければと思います。感想もつけていただければ、こちらのnoteでツイート紹介させていただきます！
全部拝見させていただきます🙇‍♂️

##　特典２「表示崩れがないか、SPデザインは大丈夫か確認します（一回のみ）」
赤字の原因です。
❶：このデザインをコーディング後、netlifyやGithub Pagesなど何らかの方法でwebページをアップロードされて
❷：本noteの感想をtwitterで流していただけた方はご報告いただければ、PC,SP表示の確認を無償で行います。
その場合はURLを送付ください🙇‍♂️
実案件ではSPデザインがないことが多いのでどう実装するかはその人の感覚に左右されます。
この課題でその経験を積んでいただけたらと思います（コードレビューは行いません）
レビュー例（最近は制作最前線で使われるAUNで行っています）
https://aun.tools/

## 　特典3「コーディングのポートフォリオに使用OK」
営業で提案時に、「XDカンプからのコーディング」ということで使用OKです。（デザインを自作だと偽らないようにお願いします）
ポートフォリオとして活用する前に、「表示確認を受けてから」使用するようにお願いします。

# 価格

本noteは12/26日時点で￥980で販売しておりますが

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

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

表示確認を「現役のweb制作者」に行ってもらうには、1000円はどう考えても必要ですからね。

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

表示確認特典の価値

本noteシリーズの最も付加価値が高い部分で、他の教材と一線を画すところです。

このコーディング教材シリーズでは初級編以外に表示確認特典をつけています。これには明確な理由が存在するのです。

表示崩れポートフォリオ多すぎ問題

私と同時期にフリーランスになった人や先輩エンジニア、教え子の多くは既にディレクターやマーケター、起業された方、案件にあふれる人気コーダーデザイナーなど発注者側にも回っています。

彼らにも駆け出しエンジニアから営業メッセージが多く届くようです。

その中で最近多く聞く言葉があります。

添付のポートフォリオがぱっと見でズレてる人が多すぎる

自分が思っている以上にデザインの崩れは気になるものです。

しかし、フリーランスとして活動している人に自分の表示確認をお願いするのもハードルは高いです。2000~3000円が相場でしょうし、大半の人はいきなりポートフォリオにして営業し、そして「お断り、もしくは返信なし」になってしまうのだと思います。

そこに問題意識を持ったこのnoteでは、この料金で「表示確認特典」までつけているので、ポートフォリオ崩れの問題を解消することができます。

表示確認特典に価値を感じられた方は、このnote，確実に「買い」だと思います。

# 身につくスキル

・XDデザインカンプからのレスポンシブコーディング
・JSを利用したハンバーガーメニュー、アコーディオン、スライダーの作成
・フォームの作成
・Googleフォームを用いて静的サイトのフォームを実際に動作させる（参考記事執筆済み）
・JavaScriptまたはjQueryでのフォームの入力確認

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

・SP版はPC版を参考に作成する（ハンバーガーメニュー設置など）
・アコーディオン（よくある質問の部分）はデフォルトは１つ目のみ開いている状態で
・AOS.jsなどで各々の要素をふわっと表示させる
・・制作実績部分はスライダーになるので、実務で一番使うswiperを利用（5秒おきに自動スクロールする処理）
・フォントはGoogle Fontsの「Noto sans jp」を利用
・「お問い合わせ」ボタンを押すと、お問い合わせフォームにスムーススクロールする
・お問い合わせフォームを動作するようにする（Googleフォームを利用する、自動返信メール送信まで可能）
・フォームの部分は全入力欄および「プライバシーポリシーに同意します」にチェックがないとsubmitできないようにする

以下有料になります🙌