世界のブランドは現在どのようにアトミックデザインを取り入れ、弊社はいかにこのデザイン理念に基づいてCMSシステムを設計したのか。

ザ・プラントでは、国際的なブランドと緊密に連携して、最新技術を強みに複雑なビジネスの問題を解決しています。

大規模な事業においてよくある課題として、新製品発売、キャンペーン、イベント、プロモーションなどを目的にいかに大量のコンテンツを制作し、それをいかに多言語対応させ、それの管理と公開をいかに簡単に行い、いかに一貫性がある形でスピード感を持って世界の市場に届けるか、という問題が挙げられます。

ザ・プラントでは、この問題を解決するために、エンタープライズレベルのソリューションを作成しました。

弊社は、ビジネスパートナーと緊密に連携することで、最新のプログラミング技術とデザイン理論を組み合わせたコンテンツ管理システムを開発しました。その目的とは、クライアントが必要とするコンテンツを、確実に可能な限り効率的に作成できるようサポートすることです。

本記事では、開発の道のりを辿り、弊社のCMSが現在の形に至るまでの過程をご紹介します。

アトミックデザインと、ザ・プラントが行った変更

アトミックデザインとは、コンポーネントベースのデザインアプローチで、Brad Frost氏がその普及の立役者です。標準的な手順に沿ったアプローチでデザインを行えることが、大きなメリットです。この方法論は、弊社によるサイトのデザインやそれをもって実現したい事柄の範囲に、まさにぴったりの考え方です。ゼネラル・エレクトリック様の手法を参考に、ザ・プラントではこのアプローチに変更を加えて、弊社のニーズにより適合したアプローチを確立しました。

アトムとモレキュール

エンタープライズのクライアントは、しばしばスタイル/ブランドに関して、視覚的要素のガイドラインを定めています。こうしたガイドラインは、アトムとモレキュールの構造に驚くほどぴったり対応するものです。この対応のおかげで、その他関連する全てのシステム、既存のページ、他のプラットフォームを通して提供されているコンテンツ、ソーシャルメディアキャンペーンなどに、弊社が構築したコンポーネントが適合するかどうかの確認作業を迅速に進められます。

さらに、このプロセスによって、古いページやその他のシステムにある問題を引き継ぐことなく、新たなページを作成できるようになります。これは、クライアントにとっても、それぞれのパターンライブラリーを見直すきっかけになります。

クライアントに対しては、どうすればユーザーインターフェースとユーザー体験を優先課題に据えられるか、そして全体の体験を損なうことがない方法でそれぞれのブランディングを統合するにはどうするのがベストなのかについて、お話することがあります。その際にも、アトムとモレキュールを区別することで、柔軟にお話しさせていただくことができます。例えば、アトムは一般的に個別の事情で変更することは困難です。フォントやカラーなどは、大規模なブランドのアイデンティティーにとって極めて重要であり、変えられないからです。しかし、アトムが集まったモレキュール、例えばボタンなどを調整する際には、パディングを増やしたりフォントサイズを大きくしたりなど、使い勝手やアクセシビリティーの向上のために変更する余地は常にあります。

コンテナ

こうしたコンポーネント（弊社のアトムやモレキュール）が固まれば、コンポーネントを使ってコンテナを作るという、最も大変な作業が始まります。コンテナは、iAが『ガーディアン』紙様向けに行われたサービスから言葉を借りた概念であり、その定義は以下の通りです。

コンテナとは、横幅いっぱいに広がる水平方向の要素で、その中には複数のコンテンツが表示されます。

コンテナは、他とは仕切られた独立要素であり、そのため様々な組み合わせで複数の場所に簡単に配置できます。

画面サイズが小さくなったり大きくなったりすると、コンテナの中のコンテンツは画面の横幅に合わせて表示が変わります。

コンテナは、ウェブサイト全体を構築するためのブロックとして使われます。ザ・プラントのコンテンツ管理システムでは、大きく分けて2種類のコンテナに対応しています。

編集可能なコンテナ。コンテンツはエンドユーザーの方々が挿入でき、ページビルダーを使えるあらゆる方々が編集できます。
ビジネスコンセプト（商品、ブログ記事など）に紐づけられたコンテナ。コンテンツの生成はシステムが行います。

本記事では、ユーザーが編集できるコンテナに焦点を当てますが、どちらの種類を使う場合でも、ウェブサイトをコンテナを用いて作成することのあらゆるメリットを引き出せます。

