見出し画像

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

Shogo(しょーごログ運営)

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

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

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

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

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

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

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

できるようになること

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

コーディング課題縦長バナー

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

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

スクリーンショット 2021-12-23 13.36.27
全部盛りマガジン12_23

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

スクリーンショット 2021-11-22 10.29.46
スクリーンショット 2021-11-22 10.29.59
スクリーンショット 2021-11-22 10.29.23
スクリーンショット 2021-11-22 10.29.31
スクリーンショット 2021-11-22 10.30.08
スクリーンショット 2021-11-22 10.32.24

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

デザインTop –pc

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

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

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

サーバーアップロード訴求バナー

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

実案件前の腕試しに!

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

参考例添付

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

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

特典

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

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

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

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

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

価格

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

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

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

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

教材作成の思い

画像21
画像22
画像23

表示確認特典の価値

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

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

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

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

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

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

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

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

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

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

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

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

スクリーンショット 2021-11-22 10.34.53
コーディング教材_学習の流れバナー

中級のレビュー例

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

スクリーンショット 2021-12-23 12.28.20

身につくスキル

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

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

コーディングチェックシート配布note

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

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

よくある質問

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:特にないですが、おすすめはあります。「サーバー契約→サイト公開」まで解説した記事リンクを置いているので、手順通りに進めれば決して難しくありません。

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

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

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

スクリーンショット 2021-06-15 12.08.07
スクリーンショット 2021-07-15 22.16.42

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

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

全部盛りマガジン12_23

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

コーディング教材セット表
スクリーンショット 2021-11-22 10.35.10
スクリーンショット 2021-11-22 10.39.09

更新ポイント


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

この続きをみるには

この続き: 6,780文字 / 画像16枚 / ファイル1個

単体で買うよりマガジンの方が400円お得です。

中級と中級Exをまとめています。この2つがこなせると、HTML,CSS,JSのコーディング案件に挑戦できるだけのスキルと胆力がつきます。ま…

中級上級をバラ買いすると、10920円のため、このマガジンで購入頂くと2000円お得です!

XDデザインデータからのコーディングを経験するためのデザインデータの【中級】【中級Ex】【上級】【JavaScriptを練習できるJS特訓…

このマガジンでお買い求めいただきますと、 3280円お得で、新規教材も追加されます。 これから学習を始められる方には一番オトクとなっております。 教材詳細はこちら→https://shogo-log.com/coding-study/ 買い切りなので、今後リリースされるコーディング教材も無料で自動で同梱されます(追加料金なし)

XDデザインデータからのコーディングを経験するためのデザインデータを【すべて】同梱しています。 計10回もの表示確認を受けられます(初級E…

購入済みの方はログイン
この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Shogo(しょーごログ運営)

過去の自分が知りたかった、欲していたものを発信する、その信念で活動しています。たくさん遠回りもしてきました。そんな過去の自分を助けにいく。 もしよろしければ応援頂けますと幸いです!↓