デザインカンプからのコーディング まとめ

【解説付き】Web制作のデザインカンプからのコーディング:まとめ

過去に解説した、Web制作のデザインカンプからのコーディング記事をまとめています。

多くのサイトは、デザインカンプを配布するだけですが、それだとわかりにくいかなと思い、解説もつけました。

なので、以下のような悩みを持っていましたら、お役に立てるかなと思います。

  • 配布するだけじゃなくて解説もしてほしい!
  • すごく簡単なところから始めたい

それでは、見ていきましょう。

デザインカンプからのコーディングまとめ

現在、超入門しかありませんが、随時更新予定です。

デザインカンプからのコーディング:超入門

超入門のデザインカンプからのコーディング

HTML&CSS初心者向けのデザインカンプからのコーディングの解説記事です。

トップページの一部分のみのデザインをコーディングしていきます。

[st-mybutton class=”” url=”https://orca-blog.com/coding-from-desi…per-introduction/” title=”この記事を見る” rel=”” fontawesome=”” target=”デザインカンプからのコーディング超入門の記事” color=”#fff” bgcolor=”#1abc9c” bgcolor_top=”” bordercolor=”#fff” borderwidth=”5″ borderradius=”30″ fontsize=”” fontweight=”bold” width=”” fontawesome_after=”” shadow=”” ref=”” beacon=””]

使うデザインツールについて

デザインカンプは、Figmaというデザインツールで作られています。

コーディングする時に使うFigmaの機能に関しては、動画で説明しています。

もっとFigmaについて詳しく知りたい方は、こちらの動画を見てください。

[youtube id=HdtTh7NcEVs]

Web制作を学び始めた方は、どのデザインツールを使えばいいのか、迷うかと思います。

個人的に、企業によって使っているデザインツールは変わるので、自分のクライアントによって決めるのがいいと思います。

ぶっちゃけ、コーディングする時に使うだけなら、どのデザインツールも似通っています。

コーディングをする際の注意点

記事では、コーディングの解説も載せていますが、いきなり解説を見るのはお勧めしません。

理由は簡単で、それだと成長できないからです。

コーディングスキルを磨きたいなら、まずは自分でやってみるのが大事です。

なので、まずは自分でやってみて、その後に解説を見るようにしてください。

まとめ

この記事がWeb制作を学ぶ方に少しでも役に立てたなら幸いです。

Twitterもやってますので、フォローしていただけたら嬉しいです。

Scroll to Top