【Shopify】PageFlyの使い方完全ガイド｜初心者向けにページ作成から公開まで解説

こんにちは Hodaです

こちらの記事では Pagefly の実際の使い方をご紹介します。

アプリ自体の詳しい仕様や特徴は以下の記事をご確認ください！

料金プランについてはこちら

最新の使い方を動画でご説明していますのでこちらも併せてご確認ください！

PageFlyのインストール・初期設定

まずはShopifyアプリストアから、PageFlyをインストールしましょう。

まずはこちらから、アプリページへアクセスできます。

アプリページが開いたら、「インストール」 をクリックしてください。

他のアプリ同様にデータアクセスの確認が表示されますので、そのまま「インストール」をクリックします。

言語設定

Pageflyのメリットの1つが日本語インターフェースになっている ということです。海外ツールでありながら、日本語に対応しているのは嬉しい点です。完全日本語ではありませんが、最低限のテキストは自動翻訳されたテキストになっているので 使いやすいと思います。

恐らくデフォルトで日本語になっていると思いますが、 Preferences > 設定 > 言語 に進み、 日本語になっているか確認しましょう。

メニューにピン留めする

ちなみに、Pageflyは他のアプリよりも頻繁にアクセスすると思います。ページを編集したり、設定を変更したりなどの目的でよく使うアプリだと思いますので、管理画面にピン留めしておくことをオススメします！

細かい点ですが、ピン留めしておかないと毎回アプリを開くだけでも時間がかかるので、オススメです！

新規ページを作成する

それでは早速新規ページを作成してきましょう。 Page に進むことで、作成したページの管理ができます。初めての場合は以下のような画面になっています。

ここでは以下の２パターンから選択できます。

• 空白のページを作成する : 完全にゼロの状態から作成する
• テンプレートから作成する : pageflyが用意した120種類以上のテンプレートから選んで作成する

これは用途に応じてどちらでも大丈夫です。初心者の方は、一度テンプレートから選択をして、 pageflyの仕組みを確認いただくのが良いです。チュートリアル動画内ではテンプレートを使ってまずはデモをしています。

各ボタンを選択すると、以下の6パターンのページタイプを選ぶ流れとなります。PageFlyでは、Shopifyストア内のさまざまなページをカスタマイズできます。

• 通常： キャンペーンページやランディングページ（LP）、会社概要、お問い合わせページなど、自由に作成できる独立したページです。
• ホーム： ストアのトップページです。訪問者が最初に見るページとなり、URLはストアのルート（/）になります。
• 商品： 各商品の詳細ページです。商品名・価格・画像・在庫情報などはShopifyの商品データと連携し、自動的に表示されます。
• コレクション： 商品一覧ページです。指定したコレクションに含まれる商品が自動的に表示されるため、商品数が増えても手動で更新する必要はありません。
• ブログ投稿： ブログ記事のテンプレートです。記事本文だけでなく、サイドバーや関連記事、CTAエリアなども自由にデザインできます。
• パスワード： ストアをパスワード保護している場合に表示されるページです。Shopify標準のデザインだと「Shopify感」が強く出てしまうため、ブランドイメージに合わせてカスタマイズするのもおすすめです。

通常はLPを作成することが多いので、 通常 を選択すればOKです。 とりあえず「空白のページを作成する > 通常」で作成してみます。後から、テンプレートを使いたくなったら、エディターからも追加することができます。

そうすると、以下のように pagefly のエディターが開きます。 この画面で、実際のページを作成していきます。

エディターの基本的な使い方

それでは、まずはエディターの使い方についてご紹介します。詳しい動かし方等は動画チュートリアルをご参照ください。

タイトルの変更

現在作成しているページの名前を変更できます。これは、実際にSEOで使われる名前ではなく、管理者である皆さんが区別しやすくするためのページ名 です。

デフォルトでは Untitled になっているので、ここをクリックして わかりやすいタイトルにしておくことをオススメします。

