SE・エンジニアがデザインを学ぶと何が変わるか｜千葉で判断基準を持つ
デジタルハリウッドSTUDIO千葉には、システムエンジニアとして働きながらWebデザイナー専攻を受講した卒業生がいます。IT企業でバックエンド側のシステム開発を担当していた方で、仕事を続けながら映像教材での自習と週1〜2回の通学を組み合わせて進め、卒業制作ではWordPressでサイトを1本作り切りました。いまも本業のシステムエンジニアを続けながら、副業でロゴやバナーの制作をしています。
このページは、この形を前提に書きます。会社を辞めてデザイナーに転職する話ではありません。 すでにものを作れる人が、デザインの言語を持つと何が変わるのか。その一点です。
この職種だけ、話の向きが違います
当サイトの職種別ページは、たいてい「未経験から手に職をつける」という話になります。事務職、介護、物流・運送、工場・製造のページは、いずれも制作の経験がないところから始める前提で書いています。
SE・エンジニアだけは、そこが違います。すでに作れるからです。
コードが書ける人にとって、足りないのは手を動かす力ではありません。足りているのは実装で、足りていないのはその実装をどう見せるかを決める根拠です。だからこのページでは、次の3つを軸に書きます。
- コードは書けるのに、デザインの根拠を説明できないという状態から抜けること
- 受託でデザイナーと組むときに、同じ言葉で話せるようになること
- 自分ひとりで、プロダクトやLPを作り切れるようになること
いずれも、いまの仕事の価値を上げるための話です。デザイナーに転職すべきだとは書きません。実際、上に挙げた卒業生も転職していません。
コードは書けるのに、デザインの根拠を説明できない
エンジニアが「デザインが苦手だ」と言うとき、その中身はたいてい次のどれかです。
- 余白をいくつにすればいいか分からない。とりあえず16pxにしている
- 色を決められない。Bootstrapの初期色か、どこかで見た配色をそのまま使う
- フォントサイズが1画面に7種類ある。理由はなく、そのつど決めたから
- できあがったものを見て「なんか違う」と思うが、どこが違うのか言えない
- レビューで指摘されたとき、直せはするが、なぜそれが正しいのか分かっていない
これは造形のセンスの問題ではありません。判断の基準を持っていないだけです。 そして基準は、センスと違って学べます。
「なんか違う」を分解できるようになる
デザインの基礎で最初に扱うのは、整列・近接・反復・対比といった、原則と呼ばれるものです。エンジニアの言葉に置き換えると、次のようになります。
| デザインの原則 | 実装側の言葉にすると |
|---|---|
| 整列 | 基準線を決めて、そこから外れる要素を作らない。グリッドという制約を先に置く |
| 近接 | 関係のある要素どうしを近づけ、関係のないものを離す。DOMの構造と見た目の距離を一致させる |
| 反復 | 同じ役割のものは同じ見た目にする。コンポーネントの粒度を決めるのと同じ作業 |
| 対比 | 強調したいものだけを強くする。全部を強調すると、何も強調されていないのと同じになる |
| 余白の設計 | 4pxや8pxを基準にした段階を決めて、その中からしか選ばない。マジックナンバーを置かない |
この対応表を見て「それはもう普段やっていることだ」と感じたなら、それは正しい感覚です。設計の考え方は共通していて、扱う対象が視覚に変わるだけです。 エンジニアがデザインの基礎を学ぶと理解が速いのは、この土台をすでに持っているからです。
基準を持つと、「なんか違う」は「見出しと本文の間隔が、本文と次の見出しの間隔より広い。だから段落の切れ目が逆に読める」という指摘に変わります。言語化できれば、直せます。人にも説明できます。
デザイナーと組むときの、共通言語
受託の現場では、デザイナーから受け取ったものを実装する場面が多くなります。そこで詰まるのは、だいたい決まった場所です。
- 指定のない状態がある。ホバー、フォーカス、無効、読み込み中、エラー、データが0件のとき。カンプにはたいてい正常系しかありません
- 1pxずれている理由が分からない。意図した余白なのか、作業上のずれなのかを判断できず、毎回聞くことになる
- 可変の幅で崩れる。文字数が想定より多いとき、画像の縦横比が違うときの扱いが決まっていない
- 実装コストが高い指定が入っている。理由を説明せずに「できません」と返すと、関係が悪くなる
- 命名が揃わない。デザイン側のレイヤー名と、実装側のコンポーネント名が別物になっている
デザインの基礎を持っていると、この5つの詰まり方が変わります。指定がない状態は「この要素は状態を持つはずだから、先に決めておきましょう」と自分から出せます。1pxのずれは、基準の段階から外れているかどうかで判断できます。実装コストの話も、「この表現は工数がこれくらい増えます。同じ目的なら、この形でも成立しませんか」と、代案とセットで出せるようになります。
Webデザイナー専攻ではFigmaを扱います。デザイナーが何をどう作っているかを、作る側から見ておくこと自体に価値があります。 受け取るだけの立場から、途中で口を出せる立場に変わります。
「なんか違う」と言われる側から、言う側へ
もうひとつ大きいのは、レビューでの立ち位置です。デザインの言葉を持っていないと、レビューは一方通行になります。持っていると、根拠のある指摘を返せます。指摘を返せる人は、次の案件で設計の段階から呼ばれます。実装だけの人と、設計から入れる人では、任される範囲が変わります。
自分ひとりで、作り切れるようになる
個人開発をしたことがある方なら、心当たりがあるはずです。機能はできているのに、公開する気になれない。 トップページが作れない、スクリーンショットが貧相、ランディングページを書こうとして手が止まる。
ここで止まるのは、技術の問題ではありません。次の3つが決まっていないからです。
- 誰に何を伝えるかの順番。何ができるツールなのかを、最初の1画面で言い切れているか
- 見せ方の型。ファーストビュー、機能の説明、使い方、料金、問い合わせ。LPの構成には定石があります
- 最低限の見た目の水準。色数を絞る、余白を揃える、フォントを2種類までにする。これだけで印象は変わります
デザインの基礎を持つと、この3つを自分で決められるようになります。機能が同じでも、使ってもらえるかどうかが変わります。副業で受けるとき、自分の作ったものを見せられるかどうかも変わります。
エンジニアの経験は、デザイン側でも効きます
逆方向も書いておきます。デザインを学びに来る人のなかで、エンジニアは有利な位置にいます。
| すでに持っているもの | デザインの学習で効くところ |
|---|---|
| 構造を組む習慣 | 情報設計、サイトの階層、コンポーネントの分け方 |
| HTML・CSS・JavaScriptが読める | Webデザイナー専攻のコーディング部分でつまずかない |
| 実装コストが見える | 作れないデザインを出さずに済む |
| ドキュメントを読む力 | ツールの習得が速い |
| バージョン管理やツールへの耐性 | Figmaのような新しいツールに抵抗がない |
| 要件を詰める経験 | ヒアリングから要件に落とす作業が、そのまま制作の上流に使える |
Webデザイナー専攻にはPhotoshop・Illustrator・FigmaとHTML/CSSが含まれます。コーディング部分を速く抜けられる分、デザインの判断基準を作るところに時間を回せます。 同じ6ヶ月でも、時間の使い方が変わります。
AIが出てきて、何が変わったか
コードは生成できます。デザインのラフも生成できます。エンジニアの方ほど、これを日常的に使っているはずです。
そのうえで残るのは、何を作るかを決めるところと、出てきたものの良し悪しを判断するところです。生成されたUIを見て、これでいいのか、どこを直せばよくなるのかを言えない人は、生成AIを使っても手戻りが増えるだけになります。判断できる人だけが速くなります。
Claude Code × Designer Bootcamp（全6回・3ヶ月）
デジタルハリウッドSTUDIO千葉には、Claude Code × Designer Bootcampがあります。SE・エンジニアの方にいちばん近いのは、この講座です。 内容は次のとおりです。
| 回 | 扱うこと |
|---|---|
| 第1回 | 環境構築とClaude Codeの基礎 |
| 第2回 | デザインシステムを、Claudeが理解できる形にする |
| 第3〜4回 | ページ実装とコンポーネント設計／リッチUIとアニメーション |
| 第5〜6回 | 公開・運用・改善／最終発表会 |
「デザインシステムをClaudeが理解できる形にする」という回があることからも分かるとおり、これはルールを決めて、機械に渡して、出てきたものを評価するという講座です。設計を書いて実装させ、レビューする。エンジニアが普段やっていることの対象が、UIに変わっただけとも言えます。
ただし対象は「現役デザイナー・デザイン会社・デジハリ卒業生」となっています。デザインの土台がある人向けの講座です。 エンジニアの方がいきなりここから入れるかどうかは、いまどこまで自分でUIを決められるかによって変わります。判断できないところなので、説明会で直接確認してください。
受講料はサイトに掲載がありません。このページでも金額は書きません。費用と日程は説明会で確認してください。
ブートキャンプと専攻、どちらから入るか
目安として、次のように考えると整理しやすくなります。
- 自分でUIを決めきれない自覚があるなら、まず土台から。余白も色も毎回迷うという状態でAIに投げても、出てきたものを評価できません。Webデザイナー専攻で基準を作るほうが結局は速くなります
- すでにUIの判断はできていて、制作の速度を上げたいなら、ブートキャンプ側の話になります
どちらに当てはまるかは、いま作っているものを見せてもらえれば話が早くなります。
学内コンペでデザイン案を募り、採用案をもとに受講生が制作しました。
当校のクライアントワークでは最大級の規模。設計から入った案件です。
業務用空調・冷蔵設備と店舗設計の会社。採用サイトの評判から本体サイトへ広がりました。
デザインと動画、どちらか
SE・エンジニアの方には、デザイン（Web）をおすすめします。いまの仕事と地続きだからです。
ただし、技術解説の動画を出したい、自分のプロダクトの紹介動画を作りたいという目的があるなら、動画クリエイター専攻も選択肢になります。編集ソフトはレイヤーとタイムラインの構造で動くので、エンジニアの方は操作の習得が速い傾向があります。
働きながら続けられるか
上に挙げた卒業生も、システムエンジニアの仕事を続けながら受講しています。映像授業が中心なので、進むペースは自分で調整できます。校舎の開館時間は次のとおりです。
| 曜日 | 開館時間 |
|---|---|
| 平日 | 11:00〜21:00 |
| 土・日 | 11:00〜18:00 |
| 月曜・祝日 | 休館 |
校舎はJR千葉駅・京成千葉中央駅から歩ける距離です。平日は21時まで開いているので、退勤後に寄る形が取れます。
半年で、どれだけの時間を使うことになるか
通学の負荷は、頻度で決まります。校舎に3時間滞在する前提で、半年（6ヶ月）分を積み上げると次のようになります。移動時間はお住まいの地域によって変わるため、ここには含めていません。
| 通学頻度 | 半年の通学回数 | 校舎滞在の合計 | 家での作業に必要な時間 |
|---|---|---|---|
| 週2回（月8回） | 48回 | 144時間 | 約116時間 |
| 週1回（月4回） | 24回 | 72時間 | 約188時間 |
| 月2回 | 12回 | 36時間 | 約224時間 |
右端の列は、半年で約260時間を確保する前提で、校舎滞在を引いた残りです。どの頻度で通っても、大半は家での作業になります。 通学の回数を増やせば楽になる、という構造にはなっていません。
週あたり何時間必要か
働きながら進める場合、週10時間前後が目安です。半年で約260時間になります。エンジニアの方の場合、内訳は次のようなイメージです。
- 通学日：校舎での実習と質問に3時間
- 平日の夜：30分〜1時間を3日ほど。映像授業を見る、手を動かす
- 休みの日：まとめて3〜4時間。課題を進める
リリース前や障害対応の週にこれを確保するのは無理です。取れない週があることを前提に計画してください。 週で管理すると崩れたときに立て直しにくいので、月40時間として月単位で見るほうが続きます。
止まる場所は、だいたい決まっています
エンジニアの方が止まるのは、他の職種とは違う場所です。
- コーディングの課題が簡単すぎて、油断する。前半が楽に進むので、後半のデザイン課題との落差でつまずきます
- 正解がないことに耐えられない。仕様どおりに動けば正解、という世界から来ると、ここがいちばんきついところです
- 作り込みすぎて終わらない。手が動く分、細部に入り込んで課題が仕上がらないことがあります
- 繁忙期に完全に止まる。1週間まったく触らないと、思い出すところからやり直しになります。15分でもファイルを開ける日を作るほうが、まとめて3時間取ろうとするより現実的です
2つ目が本題です。「なぜそうしたのか」を毎回説明する練習が、この分野の学習の中身です。講師に見てもらえること自体に価値があるのは、そこに理由があります。独学で止まるのも、たいていここです。
半年で一人前にはなりません
はっきり書いておきます。半年の学習で、専業のデザイナーと同じ水準になることはありません。 半年で到達するのは、人に見せられる作品が手元にあり、ツールの操作でつまずかず、分からないことを自分で調べて進められる状態です。
そこから先は、実際の仕事のなかで伸びる領域です。就職・転職や案件の獲得は、本人の作品と経験、業界や地域の状況で結果が変わります。受講すれば収入や案件が保証されるものではありません。
受講料以外に、いくら見ておくべきか
| 項目 | 内容 |
|---|---|
| 受講料 | 下のコース表のとおり（税込） |
| 通学の交通費 | お住まいの地域によって変わります。地域別のページに実測値を載せています |
| Adobe Creative Cloud | PhotoshopやIllustratorを使うために必要です。プランと契約条件で金額が変わるため、ここでは断定しません |
| パソコン | 開発用のマシンをお持ちなら、そのまま使えることが多い項目です。型番をお伝えいただければ説明会で確認できます |
| 周辺のもの | 外付けストレージ、ペンタブレットなど。すべてが必須ではありません |
AdobeとパソコンについてはWebサイトに金額を書きません。プラン、契約期間、すでに持っている機材によって必要額が人ごとに違うためです。支払い方法や、利用できる可能性のある公的な支援制度についても、条件が人によって変わるため無料説明会で個別に確認してください。
目的から逆算して、どのコースを選ぶか
コース名を見比べても決まりません。半年後に自分が何を作れる状態でいたいかから逆算してください。
自分のプロダクトやLPを、最後まで作り切りたいなら
Webデザイナー専攻（6ヶ月）です。成果物としては次のようなものになります。
- サービスのランディングページ（構成、ファーストビュー、料金表、問い合わせまでの導線）
- WordPressで動くサイト1本。更新を自分で回せる形まで
- OGP画像、アイコン、スクリーンショットの見せ方
- スマートフォンでの見え方を含めた画面設計
コーディングの部分は速く抜けられるので、実質的にはデザインの判断基準を作るための6ヶ月になります。
資料や図版を、自分で作れるようになりたいなら
技術資料、提案書、システム構成図、展示会のパネル、名刺。紙とスライドの側が目的なら、グラフィックデザイン講座（4ヶ月）が近くなります。IllustratorとPhotoshopが中心で、期間が短く受講料も抑えられています。
AIで制作の速度を上げたいなら
Claude Code × Designer Bootcamp（全6回・3ヶ月）です。ただし前述のとおり、デザインの土台がある人向けの講座です。順番を間違えると身につきません。
向かない場合
正直に書きます。次に当てはまる方には、通学をおすすめしません。
- すでにデザインの判断基準を持っている方。UIの本を何冊も読み、実際に自分で決めて作れているなら、独学で足ります
- コーディングやプログラミングだけを学びたい方。当校はデザインの学校です。目的が実装技術なら、プログラミングスクールのほうが合います
- 転職そのものが目的の方。エンジニアとして転職したいなら、デザインを学ぶより実務の経験を積むほうが早いことが多いです
- 手を動かす時間を半年確保できない方。プロジェクトの状況が読めない時期なら、開講の時期をずらすほうが結果的に早く終わります
- 「なぜそうしたか」を人に説明するのが苦痛な方。この分野の学習は、その繰り返しでできています
スクール以外の選択肢
スクールが唯一の道ではありません。
- 独学。デザインの原則、タイポグラフィ、配色の書籍は良いものが揃っています。エンジニアの方は文章から学ぶことに慣れているので、他の職種より独学が成立しやすい部類です。壁になるのは、作ったものを評価してもらえないことだけです
- 社内で機会を作る。社内ツールの画面、ドキュメントのテンプレート、勉強会のスライド。デザイナーがいる会社なら、レビューを頼めるものから始めるほうが早いこともあります
- 公共職業訓練（ハロートレーニング）。ハローワークが窓口の制度です。コースの内容・期間・開講時期は時期によって変わるため、お住まいの地域を管轄するハローワークで直接確認してください
- 教育訓練給付制度。厚生労働大臣が指定した講座を修了した場合に費用の一部が支給される制度です。対象講座かどうか、受給要件を満たすかどうかは個別に判断されます。窓口はハローワークです
先に比べてから決めても遅くはありません。無理に申し込んで3ヶ月で来なくなるより、そのほうがいいと考えています。
エンジニアの年収や求人の数字を、このページに書かない理由
「デザインを学ぶと年収がいくら上がるか」「UIができるエンジニアの求人がいくつあるか」という数字は、このページには書きません。出典を確認できない数字を載せないと決めているからです。
この種の数字は、調査の対象、集計の時期、地域の範囲によって大きく動きます。転職サイトの平均年収は登録者の構成に左右されますし、求人件数は同じ求人が複数の媒体に出ていることもあります。それを根拠に受講を決めてもらうのは、誠実ではないと考えています。
判断材料として確かなのは、自分が半年後に何を作れる状態でいたいかと、そのために使える時間とお金がいくらあるかの2つです。このページはそこだけを書いています。
エンジニアの仕事と並行して学んだ人がいます
システム開発の仕事をしながら、あるいはプログラマーから学び直した卒業生のインタビューを公開しています。週の使い方が本人の言葉で書かれています。
SEの仕事を続けたまま、Webデザイナー専攻で学んだ人のインタビューです。
プログラマーから、地方で仕事をつくる側に回った人です。
制作会社で進行管理をしてきた人が、動画クリエイター専攻で学んだ例です。
コース
| コース | 期間 | 受講料（税込） |
|---|---|---|
| Claude Code × Designer Bootcamp | 全6回・3ヶ月 | ─ |
| Webデザイナー専攻 | 6ヶ月 | 572,000円 |
| グラフィックデザイン講座 | 4ヶ月 | 319,000円 |
| 動画クリエイター専攻 | 4ヶ月 | 445,500円 |
| 動画ディレクター専攻 | 3ヶ月 | 385,000円 |
受講料は、給付金で最大80％が戻る場合があります
デジタルハリウッドの一部の講座は、経済産業省の「第四次産業革命スキル習得講座（Reスキル講座）」に認定されています。支給要件を満たして所定の手続きをし、講座を修了すると、厚生労働省の専門実践教育訓練給付金として教育訓練経費の最大80％（上限640,000円）が支給されます。
| 対象コース | 定価（税込） | 実質料金（最大80％の給付を受けた場合） |
|---|---|---|
| Webデザイナー専攻 | 572,000円 | 220,000円 |
| Webデザイナー専攻 主婦・ママクラス キャリアデザインプログラム | 423,500円 | 190,300円 |
| 動画クリエイター専攻 | 445,500円 | 181,500円 |
| グラフィックデザイン講座 | 319,000円 | 143,000円 |
⚠ 動画ディレクター専攻と Claude Code × Designer Bootcamp は、この制度の対象ではありません。給付の対象になるのは入学金と授業料で、設備・教材費やソフトウェアの購入費は含まれません。また、雇用保険の被保険者である（あった）ことなどの支給要件があり、受講開始の2週間前までにハローワークでの手続きが必要です。ご自身が対象になるかは、住民票のある地域を管轄するハローワークで必ず確認してください。対象講座・支給要件・申請の流れはReスキル講座と給付金のページにまとめています。
Claude Code × Designer Bootcampの受講料はサイトに掲載がないため「─」としています。金額は説明会でご案内します。
まず相談する
いまの仕事に足す形が合うのか、それとも別の道を考えるのか。すでに持っているスキルを踏まえて話します。作りかけのものがあれば、見せていただくのがいちばん早いです。
- ブートキャンプと専攻、どちらから入るべきか
- いまの働き方で、週にどれだけ時間を確保できそうか
- いま使っている開発用のパソコンで足りるか
よくある質問
Q. HTML/CSSは書けます。それでも受ける意味はありますか？
あります。Webデザイナー専攻のコーディング部分は速く進められるので、その分をデザインの判断基準を作るところに回せます。学ぶ対象は書き方ではなく、何をどう見せるかを決める根拠です。
Q. 転職しないと意味がないですか？
そんなことはありません。当校には、システムエンジニアの仕事を続けたまま受講し、いまも本業を続けながら副業でロゴやバナーを制作している卒業生がいます。いまの仕事の幅を広げる使い方が、この職種ではいちばん現実的です。
Q. Claude Code × Designer Bootcampから受けられますか？
対象は現役デザイナー・デザイン会社・デジハリ卒業生となっています。デザインの土台がある方向けの講座なので、いまどこまで自分でUIを決められるかによります。説明会で判断させてください。
Q. Claude Code × Designer Bootcampの受講料はいくらですか？
サイトに掲載がないため、このページでも金額を書いていません。説明会でご案内します。
Q. AIがあるのに、いま学ぶ意味はありますか？
生成されたものを評価できない人は、生成AIを使っても手戻りが増えます。判断基準を持つことの価値は、むしろ上がっています。
Q. Figmaは扱いますか？
Webデザイナー専攻に含まれます。デザイナーから受け取る側ではなく、作る側からFigmaを見ておくと、受託でのやり取りが変わります。
Q. 週にどれくらいの時間が必要ですか？
週10時間前後が目安で、半年で約260時間です。繁忙期に確保できない週があるのは前提なので、週ではなく月40時間として管理するほうが崩れにくくなります。
Q. 校舎には毎週行く必要がありますか？
ありません。週1回通っても半年の校舎滞在は72時間で、残りの約190時間は家での作業です。質問がたまったタイミングで月1〜2回、という形でも進められます。
Q. 校舎は何時まで開いていますか？
平日は11:00〜21:00、土・日は11:00〜18:00です。月曜と祝日は休館です。JR千葉駅・京成千葉中央駅から歩ける距離です。
Q. 受講料と別に何が必要ですか？
Adobe Creative Cloudとパソコンが必要です。金額はプランや契約条件、すでにお持ちの機材によって変わるため、このページでは断定していません。開発用のマシンをお使いなら、そのまま使えることが多い項目です。
Q. 半年でデザイナーとして仕事を受けられますか？
半年で到達するのは「人に見せられる作品があり、ツールでつまずかず、分からないことを自分で調べて進められる」状態です。案件の獲得は作品や経験、地域の状況によって結果が変わるため、保証できるものではありません。
関連するページ
このページについて：卒業生の前職と受講後の状況はデジタルハリウッド本部サイトのSTUDIO千葉 卒業生インタビューの掲載内容によります。Claude Code × Designer Bootcampの対象者・カリキュラム・回数は、2026年9月1日時点の講座ページの掲載内容です。内容は変更されることがあるため、最新の情報は各一次情報でご確認ください。
出典
