Adobe Experience Managerを使ってカルーセルを簡単に導入

そもそもカルーセルってなに？

Adobe Experience Manager

Adobe Experience Managerを使ってWebコンテンツ管理を構築している案件の中で顧客と会話をしていると、必ず「カルーセル」という言葉がでてきます。そもそもカルーセルってどんなものでしょう？英語で書くとCarousel。直訳すると遊園地の回転木馬という意味を示していたり、検索するとトップにでてくるのは某芸能人の名前だったりするかもしれません。

実はみなさんがWebサイトをいくつか訪問すると、必ずカルーセルを使ったWebサイトをその中で見ているというほど、昨今のWebサイトではよくある一般的なものになってます。

例えば、オンラインショップのようなECサイトなどのトップページで「今のお勧め商品」がスライドしていくごとに切替わっていったり、自動車や家電メーカーのサイトで発売している複数の新製品がスライドさせることにより閲覧できたりします。そういったWebサイトで、商品などをスライドしてくと一周して元のスライドに戻るUIをカルーセルと呼びます。
そんな、Webサイトで今よく使われているカルーセルを、Adobe Experience Managerを利用して作成するといかに簡単に導入できるかを今回はご紹介したいと思います。

自社のWEBサイトにカルーセルを導入するには？

通常なら、カルーセルをWebサイトに導入するには、HTMLの編集が必要です。
導入したいページのHTMLファイルにカルーセル全体を囲むdiv要素を配置し、そのdiv要素内にはパネルを左右にスライドさせるためのボタン用のp要素を配置。さらに…と必要な要素をHTMLファイルに書いていく必要があります。

さらにCSSでカルーセルのスタイルを定義し、jQueryなどを用いてパネルが意図した通りにスライドするようなJavaScriptの追加が必要です。つまり、非常に技術的要素が強くなります。

マーケターが自社のWebサイトにおいて、カルーセルを用いて新製品の紹介をしたいと思っても、このような作業を実施しなければならず、これは非常にハードルが高いと言えます。恐らく通常はWeb製作会社に依頼してHTMLファイルなどの編集をしてもらい、それをIT部門にWebサーバーへとアップしてもらう作業をすることになるでしょう。

このようなフローを毎度実施していては、せっかくのマーケティング機会も、HTMLができ上がったころには既に過ぎ去ったものになってしまうかもしれません。

Adobe Experience Managerを使うとカルーセルも簡単に

Adobe Experience Managerを利用した場合、上記のような作業を実施しなくても、マーケター自身で非常に簡単にカルーセルの導入を行うことができます。

作業は２つのステップで完了します。簡単にその作業をご紹介します。

• ドロップダウンでカルーセルコンポーネントを配置

Adobe Experience ManagerのAuthor編集ページ上で、事前に定義されたカルーセルコンポーネントを置きたい場所にドラッグ・アンド・ドロップをします。基本はこれだけです。あとは＜どのように動作させたいか＞といった部分に関わる設定をするだけでカルーセルを実現することができます。

• カルーセルコンポーネントで表示させたいパネルを編集

先ほどのステップでカルーセルコンポーネントを設置したのち、実際にカルーセルに表示したいパネルを設定します。

上の図のようにスタイル設定では、カルーセルのスライドさせる再生速度やスイッチボタンのスタイルを選択します。

また、もう１つのタブ設定にて実際にカルーセルで表示するパネル（画像）を設定します。例えば商品ページのリンクをリストに保存するだけで、そのページに関連した画像をパネルに表示し、リンク先として商品ページが登録されます。

カルーセルコンポーネントで簡単に新商品を変更

冒頭でも触れたように、カルーセルはWebサイトの顔として利用されることが多くなりました。それだけにマーケターは新商品が発売されたなどで、一度設定したカルーセルに表示されるパネルを定期的に変更する必要があります。
しかし、そのようなパネルの編集も、いくつかの設定をブラウザ上で編集するだけで簡単に更新することができるようになります。

Web製作会社に依頼してHTMLファイルをわざわざ作成しなくても、マーケターが直接、しかも新製品などの情報を素早くサイトに更新できることがわかって頂けたと思います。

このようにAdobe Experience Managerを用いれば簡単に、早く、コストもかからずWebサイトのページを作成・更新することができます。他にもWebコンテンツ管理のための様々なツールが用意されていますので、またご紹介していきたいと思います。

**筆者：松原 祐規 **アドビ システムズ株式会社 コンサルティング部コンサルタント

外資系携帯インフラ会社、ソフトウェアベンダー会社を経て 2013年より現職。事業会社にてweb開発をした経験をもとにコンサルタントとして、Adobe Experience Managerの対象となるウェブサイトの導入の支援を提供している。