Claude DesignでWebページのデザインを試してみました

Claude DesignでWebページのデザインを試してみました

投稿日:2026年6月19日 / 更新日:2026年6月19日
AIdesignUX/UIシステム開発チャットボット
この記事の一部はAIによって生成されたコンテンツを投稿者が編集して投稿されました

こんにちは。システム開発部のkyoです。
生成AIを業務にどのように活用できるかを考える中で、今回はClaude Designを試してみました。Claude Designは、文章で指示を出しながら、デザイン案を作成できる機能です。今回は、架空サイトのWebページデザインの作成を試してみました。

実際に試したこと

最初にClaude Designへ適当にWebサイトの作成を依頼してみました。

依頼後、Webサイトのスタイル、コンテンツ、ターゲット、目的、色、ブランドなどを入力・選択する画面が表示されました。

入力項目に沿って必要な条件を整理しながら進められるため、一から条件を洗い出すよりも少ない操作手順で進めやすいと感じました。

出力されたデザイン案

入力した内容をもとに、3つの方向性でWebページのデザイン案が出力されました。

今回は架空サイトを題材にしましたが、少ない操作手順で複数の案を確認できる点は便利だと感じました。
Webページのデザインを一から考える場合、構成や見せ方を決めるまでに時間がかかることがあります。Claude Designでは、必要な情報を入力することで、まず確認できる形の案を作成してくれます。
何もない状態から考え始めるよりも、最初のたたき台があることで、方向性を確認しやすくなると感じました。

気になった点

一方で、作成や修正のやり取りでは、トークンの使用量が多いと感じました。
そのため、方向性が決まっていない状態で何度も壁打ちするような使い方は、あまり効率的ではないと思います。
業務で使う場合は、ページの目的、必要な要素、見せたい内容、避けたい表現などを事前に整理してから使う方がよさそうです。
また、出力された内容をそのまま採用するのではなく、会社やお客様の意図に合っているか、掲載内容に誤りがないか、実際の制作に使える内容かを確認する必要があります。

今後の業務活用に向けて

今回試してみて、Claude DesignはWebページ制作の初期案を考える場面で活用できそうだと感じました。
特に、制作前の構成案を考えるときや、社内で方向性を確認するためのたたき台を作る場面では使いやすそうです。
ただし、トークンの使用量も考えると、何度も壁打ちしながら方向性を探るよりも、事前に条件を整理したうえで使う方が現実的だと思います。
今後は、Webページ制作の初期案作成や、社内確認用のたたき台作成などで活用できるか検討していきたいです。
まずは、すべてを任せるのではなく、初期案を作るための手段として活用していきたいと思います。

この記事を書いた人
kyo
システム開発部のkyoです。 普段PHPを用いて開発を行っています。最近は、プロジェクトリーダーも務めています。