※ ここは問題なく日本語を使うことができますが。このページをエクスポートしたりする際に日本語だと文字化けしてしまうことがあるので、できれば英数字で書いておくと良いです。（もちろん日本語でも問題ありません。）

変更をして Enter をクリックすることで、保存されます。

Flymate - AIアシスタントの利用

Pageflyが最近力を入れているのが、このAIアシスタントである Flymate というAIアシスタントです。Shopifyでも最近はSidekickというAIアシスタントが登場しましたが、PageflyもAIにプロンプトを言うだけで、ページの修正などを行ってくれるようになりました。

※ 2026年現在、この機能はまだベータ版でテスト段階です。時々エラーになったり、上手に処理されないこともありますのであくまでも補足機能として試してみることをオススメします。

できることは主に以下の内容です。

AIによるコンテンツ作成

簡単な指示を入力するだけで、ページやセクションを自動生成できます。

• ヒーローセクションの作成
• お客様の声セクションの追加
• カウントダウンタイマーの生成
• テンプレートの提案・挿入

「夏のセール用LPを作りたい」のような要望から、ページ作成をサポートしてくれます。

デザインの修正

エディタ内で要素を選択した状態なら、自然な文章でデザイン変更を依頼できます。

• ボタンの色を変更
• テキストサイズを調整
• 余白（Padding）の追加
• セクションのレイアウト変更

設定項目を探さなくても、AIへの指示だけで変更できるのが特徴です。

PageFly内の操作サポート

PageFlyの機能や設定場所が分からない場合も案内してくれます。

• SEO設定を開く
• Theme Styleへ移動する
• Analytics画面へ移動する
• 各種設定パネルの案内

初心者が迷いやすい管理画面のナビゲーションをサポートしてくれます。

質問・トラブル解決

PageFlyの使い方について質問することもできます。

• モバイル表示の調整方法
• スティッキーヘッダーの作成方法
• レイアウト崩れの原因調査
• よくあるエラーの解決方法

困ったときにヘルプページを探さなくても、その場で質問できるのは便利です。

Flymate の詳しい使い方やできることについてはこちらの記事でご説明しています。

デバイスのプレビュー

次に、上のバーに デバイスのアイコン(Device Switcher)が4つ並んでいます。これらをクリックすることで、各デバイスで見た時の状態でプレビューをすることができます。

• デスクトップ
• ノートパソコン
• タブレット
• スマホ(モバイル)

例えば、各ブロック毎にもデバイスごとの設定があるので、 「スマホの時は文字を19px」「タブレットの時はこのセクションは隠す」というような細かい設定が可能です。

最近では、スマホからのアクセスが50%以上になることも多いので、PC版だけでなくしっかりとスマホで見た時も綺麗に見れるようにここでビューを切り替えながら操作するのが良いです。

左サイドバー

そして、重要なのが左側のサイドバーです。ここにはいくつかのアイコンが並んでいます。

• 単数のページのコンテンツ : ページ内の構成を確認するのに便利、セクションと要素の関係を表示できます。
• 要素 : ページ内で利用するデザインブロックはここから選択します。選択してドラッグアンドドロップで追加できます
• サードパーティの要素 : 外部アプリを埋め込みたい時はこちらから
• ページテンプレート : テンプレートを現在のページに追加することができます。
• SEO optimization : SEO最適化のための SEOチェッカー などの機能があります。
• Page Insights : サイトの表示速度を計測できます
• A/Bテスト : ページのABテストを行いたい時はここから設定します
• AI Translator : ページのAI自動翻訳
• ページ設定 : その他のページ設定

上記のようになっています。この中でも特に重要なのが

• 単数のページのコンテンツ
• 要素
• ページ設定

となります。それぞれ、後半で詳しくご説明します。

ページに要素を追加する

それでは、実際にページを作成していきましょう。 基本的にはとてもシンプルで、 要素 から追加したい項目をドラッグドロップをして、中央のエディター部分に追加します。

▼ そして、追加した要素をクリックすると、必ず右にサイドバーが現れます。ここで選択している要素の細かい設定 をすることができます。

