Framer：プロトタイプから本番環境へ
Framerがプロトタイピングライブラリからノーコードウェブサイトビルダーに進化した方法：ビジュアルブレークポイント、コンポーネントバリアント、CMSアーキテクチャ、AIワイヤーフレーミング。
Framer：プロトタイプから本番環境へ
「デザインと開発の間にギャップがあってはならない。」— Koen Bok、Framer共同創業者
Framerはデザインツールの完全な進化を体現している：JavaScriptプロトタイピングライブラリ（2014年）からビジュアルIDE（Framer X、2018年）、そしてフルノーコードWebサイトビルダー（2022年以降）へ。その歩みは、コア哲学を維持しながらユーザーニーズに適応することについて教えてくれる。
Framerが重要な理由
Framerは「ハンドオフ問題」を完全に排除することで解決した。デザイナーがモックアップを作成し、開発者がそれを再構築するのではなく、Framerは本番環境対応のWebサイトを直接出力する。
主な成果： - デザインからコードへのギャップを完全に解消した - レスポンシブデザインを視覚的かつ直感的に - 活気あるテンプレートマーケットプレイスのエコシステムを構築 - デザイン原則を犠牲にすることなくAIを統合 - 20億ドルの評価額で1億ドルを調達（2025年8月）
重要なポイント
- ミッションを放棄せずにピボット - FramerはCoffeeScriptライブラリからReact IDE、そしてノーコードビルダーへと変化したが、コアミッションは一度も変わらなかった：デザインと開発のギャップを解消すること
- 技術的概念を視覚化 - レスポンシブブレークポイント、flexbox、CMSスキーマは、ドラッグ可能なハンドルやビジュアルエディタとして表現されると直感的になる
- AIは足場であり、解決策ではない - Wireframerは白紙のキャンバスへの不安を解消する構造を生成し、人間が創造性と洗練を加える
- フォークよりプロパティコントロール - バリエーションのためにコンポーネントを複製する代わりに、単一のソースを維持しながら設定を変更するコントロールを公開
- 本番出力がデザインを検証 - デザインツールが本番コードを出力する場合、「私がデザインしたものと違う」というハンドオフの瞬間がない
進化の物語
Framerの進化を理解することで、成功するプロダクトがどのように適応するかが見えてくる：
2014 (Framer.js) 2018 (Framer X) 2022+ (Framer Sites)
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ │ │ │ │ │
│ コードファースト │ → │ ビジュアル+コード │ → │ ビジュアルファースト │
│ プロトタイピング │ │ Reactコンポーネント│ │ 本番環境 │
│ │ │ │ │ │
│ • CoffeeScript │ │ • TypeScript │ │ • コード不要 │
│ • アニメーションlib │ │ • IDE風 │ │ • 組み込みCMS │
│ • デザイナーツール │ │ • コンポーネントシス │ │ • AI生成 │
│ │ │ │ │ │
└──────────────────┘ └──────────────────┘ └──────────────────┘
対象ユーザー: コードを書く → デザインする → ウェブサイトを
デザイナー デザインエンジニア 必要とするすべての人
重要な洞察：各ピボットはコアミッションを維持しながらオーディエンスを拡大しました：デザインと本番環境のギャップをなくすこと。
パターンライブラリ
1. ビジュアルブレークポイントシステム
Framerはレスポンシブデザインをコードからドラッグハンドルへと変革し、従来技術的だった概念に画期的なUXを提供しています。
従来のCSSアプローチ：
/* Developer must imagine each breakpoint */
@media (max-width: 768px) {
.hero { flex-direction: column; }
}
@media (max-width: 480px) {
.hero { padding: 16px; }
}
Framerのビジュアルアプローチ：
┌─────────────────────────────────────────────────────────────────────────┐
│ ブレークポイント │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Desktop (1440) │ Tablet (768) │ Mobile (375) │ │
│ │ ────────────────────────┬─────────────────────┬──────────────────── │ │
│ │ ◀ ドラッグ ▶ ◀ ドラッグ ▶ │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ プレビュー │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ ヒーローセクション │ ← ドラッグ中に │
│ │ ──────────────── │ リアルタイムで │
│ │ │ レイアウト更新 │
│ │ [ボタン] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
実践されているデザイン原則： - 抽象的な設定よりも直接操作を優先 - リアルタイムフィードバックにより推測作業が不要に - 視覚的表現がメンタルモデルと一致する
実装パターン：
// ブレークポイントのデータ構造
const breakpoints = [
{ name: 'Desktop', width: 1440, isDefault: true },
{ name: 'Tablet', width: 768 },
{ name: 'Mobile', width: 375 },
];
// コンポーネントはブレークポイントごとにスタイルを保存
const componentStyles = {
base: { display: 'flex', gap: 24 },
overrides: {
768: { flexDirection: 'column', gap: 16 },
375: { padding: 16 },
}
};
// 現在の幅に対するスタイルをマージする
function getStylesForWidth(width) {
let styles = { ...componentStyles.base };
for (const [breakpoint, overrides] of Object.entries(componentStyles.overrides)) {
if (width <= parseInt(breakpoint)) {
styles = { ...styles, ...overrides };
}
}
return styles;
}
2. プライマリ/インスタンス コンポーネントパターン
Figmaと同様に、Framerはプライマリ-インスタンスモデルを採用しています。ただし、Framerはインタラクティブなバリアントとプロパティコントロールでこれを拡張しています。
┌─ プライマリコンポーネント ──────────────────────────────────────────┐
│ │
│ コンポーネントキャンバス │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ デフォルト状態 ホバー状態 押下状態 │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ Button │ → │ Button │ → │ Button │ │ │
│ │ │ bg: #3B82F6 │ │ bg: #2563EB │ │ bg: #1D4ED8 │ │ │
│ │ │ scale: 1 │ │ scale: 1.02 │ │ scale: 0.98 │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ トランジション: spring(stiffness: 500, damping: 30) │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ プロパティコントロール │
│ ├─ ラベル: [テキスト入力] │
│ ├─ バリアント: [default ▼] [hover] [pressed] │
│ ├─ サイズ: [small] [medium ●] [large] │
│ └─ アイコン: [none ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ インスタンスはすべてのバリアントを継承
┌─ ページキャンバス ──────────────────────────────────────────────────┐
│ │
│ [ボタンインスタンス 1] [ボタンインスタンス 2] [ボタンインスタンス 3] │
│ ラベル: "送信" ラベル: "キャンセル" ラベル: "詳細を見る" │
│ サイズ: medium サイズ: small サイズ: large │
│ アイコン: check アイコン: none アイコン: arrow │
│ │
└─────────────────────────────────────────────────────────────────────┘
Property Controls API:
// プロパティコントロールを持つFramerコンポーネント
import { addPropertyControls, ControlType } from "framer"
function Button({ label, size, icon }) {
const styles = sizeStyles[size];
return (
<motion.button
className="button"
style={styles}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
{icon && <Icon name={icon} />}
{label}
</motion.button>
);
}
// コンポーネント選択時に右パネルに表示されます
addPropertyControls(Button, {
label: {
type: ControlType.String,
title: "Label",
defaultValue: "Button",
},
size: {
type: ControlType.Enum,
title: "Size",
options: ["small", "medium", "large"],
defaultValue: "medium",
},
icon: {
type: ControlType.Enum,
title: "Icon",
options: ["none", "check", "arrow", "plus"],
defaultValue: "none",
},
});
重要な洞察：プロパティコントロールにより、フォークなしでコンポーネントを再利用可能にします。コンポーネントではなく、プロパティを変更しましょう。
3. ビルトインCMSアーキテクチャ
FramerのCMSは、コンテンツをビジュアルコンポーネントに流れ込む構造化データとして扱います。
┌─ CMSコレクション: ブログ記事 ───────────────────────────────────────┐
│ │
│ スキーマ │
│ ├─ title: String (必須) │
│ ├─ slug: Slug (タイトルから自動生成) │
│ ├─ author: Reference → Authors │
│ ├─ publishDate: Date │
│ ├─ coverImage: Image │
│ ├─ content: Rich Text │
│ └─ tags: Multi-reference → Tags │
│ │
│ エントリ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ タイトル │ 著者 │ 日付 │ ステータス │ │
│ ├────────────────────┼────────────┼────────────┼──────────────────┤ │
│ │ Design Systems │ @jane │ Jan 15 │ ● 公開済み │ │
│ │ Component Patterns │ @john │ Jan 12 │ ○ 下書き │ │
│ │ Animation Guide │ @jane │ Jan 10 │ ● 公開済み │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
↓ CMSデータがコンポーネントに流れ込む
```
┌─ コレクションページテンプレート ────────────────────────────────────┐
│ │
│ ┌─ ブログカード（CMSに接続）────────────────────────────────────┐ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ {coverImage} │ {title} │ │
│ │ │ │ {author.name} · {publishDate} │ │
│ │ │ │ │ │
│ │ └──────────────┘ {tags.map(tag => <Tag />)} │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ このカードはCMSエントリーごとに繰り返されます │
│ │
└─────────────────────────────────────────────────────────────────────┘
デザイン原則： - コンテンツとプレゼンテーションの分離 - ビジュアルデータバインディング（コード不要） - 自動SEO（CMSフィールドからのメタタグ）
4. AIアシストデザイン（Wireframer）
Framerの2025年AIフィーチャーはセンスのあるAI統合を示しています：AIが出発点を生成し、人間が洗練します。
┌─ Wireframer ────────────────────────────────────────────────────────┐
│ │
│ Prompt: "Landing page for a SaaS product with pricing table" │
│ │
│ [Generate] │
│ │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Generated Layout (editable wireframe) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ╔══════════════════════════════════════════════════════════╗ │ │
│ │ ║ [Logo] Features Pricing About [CTA] ║ │ │
│ │ ╚══════════════════════════════════════════════════════════╝ │ │
│ │ │ │
│ │ ┌────────────────────────────────────────────────────────┐ │ │
│ │ │ Hero Section │ │ │
│ │ │ [Headline placeholder] │ │ │
│ │ │ [Subhead placeholder] │ │ │
│ │ │ [CTA Button] [Secondary] │ │ │
│ │ └────────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Starter │ │ Pro ★ │ │ Enterprise │ │ │
│ │ │ $9/mo │ │ $29/mo │ │ Custom │ │ │
│ │ │ ────── │ │ ────── │ │ ────── │ │ │
│ │ │ • Feature │ │ • Feature │ │ • Feature │ │ │
│ │ │ • Feature │ │ • Feature │ │ • Feature │ │ │
│ │ │ [Select] │ │ [Select] │ │ [Contact] │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ AIが構造を提供し、人間がスタイルを提供 │
│ │
└─────────────────────────────────────────────────────────────────────┘
AI哲学： - 最終デザインではなく、レスポンシブなレイアウトを生成 - 出力は完全に編集可能（ブラックボックスではない） - 白紙のキャンバスに向かう不安を解消し、構造からスタートできる - AIの土台に人間の創造性を適用
5. オートレイアウトシステム
Framerのオートレイアウトは、Figmaと同等の機能を持ちながら、即座に本番環境で使用可能です。
/* デザイナーが視覚的に設定する内容 */
.auto-layout {
/* 方向 */
display: flex;
flex-direction: row; /* または column */
/* 間隔 */
gap: 16px; /* 均一 */
/* または gap: 16px 24px; で行/列を指定 */
/* 配置 */
justify-content: flex-start;
align-items: center;
/* 配置 */
/* "Packed" = flex-start */
/* "Space between" = space-between */
/* "Space around" = space-around */
/* パディング（各辺独立） */
padding: 24px 32px 24px 32px;
}
/* 子要素の挙動 */
.auto-layout > .child {
/* "Fill" = flex: 1 */
/* "Hug" = flex: 0 0 auto */
/* "Fixed" = width: 200px */
}
ビジュアルエディターでの対応:
┌─ オートレイアウトパネル ────────────────────────────────────────────┐
│ │
│ 方向 ┌───┐ ┌───┐ │
│ │ → │ │ ↓ │ │
│ └───┘ └───┘ │
│ │
│ 配置 ┌───────────────┐ │
│ │ ⬜ ⬜ ⬜ │ (9点グリッド) │
│ │ ⬜ ⬛ ⬜ │ │
│ │ ⬜ ⬜ ⬜ │ │
│ └───────────────┘ │
│ │
│ 間隔 [16] px │
│ │
│ パディング [24] [32] [24] [32] (上、右、下、左) │
│ │
│ 配分 [Packed ▼] │
│ │
└─────────────────────────────────────────────────────────────────────┘
ビジュアルデザインシステム
キャンバスクローム
:root {
/* キャンバス背景 */
--canvas-bg: #1E1E1E;
--canvas-grid: rgba(255, 255, 255, 0.03);
/* 選択 */
--selection-color: #0099FF;
--selection-handle: #FFFFFF;
/* パネル */
--panel-bg: #2D2D2D;
--panel-border: rgba(255, 255, 255, 0.08);
/* テキスト */
--text-primary: #FFFFFF;
--text-secondary: #9B9B9B;
--text-placeholder: #6B6B6B;
/* アクセント */
--accent-primary: #0099FF;
--accent-success: #00D084;
--accent-warning: #FFBB00;
--accent-error: #FF5555;
}
タイポグラフィ（UI）
:root {
--font-ui: 'Inter', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* サイズ */
--text-xxs: 10px;
--text-xs: 11px;
--text-sm: 12px;
--text-base: 13px;
--text-lg: 14px;
/* パネルラベル */
--label-size: var(--text-xs);
--label-weight: 600;
--label-color: var(--text-secondary);
--label-spacing: 0.02em;
}
.panel-label {
font-family: var(--font-ui);
font-size: var(--label-size);
font-weight: var(--label-weight);
color: var(--label-color);
letter-spacing: var(--label-spacing);
text-transform: uppercase;
}
アニメーションパターン
パネルトランジション
/* スライドインパネル */
.panel {
transform: translateX(100%);
opacity: 0;
transition:
transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 150ms ease-out;
}
.panel.open {
transform: translateX(0);
opacity: 1;
}
選択フィードバック
/* 選択ボックスのアニメーション */
.selection-box {
border: 1px solid var(--selection-color);
background: rgba(0, 153, 255, 0.1);
animation: selection-appear 100ms ease-out;
}
@keyframes selection-appear {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* リサイズハンドル */
.resize-handle {
width: 8px;
height: 8px;
background: var(--selection-handle);
border: 1px solid var(--selection-color);
border-radius: 1px;
transition: transform 100ms ease;
}
.resize-handle:hover {
transform: scale(1.3);
}
私たちの仕事への教訓
1. ミッションを捨てずにピボットする
Framerはコードからビジュアルへと移行しましたが、ミッションは変わりませんでした：デザインと開発のギャップをなくすこと。
2. 技術的な概念を視覚化する
ブレークポイント、フレックスボックス、CMSスキーマは、視覚的に表現されると直感的に理解できるようになります。
3. AIは解決策ではなく足場として
Wireframerは構造を生成し、人間が創造性を加えます。AIは主体性を奪うことなく、白紙のキャンバスへの不安を取り除きます。
4. フォークよりプロパティコントロール
コンポーネントを複製する代わりに、コントロールを公開しましょう。同じコンポーネントで、異なる設定が可能になります。
5. 本番出力がデザインを検証する
デザインツールが本番コードを出力すれば、「これは私がデザインしたものと違う」という瞬間はなくなります。
よくある質問
Framerはプロトタイピングライブラリからウェブサイトビルダーへどのように進化したのですか？
Framerは2014年にコードを書くデザイナー向けのCoffeeScriptアニメーションライブラリとしてスタートしました。2018年にFramer XがReactコンポーネントをサポートするビジュアルIDEを追加し、デザインエンジニアをターゲットにしました。2022年までに、Framerは組み込みCMSとAI機能を備えたノーコードウェブサイトビルダーへとピボットしました。 各進化はコアミッション（デザインと実装の間のギャップを解消すること）を維持しながら、オーディエンスを拡大してきました。
FramerのビジュアルブレークポイントシステムはCSSメディアクエリとどう違うのか？
従来のレスポンシブデザインでは、コードを書きながら各ブレークポイントでレイアウトがどのように見えるかを想像する必要がありました。Framerは、ブレークポイントハンドルをドラッグするとリアルタイムで更新されるライブプレビューを表示します。あらゆる幅でデザインがどのように反応するかを正確に確認できます。このビジュアル表現はデザイナーがレスポンシブ動作について考える方法と一致しており、ブレークポイントを抽象的なものではなく直感的なものにしています。
Framerのプロパティコントロールはどのように機能するのか？
プロパティコントロールは、コンポーネントが選択されたときに右パネルで設定可能なオプションを公開します。各バリエーションごとにボタンコンポーネントを複製する代わりに、ラベル、サイズ、アイコン、バリアントのコントロールを定義します。デザイナーはコードに触れることなく、インスタンスごとにこれらのプロパティを調整できます。コンポーネントは無制限の設定をサポートしながら、単一の信頼できる情報源として維持されます。
FramerのCMSはWordPressや他のCMSとどう比較されるのか？
FramerのCMSはビジュアルファーストで、デザインツールに直接統合されています。スキーマ（タイトル、著者、日付、画像）を定義し、コンテンツはビジュアルデータバインディングを通じてページテンプレートに流れ込みます。別の管理インターフェースはなく、コンテンツ編集はデザインと同じ環境で行われます。 自動生成SEO、レスポンシブ画像、スラッグは自動的に処理されます。
Framer AI（Wireframer）は実際に何を生成するのか？
Wireframerは完成したデザインではなく、レスポンシブなレイアウト構造を生成します。「価格表付きのSaaSランディングページ」のようなプロンプトから、適切なオートレイアウトとレスポンシブブレークポイントを使用して、ナビゲーション、ヒーローセクション、価格カードを含むワイヤーフレームを作成します。出力は完全に編集可能で、すべての要素のスタイル変更、移動、置き換えが可能です。AIは骨組みを提供し、人間がスタイルとコンテンツを追加します。