Figmaのプロトタイプ機能で作る「動くLPデザイン」

Posted on by

静止画では伝わらない“体験”を見せる

LP（ランディングページ）のデザインをFigmaで作るとき、
静止状態ではどうしても「動きの意図」や「操作感」が伝わりづらいものです。

そんなときこそ活用したいのが、Figmaのプロトタイプ機能です。
クリック、ホバー、スクロール、モーダルの開閉など
実際の操作に近い“動くデザイン”を再現できます。

「完成イメージを“動画ではなく体験”として共有できる」
これが、プロトタイプ機能の最大の強みです。

Figmaのプロトタイプ機能とは？

プロトタイプ機能とは、画面同士をつないで動作を再現するツールです。
リンクやアニメーションを設定し、ユーザーの行動をシミュレーションできます。

▶ できることの例

  • ページ遷移（クリックで次の画面へ）
  • ボタン押下でモーダルを開く
  • スクロールアニメーション
  • ホバーエフェクト（色や影が変化）
  • スライダー・タブ切り替えの再現

静的なLPデザインが、“実際に触れるデモサイト”のように動き出します。

Step 1：プロトタイプモードに切り替える

まずは右上のタブから 「Prototype」モード に切り替えます。
画面上に青い矢印のような「接続ハンドル」が表示されればOKです。

設定の流れ

  1. トリガーを選択：クリック・ホバー・ドラッグ・スクロールなど
  2. 接続先を指定：どのフレーム（ページ）に遷移するか
  3. アニメーションを選ぶ：Smart Animate / Instant / Move In / Dissolveなど

これだけで、LPの各セクション間をスムーズに繋げられます。

Step 2：動くLPデザインの設計ポイント

▶ ポイント①：ヒーローセクションの「入り」を動かす

LP冒頭の“ファーストビュー”は、印象を決める最重要部分です。
プロトタイプ機能を使って、以下のような動きを追加してみましょう。

  • スクロール開始時に文字がフェードイン
  • CTAボタンがふわっと浮かび上がる
  • 背景画像がゆっくりズームイン

Smart Animate を使えば、同じ要素を次のフレームでも配置しておくだけで、
自然な動き（フェード・スライド・ズーム）を再現できます。

▶ ポイント②：CTA導線の動きを強調する

「資料請求」「お問い合わせ」などのボタンに、
ホバー時のアニメーションを加えるだけでクリック率が上がります。

例

  • Hover時に色を明るくする
  • 少し拡大して反応を見せる
  • シャドウで浮かせてクリック可能感を演出

ユーザーが「押したくなる感覚」を設計するのがUXデザインの第一歩です。

▶ ポイント③：スクロールでストーリーを作る

LPでは「下に進むほど理解が深まる」構成が理想的です。
Figmaの “Scroll animation” を使えば、視差効果（パララックス）や順番出しエフェクトも簡単に作れます。

例

  • ヘッダーが固定される
  • コンテンツが1つずつフェードイン
  • 背景画像がゆっくり動く

実際のWeb挙動に近い動きを作ることで、デザイナーとクライアントの“完成イメージのズレ”をなくせます。

Step 3：アニメーション設定のコツ

Figmaのプロトタイプでは、「Smart Animate」 が最もよく使われます。
これは前後のフレーム間で同じレイヤー名の要素を比較し、
位置や色、透明度などの差分を自動でアニメーション化する機能です。

Smart Animateの活用例

動作設定内容
画像をフェードイン前のフレームでOpacity 0%、次で100%
テキストをスライドインX軸を±100pxずらして配置
ボタンをホバーで色変更同じボタンをVariant化して「Hover」状態を作る

Transition設定例
Easing → Ease out / Duration → 0.3s がおすすめ。
自然で心地よいスピード感が出ます。

Step 4：インタラクションをVariantで管理

ボタンやタブなど、状態が複数あるパーツは「Variant（バリアント）」 でまとめて管理しましょう。

例

  • Button / Default
  • Button / Hover
  • Button / Active

この3つを Component Set にまとめ、
「Prototype」タブで「While hovering → Change to Hover」などを設定すれば、
クリック時の状態変化も滑らかに再現できます。

Variant＋Smart Animate の組み合わせが最強です。

Step 5：動きのあるLP構成を作る

Figmaのプロトタイプを活用したLPデザインは、以下のような流れが定番です👇

  1. ファーストビュー（タイトル＋アニメーション）
  2. 商品説明・サービス紹介（フェードイン構成）
  3. 実績・お客様の声（カードスライダー形式）
  4. CTA（スクロール時に固定 or フェードイン）

構成段階で“動きを前提”に考えると、完成後に修正するよりもずっとスムーズです。

Step 6：共有リンクで体験を見せる

完成したら右上の 「Share prototype」 をクリック。
リンクを共有するだけで、誰でも“体験型デザイン”を閲覧できます。

提案資料にも活用できる

  • クライアント提案時に「完成版デモ」として見せられる
  • 開発チームに「動作イメージ」を共有できる
  • 自社プレゼン資料（ピッチ）にも応用できる

「静止画では伝わらない説得力」を手に入れるのが、プロトタイプ活用の最大のメリットです。

Step 7：実案件で使える応用テク

応用機能使い方
Overlay（オーバーレイ）モーダルウィンドウを表示する
Scroll toスクロールアニメーションを設定する
Delayアニメーションのタイミングをずらす
Smart Animate Matching Layers同名レイヤーを自動補完する
After Delay自動的に次のアニメーションへ移る

これらを組み合わせると、実装前の“体験設計”がほぼ完全に再現可能です。

まとめ：Figmaで“動くデザイン”を学ぼう

静止画デザインは“伝える”ためのもの。
しかし、プロトタイプは“感じさせる”ためのものです。

  • 動きで情報の優先度を示す
  • インタラクションで感情を動かす
  • 体験でコンバージョンを導く

デザインを「見せる」から「体験させる」へ。
Figmaのプロトタイプ機能で、“動くLP”を設計してみましょう。

#Figma #UIデザイン #UXデザイン #LPデザイン #プロトタイプ #Figma初心者 #Webデザイン #Figma学習 #デザイン勉強 #動くLP #FigmaTips