Claude Designのオンボーディングから、LP作成、アニメーションまで一通り触ってみて体感したことと気づきをTips形式でまとめます。

1. LP作成はテキスト一発でもかなり形になる

「架空の苔玉盆栽ショップのLPを作って」という短いプロンプトだけで、ヒーローセクション・こだわりの紹介・店舗情報・CTAボタンまで一通り渋い雰囲気で仕上がりました。

気づき：

• 画像は プレースホルダーのみです。Claude Designは画像生成機能を持たないので、実写真やイラストは別途用意する必要があります（自分の写真をアップロードするか、他の画像生成ツールで作ってから差し込む形になります）。
• レスポンシブは自動では効きません。「モバイル・タブレット・デスクトップで綺麗に表示されるように」と明示的に頼むと対応してくれます。
• ハンバーガーメニューも同様で、指示していないと素朴なナビのままなので、モバイル対応する場合は別途「ハンバーガーメニューにして」と頼む必要があります。

なので、最初のプロンプトに要件を盛り込むほど手戻りが減るようです。後から追加指示すればいくらでも修正反映できるので、慌てなくて大丈夫。

2. 複数パターンの提案が一括で出てくることがある

モバイルアプリのオンボーディングフロー（4画面）を頼んだところ、頼んでいないのに3つの配色案（サンライズコーラル/メドウポップ/シトラスデュオ）を一度に出してくれました。

気づき：

明示的に「パターンを出して」と言わなくても、Claude側が判断してバリエーションを提示してくれることがあるようです。比較検討したい場合は、この挙動を待ってみるのも良さそうです。

3. ジェスチャー系（スワイプ・ドラッグ）はまだ不安定です

オンボーディング画面でスワイプを頼んだところ、ダウンロードしたHTMLを開くと onMoveB is not defined というエラーが発生しました。実際にファイルを覗いてみると、原因はこうなっていました（修正前のコード）。

onPointerMoveFor(key) {

  if (!this._moveFns) this._moveFns = {};

  if (!this._moveFns[key]) {

    this._moveFns[key] = (e) => {

      const d = this._drag && this._drag[key];

      const el = this.trackRefs[key];

      if (!d || !d.dragging || !el) return;

      const delta = e.clientX - d.startX;

      el.scrollLeft = d.startScroll - delta;

    };

  }

  return this._moveFns[key];

}

<div

  onpointerdown="{{ onDownB }}"

  onpointermove="{{ onMoveB }}"

  onpointerup="{{ onUpB }}"

  ...

></div>

onpointermove のようなPointerEvent系のバインディングが、書き出しランタイムでは解決されていませんでした。Claudeに伝えると、マウスイベントに切り替えて再書き出ししてくれました（修正後のコード）。

onMouseMoveFor(key) {

  if (!this._moveFns) this._moveFns = {};

  if (!this._moveFns[key]) {

    this._moveFns[key] = (e) => {

      const d = this._drag && this._drag[key];

      const el = this.trackRefs[key];

      if (!d || !d.dragging || !el) return;

      const delta = e.clientX - d.startX;

      el.scrollLeft = d.startScroll - delta;

    };

  }

  return this._moveFns[key];

}

<div

  onmousedown="{{ onDownB }}"

  onmousemove="{{ onMoveB }}"

  onmouseup="{{ onUpB }}"

  ...

></div>

ロジック自体（e.clientX からの差分計算）は一切変わっていません。イベント名だけを onpointer* → onmouse* に変更した形です。

気づき：

修正後、カーソルは手のひらマークに変わりましたが、実際のスワイプ動作は最終的に動きませんでした。おそらく touch-action: pan-y の指定や、マウスイベントだけではタッチデバイスのドラッグまでは拾えない、といった別の要因が絡んでいそうです。単純なクリック・ホバーは安定していますが、ドラッグ・スワイプのような複雑なジェスチャーはまだ再現性が低い印象です。凝ったインタラクションが必要な場合は、無理に粘らずClaude Codeなどコードベースの環境に引き渡す方が良さそうです。

4. アニメーションは指示の具体性で品質が変わります

シンプルな「クリック時にふわっと弾むアニメーション」は問題なく3つのCTAボタンに反映されました。さらに「カードの並び替え」でFLIPアニメーション（要素の位置変化を滑らかに見せる手法）を頼むと、シャッフル演出として実装されました。

気づき：

• 基本的なCSS keyframesレベルのアニメーション（フェード、バウンド、色変化）は安定して出せるようです。
• FLIPのような技術用語で指示しても、ちゃんと意図を汲んで実装してくれます（「カードの並び替えで」のような具体的な適用箇所を伝えるとスムーズでした）。
• より高度な物理演算的な動きや3D、スクロール連動などが欲しい場合は、GSAPやFramer Motionのような具体的なライブラリ名を出して頼むと精度が上がるようです。「ふわっと」ではなく「バネのように、少し重みを感じる動きで0.4秒くらい」のように具体的に伝えるのがコツかもしれません。

5. HTML配布という選択肢について

作業中に思ったのが、最近よく見る「Wikiではなく1枚のHTMLで資料を回覧する」という流れは、こういうツールの普及と地続きなのではないか、ということです。

気づき：

• 向いている：一発で見せて終わりの資料（提案書、オンボーディング初日資料など）。見た目のインパクトが出しやすいです。
• 向いていない：複数人で継続的に更新する情報（開発ルール集など）。検索性・履歴管理・権限管理がないため、育てていくナレッジには不向きです。

「回覧的に見せる」か「継続的に使う」かで、HTML配布とWiki的ツールを住み分けるのが良さそうです。

+++

と、このあたりまで執筆した段階で、フジモリさん にチェックいただいたところ、「何ぬるいことやってるんすかｗ ガチで使うならここからが本番ですよ」と愛のある（と信じてる）煽りをいただきました。

面目至極。

というわけで、ここからは フジモリさん にバトンタッチし、Claude Designを実際の開発フロー（Next.js + Claude Code）にガチで組み込むとどうなるか、の実機検証に突入します。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/56331

もっと上を目指したあなたへ

現在、ライトコードでは「WEBエンジニア」「データエンジニア」「ゲーム・XRエンジニア」「UI/UXデザイナー」「PM/PMO」などのポジションで積極採用中です！

ライトコードは、技術力に定評のある受託開発をメインにしているIT企業。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です！

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは一度、【Wantedly内の弊社ページ】をのぞいてみてください。

Wantedly：https://www.wantedly.com/companies/rightcode