AIを活用してデザインする。パソコン教室 for designersを開催しました！
デザイナーがフロントエンドの基礎知識とAIの活用方法を学び、制作スピードの向上を目指す「パソコン教室 for designers」を開催しました。
社内のデザイナーを対象に、フロントエンドエンジニアの世界を1日かけて体験するワークショップです。
デザインエンジニアのusuiさんが講師となり、全体のカリキュラムを設計しています。
🛠 第1回：フロントエンド環境を作ろう
terminal, gitの理解。開発に必要な道具を揃える。
🧩 第2回：paletteが動くMockupを触ってみよう
vibe coding w/LLM。デザインシステムのコンポーネントを動かしてみる。
🌐 第3回：Webを知ろう
HTML, JS, CSS, Tailwind CSS。つくったものが何でできているかを知る。
🏷 第4回：正しいマークアップを知ろう
セマンティクスとa11y。支援技術で操作し、必要なマークアップを知る。
📏 第5回：デバッグできるようになろう
DevTools, Lighthouseを触り、つくったものを客観的に確認する。
🔄 第6回：LLMへのフィードバック
調査→修正→確認→PR→マージ。問題を見つけて直し、リリースする。
まずは「土台」をつくる
最初に取り組んだのは、開発に必要な環境構築です。
コマンドラインツールのXcode、ターミナルツールのCMUX、パッケージマネージャーのHomebrew、GitHubとの連携に必要なSSHキーの設定など。つまずいた部分をひとつずつ解消しながら、順番に進めていきました。
環境が整ったら、GitHubからリポジトリ（プロジェクトのファイル一式）をgit cloneして、自分のPCに持ってきます。ブラウザにローカル環境の画面が表示されたら、準備完了です。
続いて学んだのが、Gitの基本概念です。
開発者が日常的に行う作業は、ブランチを切る → コミットする → プルリクエストを送る → マージする、大きくはこの4つです。特にコミットメッセージは、後から人間やAIが変更の文脈を読み解くための「記録」になるので、丁寧に書く習慣がチーム開発では欠かせません。
AIと「一緒に」つくる
後半は、いよいよAIコードエディタ「Cursor」を使ったバイブコーディングに挑戦です。
今回はデザイナー向けということで、noteのデザインシステムと連携しながら進めていきました。
クローンしたリポジトリには「note vibes」というプラグインがあらかじめ含まれていて、MCPを有効にすることで、AIがnoteのコンポーネントやデザイントークンを参照できるようになります。
既存のnoteのページをAIに再現してもらおうとしたときに、AIがそのページの概念を理解しておらず、思った通りに再現されないケースもありました。素材を正しく渡すこと、コンテキストをしっかり提供することなど、AIとうまく協働するコツを実践しながら学んでいきました。
Cursorでデザインした架空の機能たち
最後に
4月28日(月)に「デザイナーキャリアナイト」というイベントを開催します。
AIの進化や組織の変化のなかで、デザイナーとしてのキャリアをどう描いていくのか。登壇者それぞれのデザイナージャーニーを振り返りながら、ターニングポイントや決断の背景を掘り下げていく、パネルディスカッション形式のイベントです。
前回のデザイナーキャリアナイトの様子はこちらをご覧ください。
執筆：zackie