右サイドバーには大きく2つの設定があり 一般 と スタイリング というものがあります。

一般タブ

一般タブは その要素に最低限必要な基本設定を編集する場所です。例えば、

• テキスト系 → 入力テキスト、テキストの種類
• 画像系 → 使用する画像、クリックした時のアクション
• リスト → アイコンの有無、リストのデザイン
• Google Map → 中央の住所
• アニメーション
• デバイスごとの表示/非表示

などのようなものです。

スタイリングタブ

一方スタイリングタブでは、デザインに関するさらに高度設定を行うことができます。

例えば、

• 幅・高さ
• 余白 (padding/margin)
• 枠線
• 透明度
• 配置
• 背景色・背景画像

などの、基本的にはCSSで設定するような内容を編集できます。

フレックスセクションを理解する

要素を追加するだけで、簡単にページが作成できるのですが、ただ単に縦に要素を並べていってお洒落なページができるほどシンプルではありません。

皆さんの希望するデザインによっては複雑なレイアウトのページを作成希望されている方もいると思います。

そこで、重要となるのが フレックスセクションというものです。 基本的にページに追加されるすべての要素は「フレックスセクション」というセクションブロックの中に含まれる形で追加されます。そして、この「フレックスセクション」の設定を調整することで、自由なレイアウトを実現することができます。

(WordPressのElementorをご利用経験のある方だと、親近感があると思います。)

▼ まず、こちらの図のようにPageflyで要素を追加していくためには、フレックスセクション に含めて追加する必要があります。単にページ内に要素だけを追加することはできません。 （と言っても、特に設定しなければフレックスセクションは自動的に作られ、透明の枠のようなものです。）

▼ 上記のイラスト解説のように、フレックスセクション(フレックスボックス)には 方向 というオプションがあります。これを 縦方向 か 水平 にすることで、 中身の要素の並べ方をカスタマイズすることができるようになります。

この方法を理解しておくことで、複数カラムの作成方法や 横並びと縦並びを組み合わせたレイアウトも簡単に作成することができるようになります。

Shopifyの商品リスト・コレクションリストを表示する

PageflyではネイティブのShopify用の要素も使うことができるようになっています。 要素 > Shopify に進むことで、 商品やコレクション、ブログに関する項目を表示できるようになっています。

リストはグリッド形式やカローセル形式に対応しており、

• コレクションの指定
• 表示アイテム数
• 配置
• アイテム同士の余白

など細かく設定することができるので、ほとんどのLPにマッチすると思います。

また、最近よくある画像にマウスホバーで次の画像を表示する動作にも対応しているので、これは是非設定しておくことをおすすめします。（設定方法はチュートリアル動画でご説明しています。）

コレクションに関しても コレクション一覧 という要素があります。

こちらを追加することで、指定したコレクションの一覧を表示することができます。もちろん、順番を変更したり、デザインをカスタマイズすることも可能です。

Hodaのポイント：グローバルスタイルを設定するのが重要

個人的にPageflyで一番便利な機能が、グローバルスタイル の設定です。 簡単に言うと、色、フォント、大きさ、余白、ボタンデザインなどのデザインのルールを事前に設定しておき、それをエディターですぐに呼び出して使うことができる機能です。Shopifyにも配色 という機能がありますが、同じ考え方になります。

設定するには Extra functions > グローバルスタイル に進みます

以下の各項目をクリックすると、中央にオプションが表示されます。

• 色スキーム
• タイポグラフィ
• コンテナ
• 見出し
• 文言
• ボタン
• メディア
• アイコン
• ディバイダー
• フィールド

基本的にそれぞれの項目で 6パターンを保存しておくことができます。 各パターンをクリックすると右側サイドバーに設定項目が表示されます。

こちらから事前に共通デザインを設定しておき、保存することで、エディターを使った際にすぐにスタイルを呼び出すことができます。

テクニック：他の要素のスタイルだけをコピペする

