Runwayのランディングページが持つ独特の引力
AI動画編集ツールを提供するRunwayのランディングページは、デザインまとめサイトであるLandbookやLapa Ninjaでも常に注目を集めている。多くのSaaSが「機能の一覧」や「効率化の数字」を最初に並べる中、Runwayは「CREATE IMPOSSIBLE VIDEO」や「Make the Impossible」といった、極めて抽象的でありながら感情を強く揺さぶるメッセージを掲げている。
インディーハッカーやソロファウンダーの視点で見ると、このような抽象的なアプローチは「機能が伝わりにくいのではないか」という疑問を生む。しかし、このデザインとコピーの連動性には、訪問者を一気に世界観へと引き込む緻密な計算が組み込まれている。ここでは、RunwayのLPを上から順に解剖し、その構造を自分のSaaSプロダクトにどう応用できるかを逆設計する。
ヒーローセクション：ビジュアルとメッセージの融合
一般的なSaaS LP
- 機能の一覧や効率化の数字を前面に提示
- 具体的な利便性やツール用途を訴求
- 理解しやすいが感情的インパクトは限定的
Runway LP
- 「Make the Impossible」等メッセージ重視
- 機能ではなく「状態の変化」や体験を提示
- 強烈なビジュアルで独特の世界観へ引き込む
ページの最上部であるヒーローセクションは、訪問者の滞在時間を左右する最も重要な領域である。Runwayはこの空間を極限までシンプルに保ちながら、強烈なインパクトを残している。
- メインヘッドライン：「Make the Impossible」または「CREATE IMPOSSIBLE VIDEO」
- サブヘッドライン：「Your next generation creative toolkit — powered by machine learning」
- CTAとビジュアル：プロダクトの可能性を直感させる動的な映像と、迷いのない単一の行動喚起
ここで使われているコピーライティングの妙は、Rally Readerの事例のように「機能」ではなく「状態の変化」を語っている点にある。動画編集ソフトを探しているユーザーに対して、単に「高機能な編集ツール」と言うのではなく、「不可能な映像を作る」という挑発的な体験を提示している。
ただし、この決定にはリスクもある。プロダクトの実際の使い勝手や具体的な機能がひと目で分からないため、ターゲット層が狭いB2Bツールやユーティリティ系SaaSでこれをそのまま真似ると、Liveblocksのように複雑な機能をシンプルに伝える工夫がなければ、訪問者が何をするツールなのか理解できずに離脱する可能性が高い。Runwayの場合は、すでにブランド認知が高く、背景のビジュアルそのものが圧倒的な説得力を持っているからこそ成立する手法だ。
セクションの順序とコンバージョンへの動線
- 1
1. ヒーローセクション
不可能な映像制作というビジョンと動的ビジュアルを提示
- 2
2. 全体像の提示
次世代のクリエイティブツールキットとしてのコンテクスト設定
- 3
3. AI機能群への誘導
機械学習が支える具体的な機能やプロダクト詳細の紹介
- 4
4. コンバージョン
無料プラン（Starter plan）や価格ページへの導線
ヒーローセクションを抜けた後、ページはどのような順番でユーザーを誘導しているのか。実際のレイアウトの流れを追うと、Pitchのような視覚重視のレイアウトと同様に、感情の刺激から論理的な納得へとスムーズに移行する構造が見えてくる。
- ヒーロー（不可能な映像制作というビジョンと動的ビジュアル）
- 次世代のクリエイティブツールキットとしての全体像の提示
- 機械学習（AI）が支える具体的な機能群への誘導
- 無料プラン（Starter plan）や詳細な価格ページへの導線
最初のセクションで「おや、これは何だ」と足を止めさせ、次のセクションで「次世代のツールキット」という文脈に落とし込み、最終的に無料プランでの試用を促す。無駄な長文を排除し、ビジュアルの説得力で勝負するミニマルな構成が徹底されている。
自分のSaaSに落とし込むためのLPテンプレート
Runwayの構成から抽出できる、コンバージョンを高めるためのセクション別テンプレートの公式を以下にまとめる。
- ヒーローセクション
- ヘッドライン：プロダクトが生み出す究極の成果を3〜5単語の短い言葉で表現する（例：「Make the [Core Value]」）
- サブヘッドライン：その技術的背景やターゲット層を1文で補足する（例：「Your next generation [Category] — powered by [Technology]」）
- ビジュアル：機能のスクリーンショットではなく、プロダクトが動いている実際の成果物やデモ映像を背景またはメインに配置する
- 導入セクション
- ユーザーが抱える従来の限界を提示し、自社ツールがそれをどう塗り替えるのかを視覚的に対比させる
- アクションセクション
- 機能を細かく説明する前に、まずは「無料で試せる」ハードルの低いプラン（Free Starter planなど）へ誘導するボタンを明確に配置する
派手な演出を模倣するのではなく、この「感情を揺さぶるヘッドラインと実証的なビジュアルのセット」という構造の本質を理解し、自分のプロダクトの文脈に合わせて再構築することが重要だ。
참고 자료
よくある質問 (FAQ)
Q. RunwayのLPのように抽象的すぎるヘッドラインでもコンバージョンに繋がるのか？
ブランドの認知度が低い初期段階では注意したい。Runwayの場合は圧倒的なビジュアル素材で補完しているため、類似のプロダクトを作る場合は具体的なベネフィットをサブヘッドラインで補う方が無難だ。
Q. AIツール特有のLP構成で最も重要なセクションはどこか？
最初のビジュアルとヘッドラインが置かれるヒーローセクションである。いかに一瞬で「何ができるツールなのか」を視覚的に伝えるかが勝負の分かれ目となる。
Q. 自分のSaaSプロダクトにこのテンプレートを適用する際、何から始めればよいか？
まずは「Make the Impossible」のような自社製品のコアバリューを極限まで短縮した一言を決め、それを裏付ける動的なデモ映像やビジュアルをファーストビューに配置することから始める。