📌 この記事のポイント

• AIに任せるのは作業、デザイナーに残るのは選ぶこと

• AIの出力は完成品ではなく、素材とたたき台

• コードが書けなくても、難しい表現を試せる時代

• 自分で再現できない案は、あえて落とす判断も必要

• ライセンスの確認は、AIを使っても人の仕事

2026年9月23日更新

AIに任せるのは「作業」、デザイナーに残るのは「選ぶこと」

AI時代のWebデザイナーの役割とは、AIが出した案や表現の中から、目的に合うものを選び、自分のデザインとして仕上げることです。コードを書く、たくさんの案を出す、といった作業はAIに任せられる範囲が広がりました。一方で、どの見せ方を採用するかを決めるのは、今もデザイナーです。

2026年9月12日の「NOT DESIGN EXPO」で、NOT DESIGN SCHOOL代表のもちは、実務で使っているAIの活用法を10個紹介しました。その締めくくりで伝えたのが、「完成形を一発で出そうとせず、素材やたたき台として使う」「いろいろなAIやツールを組み合わせる」という考え方です。この記事では、Webデザインに関わる3つの実例から、その役割分担を考えます。

AIの出力は、完成品ではなく「素材とたたき台」

たたき台とは、それをもとに考え、直していくための最初の案のことです。もちは講演のまとめで、SNSでよく見る「一発生成でこんなものができた」という使い方ではなく、素材やたたき台として使うほうが実務では有効だと話していました。

Webデザインの場面で、この考え方がどう働くのか。次の3つの実例で見ていきます。

見せ方の引き出しを増やす｜Variantで下のセクション案をもらう

Variantとは、プロンプトを入れると、コードベースでWebデザインの案をいくつも作ってくれるAIツールです（Variant公式）。無料で登録でき、クレジットを使って案を生成する仕組みです（2026年9月時点）。

もちは、イラストレーター動画講座のLPを作っていた時に、デザイン済みのファーストビュー画像をVariantに渡し、「これに合う下のセクションのデザインを考えてほしい」と頼んでいました。

• 出てきた案は、トンマナを踏まえたすっきりしたデザイン

• コードで作られているので、ホバーのアニメーションまで確認できる

• 「写真をアーチ型にする」「扉や窓の形にしてカードを乗せる」「矢印を入れる」などの見せ方のヒントが見つかる

ここでの役割分担ははっきりしています。Variantは見せ方の候補を出し、もちは「こういう見せ方もいい」と思ったものを拾う。 そのまま使うのではなく、採用したり手を加えたりして、自分のデザインに取り入れています。

難しい表現に手が届く｜Codrops・CodePenの表現をAIで再現する

Codrops・CodePenとは、Webの実装のチュートリアルや表現の実例を、コードと一緒に公開しているサイトです。Codropsには、ガラスのような質感の「リキッドグラス風」など、フロントエンドにかなり詳しくないと手を出しにくい表現が並んでいます。

もちは、こうしたページをClaudeやChatGPTに渡し、「ここで解説されている表現を再現したい」と伝えると再現してもらえると紹介していました。

これまで「自分には実装できないから」と候補から外していた表現も、試せるようになりました。デザイナーの役割は、その表現が今回のサイトの目的に合うかを判断することに移っています。

実装まで進める｜コードを書かずにStudioへボタンを入れた実例

もちが公式サイトの右下に表示している追従バナーは、ボタン部分がコードで動くようになっています。もちは、この部分を自分では一切コードを書かずに実装しました。

1. ChatGPTに告知バナーの展開案を5つ出してもらい、1つをたたき台に選ぶ

2. たたき台をもとに、Figmaで自分がデザインを作る

3. デザインをClaudeに渡し、「ボタン部分はコードにしたい」と伝える

4. 「Studioのカスタムコード用に書いてほしい」と頼む

5. できたコードを、Studioにコピー&ペーストする

Studioのカスタムコード機能は、2026年9月時点で有料プラン（Mini：年払いで月額590円から）で利用できます（Studio料金プラン）。

組み合わせるツールが増えるほど、判断の場面も増える

この実例では、ChatGPT、Figma、Claude、Studioの4つを組み合わせています。ツールが増えるほど、途中で判断する場面も増えます。展開案のどれを選ぶか、デザインのどこを直すか、ボタンのどこを動かすか。もちは講演のまとめで「いろいろなAIやツールを組み合わせることで、可能性が広がる」と話していましたが、その可能性を形にするのは、それぞれの場面での判断です。

まずは、自分が普段使っているツールに、AIを1つだけ足すところから始めるのがおすすめです。1つの組み合わせに慣れてから、次のツールを足していくと、どこで何を判断したかを見失わずに進められます。

自分で作れる範囲に「あえて落とす」判断

AIと役割を分ける時に、もうひとつ大事な判断があります。AIが出した案が、自分のスキルを超えている時にどうするかです。

