Squarespaceにフリップブックを埋め込む方法

Squarespaceサイトにインタラクティブなフリップブックを追加すると、静的なPDFコンテンツが訪問者を引き込むページめくり体験に生まれ変わります。商品カタログ、ポートフォリオ、会社案内のいずれであっても、FlipLinkフリップブックの埋め込みは正しい方法を知っていればわずか数分で完了します。

このガイドでは、FlipLinkでの埋め込みコード取得からSquarespaceへの貼り付け、すべての画面サイズで美しく表示されるまでの全手順を解説します。

始める前に必要なもの

フリップブックを埋め込む前に、以下を準備してください。

• 公開済みのFlipLinkフリップブック — go.fliplink.meでPDFをアップロードして公開してください。ダッシュボードから埋め込みコードまたは共有リンクが必要です。
• SquarespaceのBusinessプラン以上 — コードインジェクションとカスタムコードブロックにはBusinessプラン以上が必要です。PersonalプランやBasicプランではカスタムHTMLやiframeの埋め込みに対応していません。
• Squarespaceサイトエディターへのアクセス — Squarespaceのページビルダーで直接ページを編集します。

まだフリップブックを作成していない場合は、共有・配信オプションのガイドで、フリップブックが完成した後のすべての共有方法をご確認ください。

ステップ1：FlipLinkから埋め込みコードを取得する

FlipLinkでフリップブックが公開されたら、埋め込みコードの取得は簡単です。

1. go.fliplink.meのFlipLinkダッシュボードにログインします。
2. 埋め込みたいフリップブックを開きます。
3. Shareボタンをクリックします。
4. Embedタブを選択します。
5. 提供されるiframe埋め込みコードをコピーします。

埋め込みコードは以下のようになります。

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

このコードを控えておいてください。次のステップでSquarespaceに貼り付けます。

ステップ2：Squarespaceでコードブロックを追加する

Squarespaceはブロックベースのエディターを使用しており、コードブロックがフリップブックの埋め込みコードを貼り付ける場所です。

1. フリップブックを表示したいページを開きます。
2. ページのEditをクリックします。
3. フリップブックを配置したいセクションにカーソルを合わせ、挿入ポイント（プラスアイコン付きのライン）をクリックします。
4. ブロックオプションからCodeを選択します。見つからない場合は、ブロックピッカーで「Code」と検索してください。
5. FlipLinkのiframe埋め込みコードをコードブロックに貼り付けます。
6. 「Display Source」オプションのチェックを外します — これは非常に重要です。Display Sourceにチェックが入っていると、SquarespaceはフリップブックをレンダリングせずにHTMLをテキストとして表示してしまいます。
7. Saveをクリックし、エディターを終了してページをプレビューします。

フリップブックがインタラクティブなページめくりアニメーション付きで、ページ上に直接表示されるはずです。

ステップ3：フリップブックをレスポンシブにする

デフォルトの埋め込みコードはデスクトップではうまく機能しますが、タブレットやモバイルデバイスでも適切にスケーリングされるようにしましょう。レスポンシブスタイリングを適用した改良版の埋め込みコードはこちらです。

<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
  </iframe>
</div>

padding-bottom: 75%は4:3のアスペクト比コンテナを作成します。フリップブックのサイズに合わせてこの値を調整してください。

• 4:3比率（横向き）：padding-bottom: 75%
• 16:9比率（ワイドスクリーン）：padding-bottom: 56.25%
• 3:4比率（縦向き）：padding-bottom: 133%
• 1:1比率（正方形）：padding-bottom: 100%

このテクニックは「アスペクト比ボックス」手法と呼ばれます。iframeがコンテナにぴったり収まり、コンテナがページ幅に合わせて流動的にスケーリングされます。

ステップ4：ドメインホワイトリストを設定する

フリップブックでセキュリティのためにドメインホワイトリストを有効にしている場合は、Squarespaceドメインを許可リストに追加する必要があります。そうしないと、埋め込みがブロックされて読み込まれません。

1. FlipLinkダッシュボードでフリップブックの設定を開きます。
2. ドメインホワイトリストセクションに移動します。
3. Squarespaceドメインを追加します（例：www.yourdomain.comまたはyourdomain.squarespace.com）。
4. 設定を保存します。

ドメインホワイトリストは任意ですが、無許可のウェブサイトにフリップブックが埋め込まれるのを防ぎたい場合に推奨されます。意図した場所にのみコンテンツが表示されることを保証します。

Squarespaceコードインジェクションの使用（サイト全体）

フリップブックをすべてのページに表示したい場合 — 例えば、フッターやヘッダーエリアに — 個別のコードブロックの代わりにSquarespaceのコードインジェクション機能を使用できます。

