プログラミング

デザインカンプからのコーディング練習課題!【HTML初心者からWordPress実案件レベルまで】

コーディング課題 XD PSDデザインデータ配布

こんにちは、フリーランスのエンジニアとして3年ほど活動しているしょーごと申します。

今回はHTML初学者からWordPress実務案件レベルまで対応したコーディング教材をリリースしましたので、ご紹介させていただきます。

  • この教材で何ができるようになるのか
  • ほかの教材と何が違うのか

こういった点に絞ってお話をしていこうと思います。

目次
  1. 前提:実務コーディングは99%がデザインカンプから行う
  2. デザインデータからのコーディング手順
  3. デザインからのコーディング課題紹介
  4. 各コーディング課題の紹介
  5. マガジン紹介
  6. 実務レベルを体感してほしい
  7. 一通り課題が終わったら

前提:実務コーディングは99%がデザインカンプから行う

コーディング練習と行っても、世の中には二種類あります。

  1. サイトを検証ツールで見ながら再現していく(これがよく言われる模写というもの)
  2. デザインカンプからコーディングを行う(実務と同じ方法で模写ではない)

この内、「①サイトを検証ツールで見ながら再現していく」は私が独立した当初に流行していた方法でした。

私もこの方法、所謂「模写」で当初学習していましたが、しかしこれは実務とはかけ離れた学習方法でした。

デザインデータからのコーディングができないと仕事にならない

模写コーディング教材

実際にコーディング案件を見てみるとわかりますが、

クラウドソーシング「ランサーズ」

ランサーズ 案件
ランサーズ 案件

大半がデザインデータからのコーディングです。

制作会社も開発会社もどこも全部そうです。

Q:デザインデータ、デザインカンプとは?
A:PhotoshopやIllustrator、XDなどのデザインツールで作られたもの

私も周りも当時誰も、それがスタンダードだと知らなかったので、阿鼻叫喚だったのを覚えています笑

だから、将来は限りなく実務に近い形で学習できる教材を作ってあげたいと、当時から思っていたのでした。

デザインデータからのコーディング手順

  1. デザインデータから画像や素材を書き出す
  2. 余白やフォントサイズ、フォントの種類、色、影、line-height,letter-spacingまで確認する
  3. 仕様書に挙動やコーディングガイドラインなどの記述があるので、それに沿ってコーディングする

こんな感じだと思います。これをいきなり実務でやるのは怖いですよね^^;

なので、この一連の演習課題でたくさんトライアンドエラーをしてもらえたらと思います。

XDの操作方法は記事内で案内しています。

しょーご
しょーご
今の自分が駆け出し期の自分に与えたい理想の課題を目指しました

デザインからのコーディング課題紹介

課題は「初級からPhotoshop編」まで複数リリースしております。

コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
コーディング練習 デザインカンプ
初級編イメージ
初級Exイメージ
中級イメージ
中級Exイメージ
上級イメージ
Photoshop編イメージ
previous arrow
next arrow
 

初級初級Ex中級中級Ex上級Photoshop
(スマホカンプ付き)
HTML.CSS難易度★☆☆☆☆★★☆☆☆★★★☆☆★★★★☆★★★☆☆★★★★★
JS.jQuery難易度なしなし★☆☆★★☆★★☆★★☆
WordPress対応なしなしなしなしありなし
ページ数111471
料金¥500¥1,280¥1,580¥1,980¥2,980¥2,480
表示確認特典なしありありありありあり
デザインカンプからのコーディング課題 模写コーディング課題
デザインからのコーディング課題

マガジンがお得!

基本的にマガジンとしてまとめ買いしてもらったほうがお得になるようにしております。

マガジンというのは『まとめて購入する』ということになります。バラで買うよりも価格的に最も優位になるようにしております。

