【初級Ex】 XDデザインからのコーディング実践演習【複雑なレイアウト】
見出し画像

【初級Ex】 XDデザインからのコーディング実践演習【複雑なレイアウト】

Shogo(しょーごログ運営)

こんにちは、フリーランスのweb制作者として2年ほど活動しているしょーごです。

以前【初級】XDデザインからのコーディング練習【HTML/CSS】(模範解答付き)というnoteを出しました。

こちらのnoteは「初めてデザインカンプからコーディングをして頂く方向けのレベル感」を意識して作成しました。

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

この動画の12:36より初級Ex編に触れています。

【初級Ex】のレベル感、デザイン

今回の【初級Ex】は、それより少し難し目にして、

・HTML.CSSのみでコーディングできるが、少し難し目のレイアウト
・ポートフォリオとして出せるレベル感、デザイン

のものを作成しました。

こんなデザインです↓

初級編Ex

サイト内画像はunsplashのものを使用しています。

また、コーディングにあたって難しい部分が多いため、仕様書も添付しております。

スクリーンショット 2021-12-07 18.09.45

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

完走された方の感想

スクリーンショット 2022-01-15 17.01.30

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

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

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

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

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

HTML,CSSの総復習に

正直結構難しいです笑

なので対象レベル層を以下のようにしました。

HTML,CSSの「デザインデータからのコーディング」を最低1つ以上こなしている

初級編としてリリースすることに悩みもありましたが、ただこの後の【中級】XDデザインからのコーディング練習【JavaScript導入】では JavaScript(jQuery)も入ってきますし、

jQueryやSassを勉強する前の最後の関門として望んでもらえばと思います。

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

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

(次の課題からはJavaScriptも入ってきます。)

中級編クリアした方にも骨が折れる難易度

初級編Exとはいえ、中級編をクリアされた方もやりごたえを感じると思います。

それは、「ポートフォリオとしても使える教材」を目指したからです。

正直「初級編」は「初めてデザインからのコーディングをされる方向け」にデザインをとことん簡略化させていますので、さすがにポートフォリオにはして頂けません。

ただいつまでもそれでは学習のモチベーションも上がりづらいため、今回はよくある「病院のデザイン」を踏襲し作成しました(結果難易度があがりましたが笑)

コーディング課題のポイント

公開方法

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

今回のコーディング課題は「サーバーにアップロードしてBASIC認証をかけて」提出していただきます。

実務でも「BASIC認証」をかけることはあるので、この機会に慣れておきましょう、(詳しい方法は記事購入後のエリアにて解説

極限まで実務に近づける場合はFTPによるアップロードを試していただくことも可能です。

クリア特典

①表示確認特典
完走したら仕様書したのフォームリンク先よりご連絡ください。添削を行います(2回までとさせていただきます
②ポートフォリオ使用OK

身につく力

・多少複雑なレイアウトにも対応できる力がつく
・サーバーにアップロードする経験
・デザインどおりにコーディングする力(表示確認があるため)

この教材作成の思い

画像16

画像17

画像18

表示確認特典の価値

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

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

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

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

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

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

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

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

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

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

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

コーディング教材_学習の流れバナー

また、完走された方のサイトを許可を得て公開しておりますので、実装時の参考にしてみてください。

初級Exのレビュー例

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

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

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

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

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

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

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

納期設定

実案件には納期が存在します。「もしこれが実案件だったら、これぐらいの期間でアップロードまでできるといい」という期間を設定しています。実案件のリアル感を味わいたい方は、ぜひ!!

よくある質問

Q1:表示確認2回でクリアできなくてもポートフォリオとして活用可能でしょうか?
A1:可能です。その場合はセルフチェックで各自の判断で公開お願いします。
*表示確認は初級Ex以降の特典です。
Q2 :表示確認はどれぐらいの期間で返ってくるのでしょうか?
A2:通常3日以内です。それ以上経っても返信のない場合はメールが届いていない可能性があるので再送いただければと思います。
Q3;模範回答はありますか?
A3:模範回答はありませんが、完走者の実装例を複数掲載しているので、参考にしていただくことが可能です。
Q4:技術的にわからない部分を質問できますか?
A4:質問はお受けしておりませんm(_ _)m
その代わり完走された方のサイトを掲載しております(初級Exより)
Q5:かなり古いPCを使っていますが、Adobe XDを使えるか心配です。 A5:URLカンプも配布していますので、PCのOS,性能に関わらず学習していただけます。心配でしたら無料の「入門編」も出しておりますので、そちらで試していただけると良いかと思います。

入門編はこちら
Q6:これら一連の教材で案件獲得できるレベルになりますか?
A6:本教材は私が公開しているロードマップに練り込んでいるため、ロードマップ上で活用していただけると各教材がどのレベル感になるのか、イメージが湧きやすいかと思います。
web制作学習
ロードマップはこちら
Q7:公開するサーバーの指定はありますか?
A7:特にないですが、おすすめはあります。「サーバー契約→サイト公開」まで解説した記事リンクを置いているので、手順通りに進めれば決して難しくありません。

先輩からのメッセージ

すでに課題をこなされた方からの激励のメッセージを用意しております。

初級Exから上級までこなして実案件までされた方のメッセージも参考になるかと思います。


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

コーディング教材セット表

この続きをみるには

この続き: 4,194文字 / 画像9枚

単体で初級編・初級編Exを購入するより、200円お得な値段にしております!

XDデザインデータからのコーディングを経験するためのデザインデータを初級初級編Exとまとめています。 初級編Exはいい感じの難易度になりま…

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

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

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

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

*・゜゚・*:.。..。.:*・'(*゚▽゚*)'・*:.。. .。
Shogo(しょーごログ運営)
山形出身新大卒のフリーランスエンジニア兼YouTuber兼ブロガー。元銀行員。 メディア運営(ブログ6万pv超,YouTube1万人超,note1.5万pv) 「それが知りたかった!」を届けるメディアしょーごログ運営→https://shogo-log.com