こんにちは、キリンです。当ブログにお越しいただきありがとうございます。
実はキリン、子どもの成長に負けじと自分も学習とスキルアップをしたいと考え、Web制作を学んでいます。都の成長産業分野キャリア形成支援事業を利用しているのですが、そちらの紹介はおいおいさせていただくとして…。（受講までステップがいくつかあります）
Webプログラマー科のカリキュラムを受講中のキリン、現在HTML/CSSを利用してシンプルなホームページを制作できるようになってきました。
しかし、実務レベルにはスピード・知識・経験、すべてが足りない状況。若くはないため採用担当者を納得させられるようなポートフォリオが必要です。更なる技術の習得と経験を積むため、デザインカンプの配布サイトを集めました。私と同じようなWeb制作初学者の方の参考になれば幸いです。
なぜ、デザインカンプからのコーディング練習が必要なのか？
基本中のキホン
Webサイト制作では、デザインカンプからのコーディングは必須の工程です。デザイナーさんのデザインを如何に正確に実装するかがコーダーの腕の見せ所です。もし自分がデザイナーだったら、デザインした通りに実装してくれるコーダーさんとは長く付き合いたいと思いませんか？能力の高さの証明になると同時に、信頼も得られるかと思います。
実務に近い経験を得られる
実務ではただコードを書くだけではなく、デザインカンプから必要な数値を読み取ったり、素材の書き出しなどの作業も発生します。スクールでは既に加工済みの画像や動画のデータが用意されていることが多いですが、実務ではデザインカンプから要素を取り出す能力も必要です。デザインカンプからのコーディング練習を通して、実務でも活きるコーディング以外の能力を鍛えられます。
ポートフォリオを充実させられる
未経験からWeb制作業界への転職を目指すにあたって、ポートフォリオの作成は必要不可欠です。いたずらに量を載せればいいといいものではなく、採用担当者の目に留まるような質の高いポートフォリオが理想的です。
ありがたいことに、ポートフォリオへの掲載を認めてくださっている配布サイトも多くあります。様々なサイトに対応できるスキルを身につけ、ポートフォリオの掲載内容にバリエーションを持たせることができます。
ポートフォリオ掲載時の注意
サイトのルールはしっかり読む
デザインカンプデータは著作物です。解説コードも然り。サイトによってポートフォリオ掲載時の注意事項もまちまちなので、確認した上で掲載するようにしましょう。
デザインカンプ配布サイト5選
１．Codejump
「デザインカンプ 練習」「コーディング 練習」などで検索すると、1番に出てくるサイトです。入門編は1カラムのプロフィールサイトから始まり、上級編になるとスクロールイベントの実装ありのギャラリーサイトになります。ヒントやソースコードの例があります。
デザイン数とバリエーションが豊富で、このサイトに載っているデザインを全部実現出来たら相当力が付くだろうな…と思います。
https://code-jump.com/
２．【入門】デザインカンプからのコーディング練習【無料です】
こちらは『しょーごログ』を運営されているしょーごさんが作成されたデザインカンプです。無料配布には珍しいFigmaでの配布があります。有料のデザインカンプも配布されていますが、初級編が難しいと感じる学習者のためにこちらの入門編を作成されたそう。YouTubeでコーディング動画が公開されている点も嬉しいです。
しょーごさんが記事内で紹介されている初学者向けの本を読んだことがあるので、読んだ内容が身についているかの確認によさそうです。
https://note.com/samuraibrass/n/n793ab571a88e
３．合同会社PENGIN / PENGIN LLC.
初級～上級まで、コーディング動画が用意されています。これで無料とは…と発見したときは驚きました。まずは動画を見ながら少しずつ答え合わせをして進めていく事も可能です。記事の最後にポートフォリオ掲載時のBasic認証についての解説リンクもあり、公開する上で気を付けるべきポイントも学べます。
https://pengi-n.co.jp/blog/coding-distribution/
４．模写修行
無料・有料のデザインカンプを配布しているサイトです。メンター制度の用意もあり、利用すればコーディングだけでなく転職の相談などもできます。自分のコードの添削や学習ロードマップの相談をしたいときに利用するといいかもしれません！
https://moshashugyo.com/
5.未経験からWebデザイナーへ！
まだ学習を開始していない方も利用できるサイトです。準備編ではProgateやドットインストールを利用した基礎スキルの習得やエディタの設定から学べます。入口のハードルは低めですが内容は濃く、Sassを利用したコーディングやパララックス付きのサイトの練習もできます。
https://webdesigner-go.com/coding-practice/
まとめ
最後まで読んでいただき、ありがとうございます。改めてまとめてみると、どのサイトも質と量、サポート体制の用意などがありWeb制作の先輩方の懐の深さにびっくりです。
HTML/CSSの学習を一通り終えたら、ポートフォリオ充実に向けて挑戦させていただきたいと思います。同じようにWeb制作を学び始めたばかりの方、子育てしながら勉強している方、一緒に頑張りましょう！
コメント