【入門】デザインカンプからのコーディング練習【無料です】
FigmaとXDの両方を練習できるようになりました！
こんにちは、しょーごです。フリーランスのWeb制作者として活動を初めて5年目になります。
以前「初級編」をリリースしたのですが、
「難しくて早くも挫折しそうです...」といった声が聞こえてきました
学習ロードマップで最初の「デザインカンプからのコーディング教材」として指定しているものです。
そこで今回「完全無料」にて「入門編」を配布しようと思います。どなたでも練習頂けます。
ちなみにデザインはこんな感じです↓
2021.04.07 画像と配色をリニューアルしました！
2021.04.08 XDの使い方記事追加
2021.10 検証ツールの使い方記事追加
2022.01.07 セルフチェックの仕方を追記
2022.01.19 コーディング課題の解説動画公開！
2023.03.23 Figmaデザイン追加
「これから初級編始めようと思ったけど、自身がなかった」
「初級編難しくてなかなか進まない」
そんな方は、まず「入門編」をこなしていただくといいかなと思います。
【動画でも入門編を解説しています】
この動画の10:18より入門編に触れています。
完走者の声
参考になるツイートを一部まとめておきました。
初めてデザインからコーディングされる方は苦戦するかと思いますが、人により完走の時間は異なるのがわかるかと思います
自分のペースでじっくり進めていきましょう！
【Web制作学習9日目】
— mitsunori@Web制作 (@m_gane_big) January 15, 2023
アウトプット不足と感じ、暫く1〜2週間程デザインカンプ挑戦します👍しょーごさんのXDデザイン入門編に挑戦し、3時間かけて無事完走💦
IN 2割：OUT 8割の感覚で「これ何で動かんのじゃー😭」と適度な負荷をかけて自己成長促します☝️https://t.co/dQoQLb21Ip pic.twitter.com/u1eIY14vDI
デザインカンプ配布
『Figma』『URLカンプ』『XDファイル』を用意していますが、基本的にFigmaが一番おすすめです。
①Figmaカンプ
②URLカンプ
URL
https://xd.adobe.com/view/094f939d-2c32-43c4-7fe9-5a4fe1b10630-7f7e/
パスワード
shogoLog141
③XDファイル
まずはVSCodeの環境を整えよう
使用するフォントはこちら
デザインではArialを使用していますが、保険のために、近い見た目の「Helvetica Neue」なども置いています。
font-family: Arial, "Helvetica Neue",
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;注意
「技術的な質問回答」には対応しておりませんm(_ _)m
「XD、Figmaからのコーディング方法がわからないです」
「画像はどうやって抜き出せばいいんですか？」
などの質問をいただくことがありますが、各自ググっていただくことになります。そこだけご了承ください。
Figmaからのコーディング方法
XDからのコーディング方法
推定レベル
基本的に上記本での基礎学習が終わった方がデザインからのコーディングをされることを想定しております。
パーフェクトピクセルについて
line-heightの関係でずれるのは許容範囲です。
実際に解決は不可能なことが多いです。
ただし、余白やフォントサイズが明らかに違うのはNGなので、セルフチェックの際はそこを気をつけてください。
下に行くほどどうしてもずれてくるので、ファーストビューをあわせる意識があればいいかなと思います。
検証ツールの使い方
以下で復習しておきましょう。
また、フォントの確認も怠らないように
解答はなし
注意点として、解答コードは準備しておりません。ただ、難しいという声もみかけたので、春ぐらいまでに解説ライブコーディング動画をYouTube「しょーごログ」で出そうと思います。
少々お待ちを。
セルフチェックのヒント
私が表示を確認するのは初級Ex以降ですが、甘いものは容赦なく再提出をさせています。
例えばこの入門編でどういった場所に気をつければいいかを解説してみます。
インナー要素を確認せよ
まずインナー要素を確認してください。
大画面時にもコンテンツが中央に寄っているか、コンテンツがタブレット付近でも画面端についてしまっていないか、確認します。
ボタンの影
ボタンの影を忘れる人が中級では多いです。今のうちから見落とさないようにしておきましょう。
フォント周りの確認
font-family、font-weight、letter-spacing、line-height、そしてcolor。
これらの指摘を受ける人がたくさんいます。フォント周りを適当にしているとつけがきますので、繊細になっておきましょう。
模写コーディングではないです
詳しくは以下の記事に書きました。
模写ではなく、デザインカンプからのコーディングを経験するべきだというのが私の考えです。
コーディング教材を無料で配る理由
色々なところで言っていますが、初学者が挫折する一番の理由は「適度な難易度の課題」に取り組めていないことかなと思います。
ただ、簡単すぎても効果が薄いです。
その上で「初級編」では「多少難しく手応えがあるが、完走できるギリギリのレベル感」に調整したのですが、
取り組む人のレベル感は千差万別なため、「挫折しそう」というご意見を貰ったのだと思います。
まずデザインカンプからのコーディングを体験してほしい
デザインからのコーディングが一番大切です。
ときに「かなり古いWindowsですが、XD動きますか？」とコメントいただくことがありますが、URLカンプなのでインターネットとChromeがあれば問題なくコーディングできるはずです。
それでも一回試してみたいという方向けに出しているという側面もあります。
入門編の後に初級編
入門編はこの点を踏まえ、少し難易度を落としました。
これによってスムーズに初級編の課題をこなせると思いますが、入門編では使わないが「初級編」では必要な技術がいくつかありますため、
完走後はぜひ「初級編」も完走して頂きたいと思います。
入門編以降にやることまとめ
初級Ex以降は表示確認特典付き
コーディング課題はnoteとブログの二種類
現在はコーディング課題はnoteとブログの二箇所で販売しています。それぞれ以下の特徴があります。
基本的にはブログでまとめセットを購入していただくのが最もメリットが多くなります。
マガジンで購入が最もお得
新しいものは基本「全部盛りマガジン」に追加していくのと、バラで買うより25%お得なので、
「全部盛りマガジン」で今まとめて購入頂くほうがお得になります！
実務&就職転職で必要なポートフォリオがこれ一つですべて揃います
教材の詳細解説と、開発の思いを記事にしていますので、ぜひ見て納得された方は、ご購入ご検討いただければと思います🙇♂️
今後も後続の方々に役立つ教材を出していこうと思いますので、よろしくお願いします😆
初級編以降をこなされた方の、学習中の皆様へのメッセージ・アドバイス
挫折そうな時に見てみて下さい。
気軽にクリエイターの支援と、記事のオススメができます！
過去の自分が知りたかった、欲していたものを発信する、その信念で活動しています。たくさん遠回りもしてきました。そんな過去の自分を助けにいく。 もしよろしければ応援頂けますと幸いです！↓