Claudeでサイトリニューアルの戦略設計を進めてみた

おはようございます、デザイナーとしてアートディレクションとUX業務を担当しているSHIRAI（@shirai_astaster）です。

最近Claudeを使っていろいろ試しているのですが、今回はアスタスタで普段やっている「戦略設計」を、Claudeでも進められないかを試してみました。

ここでいうサイトリニューアルは、デザインや実装までを含む全体の話ではなく、その前に行う戦略設計の部分にフォーカスしています。

アスタスタではサイトリニューアル前に、課題を整理し、方針を考え、コンセプトをつくり、施策や構成、導線に落としていくことがよくあります。 今回はその流れをClaudeの中でもたどれるようにして、整理の相手としてどこまで使えるかを見てみました😀😀

戦略設計とは

戦略設計は、サイトリニューアルの方向を決めるときなどに考えることを整理していく工程です。

「課題を整理する」「実現するための方針を整理する」「核となるコンセプトをつくる」そのうえで「施策や構成・導線」に落としていく。 アスタスタでは、サイトの見た目を考え始める前にまずはこの流れを整理します。

「何を伝えるべきか」「どんな順番で見せるべきか」「どこに強みがあるのか」そういった土台が曖昧なままだと、デザインを進めても全体がぼやけやすくなります。

戦略設計ではまずその土台を整理していきます。

Claudeでどう進めたか

普段アスタスタでやっている戦略設計の流れを、STEPごとに区切ってClaudeと一緒に考える形にしました。論点が広がりすぎず、その都度相談しながら整理しやすくなるためです。

今回は弊社のコーポレートサイトを例にしながら、その流れを説明します😀😀

STEP1 課題を整理する

課題整理では、いまのサイトにどんな課題があるのかを見ていきます。何を伝えたいのか、強みはどこにあるのか、それが今のサイトでどう見えているのかを確認していく工程です。

今回はアスタスタのサイトを題材に、どこが課題になりそうかClaudeに見てもらいました。

「何ができる会社なのか」「どこに強みがあるのか」が最初に伝わりきらず、印象が少し広がって見えやすいことが大きな論点として上げられています。

Claudeに課題や仮説を出してもらい、頭の中だけで考えているとぼんやりしている「伝え方の問題」「構造の問題」といった形で改めて言語化されることで、どこに課題があるのかにフォーカスしやすくなりました。

実際の出力はこんな感じ

- 主要な課題
  - 事業領域や提供価値の幅広さが、最初の数秒では伝わりきりにくい
  - 「デザイン会社」なのか「技術に強い会社」なのかの印象が分散しやすい
  - 相談できる内容のイメージが具体化しにくい
- 原因の仮説
  - 強みはあるが、見せる順番が分散している
  - 実績・技術・発信がそれぞれ存在していても、ひとつの印象としてつながりにくい
  - 初回訪問者に向けた導入の整理が弱い
- 次のSTEPで考えること
  - 何を最初の印象として置くか
  - アスタスタらしさを最も自然に伝える見せ方は何か

STEP2 実現するための方針を整理する

方針整理では、見えてきた課題をどういう方向で解いていくのかを考えます。何を強みとして見せるのか、どんな印象を先に持ってもらいたいのか、その方向性を整理していく工程です。

アスタスタのサイトであれば、どんな見せ方をすると自社らしさが自然に伝わるのかをClaudeに見てもらいました。 機能や実績をただ足していくより、UXの視点を持ちながら技術も扱える会社だということが伝わる見せ方を整理する必要がありそうです。

複数の方向性を並べて比較するたたき台を出してもらいました。 「技術力を前に出す」「UXの視点を前に出す」「新しい取り組みを前に出す」といった見せ方が上がってきて、それぞれの良さと弱さが整理されることで、どの方向に寄せるべきか考えやすくなりました。

実際の出力はこんな感じ

- 方針案A：技術力を前面に出す
  - 新しさや実装力は伝わりやすい
  - ただし、アスタスタのUX的な強みが相対的に見えにくくなる
- 方針案B：UXの視点を起点に見せる
  - 課題整理から提案できる会社としての印象をつくりやすい
  - 一方で、技術的な面白さや広がりは補足が必要
- 方針案C：UXと技術をつなぐ会社として見せる
  - アスタスタらしさは最も出しやすい
  - 見せ方を整理しないと抽象的になりやすい
- 採用したい方向
  - UXの視点を土台にしながら、技術も扱えることが自然に伝わる方向

STEP3 核となるコンセプトを設計する

