テスト
== スキル概要 ==
利用中のスキルと適正求人
| 業務 | 主な技術・ツール | レベル |
|---|---|---|
| 【MUST】 | ||
| 業務システムのUI/UX設計 | Figma、UX設計、情報設計、アクセシビリティ | ★★★★★ |
| 要件定義 | 要件整理、ユーザーストーリー、業務フロー、仕様整理 | ★★★★☆ |
| ジャーニーマップの理解 | Figma、FigJam、UXリサーチ、カスタマージャーニー | ★★★☆☆ |
| ワイヤーフレーム作成z | Figma、FigJam、UI設計 | ★★★★★ |
| UIデザイン | Figma、Figjam、Illustrator、Photoshop、デザイン原則 | ★★★★★ |
| プロトタイプ | Figma Prototype、Figma Make、Adobe XD、Local構築 （いずれか） | ★★★★☆ |
| アジャイル開発への参加 | Jira/Backlog系 | ★★★★☆ |
| エンジニアとの協業 | HTML、CSS、JavaScript | ★★★★★ |
| フロントエンド理解 | HTML / CSS / JavaScript | ★★★★★ |
| デザインシステムの理解 | Figma、Atomic Design、コンポーネント設計 | ★★★★ |
| アイコン・ロゴ制作 | Illustrator、Figma、Photoshop | ★★★★★ |
| アニメーション | FigmaAnime、LottieLab、After Effects等（いずれか） | ★★★☆☆ |
| 社内プレゼン資料 | Figma Slides、PowerPoint | ★★★★★ |
| AIを活用したシステム開発 | ChatGPT、Gemini、Claude等、AIコーディング等（いずれか） | ★★★☆☆ |
| AIによる業務効率化 | AIエージェント、生成AI、ワークフロー自動化 | ★★★☆☆ |
| AIを使った静的サイト構築 | HTML/CSS/JS | ★★★★☆ |
| 【BETTER】 | ||
| ※見出しは上記と重複。技術ツールに差分あり | ||
| AIを使った動的サイト構築 | React/Next.js | ★☆☆☆☆ |
| デザインシステム構築 | Storybook | ★☆☆☆☆ |
| React系開発 | React.js、Next.js | ★☆☆☆☆ |
| エンジニアとの協業 | Git、GitHub | ★★★☆☆ |
| デザインシステムの理解 | Storybook | ★☆☆☆☆ |
== 各技術/ツールの詳細 ==
【Figma】
FigJam
Figma AI
Figma slide
Wireframe
Prototype
Auto Layout
Components
Variants
Variables
Design Tokens
–>color、typography、layout
UX設計
Information Architecture
User Journey
→単に「Figmaで画面を作れる」ではなく、業務システムの複雑な情報を整理してUIに落とす能力
【HTML / CSS / JavaScript】
HTML
├─ Accessibility
└─ SEO基礎
CSS
├─ Flexbox
├─ Grid
├─ Responsive
├─ Animation
├─ CSS Variables
└─ Design Tokens
JavaScript
├─ Event
→デザイナーとしてコードを書くというより、エンジニアと同じ言葉でUI実装を議論できるレベル
【AI】
–生成AI
ChatGPT
Gemini
Claude
–AIコーディング
Claude Code
GitHub Copilot
–UI生成・デザイン
Figma AI
Figma Make
生成AIによるUI生成（Stitch等）
画像生成AI
–AI × 自動化
Gemini Enterprise
LLM
→AIを使ってデザイン業務そのものを効率化
まとめ_________________________________
【UX / Design】
Figma
FigJam
Figma Slides
UX Research
Information Architecture
User Journey
Wireframe
Prototype
【UI / Design System】
Figma Components
Variants
Variables
Design Tokens
Atomic Design
Accessibility
【Frontend】
HTML
CSS
JavaScript
【Development】
Git
GitHub
【AI】
ChatGPT
Claude Code
Gemini
【Creative】
Illustrator
Photoshop
Animation
➡︎MUST_________________________________
【デザイン】
Figma
UI/UX
Wireframe
Prototype
UX設計
Illustrator
Photoshop
【Web】
HTML
CSS
JavaScript
レスポンシブ
アクセシビリティ
【業務】
要件定義
業務フロー理解
エンジニアとの協業
複数案件の同時並行
早期対応とレスポンス
臨機応変な修正対応とMTG
➡︎BETTEER_________________________________
React
Design Token
Atomic Design
Git / GitHub
AI Agent
AIを使った開発
