Claude Designファーストインプレッション（講義で使うにはまだ難しい）
先日のFigmaとStitchの話を書いたときは噂段階だったClaude Designが発表されたので少し触ってみました。
基本的には「学校の講義で使えるかどうか。使えないとしたらどうすれば使えそうか」の目線で使っています。
出て間もないリサーチプレビューで結論づけるのは早急ですが、現在の印象は「Claude Codeを講義に取り入れられたとしても、週間制限の上限の低さから採用は難しい」といったところでしょうか。
とは言え、それを除けば全体的に使いやすく満足する成果物も作りやすいと思います。Stitchのときにも書きましたが、Claude Designではデザインシステムを構築して生成のベースにできるので、アウトプットに対して一定のクオリティコントロールをできるのは初学者にも嬉しい点です。デザインシステムはFigmaの.figファイルからでも作れるので、こちらでいくつかスタイルの違うパターンを用意して、それを使ってもらう流れができそうです。ただ、これもStitchのときに書きましたが、それが学生の学習にとって良いのか悪いのかは広い視野で考えないといけないトピックでもあります。
以下は試しにペーパープロトタイプとコンポーネントを集約した.figファイルを読み込ませて生成したものです（デザインシステムの追加導線が表示されていなかったのか見逃したのか、単に添付ファイルとして渡してしまった）。
Claude Designで試しに生成したもの
雑なプロンプトを渡したので細部まで意図した設計にはなっていませんが、元のペーパープロトタイプから大きく逸脱していないのが好印象です。Stitchだと制約をかけても改変されてしまうことがたびたびあるので、この再現性は講義でも役立ちそうです。
一方で、これだけでClaude Designの使用量が7割弱まで埋まったので、小〜中規模のプロダクトを作ってもらう自分の講義だと採用は難しいでしょう。今後、正式版で上限がどれくらいまで上がるのか気になります。なお、この使用量の上がり方が一度の生成に対してなのか画面数に対してなのかは未検証なので、もし一度に10数画面のペーパープロトタイプを渡して生成しても同等なのであれば検討はやや前向きになるかもしれません。
ちなみに上記の出力された画面ですが、これがプレビューというわけではなくhtmlそのものであるのは盲点でした。つまり、このままだとプロトタイプとしては使えないわけです。幸いClaude Codeに渡したあとで変換してもらったら問題なく動作するものができましたが、Stitchのように画面の一覧とプロトタイプの管理に柔軟性がないのはネガティブな評価になります。とは言え今後改善されるでしょうし、最初からプロンプトに含めていればおそらく問題ないでしょう。
そのほか、講義に採用する目線で気になるのは共有設定でしょうか。試していないので不明ですが、おそらく個人プランの利用では他人との共同作業ができないのではと思います。自分の講義はグループ課題を含んでいるので、個々人でしか作業できないと無理が発生しそうです。
そしてもちろん、学校がClaudeを契約していない場合、学生個人での支払いが必要な点も忘れてはいけません。というか、これがある意味ではもっともハードルが高いとも言えます。仮にClaude Designが上限を気にせず使えるようになったとしても月契約で2〜3ヶ月使うとなると1万円くらいはしますから、いち講義の受講に対してこの金額の支払いが発生するのは悩ましい点です。
また、仮に講義で使えるようになっても、学生にソフトウェアの知識がない前提で講義を設計する必要があります。FigmaのようにPhotoshopやIllustratorの知識や経験が活きるわけではないですし、ソフトウェアやプログラミングといった「よくわからないもの」に対する忌避感をなくすことからスタートしないと使ってもらえないでしょう。使い始めるためにはまとまった準備期間が必要であり、これ以上講義のコマ数を割けないという現実的な問題と直面します。
あとは制作物目線でいうと、Figmaで制作するプロトタイプは誤魔化しが効きやすいのに対してClaude Designで作ったものは誤魔化すのが難しい、といったものもあります。FigmaとClaude Designでは「プロトタイプ」に求められる精度や振る舞いは異なるものと言えるでしょう。もちろん、入力系統やデータの扱いが正しく動作しやすいClaude Designの魅力は大きく、作業ボリュームと成果物のバランスがうまく取れれば、UIデザインの講義形態としては次のステップに進める期待もあるのですが。
講義で制作するプロダクトは基本的にネイティブアプリを想定しているので、プロトタイプのプレビュー手段が限定的なのも悩ましい点です。これはStitchでも同様に困っているのですが、htmlで作成したネイティブアプリ風の画面を適切にフルスクリーンで表示・操作するベストプラクティスがなかなか見つかりません。現状だと、ローカルにhtmlを保存してローカルサーバーを起動してSafariでアクセス→ホーム画面に追加…とかになるのでしょうか。学生にターミナルを触らせるというのは、やや過剰に感じてしまいます。
と、ここまで書いてふと思いましたが、講義ではなく卒業制作であれば採用の現実味はありそうです。意欲のある学生に個別でサポートするくらいの労力であれば、また卒業制作という長期間であれば、上に挙げた懸念点のいくつかはクリアできそうです。今後はリサーチや検証に力を入れながら、Claude Designなどで作った実働するプロダクトが卒業制作展でも多く見られるようになるかもしれません。
余談ですが、これからは「高精度（Hi-Fi）プロトタイプ」という言葉は使われなくなっていくのかなという気がしています。高精度・低精度のラベルは、デジタルプロダクトでは主にペーパープロトタイプとデザインツールで作るプロトタイプの区分けに使われていますが、StitchやClaude Designで作られるプロトタイプはより高精度…というかプロトタイプと本番の製品のグラデーションのようになりつつあります。そうなると、製品の初期状態をプロトタイプと指し、デザインツールで作られるものも低精度に分類されたり、簡素な表現に落ち着く未来もあり得るのでは、なんて思ってしまいました。
そういえば、iOSネイティブなプロトタイプが作れることで有名だったPlayはサービスを終了してしまいましたが、あたらしいものに取り組んでいるとのことなので、Figma、Stitch、Claude Designに続く候補として面白いサービスが生まれたら嬉しいな、と密かに願っています。
先日のFigmaとStitchの話を書いたときは噂段階だったClaude Designが発表されたので少し触ってみました。
基本的には「学校の講義で使えるかどうか。使えないとしたらどうすれば使えそうか」の目線で使っています。
出て間もないリサーチプレビューで結論づけるのは早急ですが、現在の印象は「Claude Codeを講義に取り入れられたとしても、週間制限の上限の低さから採用は難しい」といったところでしょうか。
とは言え、それを除けば全体的に使いやすく満足する成果物も作りやすいと思います。Stitchのときにも書きましたが、Claude Designではデザインシステムを構築して生成のベースにできるので、アウトプットに対して一定のクオリティコントロールをできるのは初学者にも嬉しい点です。デザインシステムはFigmaの.figファイルからでも作れるので、こちらでいくつかスタイルの違うパターンを用意して、それを使ってもらう流れができそうです。ただ、これもStitchのときに書きましたが、それが学生の学習にとって良いのか悪いのかは広い視野で考えないといけないトピックでもあります。
以下は試しにペーパープロトタイプとコンポーネントを集約した.figファイルを読み込ませて生成したものです（デザインシステムの追加導線が表示されていなかったのか見逃したのか、単に添付ファイルとして渡してしまった）。
Claude Designで試しに生成したもの
雑なプロンプトを渡したので細部まで意図した設計にはなっていませんが、元のペーパープロトタイプから大きく逸脱していないのが好印象です。Stitchだと制約をかけても改変されてしまうことがたびたびあるので、この再現性は講義でも役立ちそうです。
一方で、これだけでClaude Designの使用量が7割弱まで埋まったので、小〜中規模のプロダクトを作ってもらう自分の講義だと採用は難しいでしょう。今後、正式版で上限がどれくらいまで上がるのか気になります。なお、この使用量の上がり方が一度の生成に対してなのか画面数に対してなのかは未検証なので、もし一度に10数画面のペーパープロトタイプを渡して生成しても同等なのであれば検討はやや前向きになるかもしれません。
ちなみに上記の出力された画面ですが、これがプレビューというわけではなくhtmlそのものであるのは盲点でした。つまり、このままだとプロトタイプとしては使えないわけです。幸いClaude Codeに渡したあとで変換してもらったら問題なく動作するものができましたが、Stitchのように画面の一覧とプロトタイプの管理に柔軟性がないのはネガティブな評価になります。とは言え今後改善されるでしょうし、最初からプロンプトに含めていればおそらく問題ないでしょう。
そのほか、講義に採用する目線で気になるのは共有設定でしょうか。試していないので不明ですが、おそらく個人プランの利用では他人との共同作業ができないのではと思います。自分の講義はグループ課題を含んでいるので、個々人でしか作業できないと無理が発生しそうです。
そしてもちろん、学校がClaudeを契約していない場合、学生個人での支払いが必要な点も忘れてはいけません。というか、これがある意味ではもっともハードルが高いとも言えます。仮にClaude Designが上限を気にせず使えるようになったとしても月契約で2〜3ヶ月使うとなると1万円くらいはしますから、いち講義の受講に対してこの金額の支払いが発生するのは悩ましい点です。
また、仮に講義で使えるようになっても、学生にソフトウェアの知識がない前提で講義を設計する必要があります。FigmaのようにPhotoshopやIllustratorの知識や経験が活きるわけではないですし、ソフトウェアやプログラミングといった「よくわからないもの」に対する忌避感をなくすことからスタートしないと使ってもらえないでしょう。使い始めるためにはまとまった準備期間が必要であり、これ以上講義のコマ数を割けないという現実的な問題と直面します。
あとは制作物目線でいうと、Figmaで制作するプロトタイプは誤魔化しが効きやすいのに対してClaude Designで作ったものは誤魔化すのが難しい、といったものもあります。FigmaとClaude Designでは「プロトタイプ」に求められる精度や振る舞いは異なるものと言えるでしょう。もちろん、入力系統やデータの扱いが正しく動作しやすいClaude Designの魅力は大きく、作業ボリュームと成果物のバランスがうまく取れれば、UIデザインの講義形態としては次のステップに進める期待もあるのですが。
講義で制作するプロダクトは基本的にネイティブアプリを想定しているので、プロトタイプのプレビュー手段が限定的なのも悩ましい点です。これはStitchでも同様に困っているのですが、htmlで作成したネイティブアプリ風の画面を適切にフルスクリーンで表示・操作するベストプラクティスがなかなか見つかりません。現状だと、ローカルにhtmlを保存してローカルサーバーを起動してSafariでアクセス→ホーム画面に追加…とかになるのでしょうか。学生にターミナルを触らせるというのは、やや過剰に感じてしまいます。
と、ここまで書いてふと思いましたが、講義ではなく卒業制作であれば採用の現実味はありそうです。意欲のある学生に個別でサポートするくらいの労力であれば、また卒業制作という長期間であれば、上に挙げた懸念点のいくつかはクリアできそうです。今後はリサーチや検証に力を入れながら、Claude Designなどで作った実働するプロダクトが卒業制作展でも多く見られるようになるかもしれません。
余談ですが、これからは「高精度（Hi-Fi）プロトタイプ」という言葉は使われなくなっていくのかなという気がしています。高精度・低精度のラベルは、デジタルプロダクトでは主にペーパープロトタイプとデザインツールで作るプロトタイプの区分けに使われていますが、StitchやClaude Designで作られるプロトタイプはより高精度…というかプロトタイプと本番の製品のグラデーションのようになりつつあります。そうなると、製品の初期状態をプロトタイプと指し、デザインツールで作られるものも低精度に分類されたり、簡素な表現に落ち着く未来もあり得るのでは、なんて思ってしまいました。
そういえば、iOSネイティブなプロトタイプが作れることで有名だったPlayはサービスを終了してしまいましたが、あたらしいものに取り組んでいるとのことなので、Figma、Stitch、Claude Designに続く候補として面白いサービスが生まれたら嬉しいな、と密かに願っています。