過去に解説した、Web制作のデザインカンプからのコーディング記事をまとめています。
多くのサイトは、デザインカンプを配布するだけですが、それだとわかりにくいかなと思い、解説もつけました。
なので、以下のような悩みを持っていましたら、お役に立てるかなと思います。
- 配布するだけじゃなくて解説もしてほしい！
- すごく簡単なところから始めたい
それでは、見ていきましょう。
デザインカンプからのコーディングまとめ
現在、超入門しかありませんが、随時更新予定です。
デザインカンプからのコーディング：超入門
HTML&CSS初心者向けのデザインカンプからのコーディングの解説記事です。
トップページの一部分のみのデザインをコーディングしていきます。
使うデザインツールについて
デザインカンプは、Figmaというデザインツールで作られています。
コーディングする時に使うFigmaの機能に関しては、動画で説明しています。
もっとFigmaについて詳しく知りたい方は、こちらの動画を見てください。
Web制作を学び始めた方は、どのデザインツールを使えばいいのか、迷うかと思います。
個人的に、企業によって使っているデザインツールは変わるので、自分のクライアントによって決めるのがいいと思います。
ぶっちゃけ、コーディングする時に使うだけなら、どのデザインツールも似通っています。
コーディングをする際の注意点
記事では、コーディングの解説も載せていますが、いきなり解説を見るのはお勧めしません。
理由は簡単で、それだと成長できないからです。
コーディングスキルを磨きたいなら、まずは自分でやってみるのが大事です。
なので、まずは自分でやってみて、その後に解説を見るようにしてください。
まとめ
この記事がWeb制作を学ぶ方に少しでも役に立てたなら幸いです。
Twitterもやってますので、フォローしていただけたら嬉しいです。