Page Builder Sandwichを一般公開してから10ヶ月が経ちました。現在、有効インストール数は約6,000件に達しており、私たちにとって大きな成果となっています。その過程で、良い意見も悪い意見も含め、非常に多くのフィードバックをいただきました。しかし共通しているのは、他のページビルダーと比較して、レイアウトの構築やコンテンツの作成がいかに簡単であるかを皆さんが気に入ってくださっている点です。
いただいたフィードバックの多くは機能のリクエストであり、ここ数ヶ月でそれらの機能の多くを追加してきました。しかし、それを進めるにつれて、その過程で徐々にユーザーインターフェースも変更し始めていました。そしてその結果、ユーザーエクスペリエンスも…悪い方向へと変えてしまっていたのです。インターフェースがもはやスムーズに動作せず、さまざまな機能も噛み合わなくなってきたため、インターフェースを根本から見直す必要のある段階に達していました。
廃止されたインターフェース
PBSの以前のバージョンでは、すべてをボタンの形式にしたいと考えていました。なぜなら、ボタンは使いやすいからです。ただ…クリックするだけです。インスペクター（上の画像にあるサイドバー）の古いバージョンでは、ボタンをクリックすると値が増加し、Shiftキーを押しながらクリックすると減少するようになっていました。これ自体は十分シンプルに思えます。しかし、カルーセル、タブ、地図などの新しい要素や機能が追加されるにつれ、それらすべてのボタンが異なるデザインのアイコンのごちゃ混ぜになり、洗練されたインターフェースというよりはヒエログリフ（象形文字）のように見え始めてしまいました。ベテランユーザーにとっては問題ありませんでしたが、PBSを初めて使う人にとっては、見るだけで圧倒されてしまうようなものでした。
次に、インスペクターにいくつかの問題が発生し始めました。当初のアイデアは、すべてをシンプルにし、インスペクターの内部で利用できるようにすることでした。そして「すべて」とは、テキストを見出しに変えることから、背景色やフォントカラーの変更に至るまで、文字通りあらゆるものを意味していました。しかし、その現在の状態において、インスペクターにはマウスホイールで絶えず上下にスクロールしなければならないほどの大量のオプションが含まれるようになってしまいました。かつてユーザーのために作りたいと願っていたインスペクターとは、まったく異なるものになっていたのです。
最後に、私たちは最近、お気に入りのプラグインのためのショートコードマッピング.この機能では、ショートコードの編集体験をより快適にするために、テキストフィールド、数値スライダー、チェックボックス、さらに新しいオプションタイプを作成する必要がありました。当初は素晴らしいアイデアであり、実際にショートコードの操作を容易にしました。しかしこれもまた、私たちの「ボタンのみ」のインターフェースから逸脱するものでした。振り返ってみると、ショートコードの属性を変更するためにボタンだけを使用することは、そもそも不可能だったのです。現在、最新バージョンでは結果として2種類のコントロールが存在することになりました： ボタンとショートコードフィールドです。
インターフェースがもはや効果的ではない（または私たちのニーズに合っていない）と判断する理由は他にもいくつかありましたが、上記の点が主な理由です。ただし、1つだけ常に確かなことがありました： インターフェースを刷新しなければならないということです。
ページビルダーの理想的な動作を定義する
すぐに飛びついて変更を加えるのではなく、私たちは100歩下がって、ページビルダーの体験全体を見つめ直しました。インターフェースに新たな命を吹き込みたいと考えたのです。正直なところ、毎年毎年作り直しを続けたくはありませんでした。それは疲弊しますし、WordPressコミュニティにとっても決して大きな助けにはなりません。今回は、ゆっくりと慎重に進めることにしました。Page Builder Sandwichの隅々まで、そして何が優れたページビルダーたらしめるのかを研究し、最終的に編集体験全体をいくつかのコアコンセプトに具体化しました。
基本コンセプト1：コンテンツ内に直接入力して編集する
ページビルダーをインストールする主な理由の1つは、WordPressのバックエンドテキストエディタの制約から抜け出すことです。バックエンドエディタが良くないというわけではありませんが、Webページを作成する際、サイト訪問者にどのように見えるかがすぐにはわかりませんし、1カラムのレイアウト以外でコンテンツを配置することもできません。そこではテキストと一部の画像しか見えず、より複雑なもの（お問い合わせフォームなど）は表示されません。ショートコードを追加することはできますが、レンダリングされた状態では表示されません*。
* これを解決するためにShortcake UIなど他者によって作られているプラグインもありますが、それはここでの本質ではありません。
そこでフロントエンドページビルダーの出番となります。編集体験をバックエンドからフロントエンドへと移し、訪問者が実際に見るのと同じ見た目でサイトを編集できるようにします. ピピンの言葉を借りれば、「見たままが得られる（WYSIWYG）」です。
フロントエンドエディタであることのもう1つの利点は、テキストを直接編集できることです。見出しや段落を入力する感覚は、通常のワープロソフトを使う手軽さをWebサイト構築にもたらします。ボタンやタブのラベルも、クリックして文字を入力するだけで変更できるべきです。
ここは、他のほとんどのページビルダーがあまりうまく対応できていない領域です。その大半は、すべてを編集するためにテキストフィールド内への入力を強制します。繰り返しますが、真のフロントエンドページビルダーではそうあるべきではありません。テキストを直接入力・編集できることはバージョン2以降のPage Builder Sandwichの強みであり、バージョン3でも確実に維持されるようにしました。
基本コンセプト2：マウスを活用した素早い調整
マウスは強力なツールですが、ページビルダーでは軽視されがちです。多くの場合、ページビルダーでのマウスの役割は、要素をドラッグ＆ドロップして別の場所に移動したり、ボタンや入力フィールドをクリックしたりする程度にとどまっています。それも悪くはありませんが、ページ構築においてマウスでできることはもっとたくさんあります。
1つとして、特にマージン、パディング、サイズなどの視覚的プロパティを調整する際、編集ツールとしてマウスを使用すると素晴らしい視覚的フィードバックが得られます。これにより、要素の微調整が自然な体験になります。
PBSバージョン3では、マウスを使ってさまざまな調整ができるようになります。個々の要素間のマージン／スペーシング、カラム内のパディング、さらには画像、アイコン、地図のサイズを調整できます。また、数値を変更するボタンはスライダーに置き換えました。
基本コンセプト3：テキストのスタイル設定が簡単であること
モニターから一歩離れて見てみると、Webページに追加しているもののほとんどがテキストコンテンツであることに気づくでしょう。確かに、それらに添える画像やアイコンもありますし、最近はサイトに大きな画像を追加する傾向もあります。しかし、重要なコンテンツの大半はすべてテキストです：見出し、箇条書きリスト、段落、引用などです。そしてそれと並行して、デザインに合わせてテキストをどのようにスタイリングするかが重要になります。サイズや色を変更したり、太字や斜体にしたりします。これは、それぞれの読者にとってコンテンツをより読みやすく、適切で、魅力的なものにするためのものです。
テキストのスタイリングは頻繁に行うため、スタイルを変更できるボタンは非常にアクセスしやすい場所にあるべきです。最初に開く必要があるポップアップボックスの中に押し込められていてはなりません。ほとんどのページビルダーがこの病に侵されています。ユーザーインターフェースを「すっきりしている」と見せるために、最もよく使われるオプションさえも視界から隠してしまうのです。
これを解決するために、私たちは最もよく使われているワープロソフトに目を向けました。それらには通常、テキストをフォーマットするための多数のボタンが画面上部付近に並んでいることに気づき、バージョン3でも同じレイアウトを採用しました。現在では、すべてのテキストスタイル設定ボタンが画面の上部に常に並んで表示されるようになっています。これにより、スタイリングが非常に素早く行え、まるで身体に染み付いた習慣のように直感的にテキストを編集できます。
基本コンセプト4：高度なスタイリングオプションは柔軟でありながら理解しやすいこと
ページビルダーの肝心な点は、誰もが素晴らしいデザインを簡単に作成できるようにすることです。つまり、難しい学習曲線を強いることなく、多種多様な設定やオプションを提供する必要があります。マージンやパディングの調整、テキストのスタイリングができるのは素晴らしいことですが、それだけでは限界があります。背景画像、パターン、ボーダー、固定背景など、仕事をやり遂げるにはもっと精緻なオプションが必要です。そういった多様な設定をすべて積み重ねると少し手に負えなくなる可能性があるため、バージョン3ではその一部を簡素化し、カテゴリー別に整理してより親しみやすくしました。
基本コンセプト5：ショートコードのサポート
最後に、私たちのページビルダーがWordPressの上に成り立っていることを忘れてはなりません。私たちはこのプラットフォームとその機能を受け入れるべきであり、それらを制限したり逸脱したりするべきではありません。WordPressが提供する大きな機能の1つがショートコードです。これはコンテンツ全体をショートコードで構成すべきという意味ではありません（それでは煩雑になってしまいます）。そうではなく、それらと互換性を持つべきだということです。多くのプラグインやテーマがショートコードを使用しており、それらをすべて無視してしまうのは大きな損失です。実際、ショートコードはページを作成する際にユーザーに最大限の柔軟性をもたらします。
数週間前にショートコードマッピングシステムを導入したことで、何百ものプラグインから何百ものショートコードをマッピングしました。WordPressプラグインディレクトリにある最も人気のあるプラグインを優先しているため、ご自身のサイトでも目にする機会があるはずです。これはバージョン3でさらに強化されており、今後も改善を続けていきます。
まとめ
私たちは上記の重要な特性をすべて取り入れ、Page Builder Sandwichバージョン3に組み込みました。これは、私たちがこれまでWordPress向けに構築した中で最高のページビルダーです。より直感的で自然に使えるようになり、パフォーマンスも向上し、これまで以上に使いやすく親しみやすくなっています。
ページビルダーに不可欠な機能についてご意見がございましたら、ぜひ下のコメント欄でお知らせください。