Adobe Experience ManagerとWordPress：オーサリングエクスペリエンスの比較

公開: 2022-03-10

クイックサマリー↬ブロックベースのエディターは、コンテンツを作成および公開するユーザーのユーザーエクスペリエンスを向上させます。将来の編集者はどのように見えるでしょうか？ WordPressの新しいオーサリングエクスペリエンスとAEMのエクスペリエンスを比較してみましょう。

ブロックベースの編集をWebページのオーサリングの標準にしてくれたWordPressとGutenbergに感謝します。この記事では、WordPressの新しいオーサリングエクスペリエンスと、ブロックベースの編集も採用しているエンタープライズコンテンツ管理システムであるAdobe Experience Manager（AEM）のエクスペリエンスを比較します。私は複数の企業（InformaticaやTwitterなど）にWordPressとAEMの両方を実装しましたが、技術者以外の作成者にとっては作成経験が重要であるにもかかわらず、開発者には無視されることが多いことを認識しなければなりませんでした。

注：「オーサリングエクスペリエンス」という用語は、Webサイトでコンテンツを作成および公開することを目的とする人々のユーザーエクスペリエンスを指します。 公開されたコンテンツを消費しようとしている人々については言及していません。 これまでにオーサリングの経験について考えたことがない場合は、Smashing Book5でも取り上げられたEileenWebbによる入門書をご覧ください。

Adobe Experience Managerは、WordPressと比較して、特に開発者にとって、学習曲線が急な複雑なシステムです。同時に、AEMは、より確立されたより高価なコンテンツ管理ソリューションよりも使いやすく、無料のソリューションと非常にコストのかかるソリューションの中間に位置します。

技術的な観点から見ると、AEMは、アドビのいくつかのタッチを備えたオープンソーステクノロジーのコングロマリットであり、オープンソースソフトウェアとプロプライエタリソフトウェアの間のどこかにAEMを配置しています。システムを輝かせて使いやすくするのは、アドビのタッチです。たとえば、視覚的なドラッグアンドドロップページビルダーは、WordPress Gutenbergが誕生するずっと前から、AEMでページを作成するための標準的な方法でした。

オーサリングエクスペリエンスを平均以上に高めるいくつかの機能を見てみましょう。

ジャンプした後もっと！以下を読み続けてください↓

コンポーネント（ブロック）

Webサイトの最も重要なアイデアの1つは、コンポーネント（またはWordPress用語ではブロック）の概念です。コンポーネントは、何かのブロブではなく、特定のルールに従うコンテンツの一部を表します。たとえば、作成者がYoutubeリンクに貼り付けて、Youtube固有の設定を制御することしかできないビデオコンポーネントを作成できます。または、作成者が1つのテキストフィールドに引用を追加し、別のテキストフィールドに引用されている人の名前を追加する引用コンポーネントを作成することもできます。他のコンポーネントを含むレイアウトコンポーネントをモバイルデバイスで相互に表示することもできますが、大画面では、これらのコンポーネントは3つの列に分散されます。

編集ボタンを含むオーバーレイを備えたAEMのタイトルコンポーネント — 作成者は、ビジュアルエディターでコンポーネントを直接更新できます。選択したコンポーネントに基づいて、使用可能な編集オプションが表示されます。（画像ソース）（大きなプレビュー）

作成者は、特定のコンポーネントに何を期待するかを正確に知っており、適切なコンテンツで簡単に埋めることができます。同様に重要なのは、過去数十年にわたって普及してきた古い学校の「1つのテキストフィールドがすべてのコンテンツに適合する」アプローチでは実現できない長期的なメリットと新しい機会です。

