2nd
Framer Advent Calendar

Framerのインターフェース・操作方法

目次

目次

目次

Framerのインターフェース

Framerは、Figmaなどの一般的なデザインツールと同様の直感的なインターフェースを採用しています。

  • :ページ切り替えやレイヤー表示など

  • 中央:作業スペース

  • :選択した要素の設定

探しているものがどこにあるのか迷った時は、クイックアクションショートカット(Mac: Command + K / Windows: Control + K)を押して検索してみましょう。必要な機能やコマンドに素早くアクセスできます。

トップツールバー

主要機能へのアクセスは上部にあります。

  1. Framerロゴボタン(環境設定など)

  2. 挿入

  3. レイアウト

  4. テキスト

  5. CMS

  6. プラグイン

  7. コラボレーター

  8. 言語設定

  9. 設定

  10. プレビュー

  11. 招待

  12. 公開

左サイドバー

ページ切り替えやレイヤー表示、アセット管理を行う場所です。

  1. ページパネル

  2. レイヤーパネル

  3. アセットパネル

右サイドバー(プロパティパネル)

選択した要素の詳細設定を行う場所です。
最初に気づきにくい箇所としては以下があります。

  • 「+」ボタンをクリックし各セクションの設定を追加
    例えばZ Indexなど使う頻度が高くない設定は+にしまわれています。

  • 右クリックでメニューを出す
    設定のコピー&ペーストも可能です。塗り、シャドウ、アニメーションなどの複雑な設定も簡単に別の要素に適用できます

キャンバス

実際のデザインや要素の配置、編集を行う作業スペースです。
公開されるWebサイトの枠外にも自由に要素を配置でき、保留中のデザインを隣に置いたり、画像作りなどにも使うことができます。

キャンバスツール

コメントしたりモードを切り替えたりする操作用のツールバーです。

  1. パンツール(スペースバーで一時的に切り替え)

  2. コメントツール

  3. ダーク/ライトモード切り替え

  4. 言語モード切り替え

  5. ズームコントロール

デスクトップアプリ

Framerはブラウザでもデスクトップアプリでも利用できます。パフォーマンスは両者でほぼ同等ですので好みに合わせて使うことができます。デスクトップアプリのみ、画像やSVGのエクスポート(書き出し)機能があります。
ダウンロードはこちら

Please post what you learned from this calendar on X with a hashtag!

What you learned from this calendar,

\ please post it on X with a hashtag! /

Back to calendar

Back to calendar

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English

Let Potential Bloom

© Framer Japan Community 2025 All rights reserved

Event

Blog

Template

Component

Japanese Framer site

Pro Plan 25% discount code

English