デジタルシフトでPV2.2倍！Economist誌のDrupal移行事例

Drupal 8 海外事例：Digital transformation of The Economist Intelligent Life to 1843 Magazine

1843Magazine（旧Intelligent Life）はエコノミストグループによる隔月発行のプレミアムマガジンで、「アート、スタイル、フード、ワイン、車、旅行と楽しい限り太陽の下のどんなことでも取り扱う」というコンセプトの雑誌です。

しかし、この雑誌のデジタル領域での存在感は、印刷版のものほど素晴らしいものではありませんでした。ウェブ、モバイル、タブレットプラットフォームは連動していなかったので、それぞれのデバイスにコンテンツを届けるには、運営上何度も同じ編集作業をしなければなりませんでした。

また、消費者にとって美的な魅力はほとんどありませんでした。デジタル版は見た目として人を惹きつけないものでした。イメージやライティングの美しさは、そのブランドをうまく伝えきれていませんでした。

2016年の3月初旬、エコノミストグループは雑誌としてのコンテンツ対象を広げ、ヨーロッパ、アメリカ、アジアをターゲットとするために、Intelligent Lifeを完全にリブランディングし、新しいブランド名、体験などを盛り込み、再スタートしました。

このプロジェクトは2フェーズに分けて進みました。

フェーズ1 : Intelligent Lifeの再開発（2015年4月〜10月）
フェーズ2 : Intelligent Lifeから1843にリブランディング（2015年12月〜2016年3月）

フェーズ1では、すごくたくさんのタスクがありました。例えばサイトの再構築、より直感的なユーザー体験を創造することや、コンテンツ管理を行う仕組みづくりなどです。構築したシステムにより、編集者はアプリとウェブのコンテンツを統合することができました。Drupalが持つ柔軟な承認システムを使い、例えば編集チームがアプリに投稿した数日後に、ウェブの方に同じコンテンツをアップすることができる、などのシンプルなワークフローを実装しました。

フェーズ2では、既存のサイトをタイルベースのレイアウトに変更し、新ブランドの雰囲気にあったレイアウトにすること、などを含むブランディングを行いました。このことにより、デジタル広告の引き合いが増加、1843誌のスポンサー収益や広告商品が増加しました。

なぜDrupalが選ばれたのか

クライアント様はDrupalを長年使用していました。1843の前身であるIntelligent Lifeのウェブサイトから使用していました。今回完全にサイトを再構築したにもかかわらず、編集チームの方々がサイトの操作にすぐ慣れたのは、過去にDrupalを使用してきたからになります。

クライアントが求めていた「すぐに使える」機能のパワー、柔軟性、量を考えると、開発の観点ではDrupalがこのプロジェクトの主要なCMS候補になる、ということを意味しました。1843誌には多くのコンテンツがあり、ユーザー認証が必要で、提供されたモジュールを使用してそれらを実装する必要がありました。Drupalには、カスタム編集ワークフロー、カスタム公開オプション、Web機能など、クライアントのすべての要件を満たす機能があり、Drupalの柔軟性を活用してWebサイトの改善とメンテナンスのための確固たる基盤を提供しました。

プロジェクトについて　フェーズ 1 : Intelligent Lifeの再構築、リデザイン

サイト構造の最適化

プロジェクトは、1843誌の編集チームとデジタルチームのチーム横断ミーティングからスタートしました。プロジェクトの目的、現状のサイト統計関係、ブランド定義、全バージョンのよくないところを議論しました。

現状のインフォメーションアーキテクチャを評価し、現状のコンテンツタイプを調査したのち、新サイト用に最適化された構造化に取り組みました。そこでは、直感的なユーザー体験を提供することや、次にローンチされるサイトやアプリのコンテンツ管理ワークフローを開発することを重視しました。

ワークフロー

編集チームはこれまで、デジタルコンテンツを3回準備していました。ウェブサイト用に１回、タブレットアプリ用に1回、モバイルアプリ用に1回、という具合にです。新サイトでは、Drupalはすべてのデジタルコンテンツの主要なソースとして使用され、Webサイトに公開され、別途開発したモジュールを通じて、別のアプリケーションとして利用可能になりました。

