スクール卒生が陥る「どっちつかず」の罠
価格競争のデザインより、資産になるコーディングを選ぶべき理由

「どっちつかず」の正体は、時間を割った分だけ届かない水準

両方を学ぶこと自体が悪いのではありません。問題は、決まった期間の中で両方を学ぶと、どちらも基礎で止まりやすいことです。

時間で考えると分かりやすくなります。当校のカリキュラムは週20時間を想定した6ヶ月で(よくある質問)、合計の目安はおよそ500時間です。デザインを作る学習は含めず、その時間をコーディングと、公開・運用までの実務の学習に充てています。内訳は、HTML・CSSでの基礎(STEP1・1.5ヶ月)、JavaScriptで動きのあるサイトを作る段階(STEP2・1ヶ月)、ピクセルパーフェクト・保守性・納品スピード(STEP3・1.5ヶ月)、複雑な動き(STEP4・1.5ヶ月)、納期つきのテスト案件(STEP5・0.5ヶ月)です(カリキュラム内容)。

同じ500時間の半分をデザインに回したとします。コーディングに残るのは約250時間です。学習時間が月数に比例すると仮定して当校の配分に当てはめると、STEP1〜2の2.5ヶ月分(目安で約210時間)を終え、STEP3に入ってまもなく時間が尽きる計算です。当校のカリキュラムで「実務を意識した学習」が始まるのは、そのSTEP3からです。

当校のカリキュラムページには、こう書いています。「多くのことを学ぶとなると、どうしても期間内に収まらず、すべてが浅いスキルになってしまいます。それを避けるために我々は必要なスキルのみを深く極めることを方針としています」。同じページでは、多くのスクールで学べるのはSTEP2の制作技術までで、商品レベルのサイトにはそれ以上が要る、とも書いています。デザインも含めて学ぶ場合は、その分だけコーディングの時間が削られます。

学習後に出る実務ギャップ5つ

STEP2の段階で止まると、ポートフォリオは作れても、案件で求められる次の5点が抜けやすくなります。下の表は当校の運営上の見立てで、すべての人に当てはまるわけではありません。

表の右列は、当校のカリキュラムでいえばSTEP3以降(ピクセルパーフェクト・保守性・納品スピード・複雑な動き・納期つきのテスト案件)と、習得スキルの「サーバー」「運用・コミュニケーション」にあたる内容です。制作会社の検品で見られる水準との差はスクール課題と制作会社パートナーの水準の違いで比べているので、ここでは時間配分との関係に絞ります。中でも納期は、組んだ本数が少ないうちは読み違えやすい項目です。受講生のあいりさんは、自身のnoteで、納期指定の課題に不合格だった経験を書いています。「指定された納期に間に合わせることができず、悔しさと情けなさで、涙が止まりませんでした」。最大の原因は「元サイトの構成に対する事前の分析と理解」が足りず、スマホ表示にした途端にレイアウトが崩れて、その修正に想定以上の時間を取られたことだったと振り返り、「「今の自分の力量」と、「修正にどれだけの時間がかかるか」を全く客観視できていなかった」と書いています(あいりさんのnote)。その後は自分の作業スピードを測り、余裕を持たせたスケジュールを組むようになったそうです。作業速度と修正時間の見積もりは、組んで、測って、外した経験から身についていきます。

あいりさんは、当校に入る前に別のスクールで基礎を学んでいます。模写を終えてクラウドソーシングに応募しようとしたときのことを、「募集要項は知らないワードばかり。全く応募できず、「こんなスキルじゃ全然通用しない…」とかなり自信を無くしました」と書いています(あいりさんの初投稿のnote)。学んだ内容が基礎で止まっていれば、何を学んだかにかかわらず同じ壁に当たります。分かれ目は、学んだ種類の数ではなく到達した深さです。

分業で進むWeb制作の現場では、発注が工程ごとに分かれやすい

制作会社や広告代理店を通る仕事では、デザインとコーディングが別々に発注されやすくなります。お店などから直接受ける仕事では両方を1人に頼まれることもありますが、そこでも「両方を少しずつ」できることが有利に働く場面は限られます。

制作会社や広告代理店が受けた案件では、デザイナーがデザインを作り、コーダーがそれを組み、ディレクターが全体を進めます。そこから個人に外注されるのは、その中の1工程であることが多く、典型は「デザイン済みのカンプがあるので、コーディングだけお願いしたい」という依頼です。受注ルートごとの仕事の範囲の違いは3つの受注ルートの比較にまとめました。分業の比率を示す公的な統計は、確認した範囲では見つかっていません。ここまでは当校の運営上の見立てで、以下は受講生の記録から確かめられる範囲の話です。