再利用可能なコンテナを使ってウェブサイトの計画と構築を行うと、多くの重要な利点があります。開発者にも、デザイナーにも、そしてクライアント全体にも嬉しい利点を、以下でご紹介します。

最適化のメリット

新しいコンテナを設計するのは、既存のコンテナでは対応できない明確なニーズまたは要件がある時だけです。コンテナは、数が少ない方がいいのです。

弊社の経験では、弊社が手がけたウェブサイトの中で複雑な部類に入るものでも、それを構成するコンテナの数は高々20前後であり、それぞれをサイトの様々な場所で数十回使っています。そのため、それぞれのコンテナの使いやすさを向上したり、デザインや機能を新調することで、それが数十ヶ所に反映され、少ない作業で大きな結果につなげられます。このように、徐々にコンテナを改良していくことで、ウェブサイト全体がよりよくなっていくのです。最近、大手ブランドの間で、「エバーグリーン」なコンテンツによって構成されるサイトを増やそうという動きがあります。この動向に鑑みても、コンテナのこのメリットは特に重要なものです。

モバイルファースト

日本を含む多くの市場で、消費者がウェブサイトにアクセスする際に最も使われるのは、スマートフォンとなっています。そのため弊社では、あらゆる局面でモバイルファーストのアプローチを採用しています。コンテナは、レスポンシブな環境においてどのように動作すべきかのルールを事前に設定してあるので、モバイルファーストという文脈でも有利です。機能をコンテナにまとめて、その機能の仕組みをクライアント様にお伝えすることで、モバイル向けのデザインや規模拡大がぐっと簡単になるのです。

グローバルコンテナ

オプションとして、グローバルに、つまりサイトのどの場所からでも、同じコンテンツにアクセスできるコンテナを用意して、1ヶ所で管理することもできます。つまり、コンテナのデザインを再利用するだけではなく、その中のコンテンツまでサイト全体で同一にしなければならないような場合（例えば問い合わせフォーム）でも、弊社のクライアント様はたった1回の設定のみで設定でき、追加のセットアップ作業は一切不要です。また、グローバルコンテナを用いることで、今後変更を行う際にも、管理画面でコンテナを1回更新するだけで、サイト全体でその内容を一括更新できます。この機能が最も多く利用されているのは、サイトのヘッダーおよびフッターです。

簡単なメンテナンスで一貫性を維持

一般的に、エンタープライズ規模の事業においては、次々と変更が必要になります。例えば、リブランディング、企業の方針変更、そして新たな事業イニシアチブの立ち上げなど、様々な要因によって、一部または全てのコンテンツのフォーカスを変更しなければならないことがあります。このような場合でも、変更が必要な範囲がいくつかのコンテナに限られていれば、サイトの各ページが個別に作成されていた場合と比べて、サイトのメンテナンスや一貫性を保つ作業ははるかに簡単になります。

サードパーティーとの関係を円滑化

また、大規模ブランドに特有のもう1つの問題として、数多くのサードパーティー企業によるサービスをスムーズに活用できる技術をいかに構築するかという課題があります。デザインパートナーに新たなキャンペーンの構築を頼む場合でも、外部のeコマースコンサルタントに相談する場合でも、セキュリティー企業に依頼を行う場合でも、コンテナで管理することによって、どの機能が実現可能であり、システムの柔軟性や対応範囲をパートナーがどのように活用できるかを、明確化できます。これによって、外部のサービスに対応する際でも、全体のコストや作業量を削減できるのです。

カスタマイズとエキスパートのアドバイスの間の絶妙なバランス

弊社のCMSの以前のバージョンでは、それぞれの要素に対して、現在より突っ込んだカスタマイズ機能を提供していました。しかし、ウェブサイトのコンテンツを制作されているのは、多くの場合、翻訳担当者または事務職員の方々であること（デザイナーや開発者の方々ではないこと）が判明しました。そのため、最新バージョンにおいては、アプローチを変更し、要素の機能（レスポンシブなデザイン、使いやすさに関するベストプラクティス、そして全体のユーザー体験）に関する決断のほとんどは弊社のプロダクトチームが担当するようにしました。同時に、クライアント様に対しては、コンテンツの入力作業をさらに円滑化したり、より幅広いカスタマイズオプション（ダーク/ライトモード、左揃えまたは右揃え、それにいじらなければ最適なデザインが自動的に選択される多数のオプションフィールド）を提供することにしました。

