Claude Designが発表されたのは2026年4月17日。翌日の朝、試しに自分のポートフォリオLPを投げてみた。

送ったプロンプトは一言だった。「この私の個人のLPをいい感じにリニューアルして」

結果として、デザインは大きく変わった。ただそれ以上に、プロセスが予想と違った。Claudeが自分でUIを作ってきたのだ。

Contents
  1. Claude Designとはなにか（前置きだけ）
  2. 試す前のLP——何が気になっていたか
  3. 「いい感じにリニューアルして」だけ送った
  4. Claudeが自分で質問UIを生成してきた
  5. 結果——何が変わったか
  6. 正直な感想——良かった点と限界
  7. 個人開発者・エンジニアに向いているか
  8. まとめ

Claude Designとはなにか（前置きだけ）

Anthropicが2026年4月17日にリリースした 、設計・プロトタイプ・資料作成に特化したプロダクトだ。Claude Opus 4.7で動いている。Pro・Max・Team・Enterpriseサブスクに含まれており、claude.ai/design からアクセスできる。

公式の説明より、使ってみた方が早いと思ったので試した。

試す前のLP——何が気になっていたか

自分のポートフォリオサイトは自分で作ったものだ。技術的には動いていたが、デザインに違和感があった。

青〜ティールのグラデーション、カラフルなボタン3つ、情報密度が高めのヒーローセクション。「フルスタックエンジニアです」という情報は伝わるが、見た目と自分のスタイルが合っていない感じがずっとあった。

修正する時間はある。ただ、デザインを一から考え直すのに気乗りしなかった。ちょうどClaude Designが出たので試してみた。

Claude Designでリニューアル前のポートフォリオLP（青〜ティール系グラデーション）
↑ 改善前のLP。青〜ティールのグラデーションが全体を支配していた。

「いい感じにリニューアルして」だけ送った

最初に送ったのは本当にこれだけだ。

この私の個人のLPをいい感じにリニューアルして

Claude Designはまずローカルのファイルを読み込みに行った。既存のコードを自分で確認し、現状の構成・配色・コンテンツを把握した。そこまでは想定内だった。

想定外だったのは、次に起きたことだ。

Claudeが自分で質問UIを生成してきた

方向性を確認するために、Claudeが選択肢付きのUIを作ってきた。テキストで質問してくるのではなく、クリックして答える形式だ。

Claude Designが生成した方向性選択UI（方向性・人柄・Tweaks・バリエーション数）
↑ Claudeが生成した質問UI。方向性・人柄・Tweaks・バリエーション数を選ぶ。

質問の内容はこうだった。

  • 全体の方向性は？——モノクロ+1アクセント、アース系、テック系ダーク、カラフルなど複数の選択肢
  • どんな人柄を強調したい？——ベテランエンジニアの信頼感、個人開発者のクラフト感、親しみやすさなど
  • Tweaksで試したいことは？——配色テーマ、フォント切替、レイアウト、余白量など
  • バリエーション数は？——1案に絞る、2〜3案をTweaksで切替、など

この質問UI自体がClaude Designの機能の一つだ。公式には「custom sliders（made by Claude）」と説明されている。ユーザーが操作できるUIをClaudeが状況に応じて作る。

自分が答えたのはざっくりこのあたりだった。モノクロ+アクセント、個人開発者のクラフト感、余白多め、1案に絞って仕上げる。

結果——何が変わったか

出てきたデザインは、元のものとかなり違った。

Claude Designでリニューアル後のポートフォリオLP（モノクロ＋シンプル構成）
↑ 改善後トップ。
Claude Designでリニューアル後のポートフォリオLP Aboutセクション
↑ 改善後 About セクション。

変化を整理するとこうなる。

  • 配色：青〜ティールのグラデーション → ベージュ・オフホワイトのモノトーン + アクセントカラー
  • ヒーロー：ボタン3つ・情報密度高め → テキストとイラスト1枚、ボタン2つでシンプル
  • 全体の印象：「フルスタックエンジニアのポートフォリオ」→ 「個人で作って個人で運営している人のサイト」

自分のスタイル（凛ちゃんと暮らしながら個人開発を続けている、という雰囲気）が、デザインに出るようになった感覚がある。

正直な感想——良かった点と限界

良かった点

既存コードを読んでくれる。 「どんなサイトですか」を説明しなくていい。ファイルを渡せば、構成・配色・コンテンツを自分で把握してくる。ここが一番時間を節約できた部分だ。

質問UIが判断を整理してくれる。 「いい感じに」という曖昧な指示に対して、方向性を言語化する手伝いをしてくれた。デザイン経験がなくても選びやすい形になっている。

発表翌日でも普通に動いた。 Research Preview扱いで安定しているかどうか心配だったが、問題なく使えた。

限界を感じた点

細かい調整は会話が必要。 1発で完成ではなく、「ここのフォントをもう少し大きく」「このセクションの余白を詰めて」といったやり取りを重ねる前提だ。ツールというより、デザイナーとの会話に近い。

既存のコードベースとの整合性は自分で確認する必要がある。 デザインが変わった部分を実装に反映するのは自分の作業だ。Claude Codeへのハンドオフ機能はあるが、まだ試していない。

個人開発者・エンジニアに向いているか

デザイナーではないが、自分のプロダクトやサイトを自分で作っている人には合っていると思う。

「デザインに時間をかけたくないが、なんとかしたい」という場面が個人開発には多い。そこでFigmaを開く前に、まずClaude Designに投げてみるのは選択肢として成立する。

ゼロからのデザイン生成より、既存のものをたたき台として改善する使い方の方が精度が出やすい印象だった。コードがある状態で渡すのがおすすめだ。

エンジニアが自分のLPやプロダクトの見た目を整えるための道具として、十分に実用的だと感じた。

まとめ

Claude Designを「いい感じにリニューアルして」の1行で試してみた。

プロセスとして印象に残ったのは、方向性を選ぶUIをClaudeが自分で生成してきた点だ。「テキストで指示して、生成物を受け取る」だけでなく、方向性の決定そのものをサポートする設計になっている。

個人開発でデザインが後回しになっている人は、一度試してみる価値はある。claude.ai/design（Pro以上のプランで利用可能）。

なお、この記事のアイキャッチ画像もClaude Designで作った。

本記事は2026年4月時点の情報をもとに書いています。Research Previewのため、機能・UIは変更される可能性があります。