How to Webデザイナー
PAGE 04 / page04_tools.html Phase 2 ワイヤーフレーム
PAGE 04

使うツールを知る

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

ツール全体マップ

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

📌 【ツールマップ 実装注釈】 要確認・仮テキスト。最終版では研修で扱うツールを太字&色付きにして強調。 新ツール登場に備えて、本マップは年 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 XDAdobe 連携がスムーズ既存 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 PagesGitHub リポジトリからそのまま公開ポートフォリオ・ドキュメントサイト
レンタルサーバーさくら・ロリポップ・エックスサーバー等/WordPress 相性◎中小企業サイト・歴史的な WP 案件