1. Settings → Advanced → Code Injectionに移動します。
2. 埋め込みコードをFooterフィールド（または配置に応じてHeader）に貼り付けます。
3. 位置を制御するために適切なスタイリングのコンテナdivで囲みます。
4. Saveをクリックします。

このアプローチはサイト全体のバナーや常設のフリップブックウィジェットに便利ですが、ほとんどのユースケースでは特定のページにコードブロックを使用する方が良い選択です。

代替アプローチ

すべての状況で完全なiframe埋め込みが必要なわけではありません。Personalプランを含むすべてのSquarespaceプランで機能する、よりシンプルな2つの代替手段をご紹介します。

サムネイル付きリンクブロック

フリップブックを直接埋め込む代わりに、新しいタブでフリップブックを開くビジュアルリンクを追加します。

1. フリップブックの表紙ページのスクリーンショットを撮ります。
2. Squarespaceページにスクリーンショット付きのImage Blockを追加します。
3. 画像にFlipLink共有URLへのリンクを追加します。
4. リンクを新しいウィンドウで開くように設定します。

このアプローチはすべてのSquarespaceプランで機能し、ビジュアルプレゼンテーションを完全にコントロールできます。訪問者がカバー画像をクリックすると、新しいタブでフルのフリップブック体験が得られます。

ボタンブロック

よりすっきりした行動喚起スタイルのアプローチの場合は以下の通りです。

1. ページにButton Blockを追加します。
2. ボタンのテキストを「カタログを見る」や「パンフレットを読む」などに設定します。
3. FlipLink共有URLにリンクします。
4. 新しいタブで開くように設定します。

これは最もシンプルな方法で、すべてのプランとデバイスで確実に機能します。

よくある問題のトラブルシューティング

保存後にフリップブックが表示されない

コードブロックの設定で「Display Source」のチェックを外しているか確認してください。このオプションが有効になっていると、Squarespaceはコードを実行せずにプレーンテキストとして表示します。

埋め込みがブロックされるか空白のフレームが表示される

FlipLinkのドメインホワイトリスト設定を確認してください。ホワイトリストが有効な場合、SquarespaceドメインがAi許可リストに含まれている必要があります。また、Squarespaceプランがコードブロックに対応しているか確認してください — Businessプラン以上が必要です。

モバイルでフリップブックが切れる

ステップ3で示したレスポンシブラッパーを使用してください。アスペクト比ボックスのテクニックにより、iframeが適切にスケーリングされます。それでも問題がある場合は、padding-bottomのパーセンテージを少し下げて、モバイルビューポートにより適した表示にしてみてください。

Squarespaceが「カスタムコードを使うにはアップグレードしてください」と表示する

コードブロックとコードインジェクションは、Squarespace Business、Commerce Basic、Commerce Advancedプランでのみ利用可能です。Personalプランを使用している場合は、上記のリンクブロックまたはボタンブロックの代替手段を使用してください。

最適な体験のためのヒント

• **適切なページ配置を選びましょう。**最大のインパクトを得るために、フリップブックを全幅セクションに配置してください。ページめくり体験が窮屈に感じる狭いサイドバーへの埋め込みは避けましょう。
• **適切な高さを設定しましょう。**レスポンシブラッパーを使わない場合は、デスクトップではiframeの高さを少なくとも600pxに設定してください。それ以下では快適な閲覧が難しくなります。
• **埋め込みの周りにコンテキストを追加しましょう。**フリップブックの上に見出しと簡単な説明を加え、ページめくりを始める前に何を見ているのか訪問者が理解できるようにしましょう。
• **複数のデバイスでテストしましょう。**公開前にデスクトップ、タブレット、モバイルでページをプレビューしてください。Squarespace内蔵のデバイスプレビューで簡単に確認できます。

関連リソース

他のプラットフォームへのフリップブック埋め込みについては、以下のガイドが参考になります。

• ウェブサイトにPDFを埋め込む方法
• WordPressにフリップブックを埋め込む方法
• iframeでフリップブックを埋め込む方法

今すぐフリップブックの埋め込みを始めましょう

FlipLinkを使えば、Squarespaceでのフリップブック作成と埋め込みはわずか数分で完了します。PDFをアップロードし、埋め込みコードを取得し、Squarespaceのコードブロックにドロップするだけで、訪問者はサイトを離れることなく洗練されたインタラクティブな閲覧体験を楽しめます。

FlipLinkで無料のフリップブックを作成して、今すぐSquarespaceサイトへの埋め込みを始めましょう。各プランに含まれる内容は料金ページでご確認ください。