スクリーンショット_2020-01-01_16

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

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

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

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

できるようになること

HTML,CSSに加え、jQueryやJavaScriptのライブラリの基本的な使用法がわかるようになる
お知らせ(2020/10/13更新)
現在添削を実際に現場で使われているレビューツールAUNの採用で強化しております!
書くだけで終わらず最後に確認してもらえる教材です!
更に中級Ex上級編もリリースしました。

web制作_XDからの模写コーディング教材

初級からの方向け↓

noteマガジン教材バナー

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

noteマガジン教材バナー (1)

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

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



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

スクリーンショット 2020-01-01 17.17.29

スクリーンショット 2020-01-01 17.17.52

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

実案件前の腕試しに!

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

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

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

スクリーンショット 2020-01-23 14.21.47

スクリーンショット 2020-03-30 15.08.20


# 特典

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

## 特典1「Twitterで感想や完了報告いただければ搭載します」
これを特典と言って良いのかw
僕が確実に気づくため、@samuraibrassのメンションをつけてnoteのURLとともにツイートしていただければと思います。感想もつけていただければ、こちらのnoteでツイート紹介させていただきます!
全部拝見させていただきます🙇‍♂️
## 特典2「表示崩れがないか、SPデザインは大丈夫か確認します(一回のみ)」
赤字の原因です。
❶:このデザインをコーディング後、netlifyやGithub Pagesなど何らかの方法でwebページをアップロードされて
❷:本noteの感想をtwitterで流していただけた方はご報告いただければ、PC,SP表示の確認を無償で行います。
その場合はURLを送付ください🙇‍♂️
実案件ではSPデザインがないことが多いのでどう実装するかはその人の感覚に左右されます。
この課題でその経験を積んでいただけたらと思います(コードレビューは行いません)
レビュー例(最近は制作最前線で使われるAUNで行っています)
https://aun.tools/

スクリーンショット 2020-05-29 22.15.30

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

デザインTop –pc(こちらをコーディングしてください)

以下有料になります🙌

この続きをみるには

この続き: 3,834文字 / 画像4枚
この記事が含まれているマガジンを購入する
単体で買うよりマガジンの方がお得です。

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

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

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

このマガジンでお買い求めいただきますと、1000円以上お得で、実質「初級と初級Exが無料」でついてきます。 これから学習を始められる方には一番オトクとなっております。 今後上級編や追加コンテンツに伴って段々と値上げ予定ですので、お早めに!

XDデザインデータからのコーディングを経験するためのデザインデータを【すべて】同梱しています。 デザインデータからのコーディング教材は他…

または、記事単体で購入する

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

Shogo

980円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

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

応援、ありがとうございます!!!(by全員)
146
新潟大学卒業、山形在住の元銀行員現web屋。 メディア運営(Twitter4000人,ブログ2万pv,YouTube6500人,note6000pv) しょーごログ→https://shogo-log.com

こちらでもピックアップされています

コーディング教材全部盛り!【初級中級上級JS】【最もお得】
コーディング教材全部盛り!【初級中級上級JS】【最もお得】
  • 6本
  • ¥5,160

XDデザインデータからのコーディングを経験するためのデザインデータを【すべて】同梱しています。 デザインデータからのコーディング教材は他にもある中で、私の教材では 【初級編】とにかく挫折しない難易度調整し、模範解答をつける 【初級編Ex】HTML,CSSのみで少し難しめのデザイン 【中級編】JabaScriptやjQueryを導入して、動きのあるページを作成してみる 【中級Ex】HTML,CSS,JS実案件レベル 【上級編】WordPress実務案件レベルに取り組み、実務に望めるようにする 【JS練習】web制作JSに特化 と段階を踏むことで、自分のレベル感に合わせて学習することが可能です。また初級以外は【表示確認特典】をつけています。

コメント (3)
この度購入させていただいたものです。
デザインも綺麗で難易度も今の自分に合っていると思い、楽しくコーディングさせていただきます。そこで質問なのですが、表示確認をクリアまたは修正するべき箇所があった場合こちらはどのような方法で知ることができますか。また提出してから表示確認の結果を知るまでの目安期間はどのくらいですか。
お答えしていただけると幸いです。
>表示確認をクリアまたは修正するべき箇所があった場合こちらはどのような方法で知ることができますか
これはAUNで添削し、そのまま報告ツイートにリプライという形で返します。
>提出してから表示確認の結果を知るまでの目安期間はどのくらいですか。
2日以内を目処にしています。
返信ありがとうございます。早速取り組んでみます!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。