あいりさんは、今の制作姿勢をこう書いています。「デザイナーさんの意図を汲み取り、「なぜこの余白なのか」「なぜこの動きなのか」を考えながら、1pxのズレも許さない実装を大切にしています」(あいりさんのnote)。デザインはデザイナーが作り、コーダーはその意図を読んで形にする、という分担が前提になった書き方です。

受講生の皆藤翔太さんは、当校に入る前に独学で、納期3日・報酬1万円のコーディング案件を受けていました(経緯は独学で受注した人が行き詰まった実例で紹介しています)。その後参加した勉強会で卒業生が受けたコーディング案件の話を聞き、記事の見出しに「同じコーディング案件でも、報酬は10倍違った」と書いています。案件の規模や作業範囲が違うので単純には比べられない、という断りも本人が添えています(皆藤さんのnote)。コーディングだけで発注される案件があり、その中でも報酬に幅があることは、この記録から読み取れます。

「両方できます」が強みになりにくい理由

工程ごとの発注では、デザインの依頼はデザイン専業の人と、コーディングの依頼はコーディング専業の人と比べられます。発注者が見るのは、その工程でどれだけの仕事をしてくれるかです。両方を学んだ時間の分、それぞれの工程で専業の人より浅ければ、どちらの依頼でも後ろに回ります。

デザインから公開までを1人で引き受ける案件もあります。小さなお店のサイトなどです。ただ、それを1人で受けて品質を保ちやすいのは、どちらかを深めてからもう一方を足した人です。受講生の声に載っているY.Eさん(42歳)は、フリーランスでデザイナーをしてきたうえで、コーディングを学びに来ました。目標は「デザイナーもできて、コーディングもできて、案件も取れるようなハイブリット」です。Y.Eさんの場合、両方を持つ形は、デザインを仕事にしたうえでコーディングを足す順番で目指されています。

コーダーとフロントエンドエンジニアのように、コーディングの中での職種の違いはコーダーとフロントエンドエンジニアの違いで比べています。

デザインの比較が価格に寄りやすいのは、発注前に良し悪しを示しにくいから

デザインが価格競争になりやすいのは、デザインの仕事が軽いからではありません。情報の整理や使いやすさといった専門の物差しはあっても、発注者がそれを発注前に見分けるのは難しく、最後は好みで判断されやすいからです。

専門家でない発注者が、公募で集まった提案を価格・評価・実績件数で並べがちな構造はクラウドソーシングで案件が取れない構造的理由で書きました。ここでは、その比べ方がデザインとコーディングで違って出る点に絞ります。同じ依頼に、未経験に近い候補者が3人応募したとします。3人のデザイン案は、どれも発注者の好み次第で「いい」とも「違う」とも言えます。腕の差がはっきり見えないとき、発注者が比べやすいのは金額と実績の数です。デザイナーの側に落ち度はありません。比べ方の構造がそうなっています。実績を積み、提案の筋道を言葉で示せるデザイナーは、価格以外で選ばれていきます。価格に寄りやすいのは、実績がまだ少ない入口の段階です。

学習中の上達の測りやすさにも同じ差があることは、WebデザインとWeb制作の違いで書きました。本記事で扱うのは、その差が発注のときの比べられ方にも出る点です。

コーディングの物差しは、発注の前に見せられる

コーディングの品質は、発注者がデザインに詳しくなくても確かめられる形で示せます。実績が少ないうちでも、価格以外の比べ方を発注者に渡せるということです。

表示速度の整え方は卒業制作を作り替える5ステップのステップ4に、表示崩れの原因の調べ方はCSSのレイアウトが崩れる原因に書いています。

提案文の自己紹介も、この物差しで書き直せます。両方を学んだ人ほど、最初の1行に「デザインもコーディングもできます」と書きがちです。

後者は、発注者が確かめられることだけを書いています。日数は例なので、自分の実測に置き換えてください。提案文全体の組み立ては提案文の構成7要素にまとめています。

コーディングが「資産」になるのは、深めた分が次の案件に残るから

ここで言う資産は、一度身につけたものが次の案件でも使え、積み重なるほど速く・高く仕事ができる状態のことです。コーディングには、そうした積み上がり方をするものが3つあります。

