Claude Codeをデザイナーが使ったら、Web制作はどう変わった？

こんにちは。
株式会社セレスでデザイナー／アートディレクターをしています。小山田と申します。
普段はWebサイトやLP、広告クリエイティブ、ロゴ、ブランド関連制作、パッケージデザインなど、幅広い領域のデザインに関わっています。

Web領域だと、デザインにとどまらずHTML/CSS/JavaScriptを使ったフロントエンド実装も担当します。
最近は要件定義や制作方針の設計、案件のアサイン、レビューなど、ディレクション領域の比重も増えています。

いや、みなさん忙しくされていると思います。
でもねでもね？一人でPJ進めつつ実装までしてると本当に手が足りない。
そんな中、最近実務で使い始めたのが皆さんご存知Claude Code！

使い始めてまず感じたのは「爆速」この一言に尽きる。
例えばある日。実際に私が3時間働いていたとして

• サイト改修のためのモック制作

• GA4＋Google Search Consoleを使ったアクセス解析レポートの構築

• 新PJの構想・調査・環境整備

性質の違う3つのタスクを並行して進行できました。
つまり、自分の勤務時間は3時間だけど、仕事は9時間分進んでる（言い過ぎ、でもないですよね）
これ、人力で進めてたら、当然ひとつずつ進めるしかないんです。
本・当・助・か・る！

ただ、重要なのは「作業が通常の３倍になった」だけじゃないってこと。
自分の頭の中のイメージを、体験できる＝議論できる状態まで持っていく速度が爆速になった
私はここに、AIエージェントの可能性を一番感じています。

Web制作の「順番」が無くなった

一般的にWebサイトを作るときって、直列工程で進みます。

1. 構成・ライティング

2. デザイン

3. 実装

でもClaude Codeを使うようになってから、この境界がかなり曖昧になりました。

• サイト構成

• ライティング

• モック

• 画面を見ながらデザイン調整

• マークアップはもうできてる

もちろん、ふわっと投げていい感じにできるってわけではないので、ある程度会話のラリーは必要になりますが
構成・デザイン・実装がものすごく短いサイクルで回すことが可能になりました。
全部同時に進行できてその場で修正も可能。

claude codeの導入で、「体験できる状態」までのハードルが一気に下がりました。

数分でモックができると、提案の仕方が変わる

ここ最近取り組んでいるタスクの一つに、コーポレートサイト改修があります。
主要ディレクトリの一つの配下を丸ごとリニューアルするPJで、新規・更新合わせて依頼段階でページ数が70枚を超えていました。
また、閲覧体験が大きく変わる構成となっており、全体像が掴みにくい。

その上、この際だからと私からの提案も膨らんでいきました。

• ２階層目のハブページは、もう少し情報を充実させたい

• ナビの見せ方を変えたい

• UIの形式を変えたい

• URL構成を変えたい

その提案のなかの一つが、当初「新規Webページ3枚」として依頼を受けたコンテンツ。
私は情報構造やユーザー導線を考えると、1ページにしてひと続きに見れる方が、ユーザーが情報を探しやすいと判断しました。
ただ、これを「3ページではなく1ページにしましょう」と言葉で説明しても、依頼側からは「本当に大丈夫？」と思われてしまう。
普段Web制作にあまり関わらない人であれば、なおさら判断しづらい内容です。

そこでClaude Codeを使い、資料を元にページ構成・ビジュアル・導線を確認できるモックを作成。
「1ページにまとめると、ユーザーはこの順序で内容を理解できる」という体験を、提案と同時に見せることができました。
わかりやすさが功を奏してか、その場でGOサインをもらうことができました。

この経験で感じたのが、AIエージェントの価値は単に制作時間を短縮することではなく、自分の提案を、相手が意思決定できる状態まで、爆速で持っていけるということ

従来の、「このページはこういうデザインです（静止画）」ではなく、
「ユーザーがここから入り、この情報を見て、次にここへ進む」という体験まで含めて、本番とほぼ同じ感覚で説明できます。
ディレクションや提案の場面では、この差はかなり大きいと感じています。

空いた時間で、何をするか

Claude Codeを使い始めて、私自身が一番嬉しいのは、提案に時間を使えるようになったこと。
私はもともと、やりたいことがかなり多い方で・・・^^;

• Webもやりたいし、ブランドも考えたい

• 企画もしたいし、実装もしたい

• ユーザー体験も考えたい

でも当然、時間は有限。
これまでは、いろいろなタスクがあってもひとつずつ着手して進めていくしかなかった。
提案資料を作りたくても、仕事の優先度的に手がつけられないとか、温めている間にビジネス側の温度が冷めてしまう、なんてこともよくあると思います。

それが今は、Claude Codeに作業を進めてもらっている間に、別の案件を考えたり、スキルアップのための勉強もできてしまう。

そして私にとって、それ以上に大きいのが「提案する余裕」ができたこと。
これまでは「ここをもっとこうしたい」と思っていても、それを提案できる状態まで持っていくのに時間がかかっていました。

Claude Codeを使うと、その提案自体もAIの力を借りてずっと早く具現化できます。
つまり、作業時間が減っただけではなく、

私はここがとても価値があると思っています。
AIで仕事を減らしたい、というよりも、AIを使って今まで時間が足りずにできなかったことをもっとやりたい。
これからは、企画や提案、設計にもっと時間を使いたいと思っています！

やりたいことが多いデザイナーほど、面白くなる

セレスでは、デザイナーが関われる仕事の領域はかなり広いです。

• ポイントサイト「モッピー」のようなWebアプリケーションのUI設計やプロモーションデザイン

• 化粧品や健康食品のパッケージデザインやブランドデザイン

• アプリデザインのタスクなんかも

サービスを作ることも、ブランドを作ることも、商品を売ることも、アプリケーションを作ることもある。
でも、最初から全部できる必要はありません。
自分の興味のある方向へ一歩踏み込んでみると、そこから担当する領域が広がっていく感覚です。

また私の経験上、自分から手を挙げる人には少しずつ信頼が集まります。
そうすると、「これもやってみる？」と、次の仕事を任されることが増えていきます。
Claude CodeのようなAIは、その一歩をかなり踏み出しやすくしてくれる存在だと思っています。

これまでは、「面白そうだけれど自分には実装できない」が一つの壁になることもありました。
でも今はまずかたちにして試せる。

「挑戦する前に諦める」理由はかなり減りました。

これは間違いないと思います。