講演の質疑応答では、「AIのたたき台が自分では再現できないほどのビジュアルだったら、クライアントにどう見せるか」という質問が出ました。もちの答えは、クライアントにOKをもらっても自分で作れないものは危ないので、あえて自分が作れる範囲に落とすのもよいというものでした。

AIを使うと、見た目の上限はどんどん上がります。それでも、最後に責任を持って形にするのはデザイナーです。「採用するか」「どこまで取り入れるか」を決めることが、AI時代にデザイナーに残る大切な仕事です。

役割分担を決める3つの質問

役割分担を決める質問とは、ある作業をAIに任せるか、自分でやるかを判断するための問いです。もちの実例をもとに、迷った時に使える3つの質問にまとめました。

例えば、公式サイトのボタンでは、コードを書く作業はClaudeに任せました。一方で、ボタンのデザインと、どこを動かすかは、もちが決めています。印象を決める部分は自分、再現する作業はAIという分け方です。

AIに頼む時の伝え方の例

伝え方の例とは、講演でもちが使っていた頼み方を、試しやすい形に整えたものです。自分の案件に合わせて書き換えて使ってください。

Variantで、下のセクション案をもらう

添付したファーストビューのデザインに合う、下のセクションのデザインを考えてください。トーン&マナーはそろえて、見せ方の違う案を複数ください。

Codrops・CodePenの表現を再現する

このページで解説されている表現を再現したいです。まず、どんな仕組みで動いているかを簡単に説明してください。そのうえで、私のサイトで使えるコードにしてください。このコードのライセンスで、商用サイトに使ってよいかも教えてください。

Studioのカスタムコードを書いてもらう

添付のデザインの、ボタンの部分だけをコードで作りたいです。Studioのカスタムコードに貼り付けて使える形で書いてください。スマホで表示した時の見え方も考慮してください。

• 目的を先に書く：何のために、どこで使うかを伝える

• 自分が判断したいことを残す：「複数ください」と頼むと、選ぶ余地が残る

• 確認も一緒に頼む：ライセンスやスマホでの表示など、後で困りそうなことを先に聞く

たたき台は、そのまま使わないから価値がある

もちが公式サイトの追従バナーで使ったたたき台は、ChatGPTが出した5つの案のうちの1つでした。ただ、完成したデザインは、たたき台とは色も細部も変わっています。もちは、たたき台がインスピレーション元になり、1から作り直すよりかなり早くできたと話していました。

たたき台の価値は、完成形そのものではなく、考え始める時間を短くしてくれることにあります。「これをそのまま使えるか」ではなく、「ここから何を拾えるか」で見ると、AIの案をうまく使えるようになります。

限界と注意点

• 参考にしたコードは、ライセンスを確認してから使いましょう。 Codropsのデモの多くはMITライセンスで商用利用もできますが、作品ごとに条件が異なる場合があります（Codropsのライセンス）。もちは、使ってよいライセンスかをAIにも確認してから使っていると話していました

• Variantは日本語より英語が得意です。 もちによると、生成を重ねるうちに英語の案に寄ったり、トンマナが離れたりすることがあるそうです

• 無料プランには上限があります。 講演時点でもちは無料プランを使っており、上限に達すると翌日まで待つ必要があったそうです。料金や上限は公式で確認してください

• AIが書いたコードは、表示の確認が必要です。 スマホや複数のブラウザで、意図どおりに動くか確かめてください

AIとWebデザインの役割分担についてよくある質問

コードが書けないデザイナーでも、AIで実装までできますか？

簡単なボタンや動きなら、できる場面が増えています。もちもClaudeにコードを書いてもらい、Studioに貼り付けるだけで実装しました。ただし、動作の確認は自分で行う必要があります。

Variantで作ったデザインは、そのまま使ってもいいですか？

もちは、そのまま使うよりも見せ方のヒントとして使っていると話していました。自社のブランドや目的に合うかを判断したうえで、自分のデザインに取り入れるのがおすすめです。

AIが出した案が自分のスキルを超えていたら、どうすればいいですか？

講演でもちは、自分で作れる範囲に落とすのもよいと答えていました。クライアントにOKをもらった後で再現できないと、困るのは自分です。

AIを使うと、デザイナーの仕事はなくなりますか？

作業の一部はAIに任せられるようになりますが、どの案を採用し、どう仕上げるかを決める仕事は残ります。むしろ、判断する力の大切さが増していると、もちは感じています。

どのAIから使い始めればいいですか？

もちは講演で、迷ったらまずChatGPTで画像を生成してみるのがおすすめだと話していました。慣れてきたら、コードはClaude、アイデア出しはVariant、というように用途ごとに使い分けていきます。

AIを使ったことは、クライアントに伝えるべきですか？

契約や社内のルールによって扱いが変わります。AIの利用に条件がある案件もあるため、使う前にクライアントや社内に確認しておくと安心です。