やあ、
PageFly チームの Richard です。PageFly バージョン 4.13.0 のリリースをお知らせします。このアップデートでは、Web サイト構築エクスペリエンスを向上させるために設計された多数の新機能と改善が導入されています。
更新された要素から改善されたモバイル ナビゲーションまで、このバージョンには、魅力的でパフォーマンスの高いページをより効率的に作成するのに役立つ更新が満載されています。PageFly 4.13.0 の新機能の詳細を見てみましょう。
モバイルレイアウトの更新
アコーディオン要素
自動スクロール メカニズム:ユーザーがアコーディオン項目をクリックして開くと、ページがコンテンツ領域まで自動的にスクロールされるようになり、ユーザー エクスペリエンスが向上します。
注:更新されたバージョンを使用するには、新しい要素をドラッグする必要があります。
コンテンツリスト要素
モバイル ビューでの段落のアイコン位置の改善: 段落内のアイコンの配置が強化され、モバイル デバイスでの位置合わせが改善されました。
- アイコンよりも列が大きくなるバグを修正しました。小さい画面では間隔を狭めてください。

- コンテンツ リスト バリアント 1 から 7 および 10、11 に、ナビゲーション 1 とページネーション 1 の自動適用を適用しました。

- コンテンツ リスト バリアント 8、9、12、13 の部分的なアイテムの表示を適用し、アイテムの間隔を変更しました。

スライドショー要素
モバイル デバイスでのパディングの改善: モバイル デバイスでのスライドショー要素のパディングを最適化し、より優れた表示エクスペリエンスを実現しました。
- バリアント 3 に部分的な自動表示を適用しました。今後は部分的なアイテムを自動表示できるようになります。

- バリアント 4 および 5 でセクションがデバイス ビューポートからオーバーフローする問題を修正しました。

リスト要素
ディスプレイフレックス:モバイル設定のリスト項目にディスプレイフレックスを追加しました

モバイルでのナビゲーション
強化されたナビゲーション表示: モバイル ビューでは、マウスをホバーしたときにのみ表示されるのではなく、すべてのナビゲーション タイプがデフォルトで表示されるようになります。

製品リスト要素
- 製品の詳細に境界線を追加: 製品リスト内の各製品の詳細に境界線が追加され、視覚的な区別と明瞭性が向上しました。

パフォーマンスアップデート
画像要素
- 画像読み込みパラメータ: ユーザーは、新しい「画像読み込み」パラメータを使用して、各画像の画像読み込みを最適化できるようになりました。
- 遅延読み込み: 画像はビューポート内に表示されている場合にのみ読み込まれるため、PageSpeed が向上します。
- プリロード: ページが読み込まれるとすぐに画像が読み込まれ、LCP が向上します。
- 標準: 全体的なユーザー エクスペリエンスを向上させます。
- 最適化された画像読み込みメカニズム: 更新されたメカニズムにより、各デバイスに適切なサイズの画像が読み込まれるようになり、ページ速度とユーザー エクスペリエンスが向上します。注:更新されたバージョンを使用するには、新しい要素をドラッグする必要があります。
アコーディオン要素の改善
- SEO とページのパフォーマンスを向上させるために、HTML セマンティック要素を使用します。
UX アップデート
エディターページヘッダー
旧バージョン:

新バージョン:

- エディターヘッダーを更新しました:
- 左上の「ページ一覧に戻る」アイコンを削除しました。
- 右上の「バックグラウンド プロセス」と「ヘルプ」アイコンを削除しました。
- [保存/公開] ボタンを [プレビュー/ライブ ビューの表示] ボタンの上に移動しました。
- プレビュー/ライブ ビューの表示ボタンが右上に表示されるようになりました。ページが公開されていない場合、ライブ ビューの表示ボタンは灰色 (非アクティブ) になります。
- 「自動保存」機能を変更しました:
- 現在の「自動保存」機能を削除しました。
- 「自動バックアップ」機能: 変更内容は自動的にバックアップされ、ページを再読み込みしたり保存せずに閉じたりしても復元できます。
- 「キャンセル」をクリックすると、保存されていない変更がすべて削除されます。
- 「復元」をクリックすると、すべての変更がエディターに表示され、ユーザーは変更を保存したり、追加の変更を加えたりすることができます。