コンポーネントで日付の入力が必要な場合、コンポーネントの作成ダイアログにプレーンテキストフィールドの代わりに日付ピッカーを表示できるため、作成者は適切な形式で日付を簡単に選択できます。
設計者が引用された人物の名前を引用の下ではなく引用の上に表示したい場合、引用と名前は別々に保存されるため、開発者はコードを簡単に再配置できます。引用と名前が昔ながらの方法で保存される場合、開発者はテキストBLOBから名前を手動で抽出し、引用の前に移動する必要があります。
見積もりを英語からドイツ語に翻訳する必要がある場合は、見積もりを翻訳サービスに送信できます。翻訳サービスが以前にこの見積もりを翻訳したことがある場合は、保存された翻訳を返すことができます。引用が独立しているのではなく、より長い段落の一部である場合、翻訳ははるかに難しく、おそらく人間の翻訳者が必要になります。
ビデオにトランスクリプトがなく、聴覚障害のあるユーザーがそれを消費できない場合は、コンポーネントを要約テキストで補完して、聴覚障害のあるユーザーがビデオにアクセスしやすくすることができます。

コンポーネントベースの編集は、すでにしばらくの間AEMのユーザーに受け入れられており、WordPress 5.0にGutenbergが登場したため、コンポーネントベースのエディターがWebページを作成するための事実上の標準になりました。

注： Leonardo Losovizは、WordPressのコンテキストでのブロックの意味を深く掘り下げます。

フラグメント

コンテンツフラグメントとエクスペリエンスフラグメントは、過去1年間AEMシーンを支配してきた新しい用語です。これらの2つの概念を単純にフラグメントとして要約します。本質的に、フラグメントを使用すると、作成者はWeb、モバイル、ソーシャルメディア、その他のチャネルで使用できるニュートラルなコンテンツを作成できます。

フラグメントはページエディタの外部で作成され、コンポーネントと比較して、データがどのように使用されるかについてはあまり意見がありません。著者が新しい見積もりで1日1回更新する、「今日の見積もり」と呼ばれるフラグメントを想像してみましょう。これで、このフラグメントの引用テキストをさまざまな場所で使用できます。

フッターウィジェットは、すべてのページの下部にその日の見積もりを表示します。作成者がフラグメントを更新するとすぐに、フッターも更新されます。フラグメントは何が表示されるかを決定しますが、フッターウィジェットは見積もりがどのように表示されるかを決定します。
見積もりコンポーネントを使用すると、作成者は過去の「今日の見積もり」から見積もりをインポートして、ブログ投稿に追加できます。
プラグインは、ホームページに「今日の見積もりを共有する」ボタンを追加します。誰かがそのボタンをクリックするたびに、プラグインはその日の見積もりを取得し、Facebook、Twitter、および電子メールを介して共有するためのベストプラクティスを満たすようにフォーマットします。

コンポーネントに空港データを入力するためのフラグメントエディタ — フラグメント用のエディターを使用すると、作成者は、Webサイトやアプリでどの程度正確に表示されるかを知らなくても、関連データに集中できます。（画像ソース）（大きなプレビュー）

WordPressでは、ウィジェットとメニューはフラグメントに似ています。作成者はニュートラルインターフェイスでメニュー項目を作成し、開発者はそれらの項目をテーマの一部としてテーマに適した方法で表示します。テーマが新しいテーマに置き換えられた場合、新しいテーマが以前のテーマと大きく異なって見える場合でも、それらのメニュー項目は存続し、新しいテーマでも表示できます。

コンセプトの名前はシステムによって異なりますが、フラグメントがより広く使用されるようになることを期待しています。実際、Matt Mullenwegは、彼のチームが現在、「ブロックインターフェイスをコンテンツ管理の他の側面への拡張[ナビゲーションメニューブロックの作成を含む]およびすべてのウィジェットのブロックへの移植」に焦点を合わせていることをすでに発表しました。

ページテンプレート

ページテンプレートには他のいくつかのコンポーネントが含まれているため、上位レベルのコンポーネントとして説明できます。 AEMでは、作成者は、ヘッダーコンポーネントなどのコンポーネントを固定位置にロックすると同時に、ページごとにコンポーネントを追加できる柔軟な領域を定義するテンプレートを作成できます。

これの重要な側面の1つは、このような柔軟な領域によって、どのコンポーネントがその領域に入ることができるかが制限される可能性があることです。このようにして、さまざまな目的のページテンプレートを作成できます。

