🔧 FramerのHTML取り込み拡張機能ガイド

📖 詳細な説明

1. 拡張機能のインストール方法

Framerでの操作

• Framerを開き、上部の挿入パネルにある「HTML paste」ボタンをクリック
• 表示されるモーダルで「Get Extension」をクリック

ブラウザでのインストール

• Chrome Web Storeが開き、拡張機能をインストール
• Chromeの場合：インストール後、アドレスバーの右側に一時的に表示される
• 拡張機能メニューを開いて「ピン留め」すると常に表示されて便利
• Arcブラウザの場合：ウィンドウの右上にカーソルを合わせると拡張機能メニューが表示される

2. 拡張機能の使い方

ウェブサイト上での要素選択

• 拡張機能を有効にすると、マウスオーバーした要素に青い枠線が表示される
• コピーしたい要素をクリックするだけでコピーできる
  • 見出しやテキストなどの単一要素をコピー可能
  • div全体などの大きな要素もコピー可能

高度な選択テクニック

• 複数要素の選択：Shiftキーを押しながら別の要素をクリックすると複数選択できる
• 親要素の選択：要素にカーソルを合わせた状態でEscapeキーを押すと親要素を選択できる
  • 特に同じサイズで重なっている要素がある場合に便利

3. Framerへのペースト

コピーした要素をFramerに貼り付け

• Framerに戻り、Command+V（Mac）またはCtrl+V（Windows）でペースト
• コピーした要素がそのままFramerに取り込まれる

画像資産の自動インポート

• 画像要素をコピーすると、画像も自動的にFramerに取り込まれる
• 従来のように画像をダウンロードして再アップロードする手間が省ける

4. インポート後の調整と公開

レイヤーの整理

• 取り込んだ要素はレイヤーパネルで順序を変更できる
• 背景やグラデーションなどの要素も同様にコピー＆ペースト可能

サイトの公開

• 通常通り、Framerの公開機能を使ってサイトを公開できる

5. 利用上の注意事項

重要な制限：この拡張機能は、自分のサイトや許可を得たサイト（会社のサイトなど）のインポートのみを目的としています。他の用途での使用は推奨されていません。

テンプレート制作者向け：テンプレート制作者で、自分の作品がコピーペーストされることを懸念している場合は、一般設定メニューから自サイトのコピーペースト機能をオプトアウト（無効化）することができます。