知っておくと便利なテクニックが スタイルをコピー するというオプションです。 これは指定した要素のスタイリングだけをコピーして、貼り付け先の対象の要素に同じスタイルを適用できる機能です。

これを知っておくと、毎回一個ずつスタイルを調整する手間が省けます。

スマホでの見え方を調整する

基本的にパソコンでページエディターを操作するので、PCビューでページを作成すると思います。

そして、ある程度ページが完成したら、スマホビューでも確認をすることをオススメします。そうすると、恐らくPC版では最適なサイズや余白だったけど、スマホだと何か変なレイアウトになってしまうことがあります。

その時に、以下の方法で見え方を調整できます。

① スマホ・タブレットだけにスタイルを適用できる

スタイリング設定の各項目には、右上に デバイスアイコン（PC・タブレット・スマホ） が表示されています。

このアイコンをクリックすると、各デバイス向けの設定画面に切り替えることができます。

つまり、スマホ向けに変更した内容がPC版のデザインに影響することはありません。

例えば、以下のようなことができるようになります

スマホだけ余白を小さくする

PCでは左右40pxの余白を設定していても、スマホ表示では左右10pxに変更できます。この場合、スマホで見た時だけ余白が10pxになり、PCでは引き続き40pxの余白で表示されます。

スマホだけ画像を大きく表示する

PCでは画像幅を50%に設定し、スマホでは90%に設定することもできます。これにより、スマホでは画面いっぱいに近いサイズで画像を表示しながら、PCではレイアウトを崩さずに表示できます。

タブレットだけ背景色を変更する

例えば、タブレット表示時だけ背景色を黒に変更することも可能です。この設定はタブレットで見た時だけ適用され、PCやスマホでは元の背景色のまま表示されます。

このように、PageFlyでは 「PC・タブレット・スマホそれぞれに最適なデザイン」 を作成できます。実際のサイト制作では スマホだけ文字を小さくしたい、スマホだけ余白を減らしたい ということが多いので、この方法を知っておくのは重要です。

②Visibility を調整する

次は、Visibility（可視性） を調整する方法です。

Visibilityは 「一般」タブ から設定できる機能で、要素やセクションを デバイスごとに表示・非表示 にすることができます。

レスポンシブ対応というと、PC用に作成したレイアウトをそのままスマホ向けに調整するイメージを持つ方も多いですが、必ずしもすべての要素をスマホでも表示する必要はありません。

例えば、TOPページのHEROセクションを

• PCではテキスト中心のレイアウトで表示する
• スマホでは画像中心のレイアウトで表示する

といった使い分けが可能です。

この場合、PC用のHEROセクションをスマホ向けに無理やり調整するのではなく、

• PC専用のHEROセクション
• スマホ専用のHEROセクション

をそれぞれ作成し、Visibility機能で表示するデバイスを切り替えます。

そのため、

• スマホでだけ表示したいバナー
• PCでだけ表示したい説明文
• タブレットでは非表示にしたいセクション

といった細かな調整も簡単に行えます。

PageFlyで本格的なレスポンシブデザインを作成する際には、非常によく利用する便利な機能です。

アニメーションを設定する

PageFlyでは、各要素やセクションの 一般 → Animation からアニメーションを設定できます。

アニメーションは、主に以下の2つのタイミングで適用できます。

• 表示時（可視時） ：スクロールして読み込まれたタイミング
• マウスオーバー時 ：マウスを上に乗せた時

の2つのタイミングでのアニメーションを設定することができます。

Hoda のアドバイス

アニメーションを使うと、サイトをおしゃれでプロフェッショナルな印象に見せることができます。

ただし、使いすぎには注意が必要 です。

見出し、画像、ボタン、アイコンなど、あらゆる要素にアニメーションを設定してしまうと、かえってガチャガチャした落ち着きのないサイトになってしまいます。

最近のLPやSaaSサイトでは、アニメーションはあくまでアクセントとして使われることが多く、1ページあたり1〜3箇所程度に絞るのが一般的です。