コンテンツはCKEditorを使用してフォーマットされ、別途実装したHTMLとCSSを使用して作成したカスタムテーマを使用して、アプリに配信されます。サイトに表示されるコンテンツには、完全なレスポンシブデザインが使用されます。

Drupalが持つ柔軟な承認システムを使い、例えば編集チームがアプリに投稿した数日後に、ウェブの方に同じコンテンツをアップすることができる、などのシンプルなワークフローを実装しました。

デザインとUX

Intelligent Lifeでのユーザー体験は、印刷物では豪華で没入感のあるものでした。執筆と写真の品質は、豪華なデザインとマガジンの感触によって補強されました。

ハイエンド向けの雑誌体験に合うように、デザイナーはモダンで、モバイルファーストなデザインを行いました。デザインは、デバイスや画面のサイズに関係なく、快適なユーザーエクスペリエンスを確保するための美しいイメージに重点を置いていました。

Webテーマでは、フロントエンドの世界のベストプラクティスのいくつかを使用しました。 CSSにはSassのGulpベースのワークフローを使用し、ドキュメントにはHologramとSassDocを使用しました。

移行

プロジェクトでは、既存のコンテンツを維持しながら完全に新サイトに移行する必要がありました。しかし、前バージョンのDrupalからの移行だったため、いくつかの課題がありました。過去のバージョンでは、コンテンツを構造化する上で少し不適切な形をとっていました。

それを解決するために、古いWYSIWYGテキストを新しいバージョンに変換するカスタムHTMLパーサエンジンを作成しました。 たとえば、新しい専用コンテンツフィールドのテキストからスニペットを取り出し、残ったHTMLを修正します。 これにより、コンテンツ編集者は、従来のコンテンツを修正する必要がないため、多くの時間を節約できます。

フェーズ 2 : Intelligent Lifeから1843にリブランディング

2016年の3月初旬、エコノミストグループはIntelligent Lifeを新しいブランド名、体験などを盛り込み、完全にリブランディングし、再スタートをしました。新ブランドは、エコノミストが創刊された年にちなんで、1843と名付けられました。

その戦略は、世界各国の豊かな教育を受けた読者を対象とした、世界的な出版物として雑誌を再開することでした。 私たちは、2015年10月に立ち上げられた既存のIntelligent Lifeのウェブサイトを、リニューアルやブランド改革のニーズに合わせて変革するのを支援しました。

1843誌の再出発の目的は、雑誌としてのコンテンツ対象を広げ、ヨーロッパ、アメリカ、アジアをターゲットとすることでした。雑誌のテーマは、テクノロジー、フード、飲み物、アート、デザイン、そして身体と精神に特化した新しいセクションにもその範囲を広げました。エコノミストグループの目標は、2016年3月9日に改訂されたサイトを立ち上げ、4月/ 5月のカバーで新聞スタンドにて販売される号に間に合わせることでした。その全く同じ日に、すべての新しい機能、以前のIntelligent Lifeのコンテンツやソーシャルアカウントを利用して、Webサイトが円滑に稼動する必要がありました。アプリは、Intelligent Lifeから1843にリニューアルするにあたり、すべてのデザインと機能の変更が加えられました。

新サイトのレイアウトとテーマ

1843チームが提供したデザインに続いて、ウェブサイト用に完全レスポンシブルでタイルベースのレイアウトを構築し、既存のページレイアウトをブランド変更に合わせて調整しました。

レイアウトの可能性を最大限に引き出すために、私たちはホームページとセクションページのタイルに対して、編集チームがコントロールできる環境を提供しました。 画像、テキスト、オーバーレイの色、不透明度、サイズ、位置の置換が可能です。

デザインが複雑なので、テーマは十分に維持されながら、柔軟性も必要でした。 これをサポートするカスタム機能をいくつか作成し、フォント、間隔、レイアウトをすばやく調整できるようにしました。たとえば、使用可能なフォントスタイルの数が非常に多く、フォントの異なるポイントでサイズと行の高さを調整できます。私たちは、データを保持するためのSassマップを作成し、マップをミックスインと統合して特定の要素にスタイルを適用しました。これにより手作業が少なくなり、開発がより早く進みました。

また、一つ高画質の写真をアップするだけで、色々な形に切り取って表示できる機能を実装しました。 また編集チームが最適な記事外観を作成できるように、記事を公開する前に最終結果を確認できるプレビュー機能を作成しました。