コンセプト設計では、サイト全体の軸になる言葉を考えます。言葉を整えるというより、その後の構成や導線にもつながる、一本通った考え方をつくっていく工程です。

アスタスタの場合、どんな言い方なら自社らしさが自然に伝わるのか。 デザイン会社として見せるのか、技術に強い会社として見せるのか、UXから整理できる会社として見せるのかで印象はかなり変わります。 ただ、実際にはそのどれかひとつだけではありません。だからこそ、全部盛りにして曖昧になるより、アスタスタらしい強みが一本通る言い方を探す必要がありそうです。

Claudeには、コンセプトの言い換え案やニュアンスの違う候補をいくつか出してもらいました。候補が上がってくることで、何を強く出すと何が抜けるのかが整理され、どの言葉がいちばんしっくりくるか考えやすくなりました。

実際の出力はこんな感じ

- コンセプト候補A
  - 課題を整理し、体験に変える
- コンセプト候補B
  - UXと技術で、伝わる体験をつくる
- コンセプト候補C
  - 設計から実装まで、一貫して体験をつくる
- 採用案
  - UXと技術で、伝わる体験をつくる
- 採用理由
  - アスタスタの強みである「UXの視点」と「技術との接続」が両方入る
  - その後の構成や導線にも展開しやすい

STEP4 施策や構成、導線を整理する

施策や構成・導線の整理では、コンセプトを実際のサイトにどう落としていくかを考えます。 トップページで何を先に伝えるか、実績や技術をどこに置くか、導線をどうつなぐかを整理していく工程です。

今回はアスタスタのサイトを題材に、どんな構成にすると自社らしさが伝わりやすいのかをClaudeに見てもらいました。 トップで何を印象づけるか、実績をどう見せるか、技術やブログをどう位置づけるかで、受け取られ方はかなり変わります。だからこそ、コンセプトをそのまま言葉で置くだけではなく、構成としてどう見せるかまで整理する必要がありそうです。

Claudeには、ページ構成案や情報の並び順、導線の分け方などの骨組みを先に出してもらいました。構成案が上がってくることで、どこに何を置くと伝わりやすいのかが整理され、「ここは違う」「ここは使える」と見ながら調整しやすくなりました。

実際の出力はこんな感じ

- トップページで先に伝えること
  - アスタスタは、課題整理から体験設計、実装までつなげて考えられる会社である
- 主要な構成案
  1. ファーストビューで印象づける
  2. できること・強みを整理して見せる
  3. 実績で具体化する
  4. 技術や取り組みで広がりを見せる
  5. 問い合わせ導線につなぐ
- 導線の考え方
  - 初回訪問者には「何ができる会社か」が先に伝わる流れ
  - 検討段階の人には実績や事例に進みやすい流れ
  - 技術や発信に興味がある人にはブログや取り組みへ広げる流れ

やってみて感じたこと

Claudeが戦略設計を代わりにやってくれる、というよりは各STEPで考えるためのたたき台・壁打ちをしてくれる相手としてちょうどよかった、という感じでした。

課題整理では、論点を切り分けるたたき台になる。
方針整理では、見せ方の違いを比較しやすくなる。
コンセプト設計では、言葉の候補を広げながら、どこに重心を置くかを見やすくしてくれる。
施策や構成、導線を考える段階では、骨組みを先に見える形にできる。

STEPごとに見たいことが整理されることで、こちらも考えやすくなる感覚がありました。

もちろん、そのまま使える答えが出てくるわけではありません。 正直、無難な回答、きれいにまとまりすぎたりすることが多くちょっと物足りない感じもしました。

ただ最初のたたき台があれば、そこから「ここは違う」「ここは使える」と判断しやすくなるのはかなり大きく、考える負担がだいぶ軽減されます。

最初から全部を出してもらうのではなく、その段階で見たいことだけを一緒に整理していく。 今回のやり方は、そのくらいの距離感がいちばん使いやすそうでした。

まとめ

今回はアスタスタのサイトを題材に、Claudeで戦略設計を進めてみた流れを整理してみました😀😀

課題を整理する。
実現するための方針を整理する。
核となるコンセプトを考える。
そのうえで、施策や構成、導線に落としていく。

アスタスタで普段やっているこの流れを、Claudeの中でもたどれるようにしてみると、戦略設計を考える相手としてかなり相性がよかったです。

派手な使い方ではありませんが、こういう整理の部分こそ新しい技術が効きやすいのかもしれません。

アスタスタでは、これからも新しい技術をただ試して終わりにするのではなく、実務の中でどう活かせるかを見ながら使っていきたいと思います😀😀