AEM（Adobe Experience Manager）は、企業向けの高機能なCMS（コンテンツ管理システム）です。単なるCMSにとどまらず、Webサイト・モバイルアプリ・フォーム・デジタルアセットなど、さまざまなチャネルのデジタルコンテンツを一元的に管理・配信できる「デジタルエクスペリエンスプラットフォーム（DXP）」として、多くの大企業やグローバルブランドに採用されています。

このような高度な機能を備えたAEMでは、フロントエンド開発にも独自の特徴があります。例えば、AEMが提供する「コアコンポーネント」の活用や、バックエンドと分離されたモジュール構成、パイプラインによるデプロイなど、他のCMSとは異なる設計思想に対応する必要があります。

本記事では、AEMのフロントエンド開発に初めて携わる方や、AEM導入を検討しているWeb担当者・エンジニア向けに、基本の考え方や開発の進め方をわかりやすく解説します。

AEMのコアコンポーネントを理解することでつながる品質の向上

AEMコアコンポーネントは、すでに用意されているHTMLマークアップを持っています。このマークアップにCSSやJavaScriptを当てて、デザインに合わせてカスタマイズしていくのが基本です。マークアップ自体を変更することはあまりありません。

AEMコアコンポーネントの種類を知る

AEMには、よく使われる基本的なコンポーネントがすでにあります。これを「コアコンポーネント」といいます。ゼロから作るのではなく、このコアコンポーネントをうまく使うと、開発がもっと速くなります。
例えば、以下のようなコアコンポーネントがあります。

• Text
• Title
• Image
• Button
• Carousel
• Tabs

上記のようなコンポーネント群をしっかり把握しておくことで、不要なカスタム開発を減らすことができます。必要に応じてコンポーネントのスタイルポリシーを使用してバリエーションを増やすことも可能です。新しいコンポーネントを作る前に、「既存のものを使えないか？」を考えることが重要です。

AEMコアコンポーネントの動作や見た目をブラウザ上で確認できる公式のComponent Libraryです。各コンポーネントの振る舞いや設定例を確認することができます。

さらに詳しくAEMコアコンポーネントについて知りたい方は、BAsixsのこちらの記事もおすすめです。実際にどのような場面で使われるのか、基本から応用までを具体的に解説しています。活用方法に迷った時の参考に、ぜひご覧ください。

コアコンポーネントを持つCMS、AEMのメリット | BAsixs（ベーシックス）

AEMフロントエンド開発の基本

AEMのフロントエンド開発は、コンポーネントベースのアーキテクチャが中心です。一つひとつの機能（例：画像、見出し、テキスト）は、コンポーネントという単位で管理されます。
AEMの基本的な技術スタックは以下の通りです。

• HTML/CSS（SCSS）：見た目を作る
• JavaScript（ES6）：インタラクションやアニメーションを追加
• AEM Core Components：AEMが標準で提供するUIパーツ

AEM開発では、フロントエンドとバックエンドの役割がはっきりしています。私たちフロントエンド側では、ui.frontendモジュールで主に作業します。ui.frontendモジュールは、AEMプロジェクトでフロントエンドのスタイルやJavaScriptを管理するための専用モジュールです。ここでCSSやJavaScriptを管理し、ビルドやデプロイを行います。

※ReactやAngularなどのJavaScriptライブラリを使用して、シングルページ アプリケーション（SPA）を開発することは可能ですが、この記事ではそれについては詳しく説明しません。

AEM プロジェクトアーキタイプのui.frontendで始める開発
AEMにはプロジェクトの「テンプレート」としてAEM プロジェクトアーキタイプがあります。これを使うと、ui.frontendフォルダが入った、新しいプロジェクトをすぐに始められます。

必要に応じて、AEMフロントエンド開発者は、新しいデザインに沿って、AEMコアコンポーネントのマークアップを元に、以下の作業を行います。

• SCSSでスタイリング（例：BEM記法を使って再利用しやすく）
• JavaScriptでインタラクションを追加（例：モーダル、タブ切り替えなど）

また、フロントエンドの品質を保ち、チームでの開発を円滑にするために、以下のツールを使うと便利です。

