【中級】XDデザインからのコーディング実践演習【JavaScript導入】

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

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

もともとはyoutubeでライブコーディングを撮影するためにデザインを作成したのが始まりで、そこから更にデザインに手を加え今回配布に至りました。

初級Exクリアレベルの学習者を想定しています。

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

【動画でも解説しています】

この動画の14:03より中級編に触れています。

できるようになること

・HTML,CSSに加え、jQueryやJavaScriptのライブラリの基本的な使用法がわかるようになる
・サーバーへのアップロードを経験できる

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

中級から始められる方は、中級以上セットが一番オトクです。

コーディング教材中級上級JSセット【実践レベルを目指す】｜Shogo（しょーごログ運営）｜note

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

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

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

サーバーへのアップロード経験

この教材では、最終的に「サーバーへのアップロード」を行って、見れる状態で提出してもらいます。

実案件と同様の手法（FTPアップロード）を練習いただくことも可能です。

実案件前の腕試しに！

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

参考例添付

答えのコードは載せていません。その代わりに完走された方のサイトを掲載しているので、実際に見て動きの確認などを行えるようにしております。

またスマホ・タブレット時のレスポンシブ例も画像で載せています。

特典

利用していただければいくつかお得な特典を僭越ながらつけさせていただきます笑

##　特典１実務にも使えるチェックシートをプレゼント！！
特設ページでPDF形式で配布しています。

##　特典２「表示崩れがないか確認します（2回まで）」

❶このデザインをコーディング後、サーバーにwebページをアップロードされて
❷note下部のフォームよりご連絡いただければ2回の表示確認を無償で行います。
実案件ではタブレット、SPデザインがないことが多いのでどう実装するかはその人の感覚に左右されます。
この課題でその経験を積んでいただけたらと思います（コードレビューは行いません）
レビューは制作最前線で使われるAUNやMONJIで行っています
https://monji.tech/ja/

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

価格

制作物の添削をAUN,MONJIで視覚的にわかりやすく行っている
二回の表示確認で再確認を受けられるようにしている

この価格でここまでやるのは、他のどの教材にもない特典だと思っています。

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

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

教材作成の思い

表示確認特典の価値

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

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

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

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

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

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

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

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

しかし、フリーランスとして活動している人に自分の表示確認をお願いするのもハードルは高いです。

安くても2000~3000円が相場でしょうし、大半の人はいきなりポートフォリオにして営業し、そして「お断り、もしくは返信なし」になってしまうのだと思います。

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

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

中級のレビュー例

現場で使われているAUNというレビューツールで添削を行います。制作会社や私も実案件でよく使っているものです。

身につくスキル

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

実務でも使えるセルフチェックシートプレゼント！！

各教材ごとにチェック項目を指定しているので、セルフチェックの手法を学ぶことができます。

セルフチェック→表示確認の二段構えでクオリティの高いポートフォリオを準備することが可能になります。

よくある質問

Q1：表示確認2回でクリアできなくてもポートフォリオとして活用可能でしょうか？
A1：可能です。その場合はセルフチェックで各自の判断で公開お願いします。
*表示確認は初級Ex以降の特典です。

Q2 ：表示確認はどれぐらいの期間で返ってくるのでしょうか？
A2：通常3日以内です。それ以上経っても返信のない場合はメールが届いていない可能性があるので再送いただければと思います。

Q3；模範回答はありますか？
A3：模範回答はありませんが、完走者の実装例を複数掲載しているので、参考にしていただくことが可能です。

Q4：技術的にわからない部分を質問できますか？
A4：質問はお受けしておりませんm(_ _)m
その代わり完走された方のサイトを掲載しております。

Q5：かなり古いPCを使っていますが、Adobe XDを使えるか心配です。　A5：URLカンプも配布していますので、PCのOS,性能に関わらず学習していただけます。心配でしたら無料の「入門編」も出しておりますので、そちらで試していただけると良いかと思います。

入門編はこちら

Q6：これら一連の教材で案件獲得できるレベルになりますか？
A6：本教材は私が公開しているロードマップに練り込んでいるため、ロードマップ上で活用していただけると各教材がどのレベル感になるのか、イメージが湧きやすいかと思います。
web制作学習
ロードマップはこちら

Q7：公開するサーバーの指定はありますか？
A7：特にないですが、おすすめはあります。「サーバー契約→サイト公開」まで解説した記事リンクを置いているので、手順通りに進めれば決して難しくありません。

コーディング演習課題をこなされた方のメッセージ・アドバイス

これから課題を学習される方向けに頂いたメッセージ・アドバイスを掲載しております。

挫折そうな時に、見てみて下さい。

デザインカンプからのコーディング練習・勉強をこなされた方からのメッセージ｜しょーごログ

中級からなら「中級以上セット」が超お得

中級以上セットでは中級から実務レベルを目指す際にもっともお得なまとめ買いセットになっています。

特に「中級Ex」「上級」「Photoshop編」の3つは、相手からかなり評価が高いことが過去の卒業生からわかっているため、駆け出しが多い昨今は、ここまで終えられることをおすすめしています。

コーディング教材中級上級JSセット【実践レベルを目指す】｜Shogo（しょーごログ運営）｜note

更新ポイント

2021.07.24 スマホ・タブレット実装例追加
2021/12/07 サーバーに複数のポートフォリオを公開する記事追加
2022.03.01 【超重要事項】ポートフォリオとして使う場合の注意点
2022.12.31 当サイト限定レンタルサーバーを500円引きにします！
2023.01.08 完走者の方のブログ記事を掲載しました(記事下部)