Claude を活用して 4 時間でランディングページを再構築した方法

@DhravyaShah
英語3 か月前 · 2026年4月15日
1.3M
1.5K
59
111
4.2K

TL;DR

Dhravya Shah 氏が、Claude Code、カスタム SVG アニメーション技術、そして AI ネイティブなコンテキスト統合を活用し、デザイン会社を介さずに 4 時間で Supermemory のランディングページを再構築したワークフローを紹介します。

イテレーションの速度は、スタートアップにとって最も重要な要素です。私たちのランディングページの初版は、トップデザインエージェンシーの1つによって構築されました。その後、数ヶ月後に別のエージェンシーで再構築しました。

こうした大きな変更は、supermemory の旅程のさまざまなフェーズを通じて行われました。製品の提供内容、ブランディング、その他諸々が進化し続ける中で、私たちはマーケティングでの伝え方も繰り返し改善していきました。

エージェンシーは本当に素晴らしい仕事をしてくれました!彼らは、現在の supermemory ブランドの背後にあるブランディングと認識の多くをもたらしてくれました。これまでのすべての支援に本当に感謝しています。

しかし、たった1つの問題がありました。

イテレーションの速度です。

時代は変わりました。正直なところ — もしあなたが AI ネイティブでなければ、もう成功できないでしょう。

Dhravya Shah - inline image

フィードバックループ

ある時、私はエージェンシーに尋ねました。「このプロジェクトのスケジュールはどのくらいですか?」

私は数日、あるいは1週間程度を期待していました。しかし、彼らは多段階の作業計画を持ち帰ってきました — 見た目を決めるのに2週間、その後の実装に1週間、などなど。

プロジェクト全体で数ヶ月かかり、ランディングページは Framer に載ることになります。他のもの(アプリ、コンソールのデザイン)に関しては、彼らのデザインが完成した後、実際に実装する必要がありました。

ノーコードの呪い

Claude Code がこれほど優れる以前、私たちのランディングページは完全に Framer 上にあり、実際にデザインを行った人たちが完全に管理していました。彼らのセンスは良く、明らかに多くの労力と努力が注がれていました。しかし、何か変更を加えるには、Framer を知っている人に依頼する必要がありました。

それは本当に呪いになりました。マーケティングページやブログなどを追加するたびに、面倒な作業が発生しました。Web サイトは JavaScript を読み込みすぎたり、SEO に最適ではなかったり、アニメーションがブラウザを完全に遅くしたり — 私たちはただ彼らに改善を依頼するしかありませんでした。

そして、どのように正確に改善すれば良いのか、私たちにはよくわかりませんでした。A/B テストを実際に行ったり、メッセージを最適な方法で伝える方法を考えたり、コピーを改善したりすることが、私たち(当時 supermemory の全員が開発者でした)にとって困難でした。デザイナーへの支払いに加えて、Framer に年間数千ドルも支払っていました。何か変更があるたびに、私はエージェントに「これをやって」と指示できるわけではなく、細かく方法を説明し、納得がいくまで繰り返し作業しなければなりませんでした。

私はすべてを捨てることに決めました。もういい。ランディングページは自分で作ろう。

Claude Code で優れたデザインを

私はデザイナーではありません。でも、https://supermemory.ai をチェックしてみてください — これは Claude Code でたった4時間で構築されました。

そう、その通りです。私はまず Claude に、ユーザーに正確に何を伝えるべきかを尋ね、コピーを考えることから始めました。

この全体の作業は、1回の Claude Opus 4.6 1M セッションで行われました。

スキルを準備する。

計画に基づいて、Claude に本当に優れた SVG アニメーションを実行させたいと考えていました。インターネットで最高の SVG アニメーションコースを探し回り、それらを文字起こしし、最良の学びをスキルにまとめました。そのスキルは大したものではありませんでしたが、ベースラインを強固にするには十分でした。

サブエージェントがこれを準備しました。https://github.com/supermemoryai/skills/blob/main/svg-animations/SKILL.md

同様に、デザイナーに知っておいてほしいと私が考えたすべての基本スキルを準備しました。

Dhravya Shah - inline image

例えば、このセクションは完全に SVG アニメーションで作られています。

ツールを構築する。

多くのビジュアルに関して、いくつかのライブラリが必要になることがわかっていました。具体的には、アニメーション化された Ascii アートとピクセル化エフェクトのためです。

そこで、2つのサブエージェントに、これらのアニメーションを Web 上でパフォーマンス良く実現する最良の方法を考えさせ、主要なデザイン作業と混同しないように、それらをパッケージ化しました。

Claude は自動的にパッケージを作成し、私の Github に置きました — https://github.com/dhravya/landing-effects — さらに GIF も録画して追加し、アニメーションがどのように見えるかを示してくれました。

Dhravya Shah - inline image
Dhravya Shah - inline image

優れたメモリでループを閉じる

セッション全体を通して、Claude が実際にこれがどのように見えるかを確認し、考えていることを確実にしました。また、私たちが Supermemory Claude code プラグインを使用していたため、Claude はすべてのビジネス要件、チームが気にしていること、ユーザーが求めていることを把握していました。

私たちは顧客の録音やチームミーティングのすべてを自分のチームの supermemory に入れており、コーディングセッションにも同じものが適用されます。Claude はすでに私たちが何をしていて誰であるかをすべて知っていたため、コンバージョンを40%向上させるデザイン言語と戦略を生み出すことができました。https://github.com/supermemoryai/claude-supermemory

重要なのは、Claude にとって単に優れたメモリがあることだけではありません — supermemory はそれを非常にうまく行います。重要なのは、このメモリとコンテキストがコーディングセッションだけでなく、私たちの日常生活、claude.ai でのチャット、チームの openclaw エージェントなどから収集されているという事実です。

完全性

私は Claude にページ全体をパフォーマンスと SEO について分析するよう依頼しました — そして、それを実行しました。

Dhravya Shah - inline image

少し「バイブコーディング」されたように見えるかもしれませんが、私にはそれで構いません。何かをリリースするまで数ヶ月待つ代わりに、反復を重ねて素晴らしいものにできることを知っています。

AI ネイティブ — バックグラウンドエージェントに接続する

私たちはたった4人のフルタイム従業員で supermemory を構築しています。それだけです。そしてそれには私 — ソロファウンダー — も含まれます。

そのうちの1人(非技術者)は、バックグラウンドエージェントを使ってランディングページのすべての作業を自律的に行うことができます。

Dhravya Shah - inline image

つまり、チームの全員が今やデザイナーであり、十分なイテレーションサイクルがあるということです。

私たちはとんでもない時代に生きています。デザイン作業のほとんどは、物事を模索している段階では、チームが(そしてチームが行うべき)です。

デザインは製品にとって確かに重要です — しかし、ほとんどの人はおそらくそれに払いすぎています。

YouMindで再制作

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
クリエイターのために

あなたの Markdown をきれいな 𝕏 記事に

自分の長文を投稿するとき、画像・表・コードブロックを 𝕏 向けに整形するのは手間がかかります。YouMind は Markdown 全体を、そのまま投稿できるきれいな 𝕏 記事に変換します。

Markdown → 𝕏 を試す

解読すべきパターンをもっと

最近のバイラル記事

バイラル記事をもっと見る