1つ目は、組み方の型です。ヘッダー、カード一覧、問い合わせフォーム、スクロールに合わせた動き。一度きちんと組んだ部品は、次の案件で土台として使えます。同じ5ページのサイトでも、2本目は1本目より早く組みやすくなります。

2つ目は、見積もりの精度です。何本も組むうちに、「このデザインなら何日」「この修正なら何時間」が分かるようになります。先に紹介したあいりさんは、納期の失敗を経て、「この「絶対に納期を割らないための自己管理力」は、今の私の制作において揺るがない軸になっています」と書いています。納期を守れる見積もりは、継続の依頼につながる力です。

3つ目は、公開後の仕事への広がりです。コーディングができると、表示速度の改善、サイトの修正、アクセス解析をもとにした改善まで、自分の手で実装できます。皆藤さんはWeb解析に取り組む理由を書いたnoteで、「私はコーディングを経験してきたため、問題を見つけるだけでなく、改善案を実際のサイトへ反映するところまで対応できます」と述べています(皆藤さんのnote)。本人はWeb解析の実績はこれから作る段階だと断ったうえで、計測から改善の実装までを一貫して行えることを、これからの強みにしようとしています。深めたコーディングが、仕事の範囲を広げる土台になっている例です。

実装力に何を掛け合わせると仕事が残りやすいか(動きの設計・上流工程の言語化・Web解析)は、これからのWeb制作で生き残るスキルの掛け合わせで書いています。AIがコーディングのどこまでを担うかも、同じ記事にまとめました。掛け合わせはどれも、自分で書ける実装力が土台です。学習の段階でコーディングに時間を張る理由は、ここにもあります。

当校のカリキュラムページの最後には、「ひとつのことを“極める”ことで卒業後も別スキルの習得や案件獲得などをできる力が身に付きます」とあります。別のスキルを足すのは1つを極めたあと、という順番がこの一文に表れています。デザインを足したくなった場合も同じです。

デザインは不要ではない｜コーダーに要るのは「読む力」と「確かめる力」

コーディングに絞っても、デザインと無縁にはなりません。必要なのは、デザインを一から作る力ではなく、他人のデザインを読み取り、デザイナーと確かめ合う力です。

あいりさんの「なぜこの余白なのか」「なぜこの動きなのか」を考える、という姿勢は、この表の上の2行にあたります。デザインの意図を読めるコーダーは、カンプに描かれていない部分で迷ったときに、デザイナーが選びそうな形を選べます。質問するときも「AとBのどちらにしますか」と選択肢を出せます。

当校でも、受講中にデザインツールを動かす作業はあります(よくある質問)。デザインの知識を学ぶ範囲は、カンプを読んで正確に組むために必要な分です。作る側のデザインを本格的に学びたくなったら、コーディングで仕事を受けられるようになってから足しても遅くありません。

すでに両方を学んだ人が、今から立て直す4つの手順

両方を学んで卒業し、案件が取れていない場合も、学んだ時間は無駄になりません。次の4つの手順で、コーディングの側に重心を移してください。

1. 手持ちのポートフォリオを、コーディングの物差しで採点する: デザインの比較が価格に寄りやすい理由の章の表の5項目(デザインとのずれ・表示崩れ・表示速度・修正のしやすさ・納期)を、作品ごとに確かめます。デザインの出来ではなく、組み方の質で見ます
2. 他人が作ったデザインで1本組む: 自分でデザインした作品だけでは、「デザインどおりに組めるか」を証明できません。思いどおりにならない箇所を、デザインのほうを変えて逃げられるからです。公開されているデザインカンプや、知人のデザイナーのデザインを使い、比較画像を作れる状態で組みます。カンプからの変換そのものはAIの影響を先に受けやすい作業なので(作業単位の線引き)、カンプに描かれていない幅や動きをどう補ったかも作品の説明に添えます
3. デザインの新しい学習を止め、時間をコーディングに寄せる: デザインツールの新機能や配色の勉強は、いったん止めます。空いた時間で、JavaScriptの動き、修正のしやすいCSSの書き方、サーバーへの公開を詰めます
4. 提案文と作品説明を、コーディングの言葉で書き直す: 手順1と同じ章にある書き直し例のように、確かめられる事実だけを書きます

手順2で使ったデザインの読み方は、前章の表の上2行そのものです。デザインを学んだ経験は、ここで生きます。カンプの意図を読む速さは、デザインを学んだことのない人より早い場合があります。