• ESLint：JavaScriptのコードチェック
• Stylelint：SCSSのスタイルチェック
• Prettier：コード整形
• Git Hooks：コミット前の自動チェック

こうしたツールをフロントエンド環境に組み込んでおくことで、業務のミスを防げるだけでなく、コードの品質を継続的に保ちやすくなり、長期的なプロジェクト運用やチーム開発の効率化にもつながります。

多言語対応におけるスタイルの工夫とアクセシビリティ配慮

多言語実装における注意点
AEMでは、多言語対応がとても簡単にできます。しかし、日本語・英語・中国語などを同じデザインで表示すると、文の長さや高さが変わることがあります。

例えば、漢字・カナ・英単語の幅の違いなど、言語ごとの特性を考慮し、テキストの長さに応じた余白設計が必要です。
実装時はデザインが崩れないように、各言語での表示を確認しながら調整していきます。

AEMでWebサイトを多言語対応する方法 | BAsixs（ベーシックス）

アクセシビリティを意識する
AEMには、アクセシビリティを高めるために、以下の機能などが用意されています。

• ARIA属性の追加
• キーボード操作でWebサイトをアクセスできるようにする

また、可能であればアクセシビリティの専門家によるレビューを受けると安心です。

AEMのパイプラインを利用し開発を効率化

フロントエンドパイプラインについて

AEMには、CI/CDの機能としてフロントエンド専用のパイプラインが用意されています。これにより、フロントエンドのコードだけを個別にデプロイ（反映）することが可能になりました。

この仕組みを活用することで、環境の反映時間が短縮され、開発効率が大きく向上しました。また、バックエンドに影響を与えずにフロントエンドだけ更新できるため、作業の切り分けもしやすくなります。

CI/CD パイプラインの詳細については、Adobe社の公式サイトをご覧ください。

• CI/CD パイプラインの概要 | Adobe Experience Manager

開発効率化

フロントエンドエンジニア自身が、作成した内容を即座に環境へデプロイし、確認可能になりました。修正してすぐに確認し、さらに関係者（デザイナーやディレクター）もすぐにチェックできるため、やりとりのスピードがアップし、プロジェクトの進行もスムーズです。

パイプラインを利用した導入例の紹介

当社ではソースコード管理は、主にGitを利用しています。
過去の事例の場合、元々ソースコードがGitで管理されていたため、比較的導入や移行の手間は低かったと感じています。
Gitで作業する準備がととのったら、次は、環境ごとにGitのどのブランチをどの環境にデプロイするかのルールを決め、作業を進めます。

AEM フロントエンド パイプラインフロー例 AEMのDEV環境の場合、gitの「develop」ブランチをデプロイするためのパイプラインを設定します。同じくStage環境やProd環境ごとに設定します。Stage環境はほぼProd環境と同じなので、同じパイプラインでも管理できます。その時、StageまでデプロイしてProd環境まで行く前に承認が必要になるように設定することも可能です。

まとめ：大規模開発に強いAEM、その可能性を活かすには

本記事では、AEMのフロントエンド開発における基本的な考え方や、実装の流れ、活用すべきツール・機能について紹介しました。特に、AEM特有の開発環境に初めて触れる方に向けて、実務に活かせる視点を整理しています。

AEMは、コンポーネント設計・多言語対応・アクセシビリティ・パイプライン運用といった多様な要件を包括的に支える、エンタープライズ向けの強力なCMSです。マーケティングとエンジニアリングが連携し、ユーザー体験と運用効率を両立させる場面で特に力を発揮します。長期的な視点で開発体制を整えたい企業にとって、中核となる選択肢の一つといえるでしょう。

ビジネス・アーキテクツでは、AEMを活用したグローバルサイトの構築や運用改善に多数の実績があり、導入フェーズから運用設計・開発まで一貫してサポート可能です。

AEM導入をご検討中の方は、ぜひ他の記事もご覧いただき、お気軽にご相談ください。AEM案件に関わってみたいエンジニアの方のご応募もお待ちしています。

グローバルサイトリニューアル｜Adobe Experience Manager sites（AEM）構築事例 ヤマザキマザック株式会社様 | BAsixs（ベーシックス）