NOT DESIGN SCHOOL(ノットデザインスクール)

デザイナーのためのClaude Code実践ガイド|デザイナーが知るべき使い方・活用パターン・Figma MCP連携まで

access_time

2026/05/14

「Claude Codeって名前は聞くけど、エンジニア向けのツールでしょ?」「ターミナル?黒い画面?無理…」、こう思っている駆け出しデザイナーは多いです。

でも結論から言うと、Claude Codeはデザイナーこそ使うべきツールです。日本語で指示するだけで、LPのコーディング、Figmaデザインの実装、ファイル整理、ドキュメント生成まで、デザイナーの仕事の大半を一段引き上げてくれます。

NOT DESIGN SCHOOL校長のもちは、毎日Claude Codeを仕事で使い倒しています。本記事では、もち本人の使用実感をベースに、駆け出しデザイナーがClaude Codeで何ができるか、どう始めるか、どんな実践パターンがあるかを徹底解説します。

なお、Claude本体の概要・3大AI比較・料金プランは別記事「駆け出しデザイナーのためのClaude入門」で詳しく解説しています。本記事はAI×実装シリーズ#3として、Claude入門の自然な続編という位置づけです。

関連動画(NOT DESIGN SCHOOL公式): 「AI、正直よくわからん…」から始める Claude超入門講座【後編】


Claude Codeとは?駆け出しデザイナーが知るべき基本

Claude Codeは、Anthropicが提供するAIコーディングエージェントです。簡単に言うと、ターミナル(黒い画面)で動くAIアシスタントです。

「ターミナル」「コーディング」と聞くと駆け出しデザイナーは身構えますが、心配は不要です。実際に打つのは普通の日本語だからです。コマンドを覚える必要はほぼありません。(コマンド覚えると便利なことも多いけど、それは中級者向け!)

Claude Codeでできること

領域

できること

ファイル操作

ファイルの作成、編集、リネーム、削除、フォルダ分け

コード生成

LPやWebサイト、Reactコンポーネント、CSSアニメーションの自動生成

文章処理

議事録の要約、ドキュメント生成、Markdown整形

外部サービス連携

Figma、Slack、Notion、Google Sheets、Freeeなど(MCP連携)

自動化

スクリプト実行、定期作業の自動化

デザイン補助

Figmaデザインの実装、画像のリサイズ、ファイル変換

これらすべてを、日本語の指示文1つで自律的に実行してくれます。

GUI(マウス操作)とCLI(コマンド操作)の違い

普段使うアプリは、マウスでポチポチクリックして操作するGUI(Graphical User Interface)です。

一方Claude Codeは、文字を打って操作するCLI(Command Line Interface)で動きます。これがデザイナーにとっての心理的ハードルですが、実際に打つのは日本語なので、慣れれば1日でマスターできます。

ターミナルが嫌なら、CursorVSCodeといったIDE(統合開発環境)経由でも呼び出せます。もち本人は普段Cursor経由でClaude Codeを使っています。


なぜ今デザイナーがClaude Codeを使うべきか|AI時代の上流デザイナー必修ツール

NOT DESIGN SCHOOLは「AI時代の上流デザイナー育成」というポジショニングを掲げています。その根本にある危機感を、最初に共有しておきます。

2026年現在、デザインの「手を動かす部分」はAIに肩代わりされる時代

作業

2024年以前

2026年現在

バナー1枚作成

手作業30分〜1時間

AIで5分(叩き台)

LPワイヤーフレーム

手作業半日

AIで30分

Reactコンポーネント

手作業1日〜

AIで1時間

ロゴラフ案

手作業1時間

AIで5分(叩き台)

議事録要約

手作業30分

AIで1分

このとき問題になるのは、「手を動かすだけのデザイナー」の価値が急速に下がることです。

Claude Codeはデザイナーが「越境」するための武器

これまでデザイナーは、Figma・Photoshop・Illustratorで手を動かす「実装の手前」までが守備範囲でした。実装はエンジニアの領域、というのが暗黙のルールです。

