2026年5月25日更新

📌 この記事のポイント

• FramerでLPを最短で作る実装フローは7ステップで設計できる

• Figmaのオートレイアウト経験者なら半日〜1日で基本操作を習得可能

• フレーム/スタックの使い分けがレスポンシブ設計の核心

• コンポーネント＋バリアントでHover・モバイル状態を一括管理

• スクロールアニメーションは「引き算」が肝心、やりすぎは離脱要因

FramerでLPを作る最短ルートは、「プロジェクト作成→フレーム/スタック設計→ファーストビュー→メイン→コンポーネント化→アニメーション→公開」の7ステップで完結します。Figmaを使い慣れたデザイナーなら、この流れに沿って半日〜1日でLP1本を組み上げられます。

NOT DESIGN SCHOOL公式ウェビナー後編（ゆうごさん登壇・実演形式）の内容をもとに、駆け出しデザイナーが今日から再現できる実装フローを体系化しました。Framerの基礎を押さえた次の一歩として活用してください。

参考動画：今話題のFramerを触ってみよう！はじめの一歩、使い方解説！【後編】（NOT DESIGN SCHOOL公式ウェビナー・ゆうごさん登壇・LP実装の実演形式）／ 【前編】（おかゆさん登壇・Framerの基礎・魅力解説）

Framerの全体像や料金プランをまだ把握していない方は、先にFramerとは？特徴・料金・始め方｜デザイナーが今すぐ触れる入門ガイドを読んでから本記事に戻ると、実装フローの理解が深まります。

Framer実践チュートリアルの全体像｜LPを最短で作るフロー

Framer実践チュートリアルとは、Framerのエディタを使ってLPを一から組み立てる実装手順のことです。本記事ではNOT DESIGN SCHOOL公式ウェビナーの実演内容をもとに、駆け出しデザイナーが再現できる7ステップに整理しました。

合計約5時間で、シンプルなコーポレートLP1本が完成するイメージです（Framer公式 Academy）。

もち自身、Figmaを長く触ってきたデザイナーがFramerを初めて触る場面を何度も見てきましたが、この7ステップを順番に踏むだけで、初日からLP1本を形にできるケースがほとんどです。

ステップ1｜プロジェクト作成と基本UIの把握

Framerのプロジェクト作成は、ダッシュボードの「New Project」から1クリックで完了します。テンプレートを使わずに「Blank」を選ぶと、白紙のキャンバスからスタートできます。

エディタ画面の4エリア

UIは英語ですが、Figma経験者ならアイコン位置・ショートカットがほぼ共通しているため、操作の予測が立ちやすい設計です。

最初に覚える3つのショートカット

Figmaとの大きな違いは、クリック時にデフォルトで「最も深い子要素」が選択される点です。Figmaは親要素を選択しますが、Framerは逆。親要素を選びたい時は Cmd + クリック を使います。

もちが新しい受講生にFramerを触らせると、この選択ルールの違いで最初の30分は戸惑う方がほとんどです。逆に言えば、ここさえ慣れれば後はFigma感覚で進められると感じます。

ステップ2｜フレームとスタックの使い分け

Framerの実装で最初に押さえるべきは、フレーム（Frame）とスタック（Stack）の使い分けです。これがレスポンシブ設計の核心になります。

スタックを基本にする理由

レスポンシブWeb制作では、99%のレイアウトをスタックで組むのが正解です。フレームを多用すると、PC幅では綺麗に見えてもタブレット・モバイルで崩れる原因になります。

スタックには「Gap」「Padding」「Direction（縦/横）」「Distribute（配置）」「Align（揃え）」の5つのプロパティがあり、これらを Stack Variables として変数化することもできます（Framer Updates: Stack Variables）。

Figmaオートレイアウト経験者は早い

Figmaのオートレイアウトに慣れているデザイナーは、スタックの概念を1〜2時間で吸収できます。逆にFigmaでオートレイアウトをほぼ使わずベタ置きで作ってきた方は、ここで2〜3日の学習時間が必要になることが多いです。

