こんにちは。弊社（株式会社ライズ）では、これまで自身で作成したウェブサイトを、生成AIツールを使って全面リニューアルしました。
正直、ここまで楽に、しかもここまで見栄えよくできるとは思っていませんでした。同じようなことをしたいと思っている方や生成AIの活用例としてご紹介します。
まずはClaude Designでデザイン更新案を作成した話からご紹介します。
従来のウエブサイトはこちら
リニューアルで目指したこと
従来のモジュール構成には特に不満がないものの、今回改善したかったのはデザイン面でした。
- 手作り感のあるデザイン ── ある程度意図して作っていたものの、全体的に古さが出ていた
- 業務情報の閲覧性 ── サービス内容や料金など、見てほしい情報が伝わりにくかった
- TOPICSの記事ページ ── ブログ・お知らせの更新頻度を上げたいが、読みやすさに課題があった
これらを解決するため、今回はAIによるデザイン刷新に取り組みました。
Claude Designによるデザイン更新
Claude Designとは
Claude Designは、Anthropicが2026年4月にリリースしたAIデザインツールです。
テキストプロンプトで指示するだけで、Webプロトタイプ・スライド・ランディングページ・マーケティング素材などを生成できます。
既存サイトのURLを読み込ませてブランドカラーやフォントを自動抽出し、それを踏まえたデザイン提案が可能となり、html編集の経験がない方、デザイン未経験者でもかなり見栄えのするサイトデザインが可能となります。
初期画面はこのような画面です。まず最初に左下のプロンプトに指示を出します。
初期デザイン作成の指示
最初のステップでは、現状のサイトをClaude Designに読み込ませ、デザインのイメージを伝えるプロンプトを入力しました。
参考にしたのは「テキスト中心のシンプルなデザイン」と「デジタル庁サイトの日本語フォント・配色」。最初のプロンプトはこれだけです：
私の会社のウェブサイト https://www.rise-pat.com のデザイン変更を検討しています。
内容は現状のままでよいのですが、見た目を大きく変更したいです。
テキスト中心のサイトが良いと考え、参考にしたいのは https://xxxx.com です。
ただし日本語サイトなので、フォントや文字色はデジタル庁 https://www.digital.go.jp/ を参考にしたいです。
この情報をもとにトップページをデザインしてください。
数行のプロンプトを送るだけで、ページ が生成されてその場でプレビューが表示されました。（TOPICSの欄はのちに編集で追加）
いきなりイメージに近いものがでてびっくりしました
編集作業
初期デザインができた後の編集も非常にシンプルです。
編集方法は2つ：
- プロンプトで指示 ── 「ヘッダーの文字をもう少し大きく」「背景色をオフホワイトに」など文章で伝える
- コメント機能で直接指摘 ── 画面上の修正したい箇所にコメントを入力して送信
レイアウト変更・フォント変更・色の指定など、多少あいまいな言い方でもしっかり意図を汲んで的確に編集してくれます。自分でHTMLを触る必要はありません。
上記のデザイン提案の画像のうち、TOPICSの欄は含まれていませんでしたが、TOPICS欄の追加、日付と記事タイトルの分離、日付のタブ、タグなどは段階的に編集で指示して追加しました。
かなり機能性があり、かつデザイン性のあるトップページができました。
まとめ
自分でHTMLのデザイン変更・レイアウト編集をやると、1週間近くかかりそうな作業が、数時間で完結してしまいました。
ただし、イメージ通りの仕上がりにするためには、いくつかのコツがあると感じました。
① 最初の指示は具体的に サイトの目的・デザインイメージ・参考サイトのURL・使いたい色など、できるだけ具体的に伝えるほどイメージに近いものが出てきます。ただし、他者サイトの完全コピーにならないよう配慮は必要です。
② 編集は段階的に 「この箇所をこんな風に全部直してほしい」と一度に大きな指示を出すより、修正を小分けにして段階的に進めた方が精度が上がります。また都度確認しながら進められるので、「思ったのと違う」となった場合も直前の状態に戻せます。
また、デザインファイルのエクスポートや Claude Code との連携機能も備わっており、生成したデザインをそのまま実装フェーズに持ち込むことも可能です。
この後の実装についてはclaude codeで行いました。この辺りの連携については、また別の記事でご紹介できればと思います。
注意点
Claude Designは Pro・Maxプランが必要です（2026年4月現在はリサーチプレビュー）。
無料プランでは利用できません。まずはProプランで試してみることをおすすめします。
また、利用量の上限に注意したいです。Claude Designには利用コンテキスト（使用量）の制限があります。
デザインの生成・編集を繰り返していると、プランごとの上限に達することがあり、その場合は数日間利用できなくなります。
今回の編集程度では特に利用制限まで達することはありませんでした。