特に、

• お申し込みボタン
• 重要なCTAエリア
• 料金プラン
• 特徴セクション

など、ユーザーの視線を集めたい部分だけに使うと効果的です。

また、アニメーションが多すぎると、通信環境が悪い場合に表示が遅くなったり、ユーザーがコンテンツを読むことに集中できなくなったりする こともあります。

大切なのは「アニメーションを見せること」ではなく、「ページの内容を分かりやすく伝えること」です。まずはシンプルなデザインを心がけ、本当に強調したい部分だけにアニメーションを活用することをおすすめします。

要素・セクションの名前を変更する

ページの作成が進み、セクションや要素が増えてくると、「どのセクションがどの部分だったかな？」と分かりにくくなることがあります。

そんな時に便利なのが 名前の変更機能 です。

PageFlyでは、セクションや要素ごとに自由な名前を付けることができます。ある程度ページが完成してきたら、後から編集しやすいように分かりやすい名前へ変更しておくことをおすすめします。

例えば、

• Heroセクション
• 特徴エリア
• お客様の声
• CTAボタン

などの名前を付けておくと、後から目的の箇所をすぐに見つけられます。

名前を変更するには、セクションまたは要素の 「・・・」 メニューをクリックし、「名前変更（Rename）」 を選択してください。

ヘッダー・フッターを無効にする

PageFlyでページを作成すると、デフォルトではストアテーマ側のヘッダーとフッターが表示されます。

通常のページであれば問題ありませんが、ランディングページ（LP）を作成する場合は、訪問者を別ページへ誘導したくないため、ヘッダーやフッターを非表示にしたいケースもよくあります。

そのような場合は、 ページ設定 → テーマのセクション →「ヘッダーとフッターを表示する」 のチェックを外してください。

これにより、テーマ側のヘッダーとフッターが表示されなくなり、PageFlyで作成したコンテンツだけを表示できるようになります。

特に、広告用LPやキャンペーンページでは、ユーザーの離脱を防ぐためにヘッダー・フッターを非表示にすることが一般的です。

バージョン履歴を確認する

ページを作成していると、

• 以前のデザインに戻したい
• 誤ってレイアウトを崩してしまった
• 変更前の状態を確認したい

といった場面が出てくることがあります。

そんな時に便利なのが バージョン履歴（Version History） 機能です。

左サイドバーの 「バージョン履歴」 をクリックすると、これまで手動で保存したページの履歴を確認できます。

履歴一覧から過去のバージョンを選択すると、その時点のページ内容をプレビューできます。もしその状態に戻したい場合は、右下の 「復活する」 ボタンをクリックするだけで、ページをそのバージョンに戻すことができます。

注意点

• バージョン履歴に保存されるのは 手動で保存した内容のみ です。自動保存（Autosave）は履歴に含まれません。
• 保存できる履歴は 最新50件まで です。
• 50件を超えた古い履歴は、自動的に削除されます。

カスタムコード を追加する

Pageflyではすべてのプランで、カスタムコード追加のオプションが用意されています。 CSS と Javascript の追加をすることができるようになっています。

CSSは <style></style> なし で追加することができます。

プレビューをする

Pageflyではエディター上で実際に見えるデザインを確認することができますが、一部の要素や機能は実際の本番画面でしか動作しなかったりします。

そんな時は、右上にある目のアイコンの プレビュー をクリックすることで、実際のサイト上で確認することができます。

これはあくまでもプレビューなので、ページを公開していない状態でも安全に確認することができます。

公開の準備ができたら

ページが完成して、公開準備ができたら 右上の「公開する」ボタンをクリックします。ただ、その前に最適化しておきたい設定もあるので、そちらを先に設定することをおすすめします。

左サイドバーの歯車アイコンの ページ設定 をクリックします。

以下の項目があるので設定をしていきます。

