Page Builder Sandwichが他と異なる点

執筆者:

カテゴリ:

How-Page-Builder-Sandwich-Is-Different-from-the-Rest世の中には数多くのページビルダーが存在しており、きっと疑問に思っていることでしょう。Page Builder Sandwichの何がそんなに特別なのか? すでに手元にページビルダーがあるなら、なぜわざわざそれを使う必要があるのか?

この記事では、コンテンツクリエイターとデザイナーの双方にとって必須のアイテムとなる、Page Builder Sandwichのユニークな主要機能をいくつか列挙してご紹介します。ページビルダーとは何か、なぜそれが必要なのかがわからない場合でもご安心ください。参考になる情報をご用意しています。

1. コンテンツの視覚的な表現を見るだけでなく、実際のコンテンツを直接見て編集できる

他のページビルダーでは、コンテンツを表現しただけの領域が表示されます。主にブロックや長方形のシェイプでコンテンツをレイアウトするため、最終的にページ上でコンテンツがどのように見えるかを示すフレームワークに近い仕上がりになります。その結果、どのように表示されるかを確認するためだけに、プレビューボタンを何度もクリックすることになります。

Page Builder Sandwichなら、すべての編集がサイトのフロントエンド上で行われ、コンテンツを直接編集できるため、真の「見たままを編集(WYSIWYG)」する体験が得られます。

2. わずらわしいポップアップダイアログなしで、素早く簡単に直接編集

ポップアップはページビルダーの定番でした。多くのビルダーでは、見出しであれ、ボタンのラベルであれ、短いキャッチコピーであれ、レイアウト内の何かを編集したいときは、まずポップアップダイアログが開くのを待ち、その中で変更を加える必要がありました。

私たちは、Page Builder Sandwich全体でポップアップの使用を最小限に抑えることを目標としました。ポップアップを排除することで、あらゆるコンテンツの編集がかつてないほど簡単かつスムーズに行えます。

編集は非常にシンプルです。テキストをクリックしてカーソルを置き、そのまま入力を始めるだけです。編集を開始するためにTinyMCEエディターを含むポップアップダイアログを待つ必要はもうありません。さらに素晴らしいことに、コンテンツをドラッグ&ドロップして自由に移動することも可能です。

ストレスフリーな編集を支援するもう1つの革新的な機能が、常に表示されているインスペクターです。インスペクターは、ツールボックス兼プロパティエディターとして機能します。テキストの色、見出し、フォントサイズの調整、マージン、パディング、枠線、引用文など、コンテンツをフォーマットするためのツールがクリック1つですぐに利用できます。

Reused functionality

3. 再利用されたWordPressの機能

他のページビルダーで気づいたもう1つの点は、車輪の再発明を頻繁に行っているということです。独自のカラーピッカー、画像アップローダー、ギャラリー作成機能、その他のさまざまなツールを独自に実装しているものもあります。これ自体が悪いわけではありませんが、WordPressはコードスニペットの宝庫なのですから、それを使わない手はありません。

WordPressは巨大で素晴らしいプラットフォームであり、数多くの優れた貢献者によって構築されたクールなツールが豊富に含まれています。Page Builder Sandwichは、可能な限りWordPressにすでに同梱されている機能を使用しています。

独自のカラーピッカーを使用する代わりにIrisカラーピッカーを使用し、独自の画像アップローダーの代わりにメディアマネージャーを使用しています。さらに、backbonejs、underscorejs、wp.hooks、wp.shortcodeなど、便利なスクリプトも多数活用しています。これらすべてを活用することで、開発が容易になっただけでなく、より安定したコードベースを実現しています。

WordPressの機能を再利用することは、素晴らしい副産物も生み出しました。例えば、画像の挿入にメディアマネージャーを使用したことで、WordPressのギャラリー、ビデオやオーディオのプレイリスト、リモートURLなどを最初からそのまま扱えるという嬉しいサプライズがありました。また、画像の編集にもメディアマネージャーをそのまま使用できるため、何時間にも及ぶ不要な開発の悩みが解消されました。

4. キーボードナビゲーションとショートカット

他のページビルダーでは、マウスが頼りです。マウスを使ってドラッグ&ドロップしたり、ダブルクリックして編集したりします。しかし、キーボードは軽視されがちです。

例えば一部のビルダーでは、ポップアップダイアログを閉じて別のダイアログをクリックして開く必要があるため、編集中の場所から1つ上にある段落やセクションのテキストを簡単に編集することができません。Page Builder Sandwichでは、キーボードでナビゲーションが可能です。矢印キーを押してコンテンツ間を移動でき、別の行や列の中に隠れているコンテンツであっても機能します。

もう1つの重要な機能は、「元に戻す(Undo)」と「やり直し(Redo)」のキーボードショートカットです。最初はたいしたことではないように思えるかもしれませんが、コンテンツを誤って違う場所にドラッグ&ドロップしてしまった場合のことを考えてみてください。一部のページビルダーでは、元の位置までドラッグして戻す必要があります。Page Builder Sandwichでは、UndoとRedoの両方が機能します。入力したテキストを書き直したい場合でも、ドラッグしたコンテンツ(または複数のドラッグしたコンテンツ)を元に戻したい場合でも、UndoまたはRedoを押すだけです。ドラッグ&ドロップしたコンテンツだけでなく、フォントサイズや行のパディングなどのプロパティの変更に対しても機能します。これにより、編集作業における強力なツールとなります。

Relaxing experience

5. 真のフロントエンドページビルダー – よりリラックスしてストレスのない編集体験

開発における私たちの理念は、フロントエンドでの編集が、バックエンドのツールを使って編集しているような感覚であってはならないということです。ビルダーが最初はバックエンド向けに作られ、後からフロントエンドに移植されたかのような印象を与えるべきではありません。

総じて、私にとってPage Builder Sandwichの最大の特徴は、「真の」フロントエンドページビルダー、つまりフロントエンド編集のあるべき姿を再考した存在を目指して構築したという点にあります。