もち自身、駆け出しの受講生に「Figmaのオートレイアウトを徹底的に練習してからFramerに進む」順番を推奨しているのは、この移行効率の差が大きいからです。

ステップ3｜ファーストビューを実装する

ファーストビューとは、ユーザーが最初に見る画面領域（ヒーローセクション）のことです。LPの離脱率を大きく左右する核心セクションで、Framerでは以下の流れで実装します。

実装フロー（5ステップ）

1. デスクトップキャンバスにベースフレームを作成（幅100% / 高さ100vh想定）

2. 縦方向のスタックを配置（Direction: Vertical / Align: Center）

3. 見出しテキストを追加（T キー / フォントサイズ72px前後）

4. サブコピーと CTA ボタンを追加（Gap: 24pxで間隔調整）

5. 背景画像 or グラデーションを設定（右パネルの Fill から）

Stack Variablesで余白を統一する

ファーストビューで「Gap=24px」「Padding=80px」と設定したら、これをスタイル変数として保存しておくと、後続セクションでも統一感が出ます。Framerの Style Variables 機能を使えば、色・余白・タイポを一括管理できます（Framer Academy: Variables）。

ファーストビューだけで30〜60分かければ、シンプルかつ印象的な仕上がりに到達できます。最初の1セクションで余白・タイポの基準を固めれば、後の作業は組み替えだけなので、ここに時間を投資する価値は大きいと、もちは考えています。

ステップ4｜メインコンテンツを実装する

メインコンテンツは、サービス紹介・特徴・実績ギャラリーなど、ファーストビューの下に続く本文セクション群を指します。3〜5セクションで構成するのが一般的です。

セクション設計の基本パターン

スタックの入れ子で組み立てる

メインコンテンツはスタックの入れ子（ネスト）で組み立てるのが基本です。例えば「特徴3点」セクションなら、外側に「縦Stack（見出し＋カード群）」を置き、中に「横Stack（カード3枚）」を入れる構造になります。

各カード内部もまた縦Stackで「アイコン＋見出し＋本文」を組むため、Stack × Stack × Stack の3重ネストが日常的に発生します。

グリッドレイアウトの組み方

横並びのカードグループをレスポンシブにするには、Framerの Grid 機能を使います。Auto-fit（自動折返し）を有効にすると、画面幅に応じてカードが2列→1列に自動で切り替わります。Figmaにはない便利機能で、駆け出しデザイナーがCSSを書かずに本格的なレスポンシブを組める強みです。

ステップ5｜コンポーネントとバリアントで使い回す

コンポーネントとは、繰り返し使う要素を1つの部品として登録し、複数箇所で再利用できる仕組みのことです。Framerでは右クリック→「Create Component」で任意のスタックをコンポーネント化できます。

コンポーネント化すべき要素

バリアント（Variants）で状態管理

バリアントは、同じコンポーネントの複数状態（Default/Hover/Active/Mobile等）を1つの部品にまとめる機能です。Figmaのバリアントと同じ概念ですが、Framerでは状態間のアニメーション補間まで自動でやってくれるのが強みです。

ボタンに Hover バリアントを1つ作っておけば、サイト全体のボタンに自動で適用されます。1箇所修正すれば全箇所反映される Single Source of Truth の原則がノーコードで実現できる、これがFramerの真価です。

ステップ6｜スクロールアニメーションを設定する

Framerのスクロールアニメーションは、右パネルの「Effects」セクションから5種類のエフェクトを組み合わせて実装します。

5つのスクロール系エフェクト

設定方法（Scroll Transformの例）

1. アニメーションさせたい要素を選択

2. 右パネル下部の「Effects」を開く

3. 「Scroll Transform」を選択

4. 開始位置（Top of Viewport）→ 終了位置（Bottom of Viewport）で、要素のスケール・回転・位置・透明度を指定