ポートフォリオの作品そのものを作り替える手順は卒業制作を作り替える5ステップに、作ったあと発注者に届ける方法は案件が来ないポートフォリオの3つのパターンに書いています。提案を出してから受注までの現実的な数(最初の受注率は1〜2割以下)は副業の始め方5ステップに、続けるかやめるかの線引きは撤退ラインにまとめています。

AddedPallasがコーディングだけを教えている理由

AddedPallasは、Web制作のうちコーディングに特化したスクールです。カリキュラムの習得スキルの一覧はHTMLとCSSに始まり、サーバーや運用・コミュニケーション、実務スキルまで並びますが、デザインを作る技術の項目はありません。カリキュラムページが挙げる理由は、最初の章で引いた「すべてが浅いスキルになってしまう」ことを避けるためです。

その分、STEP3以降の3.5ヶ月を、基礎より先の段階に充てています。最後のSTEP5は、納期を決めて難易度の高いサイトを1人で作るテスト案件です。このテストに合格し、さらに当社CTOとの面接に合格した方のみ、業務委託契約を結んで当社の実務案件に携われる制度があります。この業務委託制度は保証ではありません。

デザインを仕事にしたい気持ちがはっきりしている方には、当校は合いません。デザインを専門に学べる学習先を選んでください。デザインとコーディングのどちらを軸にするかまだ迷っている方は、無料カウンセリングで、これまで学んだ内容と手持ちの作品の状況を伝えてください。カウンセリングでは、フリーランスを経験したエンジニアが、キャリアや案件獲得、学習の手法の相談に答えています。

よくある質問

Webデザイナーとコーダー、未経験からならどっちを目指すべきですか？

デザインを仕事にしたい気持ちがはっきりしているならWebデザイナー、決めきれないならコーダーから入るのが無駄の少ない順番です。コーディングは品質を確かめる物差しがはっきりしているため、実績が少ないうちでも価格以外の比べ方を発注者に示せます。どちらの場合も、限られた学習期間を2つに割らず、1つを案件で求められる水準まで深めてください。

デザインとコーディングは、両方できたほうが有利ではありませんか？

1つを仕事にできる水準まで深めたうえで、もう1つを足すなら有利になります。不利になりやすいのは、短期間で両方を学び、どちらも基礎で止まった場合です。制作会社を通るWeb制作の発注はデザインとコーディングで分かれやすく、それぞれの工程で専業の人と比べられるためです。

コーダーにデザインの知識は必要ですか？

必要です。ただし必要なのは、デザインを一から作る力ではなく、他人のデザインを読み取る力です。カンプから余白や文字の大きさを正確に拾うこと、スマホ表示や動きなどカンプに描かれていない部分をデザインの意図に合わせて補うこと、迷ったときにデザイナーへ確かめることが含まれます。

スクールでデザインを学んだ時間は無駄になりますか？

無駄にはなりません。デザインを学んだ経験は、カンプの意図を読み取る力として、コーディングの仕事で生きます。これからの学習時間をコーディングに寄せ、他人が作ったデザインで1本組んで、デザインどおりに組める証拠を作ってください。

コーディングはAIに置き換えられるので、デザインを学ぶべきではありませんか？

AIの影響を先に受けやすいのは、完成したデザインをそのままコードに置き換えるだけの作業だと当校は見ています。動きの設計、公開後の修正や改善、解析をもとにした提案は、深めたコーディングの力が土台になります。作業単位の線引きは、コーダーの将来性とAIの記事にまとめています。

まとめ｜学習の時間は、確かめられる物差しのある側に張る

この記事で書いたことを4行に絞ると、次のとおりです。

• 決まった期間で両方を学ぶと、どちらも基礎で止まりやすい。当校の目安の500時間で計算すると、半分をデザインに回した場合、コーディングは実務を意識した段階(STEP3)に入ってまもなく時間が尽きる
• 制作会社を通るWeb制作の発注は工程ごとに分かれやすく、両方そこそこの人は、それぞれの工程で専業の人と比べられる
• デザインは発注前に良し悪しを示しにくく、実績の少ないうちは比較が価格に寄りやすい。コーディングはずれ・崩れ・速度・修正・納期という確かめられる物差しで示せる
• デザインは捨てない。コーダーに要るのは、デザインを読み取り、デザイナーと確かめ合う力

すでに両方を学んだ方は、手持ちの作品をコーディングの物差しで採点するところから始めてください。どこが足りないのか1人で判断しにくい場合は、無料カウンセリングで相談してください。