よりスマートな構築方法のご紹介: 新しい GemPages エディタ

GemPagesエディターのバージョン7をリリースした際、パフォーマンスだけでなく、マーチャントの構築方法も大きく進化しました。しかし、すべてのランディングページ、すべての商品カード、そしてすべてのバンドルレイアウトの背後には、常に変わらない要素が存在します。それが「要素設定」です。

そして時間が経つにつれて、それらの設定は古くなり始めました。

過去1年間、私たちはマーチャントの方々と話をしてきましたが、その中で常に浮かび上がってきたのが、何を構築すべきかは分かっているものの、設定のせいで本来よりも難しくなっているという点でした。そこで私たちは自問自答しました。
要素設定がどのように設計されるか フォーム コードがどのように動作するかだけでなく、どのように考えるか？

29 年 2025 月 XNUMX 日に開始されたこのリリースが私たちの答えです。

注意： GemPagesを初めてご利用の場合は、ヘルプセンター詳細なガイド、機能に関するドキュメント、ベストプラクティスを参照してください。

よりスムーズで直感的な開発を実現することに注力し、新しいUIパターンと設定の動作に関する重要なアップデートを実施しました。これらは、日々の業務における負担を軽減し、マーチャントの構築方法をより適切にサポートするように設計されています。

GemPages 内での構築エクスペリエンスをより良いものに変えるアップグレードは次のとおりです。

注意： すでに GemPages Editor V7 を使用している場合は、何もする必要はありません。エディターは自動的に最新バージョンに更新されています。

1. スタイルとレイアウトコントロールのより明確な分離

GemPagesの要素インスペクターは長らく、スタイル設定用とページ上での要素の表示方法をカスタマイズするための2つのタブで構成されていました。このシステムは機能していましたが、どこから始めれば良いのか分かりにくかったため、一部のユーザーは重要な設定を飛ばしてしまうことがありました。

どのように改善したか:

今回のアップデートでは、2 つのタブの構造は維持しながらも、それぞれの役割を明確にしました。

設定タブ 現在は、 視覚的プレゼンテーション 要素のタイポグラフィ、色、背景、枠線、画像などを設定します。これらのコントロールは、 メインコンテンツエリア 要素の。
詳細タブ 要素のレイアウト内での動作や配置、間隔、配置、可視性、レスポンシブ表示などを管理します。これらは 外側の容器または 境界ボックス、要素の。

これがあなたに意味すること：

このアップデートでは、視覚的なデザインと構造的な配置を明確に分離することで、ワークフローの明確さと制御性が向上します。

設定がどこにあるのかをあれこれ考えたり、関連する変更を行うためにパネルを切り替えたりする必要はもうありません。タイポグラフィ、色、画像といったビジュアルスタイルは、それぞれ適切な場所にまとめられています。間隔、配置、表示/非表示に関するコントロールは論理的に整理され、必要な時まで邪魔にならないように配置されています。

この改善された構造により、認知負荷が軽減され、やり直しが最小限に抑えられ、視覚的に一貫性があり構造的に健全なページの作成に集中できるようになります。

2. より読みやすいスキャンパターンを備えた新しいUI

古いデザイン	再設計

以前のバージョンの要素インスペクターでは、コントロールの構造は設定ごとに異なっていました。縦に積み重ねられているものもあれば、ラベルと値の組み合わせが一貫性のないものもありました。設定が追加されるにつれて、パネルが見にくくなり、特に高速に作業している場合や複数の要素を連続して編集している場合に顕著でした。

解決方法:

一貫した左から右へのスキャンパターン。

左右スキャンパターン

このタブのすべての設定は、ラベル → 値という明確な左から右へのパターンに従うようになりました。

一見すると小さな変化に見えますが、数十の要素を編集する場合、その一貫性は重要になります。信頼ブロックごとに設定の構造を改めて覚える必要はありません。どこに行けばよいかは目で追うだけでわかります。

このパターンは、より多くの設定が導入されることでスケーラビリティが向上するだけでなく、ユーザーがエディターをより効率的に操作できるようにトレーニングし、初心者と経験豊富なチームの両方がミスを減らしてより速く作業できるようにします。

ポップオーバー内のネストされた設定。

ネストされた設定のポップオーバー

一部の設定は単一の値に留まらず、関連するコントロールの完全なセットへと展開されます。以前は、これらの追加オプションはインラインで表示されていたため、設定パネルがすぐに拡張され、インターフェースが煩雑に感じられました。

これを解決するために、新しい構造を導入しました。 ポップオーバー内のネストされた設定.

「境界線」などの設定をクリックすると、パネルの横にフローティングモーダルとして、関連するコントロールのみを表示する、すっきりとしたフォーカスされたポップオーバーが開きます。これらのポップオーバーは最大3段階の深さまで表示でき、各子グループは必要な場合にのみ開きます。

これがあなたに意味すること：

It メインの設定パネルを整理整頓するデフォルトでは最上位のオプションのみが表示されます。
It 圧倒感を軽減特に、事前にすべての高度な設定を必要としない新しいユーザーに最適です。

複雑な部分を必要になるまで隠すことで、エディターは、パワーを犠牲にすることなく、スキャンしやすくなり、ナビゲートが速くなります。

3. 設定の新しい動作

このバージョン 7 へのアップデートでは、新しいタイプの設定が導入され、既存の設定の動作が改良されたため、操作がより速く、明確になり、制御が容易になりました。

多くの設定がクリックして追加、クリックして削除というパターンになりました。空のフィールドから始めるのではなく、コントロールをクリックすると自動的にデフォルト値が挿入されます。そこからワンクリックで値を調整または削除できます。

このシンプルなインタラクションの変更により、セットアップにしばしば必要となる手作業の負担を軽減できます。推測に頼ることなく明確なスタート地点が得られるため、ゼロから構築するのではなく、調整に集中できます。

重要性

エディターはデフォルト値を自動的に適用することで不要な手順を削除し、ワークフローを継続します。
意思決定が速くなり、繰り返しの入力が減り、深いカスタマイズを必要としない設定によって速度が低下するのを回避できます。

設定パネルでは何が変わりましたか?

設定	古いデザイン	再設計
レイアウト：ネストされた設定はポップオーバー内にグループ化され、親ラベルとその現在の値のみが表示されるようになりました。
背景：更新された背景設定では、色や画像に加えてビデオを新しいオプションとして追加することで、柔軟性が向上します。
形状：境界線の設定はポップオーバー内で調整され、次の設定が含まれます。ボーダの色境界線の太さストローク
パディング：古いバージョンでは、パディングは「設定」タブまたは「詳細」タブに配置されることがあります。今回のアップデートでは、パディングは設定タブに移動されました。
アライメント：配置設定は、エディターパネルの下部、サイズと背景の下に配置されました。