テンプレート＃1：記事ページのテンプレート
ヘッダー、タイトル、コンテンツ領域、フッターが修正されました。作成者はタイトルコンポーネントを更新できますが、削除することはできません。作成者は、テキスト、画像、およびビデオのコンポーネントをコンテンツ領域にドロップできます。
テンプレート＃2：ランディングページテンプレート
ページ上部のロゴとタイトルコンポーネントのみが修正されます。作成者は、訪問者を顧客に変換するために最適化された一連のランディングページ固有のコンポーネントから選択できます。

権限とワークフロー

大規模なチームのすべての作成者が、記事ページテンプレートなどの重要なテンプレートを変更できる可能性はほとんどありません。人々が誤って取り返しのつかない形でサイトを破壊することを防ぐために、サイトのどの部分を誰が変更できるかを定義することが重要です。権限とワークフローの概念へようこそ。この概念は新しいものでも特別なものでもありませんが、大規模なチームにとっては重要です。

管理者が詳細な権限を処理する画面。 — はい、許可を処理するためのAEMのインターフェースは改良が必要になる可能性があります。とにかく、それは動作します。（画像ソース）（大きなプレビュー）

一般的なAEMサイトには、実際の本番Webサイトと、少なくとも1つの本番のようなサイト（別名ステージング）が含まれます。作成者は、コンテンツを公開プロダクションサイトに公開する前に、プライベートステージングサイトにコンテンツを公開できます。コンテンツをステージングに公開した後、コンテンツを本番環境に公開するプロセスは、ワークフローと呼ばれます。もう1つの一般的なタイプのワークフローは、コンテンツを本番サイトに公開する前に承認プロセスを経る必要があり、特定の人だけが[本番に公開]ボタンを押すことができるというものです。

ワークフローメッセージ付きのページエディタ — このページは、ワークフローが開始され、作成者が「アクティベーションのリクエスト」を完了するか委任できることを示しています。（画像ソース）（大きなプレビュー）

権限とワークフローは、小規模なチームでは無視できる機能です。ただし、チームが成長するにつれて、これらの機能はチームの生産性と成功にとって重要になります。 AEMにはワークフローを作成するための基本機能が付属しており、開発者は特定のニーズに合わせてAEMを機能させることができますが、コードをかなり変更する必要があり、指一本で実装することはできません。これはWordPressにも当てはまります。カスタムワークフローを作成するためのオーサリングに適したツールがあると便利です。

Gitのビジュアルワークフローエディター — ユーザーフレンドリーなツールがワークフローの作成をどのように簡素化できるか想像してみてください。 Github Actionsのベータ版が終了すると、Githubでのワークフローの作成は次のようになります。（大プレビュー）

編集モード

AEMでは、作成者は各ページをさまざまなモードですばやく編集および表示できます。作成者は、実行する必要のあるジョブに基づいてモードを切り替えます。

コンポーネントを配置してコンテンツを編集するには、編集モードを選択します。
iPadでのコンポーネントの配置方法を変更するには、レイアウトモードを選択します。
訪問者であるかのようにコンテンツを表示するには、プレビューモードを選択します。

iPadサイズの画面をエミュレートするページエディタ — このページでは、レスポンシブレイアウトモードがアクティブになっています。作成者は、さまざまなデバイスサイズをエミュレートし、レスポンシブグリッド内のコンポーネントの位置を調整できます。（画像ソース）（大きなプレビュー）

サイトの設定方法に基づいて表示されるモードは他にもいくつかあります。理想的なシナリオの1つは、AEMをAdobeTargetと統合することによってA / Bテストとパーソナライズを設定することです。 ターゲティングモードを使用すると、作成者は、訪問者の場所、年齢、紹介ページ、時刻などに基づいて、特定のコンポーネントをいつ表示するかを定義できます。

AEMの統合は、WordPressのプラグインに匹敵しますが、AEM統合はより複雑で、通常はカスタムメイドであるという違いがあります。特に、AEM Targetを統合することは、営業担当者がそれを健全にするよりも苦痛になる可能性があります。

