【入門】XDデザインカンプからのコーディング練習【無料です】
見出し画像

【入門】XDデザインカンプからのコーディング練習【無料です】

Shogo(しょーごログ運営)

こんにちは、しょーごです。フリーランスのWeb制作者として活動を初めて3年目になります。

以前「初級編」をリリースしたのですが、

「難しくて早くも挫折しそうです...」といった声が聞こえてきました

学習ロードマップで最初の「デザインカンプからのコーディング教材」として指定しているものです。

そこで今回「完全無料」にて「入門編」を配布しようと思います。どなたでも練習頂けます。

ちなみにデザインはこんな感じです↓

入門編

2021.04.07 画像と配色をリニューアルしました!
画像はunsplashのものを使用しています。
2021.04.08 XDの使い方記事追加
2021.10 検証ツールの使い方記事追加
2022.01.07 セルフチェックの仕方を追記
2022.01.19 コーディング課題の解説動画公開!
「これから初級編始めようと思ったけど、自身がなかった」
「初級編難しくてなかなか進まない」

そんな方は、まず「入門編」をこなしていただくといいかなと思います。

【動画でも入門編を解説しています】

この動画の10:18より入門編に触れています。

完走者の声

スクリーンショット 2021-11-21 16.38.31

スクリーンショット 2021-11-21 16.38.47

スクリーンショット 2021-11-21 16.38.18

スクリーンショット 2021-11-21 16.38.40

スクリーンショット 2021-11-21 16.38.56

スクリーンショット 2021-11-21 16.39.05

スクリーンショット 2021-11-21 16.39.14

デザインカンプ配布

URLカンプ』か『XDファイル』か、どちらかお好きな方をお使いください。

①URLカンプ

URL
https://xd.adobe.com/view/094f939d-2c32-43c4-7fe9-5a4fe1b10630-7f7e/
パスワード
shogoLog141

②XDファイル

まずはVSCodeの環境を整えよう

注意

「技術的な質問回答」には対応しておりませんm(_ _)m

「XDからのコーディング方法がわからないです」
「画像はどうやって抜き出せばいいんですか?」

などの質問をいただくことがありますが、各自ググっていただくことになります。そこだけご了承ください。

XDの使い方の記事出しました!

推定レベル

基本的に上記本での基礎学習が終わった方がデザインからのコーディングをされることを想定しております。

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

line-heightの関係でずれるのは許容範囲です。

実際に解決は不可能なことが多いです。

ただし、余白やフォントサイズが明らかに違うのはNGなので、セルフチェックの際はそこを気をつけてください。

下に行くほどどうしてもずれてくるので、ファーストビューをあわせる意識があればいいかなと思います。

検証ツールの使い方

以下で復習しておきましょう。

また、フォントの確認も怠らないように

解答はなし

注意点として、解答コードは準備しておりません。ただ、難しいという声もみかけたので、春ぐらいまでに解説ライブコーディング動画をYouTube「しょーごログ」で出そうと思います。

少々お待ちを。

セルフチェックのヒント

セルフチェックはこちらからバナー

私が表示を確認するのは初級Ex以降ですが、甘いものは容赦なく再提出をさせています。

例えばこの入門編でどういった場所に気をつければいいかを解説してみます。

インナー要素を確認せよ

スクリーンショット 2022-01-07 15.06.07

まずインナー要素を確認してください。

大画面時にもコンテンツが中央に寄っているか、コンテンツがタブレット付近でも画面端についてしまっていないか、確認します。

ボタンの影

ボタンの影を忘れる人が中級では多いです。今のうちから見落とさないようにしておきましょう。

スクリーンショット 2022-01-07 15.10.53

フォント周りの確認

スクリーンショット 2022-01-07 15.12.03

font-family、font-weight、letter-spacing、line-height、そしてcolor。

これらの指摘を受ける人がたくさんいます。フォント周りを適当にしているとつけがきますので、繊細になっておきましょう。

模写コーディングではないです

詳しくは以下の記事に書きました。

模写ではなく、デザインカンプからのコーディングを経験するべきだというのが私の考えです。

コーディング教材を無料で配る理由

画像4

色々なところで言っていますが、初学者が挫折する一番の理由は「適度な難易度の課題」に取り組めていないことかなと思います。

ただ、簡単すぎても効果が薄いです。

その上で「初級編」では「多少難しく手応えがあるが、完走できるギリギリのレベル感」に調整したのですが、

取り組む人のレベル感は千差万別なため、「挫折しそう」というご意見を貰ったのだと思います。

まずXDからのコーディングを体験してほしい

デザインからのコーディングが一番大切です。

ときに「かなり古いWindowsですが、XD動きますか?」とコメントいただくことがありますが、URLカンプなのでインターネットとChromeがあれば問題なくコーディングできるはずです。

それでも一回試してみたいという方向けに出しているという側面もあります。

入門編の後に初級編

入門編はこの点を踏まえ、少し難易度を落としました。

これによってスムーズに初級編の課題をこなせると思いますが、入門編では使わないが「初級編」では必要な技術がいくつかありますため、

完走後はぜひ「初級編」も完走して頂きたいと思います。

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

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

入門編以降にやることまとめ

初級Ex以降は表示確認特典付き

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

マガジンで購入が最もお得

新しいものは基本「全部盛りマガジン」に追加していくのと、バラで買うより2500円以上お得なので、

全部盛りマガジン」で今まとめて購入頂くほうがお得になります!

実務&就職転職で必要なポートフォリオがこれ一つですべて揃います(新規教材追加あり)

中級以上マガジン_12_23

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

教材の詳細解説と、開発の思いを記事にしていますので、ぜひ見て納得された方は、ご購入ご検討いただければと思います🙇‍♂️

今後も後続の方々に役立つ教材を出していこうと思いますので、よろしくお願いします😆

初級編以降をこなされた方の、学習中の皆様へのメッセージ・アドバイス

挫折そうな時に見てみて下さい。

スクリーンショット 2021-11-17 14.37.52










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

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

スキありがとうございます!ヾ(๑╹◡╹)ノ"
Shogo(しょーごログ運営)
山形出身新大卒のフリーランスエンジニア兼YouTuber兼ブロガー。元銀行員。 メディア運営(ブログ6万pv超,YouTube1万人超,note1.5万pv) 「それが知りたかった!」を届けるメディアしょーごログ運営→https://shogo-log.com