見出し画像

【中級Ex】 XDデザインからのコーディング実践演習【HTML,CSS,JS実案件レベル】

Shogo(しょーごログ運営)

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

この【中級Ex】は私が以前出した【中級】XDデザインからのコーディング練習【JavaScript導入】というnoteの更に実案件に近い課題になります。

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

この動画の15:43より中級Exに触れています。


コーディング課題縦長バナー
スクリーンショット 2021-12-23 13.36.27

つくるもの

「石井花壇」という架空の温泉旅館のサイト構築を行います。「複数ページ」で構成されています(以下はTopページです)

石井花壇

画像はunsplashとPixabayのものを使用しています。

完走者の感想

スクリーンショット 2021-11-22 12.57.51
スクリーンショット 2022-10-14 9.08.17
スクリーンショット 2021-11-22 12.57.44
スクリーンショット 2021-11-22 12.58.19


スクリーンショット 2021-11-22 12.58.34
スクリーンショット 2021-11-22 12.58.27

中級Exの特徴、できること

この前のレベルの【中級】XDデザインからのコーディング練習【JavaScript導入】は、めちゃめちゃ好評いただいておりますが、こちらのnoteでは一点練習できないことがありました。それが複数ページの構築です。

実際の案件では複数ページをコーディングすることがほとんどなので、本課題では下層ページを3枚つけました。

その他の特徴も合わせて一覧で書き出します。

・複数ページで構成
・CSSアニメーションでの画像切替
・JavaScriptでモーダルやタブ、header制御など実務でよくある機能実装がある
・JavaScriptのライブラリ使用(カレンダー)
・和風レイアウトの練習(縦書きCSS、ブロークングリッドなど)
・パンくずの構造化マークアップ
・サーバーへのアップロード練習(後述)

実装する機能の一つ一つが「自分が過去に実装したことがあるもの」になるのと、仕様が非常に実案件に近いので、こちらのnoteを完走された方は、

もう問題なくHTML,CSS,JSの案件に望める

と思ってもらって大丈夫です👍

配布カンプはPC版のみになります。
その代わりスマホレイアウト例を添付しましたので、参考にしていただけます。

実案件だとしたら納期は?

4日〜7日程度かなと思います。

完成サイトの公開

購入後のエリアで完走者のサイトを公開していますので、「この部分どうしてるんだー!」と悩んだときは、最後の手段として参考にしていただくことも可能です。

中級Ex課題の対象ユーザー

・すでに【中級】XDデザインからのコーディング練習【JavaScript導入】をクリアしている、またはそれと同等のレベル感の方

中級Ex特典

・表示確認特典(後述の条件を満たしてください&二回まで
・ポートフォリオ使用OK
・実案件でも使えるセルフチェックシート無料配布

サーバーアップロードの経験を積める

この教材では最終的に「サーバーにアップロード」して、サイトを見れる状態で提出していただきます。

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

実案件と同様にFTPでのアップロードを試していただくことも可能です(参考リンク添付)

教材作成の思い

画像10
画像11
画像12

表示確認特典の価値

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

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

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

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

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

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

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

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

しかし、フリーランスとして活動している人に自分の表示確認をお願いするのもハードルは高いです2000~3000円が相場でしょうし、大半の人はいきなりポートフォリオにして営業し、そして「お断り、もしくは返信なし」になってしまうのだと思います。

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

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

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

確認は初稿提出含め「二回まで」とさせていただきます。満足の行く完成度で出されることをおすすめします。

中級Ex以降はポートフォリオとして強い

この中級Ex以上からは制作会社にポートフォリオを評価いただけた例をいくつか聞きます。
難しいですが、ぜひ完走していただきたいです。

提出方法

サーバーにアップロードして、BASIC認証をかけていただきます。
方法は購入後のエリアでご紹介します。

中級Ex課題制作への思い

実案件とコーディング課題の間の壁を極力取り払った課題になります。

恐らくこのnoteに挑戦されるようなレベル感の方は、すでにHTML,CSSの基礎がわかって来た方が大半なのではと思いますが、

やはりまだ実務との壁を感じる、なかなか挑戦するのが怖い

といった感情があるのではと思います。私もそうでした。

断言します、この中級Exを完走できたあなたは、間違いなく実案件に望んでも問題ありません。

難しい実装上の問題に直面しても、自分で圧倒的にググって解決までこぎつけられる胆力も備わっているでしょう。

なので、ぜひこのnoteで、自信と実力をつけていただきたいと思います。

また、同じようなポートフォリオが増えてきた中、この制作物は閲覧者の目を引くこと間違いなしです。

中級Exのレビュー例

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

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

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

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

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

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

よくある質問

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

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

Q3;表示確認はどのように行われますか?
A3:MONJIとAUNで視覚的にわかりやすく行っております。

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

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

入門編はこちら

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

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

課題クリア者からのメッセージ・アドバイス

様々なレベルの課題をクリアされた方のメッセージ・アドバイスを掲載しております。

挫折しそうなときは、ぜひ見てみて下さい。

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

中級Exからは「即戦力セット」がおすすめ!

中級Ex、上級、Photoshop編の最強の3つを揃えたセットをリリースしています。駆け出しが増えた昨今、強力なポートフォリオとして活躍してくれます。

1460円安くなるので、新しく中級Exから挑戦される方はこちらがおすすめです。

更新ポイント

2021.0403 おすすめサーバー追加! MacでWindows環境の検証方法
2021.04.25 スマホ・タブレットレスポンシブサイズ✅ポイント追加
2021.10.26 大画面表示確認方法を追記
2021.12.07 ポートフォリオの公開方法(サイト複数公開)解説記事追加
2022.01.06 セルフチェック記事リンク追加
2022.03.01 【超重要事項】ポートフォリオ利用の注意点追加

この続きをみるには

この続き: 6,186文字 / 画像19枚 / ファイル2個

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

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

個別に購入するよりセットのほうが960円安くなるようにしています。

ポートフォリオとして特に評価されやすい【中級Ex】【上級】【Photoshop編】をまとめたものになります。すでにデザインからのコーディン…

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

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

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

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

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

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