レイアウトモードのドロップダウン — ドロップダウンからモードを切り替えます。（画像ソース）（大きなプレビュー）

著者がターゲットオーディエンスを定義するエディター — ターゲティングモードでは、コンテンツをパーソナライズして、ページエディタから直接テストできます。（画像ソース）（大きなプレビュー）

開発の複雑さとお金はさておき、そのような努力の結果は素晴らしいオーサリング体験をもたらす可能性があります。編集モードの概念は、単純なドロップダウンによって、作成者が1つのページにとどまりながらさまざまな作業を実行する機会をどのように作成するかを示しています。

ビジュアルシングルページエディタ

この記事のスクリーンショットを見ると、AEMのページエディタはコンポーネントベースであるだけでなく、視覚的でもあることに気付いたはずです。コンポーネントが更新されると、変更がすぐに表示され、作成者はプレビューを開く必要がありません。新しい窓。かなりの機能。ページビルダーはWordPressエコシステムに遍在していますが、WordPressの背後にあるチームは、ビジュアル編集のベストプラクティスをまだ定義していません。これをさらに一歩進めて、次のように質問します。ビジュアルエディターとシングルページアプリケーション（SPA）を組み合わせるとどうなりますか？

SPAは、ブラウザがページ全体をリロードする必要がないため、あるページから別のページへの移動がシームレスに感じられるWebサイトです。 GmailやFacebookなどの人気のあるWebサイトの一部はSPAですが、インターネット上のほとんどのサイトはそうではありません。採用率がかなり低い理由の1つは、SPAの作成が難しく、数千ページのSPAを維持することがさらに難しいことです。現在、SPAのコンテンツを管理する主な方法は2つあります。

サイトのコンテンツは、コードを更新することで更新されます。それは明らかにオーサリングに適していません。
コンテンツは、Webサイトの訪問者向けの部分から切り離されたCMSで管理されます。 CMSのコンテンツは、APIを介して、たとえばReactアプリによって消費されます。オーサリングインターフェイスは、訪問者に表示されるアセンブルされたサイトとは異なって見えます。

ビジュアルエディタとSPAをそれぞれ単独で実装することは、すでに難しい技術的課題です。 SPAで動作するビジュアルエディタを持つことはほとんど前例のないことです。アドビのチームは、既存のシステムの利点を妥協しないように努めながら、AEMでのSPAのサポートに取り組んでいます。有望な最初のバージョンが2018年にAEMコミュニティにリリースされましたが、まだやるべきことがたくさんあります。

オーバーレイ付きの天気コンポーネント — このページにはReactアプリが表示されます。 AEMが天気コンポーネントの上にレイヤーを追加して、作成者がそのプロパティを編集できるようになっていることに注意してください。（画像ソース）（大きなプレビュー）

概要

Adobe Experience Managerには、人気のあるオープンソースプロジェクトですでに使用されている、または使用される予定のいくつかの便利な機能が付属しています。 AEMは、この記事で強調されている概念を必ずしも発明したわけではありませんが、市場で最もオーサリングに適したシステムの1つとして確実に商品化されています。

コンポーネントの概念は、WordPressにブロックが導入されたことで主流になりました。フラグメント、ページテンプレート、権限、ワークフローの概念は、少なくとも部分的にWordPressに実装されており、複数のチャネルにコンテンツを提供する多くの作成者がいるチームにとって重要です。

編集モードとシングルページアプリケーションのサポートを備えたビジュアルエディターを使用すると、オーサリングエクスペリエンスをさらに向上させることができます。このようなエディターは実装が困難ですが、Adobeの努力が示すように、改善されたエクスペリエンスは努力する価値があり、最終的にはWordPressにも組み込まれる可能性があります。

参考文献

「より優れたオーサリングエクスペリエンスの構築」、Eileen Webb
「オーサリング：環境とツール」、アドビヘルプセンター
「ユーザーフレンドリーなWebコンテンツ管理システムの設計」、クリストファー・ハラハン
「オーサリングの経験」、リック・ヤゴディッチ