PAGE 04

使うツールを知る

"全部覚える" は不要。
プロジェクトに応じて組み合わせる感覚が掴めれば OK。

ツール全体マップ

フェーズ別に "主要どころ" だけ並べた一覧図。研修内で実際に触れるものは太字にする予定。

ポイントは「全部できるツール」を探すのではなく、フェーズごとに最短で前に進む組み合わせを作ること。慣れてきたら、自分の得意領域に合わせて入れ替えれば十分。

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 は「共同編集」「コメント」「コンポーネント化」が強く、設計→レビュー→修正の往復に向く。Canva はテンプレ運用や社内共有に強く、役割分担で使うと効く。

ツール強み向いている案件料金
Figmaブラウザで動作／リアルタイム共同編集／業界標準中〜大規模Web、チーム制作無料〜
Adobe XDAdobe 連携がスムーズ既存 Adobe ユーザー（今後縮小）CCプラン
Canvaテンプレ豊富／非デザイナーでも扱えるSNS・社内資料・軽めのLP無料〜

CMS：WordPress / Wix / STUDIO

"クライアントが自分で更新したい" という要望に応えるのが CMS の役割。

更新頻度が高いなら CMS を選ぶ価値がある。逆に LP など更新が少ないものは静的 HTML でも十分。最初に「誰が・どの頻度で更新するか」を確認すると選定が早い。

CMS特徴向いている案件デザイナー関与度
WordPressシェア No.1・プラグイン豊富・自由度高中〜大規模・長期運用テーマカスタマイズに PHP 知識がやや要る
Wixドラッグ＆ドロップで完結小規模サイト・個人事業主コード不要（Wix 内で完結）
STUDIO日本製／ノーコード／デザイン自由度高LP・スタートアップ・ブランドサイトFigma 感覚で作れる（デザイナー適性高）

コミュニケーション：Slack / Notion / Google Workspace

制作スキル以上に、"情報を整理して共有する力" で評価されることが多い。

Slack（即応）・Notion（仕様/タスク）・Google Drive（共有素材）のように、用途で使い分けるだけでトラブルが減る。「どこに何があるか」を決めるのもディレクションの一部。

ツール主用途備考
Slackチャット・ファイル共有・通知制作会社・スタートアップで主流
Notion議事録・仕様書・ナレッジベース共有 URL を渡すだけで閲覧 OK
Google Workspace資料作成・メール・カレンダー企業クライアントとの接続に強い

納品・公開：Netlify / GitHub Pages / レンタルサーバー

"どこに置くか" で納品方法が変わる。クライアントが用意しているサーバーに合わせることも多い。

静的サイト（HTML/CSS/JS）なら Cloudflare Pages / Netlify が最短。WordPress ならレンタルサーバーが必要、といったように「何を動かすか」で選択肢が決まる。

サービス特徴向いているケース
Cloudflare Pages静的サイトを Git 連携で自動公開／高速 CDN／無料枠が広い小〜中規模・本サイトもこれを採用
NetlifyGitHub 連携で自動公開／SSL 無料／フォーム機能も内蔵静的 LP・スタートアップサイト
GitHub PagesGitHub リポジトリからそのまま公開ポートフォリオ・ドキュメントサイト
レンタルサーバーさくら・ロリポップ・エックスサーバー等／WordPress 相性◎中小企業サイト・歴史的な WP 案件

ヒント：本サイト「How to Web デザイナー」も Cloudflare Pages にデプロイ予定です。教材自体が "実例" として機能するように構成しています。

🧰
ツール選びのコツ

ツールは「全部使いこなす」必要はありません。自分の担当フェーズで使うものだけ、しっかり触れるようにしましょう。最初はFigma（デザイン）とNotion（情報整理）の2つで十分です。