コードが読めるデザイナーに！
フロントエンド道場
もう動画教材に挫折しない、リアルタイムレッスン！
5ヶ月短期集中
各2時間x全20回
少人数制
オンライン講座
少人数制オンライン講座
フロントエンドエンジニア
講師 松本 寛地
👇
次回開催が決まり次第、優先的にご案内します
ウェイティングリストに登録する
こんな方におすすめ
Recommend
[ 01 ]
👇
こんな方におすすめ
👇
エンジニアに「こういう動きにしたい」をうまく伝えられずもどかしい。
AIを使ってプロトタイプを自分の手で動かせるようになりたい。
デザインシステムをFigma上だけでなく、コードでも組めるようになりたい。
動画学習だと後回しにしてしまい、完走できないことが多い。
Courses
講座紹介
[ 02 ]
週1回/全20回のオンラインライブ講座
授業期間
2026年6月3日〜2026年10月21日
毎週水曜日：20:00〜22:00（2時間）
料金
99,800円
(税込)
使用ツール
基本ツール
Mac PC（原則）
開発環境
Visual Studio Code
GitHub
AIコーディングツール（Claude / Cursor等）
デザイン
Figma
授業概要
この講座では、全20回でデザイナーが「コードを読める」「デザインシステムを自分で組める」ようになることを目指します。実践形式でFigmaのコンポーネントを動くコードに変える開発フローを解説し、リアルタイムで講師のフィードバックを受けながら、独学では気づきにくい「現場での書き方」を効率的に学べます。
講座全体でAIツールも使用し、AIが出力したコードの「どこが合っていて、どこが怪しいか」を自分で判断できるようになることがゴールです。
学ぶ技術
HTML
CSS
JavaScript
TypeScript
React
Git
Linux
Storybook
Claude
Claude Code
Cursor
デザイン基礎
全てのデザイン土台となる基礎集
全員必修でやっています。18レッスン / 7課題
課題例：デザイン史
課題例：タイポグラフィ
Webデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。26レッスン / 5課題
課題例：サイト模写
課題例：コーポレートサイト
UIUXデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。16レッスン / 6課題
課題例：UX日記
課題例：オリジナルアプリ制作
グラフィックデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。26レッスン / 9課題
課題例：パッケージデザイン
課題例：ロゴデザイン
Figma講座
Figmaの操作をマスターするための動画講座です。基本操作から応用まで。
50レッスン
レッスン例：
レッスン例：
Studio講座
Studioの操作をマスターするための動画講座です。基本操作から応用まで。
40レッスン
レッスン例：
レッスン例：
実装理解
デザイナー向け実装理解のカリキュラム。エンジニアがメンターにつきます。
フロントエンド / iOSアプリ開発
フロンエンド学習の例
iOSアプリ開発の例
実務伴走
実務案件を課題とし、メンターと二人三脚で進めることができます。
Web / グラフィック / UIUX案件に対応可
YouTubeカバー画像案件の例
ウェディングサイト案件の例
こんなUIが実装できるように
レシピサイト
料理の作り方を、写真と手順で紹介するメディアサイト。
イベント情報サイト
展示やイベントの情報を、日時や場所と一緒にまとめて伝えるサイト。
ニュースメディア
記事やコラムを、カテゴリごとに読ませるウェブマガジン。
SaaSダッシュボード
オンラインサービスの機能を紹介するLPと、管理画面を合わせたサイト。
ECサイト
商品を陳列して、オンラインで買い物ができるショップサイト。
ブログメディア
記事を時系列で発信する、個人や団体のブログ。
コーポレートサイト
会社の情報や取り組みを、まとめて伝える企業の顔となるサイト。
ポートフォリオ
自分や会社の制作実績を、作品中心に見せるサイト。
デザイン基礎
全てのデザイン土台となる基礎集
全員必修でやっています。18レッスン / 7課題
課題例：デザイン史
課題例：タイポグラフィ
Webデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。26レッスン / 5課題
課題例：サイト模写
課題例：コーポレートサイト
UIUXデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。16レッスン / 6課題
課題例：UX日記
課題例：オリジナルアプリ制作
グラフィックデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。26レッスン / 9課題
課題例：パッケージデザイン
課題例：ロゴデザイン
Figma講座
Figmaの操作をマスターするための動画講座です。基本操作から応用まで。
50レッスン
レッスン例：
レッスン例：
Studio講座
Studioの操作をマスターするための動画講座です。基本操作から応用まで。
40レッスン
レッスン例：
レッスン例：
実装理解
デザイナー向け実装理解のカリキュラム。エンジニアがメンターにつきます。
フロントエンド / iOSアプリ開発
フロンエンド学習の例
iOSアプリ開発の例
実務伴走
実務案件を課題とし、メンターと二人三脚で進めることができます。
Web / グラフィック / UIUX案件に対応可
YouTubeカバー画像案件の例
ウェディングサイト案件の例
講師紹介
Instructor
[ 03 ]
松本 寛地 / まつもと かんち
フロントエンドエンジニア。普段は物流向けのSaaSを開発している会社でフロントエンド開発に携わる。React / TypeScript を使ったプロダクト開発が専門で、デザインシステムの設計・構築を日常的に行っている。NOT DESIGN SCHOOLではデザイナー向けのフロントエンドメンタリングも担当。
講師の実績
• NOT DESIGN SCHOOL メンター（デザイナー向けフロントエンド指導）
• フロントエンドエンジニア歴 約7年
• デザインシステムの実装
講座のポイント
少人数制(10名)で個別フィードバック
受講者は最大10名までの少人数制。
一人ひとりの制作課題に向き合いながら、疑問や不安をその場で解消できるので、「手厚い」「自分に合った」学びを求めたい方に最適です。あなた専用のアドバイスで、学びもぐっと深まります。
強制力があるから挫折しにくい
講座は週1回、決まった曜日・時間にオンラインで開催します。
スケジュールが固定されるため自然と習慣化でき、学習のペースを保ちやすくなります。
締め切りの効果と仲間の存在も継続の原動力になり、最後まで学びを続けられる環境です。
制作しながら学ぶ実践型カリキュラム
講義を聞くだけでなく、実際に手を動かして制作を行います。
リアルタイムで課題に取り組み、つまずいたポイントもすぐ解決できます。学習と制作を同時に進行するため、身につくスピードが速い実践型のカリキュラムを採用しています。
現役フロントエンドエンジニアが伴走
講師は物流SaaSの開発現場で、日々コードを書いているエンジニア。デザインシステムの設計・構築も実務で手がけています。
本や教材ではわかりにくい実務の肌感覚を、そのまま持ち帰れます。
カリキュラム内容
Phase 1：開発に必要な基本ツールを使える状態になる
第1週
2026年6月3日(水)
20:00〜22:00
オリエンテーションと環境構築
開発に必要なツールの準備と設定
第2週
2026年6月10日(水)
20:00〜22:00
ターミナル（Linuxコマンド）とGit/GitHub
基本コマンドの操作とコードの履歴管理・共有
第3週
2026年6月17日(水)
20:00〜22:00
HTML/CSSとDevTools
Webサイトの構造理解と、コードを綺麗に保つ仕組み
第4週
2026年6月24日(水)
20:00〜22:00
JavaScript入門①
ブラウザで動きをつける
第5週
2026年7月1日(水)
20:00〜22:00
JavaScript入門②
JavaScriptで小さなアプリを作る
Phase 2：デザインをコードで組み立てる力を身につける
第6週
2026年7月8日(水)
20:00〜22:00
TypeScript入門①
基本の型を書く
第7週
2026年7月15日(水)
20:00〜22:00
TypeScript入門②
JavaScriptで作ったアプリをTypeScriptで書き直す
第8週
2026年7月22日(水)
20:00〜22:00
React基礎①
JSXとコンポーネントを書く
第9週
2026年7月29日(水)
20:00〜22:00
React基礎②
表示を切り替える・一覧を並べる
第10週
2026年8月5日(水)
20:00〜22:00
React応用①
ユーザーの操作で画面を変える
第11週
2026年8月19日(水)
20:00〜22:00
React応用②
データを取得して表示する
第12週
2026年8月26日(水)
20:00〜22:00
React応用③
ページを行き来する
Phase 3：実務で使える設計力を身につける
第13週
2026年9月2日(水)
20:00〜22:00
デザインのルール化
色・文字・余白などの共通ルール設計
第14週
2026年9月9日(水)
20:00〜22:00
コンポーネント設計①
再利用できるパーツを設計する
第15週
2026年9月16日(水)
20:00〜22:00
コンポーネント設計②
作ったパーツのカタログを作る
Phase 4：自らデザインしたものを実装し、公開できる状態にする
第16週
2026年9月23日(水)
20:00〜22:00
設計の確認
作るものの設計を見直し、実装の見通しを立てる
第17週
2026年9月30日(水)
20:00〜22:00
実装スタート
実装を始めながら疑問を解消する
第18週
2026年10月7日(水)
20:00〜22:00
制作①
実装を進める
第19週
2026年10月14日(水)
20:00〜22:00
制作②
仕上げとフィードバック
第20週
2026年10月21日(水)
20:00〜22:00
公開・成果発表・ふりかえり
成果物の公開とプレゼンテーション
※カリキュラム内容は受講者の進捗に合わせて柔軟に変更します
受講特典
全20回アーカイブ動画付き
今回のフロントエンド道場で実施する全20回の講義を後日視聴可能です。復習や理解不足の補完にも活用できます。
「リアルタイム参加＋後から復習」の両軸で、学びを確実にスキルへと変えられます。
※画像はイメージです。
講師からのメッセージ
MESSAGE
生きた知識をお伝えします！
普段は物流向けのSaaSを提供している会社で、フロントエンドエンジニアとして働いています。NOT DESIGN SCHOOLでデザイナーの方にメンタリングをしてきた中で、デザイナーとエンジニアって考えていることが意外と近いんだなと感じることが多くありました。この講座で、その近さをもっと実感してもらえたらいいなと思っています。
AIの力を借りれば、コードを書くハードルはかなり下がりました。ただ、AIに任せっきりだと「なんか動いてるけど、何が起きてるかわからない」になりがちです。自分でコードを読めて、直せて、判断できる状態を目指して一緒にやっていきましょう。
コース概要
Courses outline
[ 04 ]
週1回/全20回のオンラインライブ講座
授業期間
2026年6月3日〜2026年10月21日
毎週水曜日：20:00〜22:00（2時間）
料金
99,800円
(税込)
使用ツール
基本ツール
Mac PC（原則）
開発環境
Visual Studio Code
GitHub
AIコーディングツール（Claude / Cursor等）
デザイン
Figma
授業概要
この講座では、全20回でデザイナーが「コードを読める」「デザインシステムを自分で組める」ようになることを目指します。実践形式でFigmaのコンポーネントを動くコードに変える開発フローを解説し、リアルタイムで講師のフィードバックを受けながら、独学では気づきにくい「現場での書き方」を効率的に学べます。
講座全体でAIツールも使用し、AIが出力したコードの「どこが合っていて、どこが怪しいか」を自分で判断できるようになることがゴールです。
学ぶ技術
HTML / CSS
JavaScript
TypeScript
React
Git
Linux
Storybook
学ぶ技術
HTML
CSS
JavaScript
TypeScript
React
Git
Linux
Storybook
Claude
Claude Code
Cursor
デザイン基礎
全てのデザイン土台となる基礎集
全員必修でやっています。18レッスン / 7課題
課題例：デザイン史
課題例：タイポグラフィ
Webデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。26レッスン / 5課題
課題例：サイト模写
課題例：コーポレートサイト
UIUXデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。16レッスン / 6課題
課題例：UX日記
課題例：オリジナルアプリ制作
グラフィックデザイン
全てのデザイン土台となる基礎集
全員必修でやっています。26レッスン / 9課題
課題例：パッケージデザイン
課題例：ロゴデザイン
Figma講座
Figmaの操作をマスターするための動画講座です。基本操作から応用まで。
50レッスン
レッスン例：
レッスン例：
Studio講座
Studioの操作をマスターするための動画講座です。基本操作から応用まで。
40レッスン
レッスン例：
レッスン例：
実装理解
デザイナー向け実装理解のカリキュラム。エンジニアがメンターにつきます。
フロントエンド / iOSアプリ開発
フロンエンド学習の例
iOSアプリ開発の例
実務伴走
実務案件を課題とし、メンターと二人三脚で進めることができます。
Web / グラフィック / UIUX案件に対応可
YouTubeカバー画像案件の例
ウェディングサイト案件の例
よくある質問
FAQ
[ 05 ]
注意事項
Notice
[ 06 ]
01
対象者について
・
デザイン業務経験がある方を対象としています。(Figmaでのデザイン制作経験推奨)
・
カリキュラムの性質上、デザイン完全初心者の方はご受講いただけません。
Progate(HTML &CSS入門・JavaScript入門)レベルの事前学習を推奨します。授業でもHTML/CSS/JavaScriptは学んでいくのですが、もし可能でしたら有料プランに加入してHTML/CSS/JavaScriptのコースを事前に学んでいただけるとよりコースの内容の理解が進みます。02
定員と申込締切
・
定員は10名となります。応募者多数の場合は、主催側にて受講者を選考いたします。
・
学びに前向きな方を優先するため、選考結果によってはご参加いただけない場合があります。
03
受講環境
・
講座を快適に受講いただくために、以下をご準備ください。
安定したインターネット環境／PC（原則Mac）04
使用ツール・アカウント
・
メインで使用するのは Visual Studio Code / GitHub / Figma です。
・
講座全体を通して AIコーディングツール(Claude / Cursor等) を使用します。
05
録画・録音の禁止
・
提供するアーカイブ以外での録画・録音は禁止とさせていただきます。
06
成果物について
・
講座で制作した作品の著作権は受講者に帰属となります。
・
公開の際には、講座名・講師名を紹介いただく場合がございます。
07
お支払いについて
・
受講料は、クレジットカード（VISA / MasterCard / JCB / AMEX / Diners Club）または銀行振込でお支払いいただきます。
・
お申し込み確定後、原則として5日以内にお支払いをお願いいたします。
08
キャンセル・返金について
・
少人数制講座のため、講座開始後のキャンセル・返金は原則としてお受けできません。
・
やむを得ない事情がある場合は、事務局までご相談ください。