しかしClaude Codeを使えるようになると、デザイナーが実装まで持っていく力を獲得できます。

  • LPの実装まで自分でやれる

  • プロトタイプを動くものとして納品できる

  • 既存サイトのリデザインを実装込みで提案できる

  • 上流工程(要件定義・サービス設計)に関わる機会が増える

これはまさに「AI時代の上流デザイナー」が獲得すべきスキルセットです。NOT DESIGN SCHOOLが本ツールをカリキュラムに組み込んでいる理由もここにあります。

2026年は「使える/使えない」の分岐点

半年前まで、Claude Codeを使えなくても問題ありませんでした。

しかし2026年5月現在、「使えるデザイナー」と「使えないデザイナー」の差が指数関数的に開いています。1日でできることが、桁違いになるからです。

今始めるのは、まだ早い側。半年後、1年後にはもう手遅れになっている可能性があります。「始めるなら1日でも早い方がいい」ということを覚えておいてほしいです。


Claude Codeの料金プラン|Claude Pro/Maxとの関係【2026年5月時点】

Claude Codeを使うには、Pro以上のClaude有料プランが必要です。無料プランでは使えないので注意してください。

料金プラン一覧(2026年5月最新)

プラン

月額

Claude Code利用

デフォルトモデル

推奨ユーザー

Free

無料

❌ 利用不可

Sonnet(制限あり)

お試し(Claude Codeは使えない)

Pro

$20/月

⭕️ 利用可

Sonnet 4.6

個人デザイナー・駆け出し向け

Max 5x

$100/月

⭕️ Pro比5倍利用

Opus 4.6

毎日ヘビーに使う本気ユーザー

Max 20x

$200/月

⭕️ Pro比20倍利用

Opus 4.6

複数エージェント並行運用するパワーユーザー

Team

$30/人/月

⭕️ チーム共有

Sonnet 4.6

チーム導入向け

API

従量課金

⭕️ トークン単位

選択可(Opus 4.7など)

プロダクト組み込み向け

モデルの性能差

モデル

特徴

価格(API・per Mトークン)

Opus 4.7

最高性能・複雑な推論向け

$5(入力)/$25(出力)

Sonnet 4.6

バランス型・Pro標準

$3/$15

Haiku 4.5

高速・低コスト

$1/$5

Maxプラン契約者はOpus 4.6がデフォルトで使えるので、性能面でもメリットがあります。

駆け出しデザイナーは「まず Pro $20」から

もちのおすすめは、まずPro $20プランで始めることです。急にMaxプランに登録する必要はありませんのでご安心を。最初はProで十分です。

理由:

  • 月20ドル(約3,000円)でClaude Codeをフル活用できる

  • 個人デザイナーの仕事量ならProプランの上限で十分

  • 慣れてきて「もっと使いたい」と感じたらMax 5xに上げる

毎日ヘビーに使うようになり、トークンの上限に達して困るようになってからMaxに切り替えるのが現実的です。

トークン消費節約のコツ

  • 必要な部分だけ切り出して読み込ませる(大規模ファイルは要点抽出)

  • 不要な会話履歴はリセットして新しいセッションで作業

  • 1セッション内で関連作業をまとめて指示する


Claude Codeの始め方|インストール〜初回起動の3ステップ

Claude Codeの導入は驚くほど簡単です。3ステップで始められます。

Step 1|Anthropicの有料プランに登録

Claude.comからPro以上のプランに登録します。Mac/Windowsどちらでも対応しています。

Step 2|ターミナルでClaude Codeをインストール

ターミナルを開いて(Macなら⌘+スペースで「ターミナル」と検索)、以下の公式サイトのインストールコマンドをコピー&ペーストして実行します。

curl -fsSL https://claude.ai/install.sh | bash

インストール完了後、claude というコマンドを打つと、Claude Codeが起動します。

claude

こんな画面が出たら起動成功です!

Step 3|CLAUDE.mdファイルで設定する

まずはじめに、Claude Codeの設定ファイル「CLAUDE.md」を作って、自分専用のルールを書き込んでみましょう。

例:CLAUDE.mdの中身
- 常に丁寧な日本語で回答する
- 駆け出しデザイナー向けに専門用語は解説を添える
- コードを書く時はTypeScript優先