- 「保存」ステータスを更新しました:
- 変更が行われると、破棄/保存ボタンが上部に表示されます。
- 「保存」をクリックすると公開ボタンが表示され、破棄/保存ボタンは非表示になります。
- 編集者数アイコン: 同じページで複数のタブが開いているときに表示され、上書きの問題を軽減します。

「要素の追加」と「Shopify 要素の追加」を「要素」に統合しました。
エディターのモバイルレイアウトを作成しました
- レスポンシブ デザインの更新: エディターとグローバル スタイルがレスポンシブ デザインをサポートするようになりました。
- モバイルでの操作の最小化: モバイル エディター画面での操作が最小限に抑えられました。
- 小さな画面のアラートを削除しました。
ページ設定とページ割り当てモーダル
- ページ設定アイコンを移動しました: アイコンは左側のサイドバーに移動しました。
- ページ割り当て: 製品ページまたはコレクション ページの場合、ページ設定アイコンの上にページ割り当てが表示されるようになりました。

バージョン履歴
バージョン履歴 UI が改善され、ナビゲーションと追跡が容易になりました。
旧バージョン

新バージョン:

カスタムコードコンポーネントを作成する
カスタム コード モーダル UI をカスタム コード ドロワーに置き換えます。
統合コンポーネントの作成
サードパーティ要素を追加するためのユーザー エクスペリエンスが強化されました。
旧バージョン:

新バージョン:

ページテンプレートセクション
ページ テンプレート アイコンの位置を変更しました: アクセシビリティを向上させるためにレイアウトが改善されました。

「セクションを追加」ボタンを追加しました:「ページ コンテンツ」のセクション リストの下部にあります。

URL ピッカー モーダル
エディター内で URL を選択するためのインターフェースが改善されました。

ストアコンテンツコンポーネントを作成しました
ストア内のコンテンツ管理を効率化する新しいコンポーネント。
ストアフロントのパスワードモーダルの移行
ストアフロントのパスワード移行モーダルをストアのグローバル設定に移動します。

HTML/Liquid エディター モーダルの移行
モーダル インターフェイスの改善により編集エクスペリエンスが強化されました。

アイコンピッカーモーダルの移行
アイコン ピッカー モーダル UI をアイコン ピッカー パネルに置き換えます。

メール作成モーダルの移行
電子メール作成モーダル UI を電子メール作成パネルに置き換えます。

フォントセレクターモーダルの移行
より直感的なインターフェースでフォント選択プロセスが改善されました。

メディア マネージャー モーダルの移行
新しく改良されたモーダルにより画像管理が強化されました。

メタフィールドピッカーモーダルの移行
メタフィールド管理が強化され、ユーザー エクスペリエンスが向上しました。

「PageFlyで編集」機能の改善
- ページが PageFly によって作成された場合: ページ エディターが直接開きます。
- ページが PageFly によって作成されていない場合: 「PageFly で新しいページを作成」モーダルが開きます。

最後に
PageFly 4.13.0 のこれらのアップデートにより、ページ作成エクスペリエンスが大幅に向上することを期待しています。今後のリリースでさらに魅力的な機能や改善点が追加されるので、ご期待ください。いつものように、皆様のフィードバックとサポートに感謝いたします。
バグの対処と解決は、単に整理するだけではなく、プラットフォームの効率性と信頼性を高めることにもつながります。バグを修正するたびに、よりスムーズで直感的なエクスペリエンスを実現し、技術的な問題の修正よりもビジネスの成長に集中できるようになります。
リチャード、
PageFly チーム。
---
以前の PageFly アップグレードの概要については、PageFly ブログをご覧ください。最新バージョンのアップデートにご期待ください。