
【中級】XDデザインからのコーディング練習【JavaScript導入】
こんにちは、フリーランスのweb制作エンジニアとして3年ほど活動しているしょーごと申します。
今回は実務未経験の方がポートフォリオとして提出できるレベル感のデザインカンプを作成しました。
もともとはyoutubeでライブコーディングを撮影するためにデザインを作成したのが始まりで、そこから更にデザインに手を加え今回配布に至りました(アコーディオンとフォーム、記事一覧を追加)。
できるようになること
HTML,CSSに加え、jQueryやJavaScriptのライブラリの基本的な使用法がわかるようになる
お知らせ(2020/10/13更新)
現在添削を実際に現場で使われているレビューツールAUNの採用で強化しております!
書くだけで終わらず最後に確認してもらえる教材です!
更に中級Ex、上級編もリリースしました。
初級からの方向け↓
初級・初級Exをクリアされた方向け↓
【中級編YouTubeライブコーディング動画】
ご購入後、完走された方々の感想
しょーごさん@samuraibrassのnote教材中級編が完成しました。https://t.co/j9tn2qEpzt
— のり/プログラミング初心者 (@nrtk03) January 6, 2021
swiperやフォームを動作させるなど、他にもたくさんの機能を実装してみて、かなり勉強になりました!
この価格でこれ以上の教材はないです!
制作時間:約15時間https://t.co/XMEmCdgIYO
しょーごさん(@samuraibrass)がnoteで出してる中級編コーディングやっと終わったー!!https://t.co/LK4BD9pKl7
— iwataro@web制作 (@iwataro_web) September 27, 2020
初めて完走させたから疲れたけど、経験知の量が半端ない。次は上級編やろっかなー。安いし。https://t.co/xxOj4JHeGk
#プログラミング初心者
#駆け出しエンジニアと繋がりたい
しょーごさん(@samuraibrass)の模写コーディング教材完走しました!JavaScriptやCSS設計を勉強していたので、学んだことを活かせる最良の機会でした。自分でデザインしていないと明記すれば、ポートフォリオとして活用してもいいそう。よりよい機能と見た目を追求したい💪https://t.co/X8cZCkUkJG
— 上丞 泰輝 | web制作勉強中 (@taiki_uejo) July 29, 2020
@samuraibrass
— るしふぁー (@luciferwotagei) February 3, 2020
XDからのコーディング完了しました!!
(https://t.co/o9Xu8GONuQ)
簡単すぎず難しすぎずで今の僕にはちょうど良かったです。
レスポンシブも完了したので、お時間あるときに確認していただけると幸いです!
(https://t.co/VnPgpkddqC)
レビューありがとうございます!このnoteに出会えて本当に良かったです!これからも参考にさせていただきます。
— 浅井 愛美 | webデザインを勉強中です (@ManataDesign07) September 18, 2020
しょーごさん(@samuraibrass)のnote、XDからのコーディング完了しました!
— zono (@s27898918) September 22, 2020
(https://t.co/5tOBiQKdHp)
18時間くらいかけてようやく完成しました!
ググりまくってようやく完成したので達成感がすごいです。
またお時間あるときにでも、確認していただけると幸いです!https://t.co/JxTRp2dyH0
jQueryではハンバーガーメニュー、swiperによるスライダーや、googleフォームとの紐づけから自動返信まで、多くを学習できました!
— taka (@4FC9mR1sWXraXVm) October 31, 2020
XDカンプコーディング明記でポートフォリオにも使用ができ、やりごたえがあります!
# こんな感じのデザインです
デザインはXDのURLカンプを配布します。
XD持ってなくても大丈夫です。
実案件前の腕試しに!
実案件のスピード感を再現されたい方は、三日以内(20時間以内想定)の完成を目指してみてください。三日以内で終わった場合は普通に実務行けると思いますし、自信持っていいと思います。
-2020/05/09 追記-(ネット環境が不安定な方に向けて、XDファイルも追加しました)
【2020/03/30 追記】
ブログ記事一覧や制作実績一覧(スライダー)を追加しました。
どちらも案件に頻出のUIパーツになりますので、この際に練習しておきましょう!
スライダーでは頻出のSwiperも関わるので、いい練習になるはずです。
このカンプだけで最低限デザインカンプからのコーディングはこなせるようになります。
# 特典
利用していただければ僕が赤字になる特典を僭越ながらつけさせていただきます笑
## 特典1「Twitterで感想や完了報告いただければ搭載します」
これを特典と言って良いのかw
僕が確実に気づくため、@samuraibrassのメンションをつけてnoteのURLとともにツイートしていただければと思います。感想もつけていただければ、こちらのnoteでツイート紹介させていただきます!
全部拝見させていただきます🙇♂️
## 特典2「表示崩れがないか、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,確実に「買い」だと思います。
「デザインカンプからのコーディングをしてポートフォリオを作ろう」という場合、表示確認を誰かにしてもらうのはマストです。
— しょーご@しょーごログ運営 (@samuraibrass) December 26, 2020
毎月100作品ほど見ていますが、95作品ぐらいは修正点があるものです。
もったいないので、表示確認をしてもらいましょう(そういった特典のある教材がベストですね!👍)
# 身につくスキル
・XDデザインカンプからのレスポンシブコーディング
・JSを利用したハンバーガーメニュー、アコーディオン、スライダーの作成
・フォームの作成
・Googleフォームを用いて静的サイトのフォームを実際に動作させる(参考記事執筆済み)
・JavaScriptまたはjQueryでのフォームの入力確認
なお開発要件として下記をデザインカンプにも記載しています。
・SP版はPC版を参考に作成する(ハンバーガーメニュー設置など)
・アコーディオン(よくある質問の部分)はデフォルトは1つ目のみ開いている状態で
・AOS.jsなどで各々の要素をふわっと表示させる
・・制作実績部分はスライダーになるので、実務で一番使うswiperを利用(5秒おきに自動スクロールする処理)
・フォントはGoogle Fontsの「Noto sans jp」を利用
・「お問い合わせ」ボタンを押すと、お問い合わせフォームにスムーススクロールする
・お問い合わせフォームを動作するようにする(Googleフォームを利用する、自動返信メール送信まで可能)
・フォームの部分は全入力欄および「プライバシーポリシーに同意します」にチェックがないとsubmitできないようにする
以下有料になります🙌
中級と中級Exをまとめています。この2つがこなせると、HTML,CSS,JSのコーディング案件に挑戦できるだけのスキルと胆力がつきます。ま…
模写コーディング教材中級上級JSセット【900円お得】
4,260円
XDデザインデータからのコーディングを経験するためのデザインデータの【中級】【中級Ex】【上級】【JavaScriptを練習できるJS特訓…
XDデザインデータからのコーディングを経験するためのデザインデータを【すべて】同梱しています。 デザインデータからのコーディング教材は他…
【中級】XDデザインからのコーディング練習【JavaScript導入】
980円

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

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