このファイルは、Claude Codeが毎回起動するたびに自動で読み込みます。自分用に育てていけるアシスタントになるイメージです。

もち本人は「関西弁で返答すること」というルールを書き込んでいたりします。関西弁だとテンポよく仕事を進められる気がしてます。

ターミナルが苦手なら|Claude Desktopアプリを使うのもおすすめ

「ターミナルはどうしても苦手」という人には、Claude Desktopアプリがおすすめです。こちらのダウンロードページからインストールできます。

GUI画面でClaude Codeの大半の機能が使えます。タブを切り替えるだけで、ファイル操作・コード生成・MCP連携などほぼすべて可能です。

インターフェース

特徴

おすすめ度

ターミナル直接

動作軽量・本格派・カスタマイズ自由

エンジニア寄りデザイナー

Cursor / VSCode経由

コードエディタと統合・もちのおすすめ

デザイナー実装業務

Claude Desktopアプリ

GUI画面・初心者向け

ターミナル苦手な人

もち本人はCursor経由でClaude Codeを呼び出しています。コードのプレビューやファイル構造も見やすく、デザイナー業務との相性が良いです。

VS Code / Cursor利用時の補足|拡張機能でチャットUI化が便利

Cursor や VS Code でClaude Codeを使う際に、ターミナルから呼び出す方法が標準ですが、非エンジニアのデザイナーには若干見づらいと感じることが多いです。

そんな時は、拡張機能を入れてチャットUI化するのがおすすめです。コードエディタの横にチャット欄が表示されて、ChatGPTやClaude Web版に近い感覚でClaude Codeを操作できるようになります。

もち本人は「Claude Code for VS Code」という拡張機能を入れて使っています。普段のテキスト入力に近い感覚で指示が出せるので、非エンジニアのデザイナーには特におすすめです。


デザイナーが使うClaude Code実践パターン6選

ここからは、もち本人が日常的に使っているClaude Codeの活用パターンを6つ紹介します。

パターン1|LP・Webサイトの叩き台を高速生成

要件定義書や情報設計をClaude Codeに渡して、LP・Webサイトのコード一式を自動生成してもらえます。

例:
添付した情報設計をもとに、LPのたたき台をHTMLベースで作成してください。

ワイヤーフレーム的な叩き台として出してもらって、そこから人間がデザインを詰めていきます。ゼロからつくる時間と比べると圧倒的に早いです。

こちらは実際につくってもらった叩き台をClaude Code to FigmaでFigmaに移植したもの。ここからデザイン案を練っていきました。(ワイヤーフレームの場合は色を使わない指示を入れた方がおすすめです)

パターン2|Figma デザインや画像から実装してもらう

Claude Codeを使ってFigmaのデザインデータや、画像から実装で再現してもらうことが可能です。

これは実際にGPT-image-2でつくってもらった画像から実装してもらったデータのスクショです。(再現度かなり高いです)

画像だけでなく、Figmaからデザインデータを読み込ませることも可能です。Figma MCPサーバーを設定すると、Claude CodeがFigmaファイルを直接読み込めるようになります。

例:
このFigmaファイル(URL)のヒーローセクションを実装して。

Figmaで作ったデザインが実装されてアウトプットされます。デザイン → 実装の一気通貫がClaude Codeにによって現実になりました。

Figma MCPの連携方法は後述しています。

関連記事:
Studio制作×AIワークフロー|GPT-image-2とClaude Codeで工数30-40%削減した実験レポート

パターン3|ファイル整理・リネーム自動化

Claude Codeの最初の練習として最適なのが、ファイル整理です。

例:
「デスクトップにあるGIFファイルを、『絵文字』というフォルダを作って格納して。」
「デスクトップのファイルを種類ごとにフォルダ分けして整理して。画像/PDF/動画/書類の4つに分けて。」
「『スクショ2026-03-01.png』を『定例会議画面共有.png』にリネームして。」

実行前に「これをやっていいですか?」と確認ダイアログが出るので、安心して試せます。「1=その都度確認」「2=このセッション中はOK」「3=No」のシンプルな選択肢です。だいたいの場合は2を押せばOK。

