Claude Designでコーポレートサイトのリニューアルを行って気づいたこと

こんにちは。株式会社シェアウィズの辻川です。

最近（2026年4月22日）、コーポレートサイトのリニューアルを行いました。

株式会社シェアウィズ | コーポレートサイト

学ぶメリットありまくり社会の実現。スキル証明経済圏をつくる株式会社シェアウィズのコーポレートサイトです。WisdomBaseを通じて、スキルが資産になる社会を目指します。

company.share-wis.com

弊社のミッション・ビジョンを刷新したため、サイトの内容も更新しました。

力強く新しいミッション・ビジョンを前面に出すページがいいなと思い、途中までClaude Codeで作業を行っていたのですが、リニューアルサイトの公開直前の4月17日にClaude Designのリリースがアナウンスされ、「これは使ってみるしかないな」と思い、Claude Designを使ってコーポレートサイトのリニューアルを行うことにしました。

Introducing Claude Design by Anthropic Labs

Today, we’re launching Claude Design, a new Anthropic Labs product that lets you collaborate with Claude to create polis...

www.anthropic.com

この記事ではコーポレートサイトのリニューアルをClaude Designで行ってみて気づいたことを紹介したいと思います。

AIで改善しやすいサイトにするための「脱WordPress」

Claude Designのリリースがアナウンスされる前からコーポレートサイトのリニューアルの準備を進めていました。

新しいミッション・ビジョンを掲載した内容にする、という目的の他に、AIによる管理を行いやすい構成にすることもリニューアルの狙いでした。

リニューアル前は WordPress + AWS Lightsail という構成でしたが、Claude Codeなどでページの内容をいじった後に、すぐに本番に変更を適応（デプロイ）するためにはWordPressではなかなか難しい点がありました。

また、コーポレートサイトは記事を追加したり内容を更新するのはお知らせページ ( https://company.share-wis.com/news/ ) くらいなもので、ほとんどが変更がめったに入らない静的コンテンツ、かつページ数も少ないため、機能豊富なWordPressは too much でした。

そこで、もっとライトでその分表示が爆速、かつサーバ費用もほぼ無料な Astro + Cloudflare Pages という構成に変えました。

Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

astro.build

フル スタックアプリケーション

Cloudflare Pagesをは、フロントエンドエンジニア向けフルスタックアプリケーションで、コードを簡単にデプロイできます。試してみませんか？

www.cloudflare.com

構成の吟味も、脱WordPressの作業もGeminiやClaude Codeを活用して1時間程度で完了しました。面倒な移管作業も思いの外スムーズに進行できました。

Claude Design で0→1のデザインを作る

脱WordPressも無事完了し、GeminiとClaude Codeでサイトリニューアルを進めようと思っていた矢先、Claude Designのリリースがアナウンスされました。
これは使ってみるしかないと思い、Claude Designを中心に作業を進めようと方針を転換しました。

Claude Designを開くと、最初にこれから作るものの資料の提供が求められます。

別途、Claude Codeとのやりとりを経て作成した DESIGN.md とロゴ画像を添付して以下の最初のプロンプトをClaude Designに投げました。

弊社のコーポレートサイトをリニューアルします。ミッションとビジョンを定義し直し、満足のいくものができました。それらを前面に出してなるべくシンプルなものにしたいと思っています。アニメーションも控えめに入れたいです。デザインルールは作成し、それをまとめた DESIGN.md を添付しました。

DESIGN.md にカラー・タイポグラフィ・コンポーネントのルールを事前にまとめておいて、デザインを一発で生成してもらうことを狙いました。

初回の出力はサイト全体の骨格として十分でしたが、細部には複数の問題が残っていました。ゴールを100としたら60くらいな感じでした。

フォントや改行周りでつまづく

細部の問題で一番多かったのが文字周りです。例えば以下のようなもの。

• 白い背景に白いフォントカラーで文字が見えない
• 意図しない句読点が混入されている
• 日英のフォントバランスが崩れる
• 改行位置が適切でない

矢印の箇所のテキストが白色になって何回指示しても直らなかった。

日本語のテキストの扱いが曲者ののようで、 jp-ui-contracts というのを試してみたりもしましたが、どうしてもうまくいきませんでした。

DESIGN.mdを日本語UIで本当に使える形へ｜hirokaji

jp-ui-contracts を公開しました AIでUIを作る流れが強くなるほど、逆に目立ってくるものがあります。 それは、日本語の詰めの甘さです。 色はそれらしく見える。 余白もそれっぽく整う。 カードやボタンの形も、かなり上手に出てく...

note.com

微調整のやりとりを何往復も重ねているうちに、自分がClaude Designの使い方自体を間違えているのではと思い始めました。

樹を切るのにノコギリではなく包丁で作業しているような感覚。

これではラチが明かないと思い、Claude Codeでの作業に切り替えました。

デザインの方向性: Claude Design / 仕上げ: Claude Code

Claude Design の公式のアナウンスでも、Claude Design の用途としてプロトタイプの作成が第一に挙げられています。

デザインの方向性やデザインルールを有したプロトタイプを作るのが得意であって、コーポレートサイトの細かい文字の位置の調整といった仕上げ作業が得意じゃないんだなということに、実際に作業をして気づきました。

Claude Design で「方向性を決め」、Claude Code で「仕上げる」という役割分担をするのが適切な使い方と思いました。

このフローを実現するためにCladue Designには “Handoff to Claude Code” という機能があって、簡単にClaude Codeに作業のバトン渡しができるようになっています。素晴らしい。

各ツールの得意・不得意を見極めて適切な使い方をしないと時間とトークン（Claude Designは特に2026年4月現在トークン使用量がすごく多いです）を浪費してしまうということを学びました。

ともあれコーポレートサイトのリニューアルも以前とは比較にならないほど素早く実現することができ、来年の今頃に同じことをやったらまったく別の体験になっているのだろうなと楽しみでなりません。

（辻川）