スキルセットと新ロードマップ

1. デザイン・設計思考（大枠 ①）

目的

• 使いやすい
• 迷わない
• 意図が伝わる

主な内容

• UI / UX 基礎
• 情報設計（IA）
• ワイヤーフレーム
• ユーザーフロー
• デザインシステム
• コンポーネント設計

主なツール

• Figma（UI デザイン・画面設計）
• FigJam / Miro（構成・思考整理）
• Notion（要件整理・仕様）
• Google Slides / Docs（説明・共有）
• Adobe Illustrator（情報整理・簡易ビジュアル設計）
• Adobe Photoshop（画像調整・UI 検証用モック）

2. フロントエンド基礎（形にする力）

目的

• デザインを正確に再現する
• レスポンシブ・動きを理解する
• 実装を意識したデザインができる

主な内容

• マークアップ
• スタイリング
• 基本的な UI 動作

技術・ツール

• HTML（セマンティック構造）
• CSS（Flex / Grid / Responsive）
• JavaScript（DOM 操作・簡単な制御）
• VS Code
• Chrome DevTools

補助技術

• Sass
• Tailwind CSS
• CSS Animation / GSAP

3. Web 開発・バックエンド基礎（仕組み理解）

目的

• エンジニアと会話できる
• 実装できないデザインを作らない
• 制作・開発の制約を理解する

主な内容

• Web の仕組み（HTTP / HTTPS）
• サーバーとデータの流れ
• API の概念
• CMS の構造
• セキュリティ基礎理解

技術・ツール（理解レベル）

• PHP / Node.js
• MySQL（CRUD 基礎）
• WordPress（テーマ構造・管理画面）
• Firebase / Supabase（BaaS）
• Git / GitHub

4. イラスト（差別化・表現力）

役割

• 世界観づくり
• ブランディング
• 視覚的な差別化

主なツール

• Adobe Illustrator
• Photoshop
• Clip Studio Paint
• Procreate
• Adobe Animate
• Live2D（Cubism）

Web 向けスキル

• SVG 書き出し
• データ軽量化（容量意識）
• UI になじむ描き方
• キャラクターアニメーション基礎

5. その他（実務遂行力）

開発・制作環境

• Windows 11
• Ubuntu（WSL2）
• UNIX 系環境操作
  • Shell Script
  • 正規表現
  • vim
  • sed / awk
  • git

デザイン補助

• 配色理論
• フォント知識
• アイコン活用

運用・品質

• SEO 基礎
• アクセシビリティ
• レスポンシブ設計
• パフォーマンス意識

コミュニケーション・進行

• Slack / Discord
• タスク管理（Backlog / Trello 等）
• ドキュメント整理・説明力