この文書は、Framerを学ぶ日本国内のユーザーのために、日本語資料の不足による問題を解決するため、Framerに関する海外の記事を翻訳し、実務に役立つ情報を加えました。Framerを使用する皆様に少しでも役立てば幸いです。

今日紹介する事例は、RazorpayがFramerを導入したことで、デザイナーとノンデザイナーの両方が効率的にページを制作できるようになり、その結果、生産性が10倍に向上したケースです。

インドで急成長中のフィンテック企業Razorpayのウェブサイトは、何百万もの人々が訪れる重要なマーケティング資産でしたが、ランディングページの制作に2か月もの時間がかかる非効率な構造でした。迅速な反復と実験が可能な体制が切望されていました。

問題は何だったのか？

ランディングページ制作が遅延した理由は次の通りです。

• 過剰な最適化:訪問者数が多いため、一つ一つの意思決定を繰り返し検討し、時間を浪費しました。

• 多くのステークホルダー:マーケティング、デザイン、プロダクト、開発チームなど、さまざまなチームが関与し、フィードバックのプロセスが長引きました。

• 重複作業:コミュニケーション不足で、似たようなデザインを何度も新たに作成することが繰り返されました。

デザイナー、ライター、開発者が協力する必要があり、その結果、実行速度が遅くなりました。ブランドの一貫性と高品質を維持しつつ、迅速な実行を可能にするシステムが必要でした。この問題を解決するためにカスタムソリューションの開発の代わりに、Framerのようなノーコードツールを検討し始めました。

Razorpayの問題解決過程

情報構造のパターン把握

Razorpayの既存のランディングページを確認し、セクション構造（ヒーロー、価格、レビュー、製品説明など）の繰り返しパターンを識別しました。競合他社のページも分析して業界全体のトレンドを確認し、こうした分析を基に反復可能なテンプレート設計の方向性を策定しました。

拡張可能なデザインシステムの構築

• システム構成要素の定義
  Color & Type Styles → コンポーネント → セクション → 全ページ階層に構成要素を分けて比較しました。結果として、色とタイポは変更不可能なトークンとして固定し、コンポーネントとセクションを基本ユニットとして使用する構造を決定しました。

• ツールの選択: Framer
  WebflowやWordPressもテストしましたが、デザイナーだけでなくマーケターも簡単に扱えるFramerが最適でした。技術的な制御が必要な場合にはWebflowがより有利でしたが、高速な反復と効率的なワークフローではFramerが優れていました。

Framer内でのデザインシステム

• 色とテキストスタイル: 40のテキストスタイルと120以上の色スタイルを定義しました。

• ファイルおよびフォルダ構造:80人のデザイナーが同時に作業する環境で、ビジネス別フォルダ、実験/ライブプロジェクトの区分、中央デザインシステムファイルなどを運用しました。

• グリッド & レスポンシブ設定: 1200px（デスクトップ）、810px（タブレット）、360px（モバイル）の3つのブレークポイントを設定し、全体的なレスポンシブ一貫性を確保しました。

テンプレート設計方法

• コンポーネントテンプレート（例えば、顧客レビューのためのカードで、ロゴまたは写真を選択的に表示）

• セクションテンプレート:製品情報、リード収集などの繰り返し要素を自動レスポンシブ機能で構成し、合計40以上のセクションテンプレートを事前に構築し、中央の5人チームがテンプレートを事前承認し、ガイドラインを維持することで、すべてのページはこのテンプレートを基に作成され、ブランドの一貫性を安定的に維持しました。

RazorpayのFramer導入後の変化

• 実行速度7倍向上: Figma-to-devプロセスを廃止し、開発者なしでも即時公開が可能

• 創造性の向上:繰り返し業務から解放され、インタラクティブな実験により多くの時間を投資

• 転換率25%増加:高速な反復と実験を通じて成果を改善

• 危機対応力の向上:プリセットテンプレートのおかげで、一日以内にページを公開可能

挑戦と解決課題

1. カラー / タイプスタイルの中央ライブラリー未サポート

FramerではFigmaのように完全な意味での「共通スタイルライブラリー(Shared Library)」をプロジェクト間で自動同期する機能はまだ提供されていません。

• 実際的な使用方法: Razorpayの事例のように、カラーとテキストスタイルのみを定義した「スタイル専用テンプレートプロジェクト」を作成しておき、新規プロジェクトを開始する際にこのファイルをコピーして利用する方法が一般的です。

• 欠点: その後、元のスタイルが変更されても、コピーされたプロジェクトには自動で反映されないため、手動で一貫性を維持する必要があります。

2. テンプレート化が難しいレイアウト

Framerは一般的なセクションテンプレートやレスポンシブコンポーネントの構成には非常に便利ですが、複雑な構造は依然としてテンプレート化に制約があります。（例: タブ構造）

• タブ、アコーディオン、動的フィルタリング構造などは単純なコピー型コンポーネントでは柔軟に対応しにくいです。

• このため、Razorpayもタブレイアウトは事前に作成しておいたものをコピーして使用し、修正時にはガイドラインに従う方法で運営していました。

記事の原著者: Apoorva Agrawal
作成日: 2025年2月11日

この記事はFramer関連の記事“Hacking Growth & Scalable Web Design with Framer: A Razorpay Case Study”を基に、一部文章は原文から直接引用し、それ以外の内容はFramerの機能についての説明と解釈を中心に再構成しました。