• ページタイトル : 現在作成中のページタイトルです。
• ページURL : 実際にページが公開されるURLスラッグです。 これは英数字で設定します。
• ソーシャル共有画像 : XやFacebookでシェアされた時にプレビューとして表示されるOGP画像です
• 「画像の遅延読み込みを有効にする」 はONにしたままでOKです。

ここまで設定できたら、 右上の 公開する ボタンをクリックします。

これで指定したURLでページが公開されます！公開された通常ページはまだどこにも紐づいていないので サイト内からリンクを貼ったり、SNSでシェアする必要があります。

ページをインポートする

PageFlyでは、作成したページを エクスポート・インポート できるため、別のShopifyストアで同じデザインを再利用することができます。

例えば、

• テストストアで作成したLPを本番ストアへ移行したい
• 複数のストアで同じページを使いたい
• 過去に作成したテンプレートを再利用したい

といった場合に便利です。

インポートする際は、エクスポートをした .pagefly ファイル をアップロードするだけでOKです。レイアウトやコンテンツ、デザイン設定などがそのまま引き継がれるため、一から作り直す必要がありません。

セクションを作成する

Pageflyの便利な機能として、よくつかうセクションを作成し、それを各ページですぐに呼び出して再利用することができるようになっています。

管理画面の Section に進むことでセクションを作成することができます。

SEOを設定する

PageFlyでページを作成したら、公開前にSEO設定も忘れずに行いましょう。

初期状態では、PageFlyで設定したページ名がそのままSEOタイトルとして使用され、SEOディスクリプションも未設定のままになっています。 そのため、検索結果での見え方を最適化したい場合は、別途SEO設定を行う必要があります。

ここで意外と知られていないのが、SEO設定はPageFly側ではなくShopify側で行うという点 です。

まずは オンラインストア → ページ に移動してください。すると、PageFlyで作成したページと同じ名前のページが作成されていることが分かります。

実は、PageFlyで作成したページもShopifyのページ機能を利用しており、Shopify側のページに対してPageFlyのテンプレートが割り当てられることで、作成したデザインが表示される仕組みになっています。

そのため、SEOタイトルやメタディスクリプションなどのSEO設定は、通常のShopifyページと同じように Shopify側のページ編集画面から設定 します。

PageFlyの管理画面内でSEO設定を探してしまう方も多いのですが、SEOに関する設定はShopifyのページ側で管理すると覚えておくとよいでしょう。

プランの上限を確認する

Pageflyはプランによって公開できるページ数などが決まっています。確認するには Preferences > 請求 に進みます。「Your plan」という箇所があるので、そこから現在どれくらいのページを作成しているかなどを確認できます。

まとめ

いかがでしたでしょうか。

PageFlyは一見すると高機能で複雑そうに見えますが、実際には 要素をドラッグ＆ドロップして配置するだけで本格的なページを作成できるページビルダー です。

最初は設定項目の多さに戸惑うかもしれませんが、

• 要素を追加する
• スタイリングを調整する
• スマホ表示を確認する
• ページを公開する

という基本的な流れだけでも十分にページを作成できます。

慣れてきたら、

• フレックスセクションを使った複雑なレイアウト
• Visibilityによるデバイスごとの表示切り替え
• テンプレートやセクションの再利用
• FlyMateによるAI活用

なども試してみると良いでしょう。

PageFlyはShopify標準のテーマエディターでは難しいデザインも実現できるため、ランディングページや商品ページの改善、コンバージョン率の向上にも役立ちます。

まずはこの記事や動画を参考に、サンプルページを1つ作成してみてください。実際に手を動かしながら学ぶのが、PageFlyを最も早く習得する方法です。

まだインストールしていない方は、以下から無料で始めることができます。

インストール後はこちらから特典をゲットできます。

また、PageFlyの料金プランやFlyMateの詳しい使い方については、以下の関連記事も参考にしてみてください。

• PageFlyの料金プランを詳しく見る
• FlyMate（AIアシスタント）の使い方

それでは、ぜひPageFlyを活用して魅力的なShopifyストアを作ってみてください！ 🚀