「AIがコードを書く時代に、デザイナーの仕事はなくなる」——そう感じる必要はありません。むしろノーコードで培った目と勘所が、AIを使ううえで大きな武器になります。
つまりノーコードの経験は、AI実装時代にそのまま活きる土台になります。
ChatGPTやGeminiと、ClaudeCodeは、そもそもできることの性質が違います。まずはこの2タイプの区別を押さえておきましょう。
ChatGPT・Geminiなど。テキストで質問し、テキストで答えが返る。会話の中で完結することしかできません。
ClaudeCode。あなたのPCのフォルダ・ファイルに直接アクセスし、コードを書き・修正・保存まで行います。
「このHTMLを修正して」と貼っても、返るのは修正コードのテキストだけ。結局コピペして、ファイルを開いて貼り直す手間は変わりません。
「このデザインをHTMLで実装して」で、実際にファイルを作成・保存。あなたはできあがりを確認するだけで済みます。
つまりClaudeCodeは作業そのものを代わりに手を動かしてくれるのが決定的な違いです。
| 観点 | ChatGPT・Gemini | ClaudeCode |
|---|---|---|
| できること | 会話・テキスト生成 | ファイル操作・コード実装 |
| コードの扱い | テキストとして返す | 実際にファイルを作る |
| 使う場所 | ブラウザ・アプリ | VSCode内・ターミナル |
| デザイナーの用途 | アイデア出し・文章 | サイト制作・実装 |
補足どちらが上ということではなく、役割が違うだけ。使い分けが前提です。
ClaudeCodeは「コードを書く必要がない」ツールではなく、「コードを書いてもらえる」ツールです。この違いを理解すると、見え方が変わります。
つまり「どう見せたいか」を判断できるデザイナーの感覚は、AI時代にむしろ重要な武器になります。
難しい環境構築の前に、ブラウザ版のClaude(チャット版)で「AIがコードを書く」感覚を体験してみましょう。
ブラウザでClaudeのチャット版にアクセスして触ってみる。
下のようにシンプルなお願いを入力する。
「ローカル確認用のURLを教えて」と質問すると、ブラウザで表示を確かめられる。
シンプルなポートフォリオの トップページのHTMLを書いて
ローカル確認用のURLを教えて → http://localhost:○○ が返る
確認返ってきた http://localhost:○○ をブラウザで開けば、生成されたページの挙動をその場で確かめられます。まずは触ってみることが第一歩です。
ノーコードサロン