【中級Ex】 デザインカンプからのコーディング実践演習【HTML,CSS,JS実案件レベル】
2024.02.07 超実践編の開講案内を記事下部に掲載しました！
2024.03.29 建築会社サイトデザインを追加しました！！
こんにちは、現在フリーランスのエンジニアとして6年ほど活動しているしょーごと申します。
この【中級Ex】は私が以前出した【中級】XDデザインからのコーディング練習【JavaScript導入】という課題の更に実案件に近い課題になります。
【採用サイトのみ】デザインカンプからのコーディング後オリジナルポートフォリオにして頂きます
コーディング課題の被りを無くすために、2023年7月よりオリジナルポートフォリオ化まで支援するサービスにしました。
つきましては、以下の記事を一読お願いします。
デザインカンプからコーディングして終わりではなく、ポートフォリオ利用していただくためには、オリジナルポートフォリオ化まで必須となります。
2024.03.29に追加された建築会社サイトはオリジナル化の必要はありません。
【動画でも解説しています】
この動画の16:46より中級Exに触れています。
２つの課題から選択する
元々は一つの課題だけだったのですが、新たに「建築会社サイト」を追加したことで、
「複数課題から一つを選択してコーディングしてもらう形式」にしました。
❶建築会社 青牡丹工務店
青牡丹工務店という建築会社のサイトを構築していきます。
複数ページのサイトを経験していただきます。
❷新卒採用サイト
「Igatta Group」という架空のWebマーケティング企業の新卒採用サイトを制作してもらいます。
下層ページもあるので、複数ページで構成されるWebサイト制作になります。
完走者の感想
しょうごさんより合格頂きました✌️
— きゅん@Web制作で夢を追う！ (@kyundesign) October 25, 2022
今、ほんとに楽しい！
確実にStepUpしていると実感できるコンテンツが本当に素晴らしい🎉
【中級Ex】 XDデザインからのコーディング実践演習【HTML,CSS,JS実案件レベル】｜Shogo（しょーごログ運営） @samuraibrass #note https://t.co/xEga2vvd9g
中級Exの特徴、できること
この前のレベルの【中級】XDデザインからのコーディング練習【JavaScript導入】は、めちゃめちゃ好評いただいておりますが、
こちらのnoteでは一点練習できないことがありました。それが複数ページの構築です。
実際の案件では複数ページをコーディングすることがほとんどなので、本課題では下層ページを複数枚つけました。
その他の特徴も合わせて一覧で書き出します。
・複数ページで構成
・CSSアニメーションでの画像切替
・JavaScriptでモーダルやタブ、header制御など実務でよくある機能実装がある
・JavaScriptのライブラリ使用
・凝ったレイアウトの練習（ブロークングリッドなど）
・サーバーへのアップロード練習（後述）
実装する機能の一つ一つが「自分が過去に実装したことがあるもの」になるのと、仕様が非常に実案件に近いので、こちらのnoteを完走された方は、
「もう問題なくHTML,CSS,JSの案件に望める」
と思ってもらって大丈夫です👍
実案件だとしたら納期は？
採用サイトは7~10日程度かなと思います。
建築会社サイトは10~14日程度です。
中級Ex課題の対象ユーザー
・すでに【中級】XDデザインからのコーディング練習【JavaScript導入】をクリアしている、またはそれと同等のレベル感の方
中級Ex特典
・表示確認特典（後述の条件を満たしてください&二回まで）
・ポートフォリオ使用OK
・実案件でも使えるセルフチェックシート無料配布
サーバーアップロードの経験を積める
この教材では最終的に「サーバーにアップロード」して、サイトを見れる状態で提出していただきます。
実案件と同様にFTPでのアップロードを試していただくことも可能です（参考リンク添付）
教材作成の思い
表示確認特典の価値
本noteシリーズの最も付加価値が高い部分で、他の教材と一線を画すところです。
このコーディング教材シリーズでは初級編以外に表示確認特典をつけています。これには明確な理由が存在するのです。
表示崩れポートフォリオ多すぎ問題
私と同時期にフリーランスになった人や先輩エンジニア、教え子の多くは既にディレクターやマーケター、起業された方、案件にあふれる人気コーダーデザイナーなど発注者側にも回っています。
彼らにも駆け出しエンジニアから営業メッセージが多く届くようです。
その中で最近多く聞く言葉があります。
添付のポートフォリオがぱっと見でズレてる人が多すぎる
自分が思っている以上にデザインの崩れは気になるものです。
しかし、フリーランスとして活動している人に自分の表示確認をお願いするのもハードルは高いです。5.000円が相場でしょうし、大半の人はいきなりポートフォリオにして営業し、そして「お断り、もしくは返信なし」になってしまうのだと思います。
そこに問題意識を持ったこのnoteでは、この料金で「表示確認特典」までつけているので、ポートフォリオ崩れの問題を解消することができます。
表示確認特典に価値を感じられた方は、このnote，確実に「買い」だと思います。
コーディング課題の進み方(採用サイトの場合)
オリジナル化のレビューを受けていただいて、初めてポートフォリオ利用可能になります。
コーディング課題の進み方（建築会社サイトの場合）
オリジナル化の必要はありません。
レビュー返しは爆速
中級Ex以降はポートフォリオとして強い
この中級Ex以上からは制作会社にポートフォリオを評価いただけた例をいくつか聞きます。
難しいですが、ぜひ完走していただきたいです。
提出方法
サーバーにアップロードして、BASIC認証をかけていただきます。
方法は購入後のエリアでご紹介します。
中級Ex課題制作への思い
実案件とコーディング課題の間の壁を極力取り払った課題になります。
恐らくこのnoteに挑戦されるようなレベル感の方は、すでにHTML,CSSの基礎がわかって来た方が大半なのではと思いますが、
「やはりまだ実務との壁を感じる、なかなか挑戦するのが怖い」
といった感情があるのではと思います。私もそうでした。
断言します、この中級Exを完走できたあなたは、間違いなく実案件に望んでも問題ありません。
難しい実装上の問題に直面しても、自分で圧倒的にググって解決までこぎつけられる胆力も備わっているでしょう。
なので、ぜひこのnoteで、自信と実力をつけていただきたいと思います。
また、同じようなポートフォリオが増えてきた中、この制作物は閲覧者の目を引くこと間違いなしです。
中級Exのレビュー例
現場で使われているAUNというレビューツールで添削を行います。制作会社や私も実案件でよく使っているものです。
動画解説を導入しました！
難関箇所の動画解説を導入しました。これにより、途中挫折を防ぐことができます。
実務でも使えるセルフチェックシート無料プレゼント！！
各教材ごとにチェック項目を指定しているので、セルフチェックの手法を学ぶことができます。
セルフチェック→表示確認の二段構えでクオリティの高いポートフォリオを準備することが可能になります。
よくある質問
Q1：表示確認2回でクリアできなくてもポートフォリオとして活用可能でしょうか？
A1：可能です。その場合はセルフチェックで各自の判断で公開お願いします。
*表示確認は初級Ex以降の特典です。
Q2 ：表示確認はどれぐらいの期間で返ってくるのでしょうか？
A2：通常3日以内です。それ以上経っても返信のない場合はメールが届いていない可能性があるので再送いただければと思います。
Q3；表示確認はどのように行われますか？
A3：MONJIとAUNで視覚的にわかりやすく行っております。
Q4：技術的にわからない部分を質問できますか？
A4：質問はお受けしておりませんm(_ _)m
その代わり完走された方のサイトを掲載しております。
Q5：オリジナルポートフォリオ化は必ずしないとダメですか？
A5：採用サイトの場合はお願いしております。理由は以下の記事で解説のとおりになります→https://shogo-log.com/original-portfolio-explain/
Q6：これら一連の教材で案件獲得できるレベルになりますか？
A6：月20万を稼げる&就職転職が十分可能なスキルレベルまで押し上げます。
本教材は私が公開しているロードマップに練り込んでいるため、ロードマップ上で活用していただけると各教材がどのレベル感になるのか、イメージが湧きやすいかと思います。
web制作学習 ロードマップはこちら
Q7：公開するサーバーの指定はありますか？
A7：特にないですが、おすすめはあります。「サーバー契約→サイト公開」まで解説した記事リンクを置いているので、手順通りに進めれば決して難しくありません。
Q8：二作品目レビュー依頼はどこで出せますか？
A8：記事下部の有料部分で案内をしています。ちなみに二作品目レビューも二回受けることが可能です。
Q9：二作品目レビューなしで、二作品目コーディングしたものをポートフォリオにしてもいいですか？
A9：二作品目を取り組む際は、原則追加料金のお支払いをお願いします。お支払いが確認された方のみ、レビューやポートフォリオ利用をOKしようと思います。
コーディング課題はnoteとブログで出しています
このコーディング課題はnote以外にブログでも販売しています。
noteと違いブログでは単体販売をしていませんが、限定コンテンツをプレゼントしています。
中級Exからは「即戦力セット」がおすすめ！
中級Ex、上級、Photoshop編の最強の3つを揃えたセットをリリースしています。駆け出しが増えた昨今、強力なポートフォリオとして活躍してくれます。
過去の自分が知りたかった、欲していたものを発信する、その信念で活動しています。たくさん遠回りもしてきました。そんな過去の自分を助けにいく。 もしよろしければ応援頂けますと幸いです！↓