5. プレビューで動きを確認

エフェクトの組み合わせ次第で、コーポレートサイトレベルの凝った演出がノーコードで実装可能になります（Framer Academy: Scroll Effects）。

ステップ7｜公開設定と独自ドメイン接続

Framerの公開は、エディタ画面右上の 「Publish」ボタン1クリックで完了します。公開後は https://your-project.framer.website のサブドメインで即座にアクセス可能になります。

独自ドメイン接続の流れ

1. Site Settingsを開く（左上のプロジェクト名→Settings）

2. Domainsタブで「Add Custom Domain」をクリック

3. ドメイン名を入力（例: example.com）

4. 表示されたDNSレコード（Aレコード・CNAMEレコード）をドメイン提供元に追加

5. DNS反映後（数分〜24時間）に自動でSSL証明書が発行される

独自ドメイン接続にはFramerのBasicプラン以上（月額$10〜）が必要です（Framer公式 Pricing）。Freeプランでは your-project.framer.website のサブドメインのみ利用可能で、サイト下部にFramerブランド表示が付きます。

公開前のSEO最低限チェック

最低限この5つを設定してから公開すれば、検索エンジン・SNSシェア時の見栄えが整います。

校長の見解｜もちがチュートリアルで伝えたい3視点

NOT DESIGN SCHOOL校長のもちが、Framer実践チュートリアルで伝えたい3つの視点を語ります。

視点1｜フレームとスタックの使い分けが最初の壁

Framerを触り始めた駆け出しデザイナーが最初につまずくのが、フレーム/スタックの選び方です。フレームで全部組んでしまうと、モバイル表示で全崩壊する経験を、もちは何度も受講生から相談されてきました。

Figmaのオートレイアウトを使いこなせる方なら、Framerのスタックは概念がほぼ同じなので、半日で吸収できます。逆にFigmaでオートレイアウト未経験の方は、まずFigma側でオートレイアウトを徹底練習してからFramerに進む方が、結果的に学習時間が短くて済むと感じています。

視点2｜学ぶなら公式YouTubeが一番頼りになる

Framerの学習リソースとして、もちが一番おすすめしているのがFramer公式YouTubeチャンネルです（Framer公式YouTube）。

公式チャンネルは2026年5月時点で動画本数が200本以上あり、新機能リリースのたびに公式チームが解説動画を出してくれます。日本語の解説記事よりもアップデート反映が早く、最新仕様を追うには公式が頼りになると感じます。

英語UIですが、操作画面の動きを見るだけで7〜8割は理解できるので、英語アレルギーがある方でも問題ありません。むしろ「英語のフレーズに慣れる練習」としても役立ちます。もち自身、新機能を触る時はまず公式YouTubeを2〜3本観てから手を動かすようにしています。

視点3｜SPの実機確認は公開後にしかできない落とし穴

Framerには大きな落とし穴があります。それは、スマートフォン実機での表示確認は、サイトを公開しないとできないという制約です。

エディタ内のモバイルプレビューはあくまでブラウザ上のシミュレーションで、iOS Safari・Android Chrome の実機挙動とは差が出ます。特にフォント表示・ボタンの押し心地・スクロールアニメーションの滑らかさは、実機で初めて気づく違和感が多いです。

対策として、もちが推奨しているのは以下の2つです。

1. 有料プランであればステージングを使って、実機で全画面チェック

2. 正式ローンチ前に本番公開してスマホ画面のチェック期間を設ける

限界と注意点

注意点1｜動画とFramer最新UIに差異がある可能性

参考動画（ウェビナー後編）は撮影時点のFramer UIで解説されています。Framerは2026年に入ってからもUI更新が続いており、エディタの右パネル構成・Effects名称・コンポーネント作成フローに細かな差異が出ている可能性があります。

動画で説明されている操作が見つからない時は、まずFramer公式ドキュメント・公式YouTubeで最新版を確認してください。