マガジン購入お得
デザインカンプからのコーディング課題
全部盛りの例(https://note.com/samuraibrass/m/mad296098d928)

各教材がどれぐらいのレベル感のときに取り組めばいいのかは、以下の独学ロードマップの記事を参照いただければわかりやすいかと思います(このロードマップに本教材は全部組み込まれております)

しょーご
しょーご
このあと解説しますが、おすすめはダントツ「全部盛りセット」になります

このコーディング演習課題作成の思い

デザインカンプからのコーディング教材
デザインカンプからのコーディング教材
デザインカンプからのコーディング教材

この教材は「教科書」というより、「問題集」になります。自分のコーディング力を高めるための演習教材としてご活用ください。

高品質なポートフォリオを準備できる

課題をこなしていく中で、高品質なポートフォリオを複数準備することができます。

Web制作 ポートフォリオ

表示確認特典の価値

大事なことなので、教材説明の前に述べさせてください。

私の教材では初級編など一部を覗き、基本的にすべて「表示確認特典」をつけています。

これには明確な理由があります。

ポートフォリオ表示崩れ多すぎ問題

私と同時期にフリーランスになった方々の多くはディレクターになったか、デザイン・コーディングチームを率いているか、マーケターになるか、

はたまた起業するなどして、各々コーダーへの「発注者」に回ることも多いわけですが、

最近駆け出しの方から営業メールが来る機会が増えているようです。

その中で多く聞くのが「ポートフォリオがひと目見てずれてるのが大半」という言葉です。

確かにその傾向はある気がする一方、勉強を始められたばかりの方々には自分では気づきにくいのも事実。

そこでこの教材に「表示確認特典もつけちゃおう!」ということで、お値段そのままに「表示確認特典」をつけているのです。

コーディングの流れ

セルフチェック習慣の育成

コーディング チェック項目

実案件では提出前に『セルフチェック』を行うのが常識です。

この教材では『予めチェック項目を指定している』ので、セルフチェックの練習をすることができます。

実案件前に習慣づけておきましょう。

すでに課題をこなした方からのメッセージ・アドバイス

これからコーディング課題での学習を始められる方に向けてメッセージやアドバイスを頂いております。

ぜひみなさんの「少し先」を行く先輩方の言葉に目を通してみて下さい。

課題終了後実案件をこなされた方」のメッセージもかなり参考になるかと思います。

各コーディング課題の紹介

【入門】XDデザインからのコーディング練習【無料です】

Adobe XDデザインからコーディングする方法 【XDデータとURLカンプ2種類】
初学者さん

初級編でもちょっとむずかしいかも…

といったお声を拝見しましたので、無料にて「入門編」をリリースしました。
初級編より少し優しくしています。

無料ですが、XDデザインからのコーディングなので、実務と工程はほとんど同じです。

【初級】XDデザインからのコーディング練習【HTML/CSS】(模範解答付き)

コーディング教材

コーディングを始めたばかりの方にむけて出しているnoteになります。

こだわりと特徴

初学者の頃はわからないことだらけで、挫折する確率が最も高いレイヤーになります。
この教材ではとにかく
「私にもできそう!」を経験してもらうために優しく作っており、模範解答もつけております。

【初級Ex】 XDデザインからのコーディング練習【複雑なレイアウト】

コーディング教材
こだわりポイント

初級編より難しく、HTML,CSSだけでも「ポートフォリオ」として使っていただけるようなレベル感のものを作成しました。結構難しいですが、その分鍛えられます。

コーディング教材

【中級】XDデザインからのコーディング練習【JavaScript導入】

コーディング教材

ある程度HTML.CSSに習熟した方が、次のステップとしてJavaScriptのライブラリや、jQueryを練習できるように作成した教材になります。

こだわりと特徴

ポートフォリオとしても活用いただけるレベル感を目指したため、初級編と比べても難しめにしております。
その分「完走後に表示確認特典」をつけており、実案件レベルで細かくチェックしますので、ここで鍛えられます。

模写コーディング教材

中級編の教材は無料でライブコーディング動画も出しておりますので、ぜひ見てみてください。

しょーご
しょーご
ちなみに中級編は「めちゃ鍛えられました!」とよく言われます笑

【中級Ex】 XDデザインからのコーディング練習【HTML,CSS,JS実案件レベル】

コーディング教材

HTML,CSS,JSを駆使し、和風な温泉旅館サイトを構築していきます。

こだわりと特徴

とにかく「HTML,CSS,JSの実案件ってこんな感じだよな」となるものを作ったので、こちらを完走された方は、即HTML,CSS,JSの実案件に挑戦することができます。
それぐらいの難易度感ですが、やりきった自分への大きな自信もつけることができます。

【上級】XDデザインからのコーディング演習【WordPress実案件レベル】

コーディング教材

私がおすすめしている完全独学ロードマップに含めている「WordPressレッスンブック」を完走したぐらいから取り組めるもので、実案件レベルの難易度になります。

こだわりと特徴

とにかく発注者視点から評価されるポートフォリオを目指して全力で作成しました。
題材と構成は、評価されやすいコーポレート型にし、実装仕様書もつけて、10~20万のWordPress実案件レベルのものを作成しました。
これで実際の案件のレベル感を体感して頂けたらと思います。
また、営業する際の機能アピールポイントもつけてますので、自信満々にポートフォリオとして活用いただけたらと思います。

模写コーディングWordPress
コーディング教材

しょーご
しょーご
ダミーデータ入れさせたりプラグイン複数使用したり、自分の実務経験から来ています。

【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

web制作に特化した「JavaScript,jQuery教材」を作成しました。

こだわりと特徴

とにかく「Web制作ですぐ役立つJS力をつける」ことを目標にしています。JSって何をどう勉強して使えばいいのか分かりづらいと思いますが、本教材では「web制作実案件でよくある実装」を体験することができます。
また、解答コードを準備しているため、そのまま実案件でもコードをお使いいただくことができます。
web制作でのJSに慣れていただけたらと思います。

実際に作るもの一覧
  1. ハンバーガーメニュー
  2. ドロワーメニュー
  3. ローディング
  4. スムーススクロールでページトップに戻るのボタン
  5. アコーディオン
  6. モーダル
  7. タブ
しょーご

JavaScript.jQuery両方を練習できるし、書き方の差異を見るだけでも参考になると思います!

【即戦力編】Photoshopデザインからのコーディング演習

photoshop コーディング

上記課題で実案件レベルのコーディング力は身につきますが、実案件では多くのデザインデータがPhotoshopで来ることになります。

なので、

ありさちゃん
ありさちゃん
事前に練習しておきたい!

という方にご要望にお答えして、最高クオリティの課題をご用意しました。

Photoshopに成熟したデザイナーさんにお願いしました。

実装する機能
  • ファーストビューCSSアニメーション
  • スクロールでヘッダー変更
  • ローディングアニメーション
  • スクロールアニメーション

マガジン紹介

マガジン購入お得

模写コーディング教材全部盛りセット【初級中級上級 JS】

模写コーディング教材XDデザインカンプ

こちらはマガジンで、これまで紹介した教材がすべてまとまったセットになっております。

マガジンはnoteの機能で、『記事をまとめているもの』です。

まとめて買ったほうが、価格的にお得になるようにしています。

しょーご
しょーご
新規教材も追加予定なので、全部盛りがダントツでおすすめです!

デザインカンプからのコーディング課題

歴3年のマークアップエンジニアは「時給¥3.500〜」程度得ているのを考えると、

計10回(初級Ex以降)ものレビューを受けられる「全部盛りセット」は、レビューだけで1万円以上の価値があります。

フル活用しちゃってください(;_;)

模写コーディング教材 初級・初級Exセット

模写コーディング

初級編と初級Exをまとめた教材になります。いきなり全部盛りを購入するより、一回様子を見たい方は、こちらをご購入ください。

中級・中級Exセット【HTML,CSS,JS実案件レベル】

中級と中級Exをまとめた教材になります。

このシリーズでは、HTML,CSS,JSの実案件レベルまでスキルと胆力を底上げすることができます。

模写コーディング教材 中級上級セット

模写コーディング教材

こちらは中級上級をまとめたマガジンになります。すでに初級を持っているかたは、こちらで揃えたほうがお得になります。

デザインカンプからのコーディング課題

しょーご
しょーご
マガジン内の教材数が多いほど割引率も高めてるので、今から学習を初められるならマガジン購入がお得です。

実務レベルを体感してほしい

これをご覧の方には、ぜひ上級編まで完走して実務レベルを経験してから、仕事をとっていってもらいたいなと思います。

特に上級編は就職転職でも役立つはずです。

みなさまの学習を応援しております👍

しょーご
しょーご
「過去の自分を救う」を発信の信条としていますが、教材も同様です。有効活用していただければと思います!

一通り課題が終わったら

制作会社への「正しい」営業法を学ぼう

【2021年最新版】Web制作会社に特化した最強の営業法【制作会社に実際に聞いてきました】

ポートフォリオを完成させても、正しい営業を行わないと制作会社からは返信すら返ってこない可能性があります。

そこでこの「【2021年最新版】Web制作会社に特化した最強の営業法【制作会社に実際に聞いてきました】」をリリースしました。

このコンテンツでは、

営業概論
まずは営業全般についてお話し、制作会社への営業が全体の営業でどんな立ち位置にあるのかを解説します。

❷営業前準備
その後、営業ではめちゃくちゃ重要なポートフォリオについてお話します。
また制作会社の営業先の「効率のよいリストアップ方法」についてお伝えします。

❸営業
そしてメインの
・営業手法
・営業文作成(具体例付き)
・営業管理
・制作会社へのインタビュー/これから営業をかける人へのアドバイス

以上を掲載しています。

しょーご
しょーご
どんどん値上げしていくのと、突然販売終了する可能性があるので(参考にする人が増えすぎるとライバルが増えるため)チェックはお早めに!

あなたに是非読んでほしい記事です!