また、ザ・プラントでは、プロジェクトのデザインフェーズにおいても、同じコンセプトを採用しています。弊社がクライアント様にお届けするデザインは、ほぼ全ての場合において、コンテナベースのデザインです。つまり、お届けしているフルページデザインでも、舞台裏では各バーティカルブロックに対してコンテナを使用しているのです。

デザインパートナー様にAdobe XD形式でお届けしたコンテナデザインのテンプレートの例。こうした要件に基づいて設計することで、弊社のコンセプトを扱う代理店様でのデザイン作業を円滑化できるのです。

このアプローチを採用することで、サードパーティーのデザイン企業様に対して、デザイン作業に役立つ特別なアセットや要件をお届けできます。そうすることで、開発作業がより簡単になります。さらに、各コンテナの機能や、コンテナの中のコンテンツがどの範囲で動作することを前提とすべきかに関して、明確なガイドラインを設定できます（例：「このデザインは、ボタンが0個から4個までに対応する必要があります。この要件を、どのようにデザインとして形にできますか」など）。

弊社が手がけたページビルダーに全てが集結

こうした数々の課題を解決する上で最後に必要となるのは、弊社が綿密に設計と構築を行ったコンテナを全て集結させて、クライアント（もしくは弊社の従業員）にご提供することです。お届けしたシステムを使って、数多くの顧客に対して努力の結晶である製品やサービスを機能的かつ魅力的なコンテンツを通して紹介するという重役を担うページを作成していただけます。

弊社が手がけたページビルダー。ここでも、弊社が推奨するモバイルファーストのデザインをクライアント様にも取り入れていただこうと、モバイルをデフォルト表示としています。

ページを構築

弊社のソフトウェアを使ってページを構築するユーザーには、様々な方がいらっしゃると同時に、この作業には克服しがいのある課題がたくさんあります。そこで、こうしたニーズにベストな形で対応できるよう製品スイート全体に盛り込んだ機能を、いくつかご紹介します。

コンテナベースのデザイン。全てのページは、コンテナを組み合わせて構築されます。コンテナは、場所を入れ替えたり、ラベルをつけたり、複製したり、削除したりできます。各コンテナには、そのまま使えるオプションがいくつか用意されています。そのほとんどについて、設定するかどうかはオプショナルです。そのため、わずかな開発作業で、サイトの構成を大幅に変更できます。カスタマイズが必要な場合には、この機能をその他全てのコンテナやページで使用できるようになるので、より堅牢なサイト作りが実現します。
ライブプレビュー。弊社のシステムなら、コンテンツが実際どのように表示されるかを、リアルタイムでプレビューできます。そのため、ユーザーの方々は、どのような変更を行う際にも、各オプションを変更すると何がどうなるかを、事前に的確に把握できます。また、ライブプレビューをクリックすることで、編集対象となるコンテナに素早く移動できます。そのため、ライブプレビューは明快なナビゲーションツールとしても使えるのです。また、モバイル、タブレット、そしてデスクトップという3つのメジャーな環境に対応するライブプレビューが表示されるので、コンテンツがそれぞれの環境でどう表示されるかを、管理画面から離れることなく直接視覚的に把握できます。
デフォルトテンプレート。ザ・プラントでは、新たなクライアント様向けに弊社のCMSを設定する際、多くの場合、いくつかのデフォルトのテンプレートをご用意します。ウェブで見られる一般的なデザインパターンをベースに弊社がデザインしたテンプレートです。これによってクライアントは、弊社のベストプラクティスのデザインや知見を全て活かしながら、素早く着手できるのです。

弊社システムのクライアントへのメリット

クライアントの希望は、究極的に言えば最高のコストパフォーマンス、つまり合理的な額の投資で素晴らしい結果を得ることです。ザ・プラントでは、クライアントのこのような希望を叶える、素晴らしい製品を生み出したいと考えています。本記事でここまでご紹介してきたことを総動員することで、プロジェクトを進める中で、クライアントには次のような価値をお届けしています。

クライアントには、要件をいかに効率化するか、そして多くの部門、職能、およびパートナーの間でいかに効果的に技術的なコンセプトを伝えるかを伝授します。
プロジェクトに弊社のエンジニアが関与する必要があるのは、新たな機能が必ず必要で、それを新規コンテナの作成またはコンテナの改良で実現しなければならない時だけです。
これによって、プラットフォームは、今後のプロジェクトでも利用できるという、永続的価値があるものとなります。また、サイト上の既存のコンテンツを改良することにもつながります。
サイトにて新たなコンテンツを公開する作業が、より素早く、より安価で行えるようになり、コンテンツもより高品質になります。