ドットインストールやプロゲートでHTML/CSS,jQueryの学習を一通り終えた後に、Web制作で実務案件レベルまでスキルを磨くなら、デザインデータ通りのコーディングスキルが必要になります。
実務案件レベルのデザインデータをコーディングで再現できるようになることで、案件を受けれるコーディングのレベルまで上がります。
今回は、デザインカンプを配布しているおすすめのサイトを紹介していきます。
(一部有料あり)
また、プロゲートやドットインストールで、Web制作に必要なHTML/CSSやjQueryを学習したあとにやるべきことをまとめた記事については、以下で詳しく解説しています。
参考
デザインデータからのコーディング作業は、プロゲートで学習を終えた段階の人にとっては難しく感じるかと思いますが、実際の案件では、コーディングの答えは教えてくれませんし、分からない答えを自分で見つけなければなりませんので、始めはなるべく答えや解説をみないで、自分でググったり、書籍などを参考にしながらとりあえずひとつやりきった後に、答えや解説をみながら進めていくことをおすすめします。
目次
デザインカンプとは
一般的にWeb制作の現場では、ワイヤーフレーム( サイト全体のレイアウトの設計図のようなもの)を作成後に、そのワイヤーフレームを元に色やテキストや画像を足していったWebサイトの完成イメージを作成します。
この完成イメージのことを「デザインカンプ」といいます。
デザインカンプからコーディングを始める前に
今回紹介しているサイトでは、基本的にAdobeXDを使ってデザインカンプからコーディング作業をしていく流れになります。
実際のコーディング案件でも、XDやPhotoshopなどでデザインデータを使っていくことが多いので、XDとPhotoshopの基本的な使い方は覚えておくのをおすすめします。
デザインカンプ配布サイト
それでは、デザインカンプを配布しているサイトを紹介していきます。
今回紹介するサイトは、無料・有料とありますが、どれも実案件レベルのコーディングスキルを手に入れるために必要なポイントを抑えていて、とても参考になります。
そしてなんと、ポートフォリオとして掲載をしてOKとのことです。
難易度も、簡単なもの〜難しいものまで幅広く用意されていますので、Web制作の案件を取ることを目標にしている人は参考にしてください。
それでは、紹介していきます。
MASA BLOG
「MASA BLOG」さん(@masa_kazu5)のサイトで、デザインカンプを無料で配布されています。
現在配布されているデザインカンプは、第1弾・第2段の2つです。
コーディングの難易度は難しくはありませんので、「MASA BLOG」さんのデザインカンプから始めるのも良いかと思います。
Codestep
「Codestep」さん(@codestep_com)のサイトからです。
入門編〜上級,番外編と,数多くのデザインカンプを無料で配布してくれていますので、自分のスキルに合ったものに挑戦できます。
そして、各カンプ別のポイントと解説やヒント・解答例も付けてくれています。
コーディング練習用のデザイン~お花屋さんのLP編~
ひらともやさん（@hiratomoya）のnoteで、デザインカンプを無料で配布されています。
元々のデザインは、あかねさん(@omsss22)が作ったもので、ひらともやさんがコーディングしやすいようにXDで作り直したものとの事です。
このサイトでは、Adobe XDの使い方や、コーディングのポイントなども詳しく解説してくれています。
【無料配布】コーディング練習用デザインと完成版コーディングデータ
ねこポンさん(@webdesigner_go)のサイト「未経験からWebデザイナーへ!」からのデザインカンプになります。
- コーディング練習用のデザインデータ
- Sassを使ったコーディングデータ
- コーディング例
を無料で配布されています。
Sassを使ったコーディングデータもセットになっていて、無料とは思えないぐらいの内容です。
【無料配布】コーディング練習用デザインと完成版コーディングデータ
クリ★スタ
クリ★スタさん(@pengin_company)で、デザインカンプを無料で配布されています。
コーディング課題は、初級・中級・上級の3つです。
このサイトでは、コーディングのポイントやHTMLの構造からレスポンシブウェブデザインやその他にも様々なコーディングの知識についても学習できます。
プロゲートのHTML/CSS,jQueryを一通り学習してから挑戦するのがおすすめです。
Shogo (しょーごログ運営) | note |
Shogo (しょーごログ運営) さん(@samuraibrass)のnoteで、デザインカンプを配布されています。
無料で配布されている【入門】編や、有料で販売されているコーディング教材まで幅広くあります。
HTML/CSSはもちろん、複雑なレイアウトや、JavaScript,jQuery特訓そして、WordPress実案件レベルまで、実践レベルに特化したコーディングスキルを鍛えることができるので、かなりおすすめです。
無料配布のデザインカンプ
まとめ
今回は以上になります。
プロゲートやドットインストールで、Web制作に必要なHTML/CSSやjQueryを学習したあとにやるべきことをまとめた記事については、以下で詳しく解説しています。
