FramerのHTML取り込み拡張機能ガイド
1. 拡張機能のインストール方法
1Framerでの操作
- Framerを開き、上部の挿入パネルにある「HTML paste」ボタンをクリック
- 表示されるモーダルで「Get Extension」をクリック
2ブラウザでのインストール
- Chrome Web Storeが開き、拡張機能をインストール
- Chromeの場合：インストール後、アドレスバーの右側に一時的に表示される
- 拡張機能メニューを開いて「ピン留め」すると常に表示されて便利
- Arcブラウザの場合：ウィンドウの右上にカーソルを合わせると拡張機能メニューが表示される
2. 拡張機能の使い方
1ウェブサイト上での要素選択
- 拡張機能を有効にすると、マウスオーバーした要素に青い枠線が表示される
- コピーしたい要素をクリックするだけでコピーできる
- 見出しやテキストなどの単一要素をコピー可能
- div全体などの大きな要素もコピー可能
2高度な選択テクニック
- 複数要素の選択：Shiftキーを押しながら別の要素をクリックすると複数選択できる
- 親要素の選択：要素にカーソルを合わせた状態でEscapeキーを押すと親要素を選択できる
3. Framerへのペースト
1コピーした要素をFramerに貼り付け
- Framerに戻り、Command+V（Mac）またはCtrl+V（Windows）でペースト
- コピーした要素がそのままFramerに取り込まれる
2画像資産の自動インポート
- 画像要素をコピーすると、画像も自動的にFramerに取り込まれる
- 従来のように画像をダウンロードして再アップロードする手間が省ける
便利なヒント： セクション全体の大きな要素もコピーできますが、うまくいかない場合は小さな要素に分割してインポートしてみましょう。
4. インポート後の調整と公開
1レイヤーの整理
- 取り込んだ要素はレイヤーパネルで順序を変更できる
- 背景やグラデーションなどの要素も同様にコピー＆ペースト可能
2サイトの公開
- 通常通り、Framerの公開機能を使ってサイトを公開できる
注意： この拡張機能は、自分のサイトや許可を得たサイト（会社のサイトなど）のインポートのみを目的としています。他の用途での使用は推奨されていません。
5. テンプレート制作者向け情報
テンプレート制作者で、自分の作品がコピーペーストされることを懸念している場合は、一般設定メニューから自サイトのコピーペースト機能をオプトアウト（無効化）することができます。
要約
Framerの新しいHTML取り込み拡張機能は、既存のウェブサイトをFramerに簡単にインポートできる画期的なツールです。この拡張機能をインストールすると、ウェブページ上の任意の要素を選択してコピーし、Framerに直接ペーストすることができます。単一の要素だけでなく、Shiftキーを使った複数選択や、Escapeキーを使った親要素の選択など、柔軟な選択オプションが用意されています。画像資産も自動的に取り込まれるため、従来のような煩雑なダウンロードと再アップロードの手間が省けます。セクション全体の大きな要素もコピー可能ですが、うまくいかない場合は小さな要素に分割してインポートすることも可能です。この拡張機能は自分のサイトや許可を得たサイトのインポート専用であり、テンプレート制作者は設定から自サイトのコピーペースト機能を無効化することもできます。この新しいワークフローにより、サイト移行の時間が大幅に短縮され、Framerでのウェブサイト構築がより効率的になりました。
関連記事
1Framer 実践マニュアル
Framerの基本操作から実践的な使用方法まで、ステップバイステップで学べるマニュアル。HTML取り込み機能の基礎となる操作方法を詳しく解説しています。
→ 記事を読む
2Figma to Framer ガイド
FigmaからFramerへのデザイン移行ワークフローを解説。デザインデータの効率的な連携方法と、HTML取り込み機能と組み合わせた高度なワークフローを学べます。
→ 記事を読む