ツール全体マップ
フェーズ別に "主要どころ" だけ並べた一覧図。研修内で実際に触れるものは太字にする予定。
📌 【ツールマップ 実装注釈】
要確認・仮テキスト。最終版では研修で扱うツールを太字&色付きにして強調。
新ツール登場に備えて、本マップは年 1 回のメンテ想定。
DESIGN
デザインツール
- Figma
- Adobe XD
- Canva
CMS / PUBLISH
公開・CMS
- WordPress
- Wix
- STUDIO
COMM
コミュニケーション
- Slack
- Notion
- Google Workspace
DEPLOY
納品・公開
- Netlify
- GitHub Pages
- レンタルサーバー
デザインツール:Figma / Adobe XD / Canva
迷ったら Figma 一択。Adobe XD は今後縮小、Canva は "非デザイナーとの共有" に強い。
📌 【比較表 実装注釈】
要確認・仮テキスト。"こんな案件ならこのツール" という選び方の指針を本公開版で追加。
| ツール | 強み | 向いている案件 | 料金 |
|---|---|---|---|
| Figma | ブラウザで動作/リアルタイム共同編集/業界標準 | 中〜大規模Web、チーム制作 | 無料〜 |
| Adobe XD | Adobe 連携がスムーズ | 既存 Adobe ユーザー(今後縮小) | CCプラン |
| Canva | テンプレ豊富/非デザイナーでも扱える | SNS・社内資料・軽めのLP | 無料〜 |
CMS:WordPress / Wix / STUDIO
"クライアントが自分で更新したい" という要望に応えるのが CMS の役割。
📌 【CMS 実装注釈】
要確認・仮テキスト。料金・初期費用・コード介入の必要度の 3 軸で比較する列を追加予定。
| CMS | 特徴 | 向いている案件 | デザイナー関与度 |
|---|---|---|---|
| WordPress | シェア No.1・プラグイン豊富・自由度高 | 中〜大規模・長期運用 | テーマカスタマイズに PHP 知識がやや要る |
| Wix | ドラッグ&ドロップで完結 | 小規模サイト・個人事業主 | コード不要(Wix 内で完結) |
| STUDIO | 日本製/ノーコード/デザイン自由度高 | LP・スタートアップ・ブランドサイト | Figma 感覚で作れる(デザイナー適性高) |
コミュニケーション:Slack / Notion / Google Workspace
制作スキル以上に、"情報を整理して共有する力" で評価されることが多い。
📌 【コミュニケーションツール 実装注釈】
要確認・仮テキスト。社内利用ツールに合わせるのが基本。クライアントが別ツール指定してきた場合のマナー(Chatwork / Teams 等)も最終版で言及。
| ツール | 主用途 | 備考 |
|---|---|---|
| Slack | チャット・ファイル共有・通知 | 制作会社・スタートアップで主流 |
| Notion | 議事録・仕様書・ナレッジベース | 共有 URL を渡すだけで閲覧 OK |
| Google Workspace | 資料作成・メール・カレンダー | 企業クライアントとの接続に強い |
納品・公開:Netlify / GitHub Pages / レンタルサーバー
"どこに置くか" で納品方法が変わる。クライアントが用意しているサーバーに合わせることも多い。
📌 【デプロイ 実装注釈】
要確認・仮テキスト。デザイナー単体で扱うのは現実的ではない領域なので、「エンジニアと会話できる最低限」 を目的にする。
| サービス | 特徴 | 向いているケース |
|---|---|---|
| Netlify | 静的サイトを GitHub 連携で自動公開/SSL 無料 | 小〜中規模・制作案件の即時公開 |
| GitHub Pages | GitHub リポジトリからそのまま公開 | ポートフォリオ・ドキュメントサイト |
| レンタルサーバー | さくら・ロリポップ・エックスサーバー等/WordPress 相性◎ | 中小企業サイト・歴史的な WP 案件 |