最初の練習として、自分のデスクトップを整理してもらうところから始めるのがおすすめです。試しにファイルのリネームに挑戦してみてください。

パターン4|議事録・ドキュメントから情報抽出

会議の議事録フォルダや、複数のMarkdownファイルから特定の情報だけを抽出してまとめてもらえます。

もち本人は日々音声ログを撮っており、その文字起こしデータを保存していて、その文字起こしデータから日々疑問に思ったことをリストアップして、まとめてAIに回答してもらうという仕組みを構築していたりします。

実際のファイルの一部。

10ファイル100ページ分のドキュメントから、特定の要素だけを抽出して1ファイルにまとめる、といった作業が数分で終わります。さらにスキル化しておけば、ほぼ自動で完了させることも可能です。

パターン5|MCP連携でツール間の作業を代替

もちが特に便利だと感じているのが、MCP(Model Context Protocol)連携です。すでにFigmaと連携できることを紹介しましたが、その他にもSlack・Notion・Google Sheets・Freee・Stripeなどさまざまな外部ツールと直接やり取りできます。

もちの実例:
Freeeから今月の経費取引を全部取得して、勘定科目別に集計してGoogle Sheetsの『月次集計』タブに記入して。

Notionの『生徒管理』DBから、今週Slackで返信があった生徒のステータスを『進行中』に更新して。

これは経営業務全体の自動化に直結します。フリーランスなどのデザイナー個人事業主や経営者なら、Claude Codeで業務全体を効率化できる強力な武器です。

パターン6|プロトタイプ・アプリの生成

「こんなアプリ作りたい」のイメージから、動くプロトタイプを作れます。もちろん実際に利用できるアプリも作れます。

例:
タスク管理アプリのモックを作って。タスク追加・完了マーク・削除・カテゴリ分けの基本機能を持つアプリで。期日変更の機能もつけてください。

以下は、実際にもちがClaude Codeにつくってもらって日々使っているタスク管理アプリの画面です。

10〜30分で動くプロトタイプができます。Figmaで静的モックを作るより、動くものを早く見せられるので、クライアント提案の説得力が一段上がります。

自分が日々使うアプリを作成すれば、業務効率化にもダイレクトに繋がります。自分専用アプリをつくるのはとても楽しいので、一度やってみてほしいです。


Figma MCPの連携方法|デザイン→コードの革命

Claude Codeでデザイナーが一番分かりやすく恩恵を受けるのが、Figma MCP連携かもしれません。詳しく解説します。

そもそもMCPとは?

MCP(Model Context Protocol)は、AnthropicがClaude用に開発した「外部サービスとAIを繋ぐ仕組み」です。シンプルに言うと、Claude Codeが外部ツールを操作できるようになるプラグインのようなものです。

例えばこんなことがClaude Codeからできるようになります。

サービス

MCP連携でできること

Figma

デザインファイルの読み込み、コンポーネント変換、コード生成

Slack

メッセージ送信、チャンネル読み込み、自動通知

Notion

DB読み書き、ページ作成、議事録同期

Google Sheets

スプレッドシート読み書き、関数挿入、データ集計

Freee

会計データの取得、仕訳作成、レポート生成

Figma MCP連携のセットアップ手順【2026年5月最新】

Figma MCP連携には2種類のサーバーがありますが、デザイナーには「Remote Server(リモートサーバー)」が推奨です。こちらのサーバーでしかFigma上にデザイン作成ができない点に注意してください。

サーバー種類

接続先

推奨ユーザー

Remote Server(推奨)

https://mcp.figma.com/mcp

通常のデザイナー・駆け出し向け

Desktop Server

Figmaアプリ経由

エンタープライズ要件向け

一番簡単な連携方法|Claude Codeに自然言語で依頼する

Claude Codeに自然言語で依頼すれば、手順を教えてくれるので、それ通りに進めていけばOKです。

例:
Figma MCP連携したいです。デスクトップサーバーではなく、リモートサーバーの方でお願いします。

設定後の使い方|FigmaファイルURLを貼るだけ

設定完了後は、FigmaファイルのURLをプロンプトに貼り付けるだけで、Claude Codeがデザインデータを自動取得します。