注意点2｜CMS機能はWordPressほど深くない

FramerのCMSはブログ・お知らせ・実績一覧など繰り返しコンテンツを管理できますが、WordPressと比べると以下の制約があります。

• カスタムフィールドの自由度が低い

• プラグインエコシステムが小さい

• 検索機能・タグフィルタリング機能が限定的

• 多言語管理はAI Translation頼り（細かい制御不可）

ブログメイン・大量記事更新が必要な案件はWordPressを推奨します。

注意点3｜料金プランの隠れコスト

表示価格の他に、以下の追加費用が発生します（Framer公式 Pricing）。

チーム編集・多言語対応の案件では、表示価格の2〜3倍のランニングコストになるケースもあるため、提案段階で試算してください。

注意点4｜機能性サイトには不向き

Framerは LP・ポートフォリオ・ブランドサイトでは強力ですが、以下の要件がある案件には不向きです。

• 会員制サイト（認証機能なし）

• 複雑なECサイト（決済・在庫管理は外部連携必須）

• 既存システム連携が多い案件（API カスタマイズが限定的）

• WordPress並みの大規模CMS

案件特性に応じて Webflow・WordPress・STUDIO・自作実装と使い分ける判断が必要です。

FAQ

Q1｜Framer未経験でも7ステップで完成する？

Figma経験者なら初日で7ステップ全部を体験できます。完成度を上げるには3〜5回繰り返しが必要ですが、「動くLPが手元にできる」体験は初日に到達可能です。Figma未経験の方は、先にFigmaのオートレイアウトを1〜2週間練習してからFramerに進むのがおすすめです。

Q2｜Figmaで作ったデザインをFramerにインポートできる？

Framer公式のFigma Importプラグインで、Figmaのフレーム単位でFramerにコピーできます。ただしFigmaのオートレイアウトが完全に変換されるわけではないため、インポート後にスタック化の手直しが必要になります。最初からFramerで組み直した方が早いケースも多いです。

Q3｜コードを書かずにどこまで作れる？

シンプルなコーポレートLP・ポートフォリオ・ブランドサイトならノーコードのみで完成します。複雑なフォーム連携・外部API連携・カスタムアニメーションが必要な場合のみ、Framerの Code Components（React）でカスタムコードを書く選択肢があります。

Q4｜公開後に編集したら自動で反映される？

エディタで編集→「Publish」ボタンを再度押すと、数秒で公開サイトに反映されます。下書き状態（公開前）で編集を進めることもできるため、本番反映タイミングを完全にコントロールできます。

Q5｜駆け出しデザイナーが最初の1ヶ月でやるべきことは？

1. Framer公式テンプレートを5〜10個複製して構造を分解する

2. 本記事の7ステップで自分のポートフォリオサイトを作る

3. Framer公式YouTubeを週3本ペースで観る（新機能キャッチアップ）

4. 完成したサイトをスマホ実機で確認しレスポンシブの修正点を洗い出す

この4ステップで、Framerの基本操作と公開フローが体感できます。

まとめ｜Framer実践チュートリアルの7ステップ

Framerで LP を最短で組む実装フローは、以下の7ステップで整理できます。

合計約5時間で、シンプルなコーポレートLP1本が完成するイメージです。

Framerは「LP・ポートフォリオ・ブランドサイトの第一選択肢」として、Figmaを使えるデザイナーに強くおすすめできるツールです。本記事の7ステップを順番に踏みながら、自分のポートフォリオサイトを1本作ってみてください。手を動かすことで、Framerの操作感とデザイン→公開の一気通貫体験が一気に腑に落ちます。

合わせて読みたい関連記事：

• Framerとは？特徴・料金・始め方｜デザイナーが今すぐ触れる入門ガイド

• 配色をセンスではなくロジックで選ぼう｜色相環×形容詞の完全マップ

• 駆け出しデザイナーのためのClaude入門