Framerで制作したWebサイトは、サイト制作の知識がない人でも、公開されたサイト上で、簡単にコンテンツを編集できます。それを可能にする「On-Page Editing」機能の基本的な使い方について、このページでは解説します（公式ガイドはこちら）。※On-Page Editing機能はスマホでも使用可能です。

できること・できないこと

On-Page Editingでできるのは、基本的にテキストや画像といったコンテンツの編集のみです。そのほかの操作をしたい場合は、Framerの管理画面内で行う必要があります。管理画面内での編集方法については、下記のページをご参照ください。
→ Framer製Webサイトの編集方法

On-Page Editing でできること

• ページ上のテキストの編集

• ページ上の画像の編集

• CMSページの追加

• 既存のCMSページの編集

On-Page Editing でできないこと

• レイアウトテンプレート上のテキストや画像の編集（ヘッダーやフッターなど）

• オーバーレイ上のテキストや画像の編集（モーダルメニューなど）

• コンポーネント内のバリアブル（変数）ではないテキストや画像の編集

• デザインの変更

• ページ設定やサイト設定 etc.

On-Page Editingの操作の流れ

1/ 公開サイトを開く

まずは、ブラウザで公開サイトの編集したいページを開いてください。On-Page Editingで編集できるのは、その公開サイトのプロジェクトのオーナーか編集権限を持ったメンバーのみです。また、事前にそのブラウザで、Framerにログインしておく必要があります。

2/ 編集ボタンをクリック

ページの右側に表示されている鉛筆マークの編集ボタンをクリックすると、編集モードに切り替わります。（このボタンは、編集権限がないサイト訪問者には表示されません）

3/ 編集する

編集したい箇所をクリックすると編集が可能になります（各編集方法は後述）。

このとき、編集内容は自動で保存されますが、実際の公開サイトにはまだ反映されていません。すぐに反映させたい場合は、以下の操作を行ってください。まだ反映させたくない場合は、右下の「Finish Editing」をクリックして、「Go Back to Site」をクリックすると、編集モードを終了できます。

4/ Framerを開く

編集が完了したら、左下の「Open in Framer」をクリックしてFramerを開きます。

このとき、Framerのデスクトップアプリをインストール済みであれば、アプリが開きます。アプリを使用せず、そのままブラウザを使用する場合は、上記の「Open in Browser」をクリックしてください。

5/ 公開する

右上の「Publish」ボタンをクリックして、「Update」ボタンをクリックすると、公開サイトに編集内容が反映されます。Updateの前に (2) の箇所をクリックすると、以下のように、編集が行われたページを確認できます。

「Update」ボタンをクリックすると、すべての編集が公開サイトに反映されますので、まだ公開・更新したくないページが含まれていないか、確認するようにしましょう。

テキストの編集方法

通常のテキスト（文字）を編集する方法はとても簡単です。テキストをクリックすれば、直接文字を入力できます。

画像の編集方法

画像を編集（差し替え）したい場合は、画像をクリックすると上記のような編集パネルが表示されるので、「Choose Image…」をクリックして、差し替えたい画像をアップロードします。Alt Text（画像の代替テキスト）も編集可能です。

コンポーネントの編集方法

Framerには、テキストや画像などを、再利用できるひとかたまりの部品として登録できる機能があり、これを「コンポーネント」といいます。コンポーネント内のテキストや画像も、コンポーネントをクリックすると下記のように編集パネルが開き、そこで編集が可能です。ただし、バリアブルとよばれる変数として設定されていない（＝すべてのコンポーネントに共通で使用されている）テキストや画像は、管理画面のCanvasで編集する必要があります。

コンポーネント内のテキストには、上記の「数字」や「見出しタイトル」のように直接編集できるタイプのテキストと、「本文」のように Edit Content をクリックして開いたパネル上で編集するタイプのテキストがあります（下記参照）。

こちらのタイプの場合、テキストの一部にリンクを加えたり、太字にしたりすることも可能です。

既存のCMSページの編集

ブログの記事ページや事例紹介の詳細ページなど、CMSで管理されているページ（＝CMSページ）では、記事のタイトルや本文、画像だけでなく、表示されている日付やカテゴリーなどの変更も可能です。操作は直感的に行えますので、編集したい箇所をクリックしてください。上記は日付変更時の編集パネルです。

CMSページの追加

On-Page Editingでは、既存のCMSページの編集だけでなく、CMSページ（アイテム）を新たに追加することも可能です。右下の「Add Page」をクリックしてください。

すると、上記のような中身が空のCMSページが表示されます。この状態で直接入力していくことも可能ですが、この画面上では設定できない項目（Fields）もあるため、右下の「Show All Fields」をクリックしましょう。

すると、すべての設定項目が表示されます。各項目の詳しい説明については、こちらのページ（Framer製Webサイトの編集方法）のCMSの箇所をご参照ください。

入力が完了したら「Save」をクリックします。

この画面では、左下のボタンが「Open in Framer」ではなく「Discard Page（ページを削除する）」になっています。新規ページを公開サイトに反映させたい場合は、一度「Finish Editing」をクリックしてから、「Open in Framer」をクリックしてください。

すると、上記のような画面が表示されます。この状態では、追加したページは「Draft（下書き）」になっています。「…」をクリックして、「Undraft Item（下書き解除）」をクリックしてから「Publish（公開）」すると、公開サイトにも新規ページが追加されます。