見出し画像

【初級】XDデザインからのコーディング練習【HTML/CSS】(模範解答付き)

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

Web制作ロードマップ」で紹介しているのですが、Progateを終えたあとはまずは下記の参考書を完走してもらえば、

HTML,CSSの基礎は身につくと思っておすすめしております。

その上で参考書を終えたら、今度は自分の力でデザインカンプから一からコーディングしていく練習を積む必要があります。

今回そのニーズに最適化させた、デザインカンプからのコーディングとして最初に挑むのにぴったりのレベル感のものを作成させていただきました。

XDデザインデータからのコーディングになります(XD持ってなくても利用できるurlカンプで配布させていただきますので、準備していただく必要はございません)

模写コーディング_初級編

完走者の感想

本教材は「教科書」というより、「問題集」みたいな感じなので、デイトラと平行してされるのもいいかなと思います。

基本的なヘッダー

スクリーンショット 2020-06-19 10.25.41

ヘッダーにおいては、ロゴが左上にあり、ナビゲーションが右上にあるという基本的なサイトを踏襲しています。

メインビジュアルに関しては、「要素の上下中央配置」という、基礎中の基礎だけどめちゃくちゃ大事な配置方法を復習することができます。

ブログカード一覧

スクリーンショット 2020-06-19 10.25.58

よくあるブログカードについては、flex-boxの練習をできます。
またこのコンポーネントにおいては「サムネイル画像の高さ一致」「カードの間の余白」「レスポンシブの挙動」など、考えることが意外に多いため、

良い勉強になるかと思います。

特に時刻の部分を下揃えにするのは結構苦戦するかもしれません。しかしよくあるパターンでもあるので、ここで克服しましょう。

フッター部分

スクリーンショット 2020-06-19 11.09.10

よくある「背景画像の上に文字やボタンが乗っている」パートになります。
Webサイトの下部のCTAエリアはよくこのような構成になっております。

・XDデザインカンプからのコーディング初練習として
・コーディングのポートフォリオとして記載、アップロードOK
・jQuery,JSでの実装は含まれません(初心者向けのため)
→こちらの教材では含まれます(https://note.com/samuraibrass/n/nd1748e42934e

初級編の位置づけ

・初級←この教材
・初級Ex
・中級
・中級Ex
・上級
・Photoshop編

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

高品質なポートフォリオを複数準備できる

私の一連の演習課題をこなしてく中で、ポートフォリオも準備できていく仕組みにしています。

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

教材作成の思い

画像11

画像12

画像13

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

とにかく最初の一歩が肝心です。
初めて挑戦したけど自分でもできた!!」という感覚が、その後の成長を左右します。

逆に「こんなに頑張っても全然できない...(>人<;)」という間違ったレベル感のものに挑んでしまうと、勉強のモチベーションも上がりません。

今回は教材作成に当たって、その辺りを考慮し課題のレベル調整を行いました。

最初の一歩が踏み出せずにいる方に、ぜひ挑戦していただきたいです!!

表示確認はないが

この初級編のみ、表示確認がありません。
その代わりに模範解答をつけましたので、詰まった際はご参照ください!

コーディング教材比較表2021_07

模写ではありません

本教材は「模写コーディング」ではなく「デザインカンプからのコーディング」になります。

詳しくは以下の記事に書きましたが、この一連の教材は「模写よりも実践的な教材」と捉えていただいて差し支えありません!

実装要件

・コードの綺麗さよりデザイン再現度の気にする(余白までなるべく再現)
・レスポンシブでスマホ、タブレット、pcで表示が自然になるようにする(ハンバーガーメニューなどJSが必要なものは実装不要です)
カンプはPC版のみですが、スマホのレイアウト例をつけていますので、参考にできます。

パーフェクトピクセルについて

デザインの都合上、line-heightが原因で数pxずれてしまうなどは許容範囲です!問題となるのは余白などで10,20pxもずれてしまい、明らかにデザインから逸脱していることになるので、どうしても1,2pxずれてしまう場合は、先に進んでOKです。
まずはファーストビューを合わせることを意識しましょう!

レスポンシブについて

スマホカンプは用意しておりませんので、それぞれでおこなっていただく形となります。サンプルの完成イメージを添付しておきます。

サーバーアップロード&表示確認は次回「初級Ex」から

初級では「模範解答」をつけて、セルフ確認できるようにしております。

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

よくある質問

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

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

先輩からのメッセージ

挫折しそうな時に、見てみて下さい。コーディング演習課題をこなされた先輩方からのメッセージ・アドバイスを掲載しています。

初級から始めて実務経験まですでにこなされた方のアドバイスも頂いております。

スクリーンショット 2021-07-15 22.16.42

初級から学習なら『全部盛り』が圧倒的におすすめ!

画像18

コーディング教材全部盛り』での購入がかなりお得です。

買い切り型なので、追加予定の教材も順次ここに追加されていきます。

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

この続きをみるには

この続き: 3,326文字 / 画像3枚
この記事が含まれているマガジンを購入する
単体で初級編・初級編Exを購入するより、200円お得な値段にしております!

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

このマガジンでお買い求めいただきますと、 2680円お得で、新規教材も追加されます。 これから学習を始められる方には一番オトクとなっております。 教材詳細はこちら→https://shogo-log.com/coding-study/

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

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

【初級】XDデザインからのコーディング練習【HTML/CSS】(模範解答付き)

Shogo(しょーごログ運営)

500円

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

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

スキありがとうございます\(^o^)/(by結月ゆかり)
新大卒、山形在住のWeb系フリーランス兼YouTuber兼ブロガー。 メディア運営(ブログ5万pv超,YouTube1万人超,note1.5万pv) 「それが知りたかった!」を届けるメディアしょーごログ運営→https://shogo-log.com