アプリケーションがデザインと機能の変更を反映しなければならないため、CMSと統合されたアプリケーション用の新しいHTMLテンプレートと、そのすべての設定オプションを提供しました。

バックエンド部分の調整

既存サイトのリデザインに加えて、新しいコンテンツタイプを作成し、いくつかの既存のコンテンツタイプを調整しました。 AndroidやiOSデバイスに配信されたアプリもサイトからフィードされ、それに応じてテンプレートが更新されます。

サイトのインフォメーションアーキテクチャも、クライアントのニーズやコンテンツ戦略にそうように修正しました。新サイトにに切り替えた後、以前のインテリジェントライフのウェブサイトコンテンツを適切にリダイレクトすることが必要でした。また、エコノミストチームと共同で議論し、SEOとウェブサイトのセキュリティ改善が必要でした。

結果、以下のSEO改善を実装しました。

• コンテンツページタイトルメタタグ
• Googleニュースサイトマップ
• Googleサーチコンソールプロフィール
• Schema.orgのマークをホームページ上に掲載
• xmlとGoogleニュースサイトマップをrobot.txtファイルに宣言すること
• ホームページとセクションページのメタデータ
• H1 H2タイトル改善
• 404エラー改善
• Intelligent Lifeと1843のディレクトリをシンプルにすること
• 301リダイレクト
• ページ番号付きのURL

広告

新サイトは有料版なしでの運営に変更となったため、収益は広告に頼ることになりました。広告主のビジネスチャンスを増やすため、より柔軟な広告の可能性を模索し、サイトを改善していきました。これらにより、広告主は編集チームと協力して高度にカスタマイズされたコンテンツを作成することができるようになりました。

成果

このプロジェクトで、柔軟性に富んだ多くのイメージを強化し、セキュリティとSEOを向上させ、より魅力的なユーザーインターフェイスを作成し、完全レスポンシブデザインのWebサイトを開発し、Intelligent Lifeから1843へのスムーズな移行を実現しました。プロジェクトそのものが生産的だったので、非常に短期間に多くの納品が行われました。その結果、編集チームに多くの柔軟性を提供する高度な編集ツールを備えた、本当に魅力的なウェブサイトになりました。

デジタル版の1843誌は2016年5月7日にローンチしました。2015年と16年の3月7日と5月19日を比較すると、2016年分の結果は以下の通りでした。

2015年に比べて2016年は

• ページビュー：227%アップ
• 訪問数：295%アップ
• ユニークユーザー：263%アップ
• 編集の重複作業の削減：80%

この数値は、リニューアルした新サイトに対してたくさんの訪問があることを意味します。したがって、雑誌そのものの読みやすさなどをよくする、といった当初の目的を達成していることにもなります。以前は編集チームは記事の投稿などに5回も重複作業をするようなことが起こっていました。その作業を1回で済むようにしたことで、作業効率を80%もあげることに成功したのです。

このプロジェクトによってもたらされた利益

• アプリとウェブのコンテンツが一つに統合された
• プラットフォーム間の開発
• 柔軟でとても使いやすくなった画像編集機能
• 高セキュリティかつSEO対策もバッチリ
• モバイルファースト、完全レスポンシブルサイト
• より人を惹きつけるUI
• Intelligent Lifeから1843へのスムーズな移行

クライアント様との素晴らしいプロジェクトの成功により、1843誌は「DADIアワード ニュース/メディア/出版業界ウェブサイト・アプリ部門」のファイナリスト候補になりました。

終わりに

消費者がスマートフォンで情報を消費する時代になり、メディア側に大変な運用の手間がかかっている、というのはエコノミスト社だけが経験してきたことではないかもしれません。同じ作業をを3回も5回も行っていた、というのには正直驚きました。

このプロジェクトは、雑誌のリブランディングという大きな節目を迎え、ユーザー体験を大幅に洗練しただけでなく、高セキュリティ化、トラフィック増、広告モデルの再構築と収益化、編集チームの生産性アップなど、Drupalによるビジネスの革新がダイレクトに良い影響を及ぼす事例でした。

メディア運営をされている方にはぜひ一度読んでいただきたい事例だな、と感じました。