例:
このFigmaファイル(https://figma.com/file/xxx)のヒーローセクションを、
HTMLベースで実装してください。

ファイルを共有設定で「リンクを知っている人は閲覧可」にしておくと、Claude Codeがスムーズにアクセスできます。

関連資料


もちが毎日使ってる実践テクニック|効率を3倍にするコツ

もちが日々使ってる中で見つけたテクニックを紹介します。

テクニック1|CLAUDE.mdに自分の前提を書き込む

Claude Codeは毎回CLAUDE.mdを読み込むので、自分の前提条件をすべてここに書き込むと精度が上がります。

CLAUDE.md例(駆け出しデザイナー想定の例):
- フリーランスのWebデザイナー(経験2年)
- 担当領域:LP・コーポレートサイトのデザイン&実装
- フロントエンド:HTML / CSS / TailwindCSS / React(学習中)
- デザインツール:Figma、Photoshop、Illustrator
- 作業フォルダ:~/Documents/design-work/ 配下
- 文体:丁寧な日本語(ですます調)で返答すること

これで「いつもの」前提を省略できて、指示文がシンプルに済みます。

テクニック2|ファイル構造と日々のログで「自分の文脈」を育てる

Claude Codeの精度を本気で上げたいなら、ファイル構造を整えることと日々のログを溜めておくことの2つが特に効きます。

なぜファイル構造が大事か

Claude Codeは作業フォルダ内のファイル名・フォルダ階層から文脈を読み取って動きます。デスクトップにファイルを雑然と置いた状態で指示を出すより、整理されたフォルダ構成で指示を出すほうが、Claude Codeの判断精度が劇的に上がります。

フォルダ階層の例:

Documents/
├── my-context/              ← 自分のプロフィール・思考メモ・ライフログ
├── projects/                ← プロジェクト別フォルダ
│   ├── client-work/         ← クライアント案件
│   └── personal/            ← 個人プロジェクト
├── strategy/                ← 事業戦略・計画・OKR
├── finance/                 ← 経理・請求・領収書
├── content/                 ← 発信用(SNS・ブログ・note)
├── learning/                ← インプット・読書ログ・勉強記録
└── archive/                 ← 過去案件・素材アーカイブ

「projects 配下の ◯◯クライアントのフォルダのダッシュボードを見て、明日のタスク優先度を出して」のような指示で、フォルダ名だけで意図が伝わるのが理想です。

日々のログを溜めることの威力

もちは音声ログ・週報・日報・タスク履歴・会議議事録などを毎日蓄積しています。Claude Codeはこのログから「過去の自分が何を考え、何を決めたか」を読み取れるので、判断の質が一段上がります。

特に効くログ:

  • プロジェクトファイル(仕様書やスケジュールなど)

  • 会議の議事録

  • 音声ログ(PLAUD録音→自動文字起こし&カテゴリ整理)

  • 日報・週報(その期間でやったこと・気づきの記録)

  • タスク履歴・意思決定の経緯ログ

「使えば使うほど自分に最適化される」のはこの蓄積の仕組みが理由です。早く始めて長く使う人ほど、Claude Codeとの関係性は深まっていきます。

テクニック3|繰り返し作業はスキル化する

「毎月やる経費集計」「週次のSNS数値記録」「生徒の進捗チェック」「クライアント向けプロポーザル作成」など、繰り返し行う作業はClaude Codeのスキルとして登録できます。

スキル化の仕組みはシンプルで、.claude/skills/{スキル名}/SKILL.md に手順を書いておくと、/{スキル名} というスラッシュコマンドで呼び出せるようになります。

繰り返し行う作業を実際に終えたあとに、Claude Codeに以下のような指示をだせば、Claude Codeがスキル化してくれます。

今やった作業をスキル化したい。

もち本人は現在30個以上のスキルを運用していて、例えばこんなスキルがあります。

  • /weekly-report で週報自動生成

  • /audio-log で毎朝PLAUD録音を自動整理

  • /sga-monthly で月次の販管費集計

  • /seo-article でSEO記事の構成設計〜執筆〜トラッキング登録まで一気通貫

コマンド1回叩くだけで、いつもやってる作業が完了します。デザイナーの実務でも、定型化できる作業はスキル化すれば効率が桁違いに上がります。

📘 スキル化の詳しい解説は別記事で:Claude Codeのスキル設計・実装方法は、AI×実装シリーズの次回記事で深掘り予定です。お楽しみに。

テクニック4|Claude Codeに並列で作業させる

実はClaude Codeは複数同時起動できます。1体だけじゃなく、複数のClaude Codeに別々のタスクを並列で処理させられます。

並列作業の具体例

ターミナル

やってること

ウィンドウ1

LP一式のコーディング(20分待ち)

ウィンドウ2

議事録10ファイルから決定事項を抽出(20分待ち)

ウィンドウ3

Figmaでデザイン作業(20分待ち)

3つのClaude Codeセッションが同時並行で走るので、上記のようなタスク内容の場合、本来シングルタスクだと60分かかる作業が1/3の20分で完了します。

ちなみに4体同時に動かすとCursorの画面はこんな感じになります。あまり並列で動かしすぎると頭がパンクするので、もちはいつも2体同時進行に留めています。


校長の見解|Claude Codeはデザイナーの「越境」を可能にする

ここから先は、NOT DESIGN SCHOOL校長のもち本人の見解です。Claude Codeを毎日使い倒している立場として、4つの視点をまとめます。

視点1|Claude Codeはデザイナーの「越境」を可能にするツール

これまでデザイナーは「Figmaまで」が守備範囲でした。実装はエンジニア、要件定義はディレクター、と分業が明確でした。

Claude Codeを使えるようになると、デザイナーが実装まで持っていけるようになります。さらに要件定義や戦略設計もAIとの壁打ちで進められるので、上流工程まで関われるようになれるチャンスがあります。

これがNOT DESIGN SCHOOLが掲げる「AI時代の上流デザイナー育成」の実体です。現状間違いなくClaude Codeはそのコアツールの1つです。

視点2|「つくる」と同じくらい「指示する・評価する」スキルが価値になる

2026年以降、デザイナーに求められるスキルセットが変化しています。

これまで価値の中心だった「つくる」スキル(コーディング・グラフィック制作・UI実装など)はもちろん依然として大事です。その上で、これからは「指示する・評価する」スキルが同じくらい重要になります。

  • 言語化スキル(指示):何を作りたいか、なぜそうしたいかを言語化できる力

  • 評価スキル(評価):AIが出してきたアウトプットの良し悪しを見極める力

  • 設計スキル(設計):要件定義・情報設計・UX設計を組み立てる力

これらはまさに上流デザイナーが持つべきスキルそのものです。Claude Codeを使えば使うほど、この3つが自然と鍛えられます。

つくる力 + 指示する力 + 評価する力 の3本柱を揃えていくのが、2026年以降のデザイナーの勝ち筋です。

視点3|2026年は「AI使える/AI使えない」の分岐点になる

2026年5月現在、もち個人の体感では「AIを使えるデザイナー」と「AIを使えないデザイナー」の差がどんどん開いています。半年後、1年後にはもう手遅れになっている可能性があります。「今始めるのは、まだ早い側」、これがNOT DESIGN SCHOOLの一貫したメッセージです。

ここ数ヶ月の間でも企業側が求めるデザイナー要件に「AI関連の要件」が入ってくることが劇的に増加しています。1日も早くAIを触り始めることをおすすめします。

そして触るのであればClaude Codeが本命になります。


限界と注意点|Claude Codeでやらない方がいいこと

Claude Codeは強力ですが、万能ではありません。誤解しがちな限界を5つ整理します。

注意点1|ポン出しをそのまま採用するのは無理。あくまで叩き台

Claude Codeの出力は叩き台レベルです。詰めの甘さがあるので、そのまま本番投入はできません。

  • LPデザインの細部(余白・色合い・文言)は人間の調整必須

  • コードの品質(パフォーマンス・SEO・アクセシビリティ)も要レビュー

  • ブランドのトーン&マナーは依然として人間が決める

Claude Codeで叩き台を高速生成 → 人間が調整して仕上げる」、このフローが現実的です。

注意点2|画像生成・動画生成はできない

Claude Codeはコード生成・文章処理に特化しており、画像生成・動画生成はできません

そのため、画像が必要な場面では別ツールとの組み合わせが必要です。

用途

補完ツール

画像生成

GPT Image 2.0、Nano Banana 2

動画生成

Seedance 2.0、Kling 3.0

イラスト生成

Midjourney(Nijijourney)、Adobe Firefly

「Claude Codeで構造とコードを作る」「画像生成AIで素材を作る」を組み合わせるのが現実的な使い方です。

注意点3|料金プラン消費に注意

Claude Codeはトークン消費型なので、大規模プロジェクトでぶん回すと、Pro $20プランでもすぐ上限に達します。

  • 大量ファイルを一度に読み込ませると消費が激しい

  • 長文の会話履歴を引きずると消費が膨らむ

  • 必要な部分だけ切り出して読み込ませる工夫が必要

毎日ヘビーに使うようになったら、Max 5x($100)への切り替えを検討するタイミングです。


FAQ|よく聞かれる質問

Q1. Claude CodeとClaude(Web版)の違いは何ですか?

A. Claude(Web版)はチャット型のAIアシスタントで、文章生成・質問応答が中心です。一方Claude Codeはコーディングエージェントで、ファイル操作・コード生成・外部ツール連携などの実行系タスクができます。

Web版が「チャットできるお話AI」だとすれば、Claude Codeは「実際に作業ができる秘書AI」です。詳しくは駆け出しデザイナーのためのClaude入門で違いを解説しています。

Q2. ターミナルが本当に苦手です。それでも使えますか?

A. 大丈夫です。2つの選択肢があります。

  1. Cursor / VSCode経由で使う:コードエディタからClaude Codeを呼び出せます。もちもこの方法を使用。

  2. Claude Desktopの「Claude Code」モードを使う:完全にGUI画面で使用することができます。またCo-workモードでもClaude Codeの大半の機能が使えます。

Q3. プログラミング知識がゼロでも使えますか?

A. 使えます。日本語で指示するだけなので、コマンドを覚える必要はありません。

ただし、基本的なコードリーディング力は徐々に身につけた方がいいです。Claude Codeに教えてもらいながら学習していきましょう。

Q4. セキュリティが不安です。商用利用しても大丈夫ですか?

A. 商用利用は規約上OKです。Claude Codeが生成した文章・コード・サイトは商用利用できます。

セキュリティ面では:

  • 設定で「学習に使わせない」オプションが有効化できる

  • ローカルデータの操作は確認ダイアログが出るので、思考停止でYesしないこと

  • 機密情報を含むファイルを安易に読み込ませないこと

これらを守れば、現実的なリスクは管理可能です。

Q5. AIに代替されないデザイナーになるにはどうすればいいですか?

A. 「考える側」のスキルを磨くことです。

  • ロジックを組み立てる力

  • マーケティング思考(3C・STP)

  • クライアントの「本当の願い」を引き出すヒアリング力

  • ブランドを背負う覚悟と説明責任

  • 隣接領域(実装・AI活用・コピーライティング)の手数

ビジュアルだけのデザイナーはAIに代替されやすくなりますが、「考えるデザイナー」はむしろ価値が上がります。詳しくはNOT MAGAZINE TALK #1|20年デザイナー後藤氏が語る3つの判断軸で深掘りしています。


関連リンク・参考資料

NOT DESIGN SCHOOL 関連記事(AI×実装シリーズ)

一次ソース

関連動画

パーソナライズ型デザインカリキュラムでAIの学習も!

NOT DESIGN SCHOOLのパーソナルコースなら、あなた専用のオーダーメイドカリキュラムで、最短6ヶ月で実務レベルのデザイナーへ。AIの学習コンテンツや勉強会も充実!まずは無料相談から。

TOPに戻る

\Slackで個別相談受付中/

最短6ヶ月で「自分に必要なスキル」だけを集中して身につけるNOTのパーソナルコース。

第一線で活躍するデザイナーたちの仕事観や価値観をディープに深堀りする対談ポッドキャスト

✍ 受講生の学習記録も更新中!

©NOT DESIGN SCHOOL