【無料】Figmaのデザインカンプからコーディングに取り組んでみよう

• Progateで勉強してみたけど、そこから何を勉強すればいいかわからない…。
• Figmaのデザインカンプからコーディングするイメージが湧かない…。
• サイトのコーディングの量をとにかくこなしたい…。

コーディングの勉強やデザインカンプからコーディングしている方向けに、Figmaのカンプからコーディングできるコーディング課題をつくってみました。

コーディングの練習・勉強に必要な

• Figmaのデザインカンプ
• デモサイト
• ソースコードの一例

すべて準備しています。

ぜひ、コーディングの練習・学習にお役立ててみてください。

　

せっかくなのでTwitterでコーディング課題に取り組むのを宣言してみましょう！

コーディング課題01：HTMLの構造理解

まずは、実務ではやることがないですがワイヤーフレームをコーディングしてみて、HTMLの構造やCSSで骨組みを組み立てるイメージをつけてみましょう。

【無料】（コーディング課題01）ワイヤーフレームをコーディングしよう

制作するサイトの情報まずはHTML/CSSの一歩目としてほぼワイヤーフレームの状態のものをコーディングしてみましょう。実際にワイヤーフレームをコーディングすることはありませんが、WEBサイトの骨組みをつくるという発想ではいい勉強になるかと思...

traveler20.com

2022.04.30

　

コーディング課題02：CSSの実装理解

コーディング課題01でつくったワイヤーフレームをもとにニュースアプリのLPをコーディングしてみましょう。

【無料】（コーディング課題02）ニュースアプリのLPをコーディングしよう

制作するサイトの情報コーディング課題01でコーディングしたワイヤーフレームをもとにニュースアプリのランディングページをコーディングしてみましょう。骨組みのイメージはつかめているかと思うので、それをベースに作成していきましょう。デザインカンプ...

traveler20.com

2022.04.30

　

コーディング課題03：量をこなす

コーディングの量をこなすべく、うどん屋のペライチもののサイトをコーディングしてみましょう。

【無料】（コーディング課題03）うどん屋のサイトをコーディングしよう

制作するサイトの情報コーディング課題02でニュースアプリでコーディングのイメージが何となくわかってきたら、量をこなすということでうどん屋の１枚もののホームページをつくってみましょう。構造となる骨組みの部分はほとんど今までのコーディング課題と...

traveler20.com

2022.04.30

　

コーディング課題04：バリエーションを増やす

コーディング課題03までは白や灰色ベースでしたが、今回は青色ベースのランディングページになります。バリエーションを増やすためにもぜひ取り組んでみてください。

【無料】（コーディング課題04）コンサルタントのLPをコーディングしよう

制作するサイトの情報コーディング課題02やコーディング課題03でコーディングした勢いで引き続きコーディングを実装してきましょう。引き続き問い合わせ機能自体はダミーで大丈夫です。デザインカンプ（Figma）デザインカンプをもとにコーディングし...

traveler20.com

2022.04.30

　

コーディング課題05：コーディングに慣れる

簡単なコーポレートサイトをコーディングしてみましょう。

背景画像固定やネガティブマージンなども使ってCSSに慣れていきましょう。ちなみにJavaScriptやjQueryは不要です。

【無料】（コーディング課題05）会社のホームページをコーディングしよう

制作するサイトの情報白を基調としたコーポレートサイトのコーディングをしてみましょう。今回もJavaScriptやjQuery不要でコーディングできます。デザインカンプ（Figma）デザインカンプをもとにコーディングしていきましょう。カンプは...

traveler20.com

2022.04.30

　

最後に

コーディングが一通り終わったらこちらで学習完了報告をしてみましょう。

質問はぜひブログのコメント機能からお気軽に質問してくださいー。
それでは。