PVが22%アップ！世界的なデザイン会社のDrupal移行事例

この記事は「 Drupal Case Study : PGAL 」の翻訳です。

この記事の目次

こんにちは、「Drupalの導入支援・開発・保守管理サービス KAIZEN 」サポート担当の井上です。

今日は世界的なデザイン会社 PGALのDrupal移行事例をご紹介します。もともと自社専用のCMSを使用していたものを、Drupalに変更することで、ユーザー体験が向上した事例になります。それではどうぞ。

Drupal 海外事例：PGAL

PGALは建築、インテリア、エンジニアリング、プランニングに特化したグローバルデザイン企業です。組織の拡大に伴い、PGALは70年間に及ぶ民間、公共のフィールドで獲得してきたたくさんの受賞歴を含め、現在の姿より良く発信するためのサイトを求めていました。

今回、PGALの色々なポートフォリオを美しく直感的に見せるためのレスポンシブサイトを構築しました。

なぜDrupalが選ばれたのか

PGALは自社専用の古いCMSの利用をやめる準備ができていて、新しい提案にオープンでした。Drupalを採用することになったのは、Landscape Achitecture Foundationでの導入経験が素晴らしいものだったからです。

Drupalは、そのプロジェクトで最適なプラットフォームであることを証明しました。類似検索結果が精緻であったり、フィルター機能が優れていたからです。実際に、要望にあったフィルター検索機能を実装するために作成したカスタムコードは、PGALのサイト開発プロジェクトでも使用しました。

Drupalを選択したもう一つの大きな理由は、他のCMSソリューション、特にさまざまなコンテンツタイプ、タクソノミー、ブロックでは不可能な、サイト編集者のためのシンプルで直感的なインターフェイスを作成できたためです。

私たちは、Admin Views、Field Group、Better Format、Role Assign、Navbarといった管理機能の改善モジュールとともにDrupalが持つ承認機能を正しく使うことは、コンテンツ編集チームのユーザー体験を飛躍的に高める、ということを知っていました。

素早く、直感的なプロジェクト・サイト検索機能

サイト再構築の主な理由は、ユーザーに特定の実績検索結果を素早く、直感的に提供することでした。前バージョンのサイトでは、欲しい情報を見るためには、サイト上で実績を一つも見ることなくカテゴリの選択をしなければなりませんでした。新サイトではその方式をやめて、全てのポートフォリオをすぐに見ることができるようにし、そこから自分が欲しい情報にフィルタをかけていくようにしました。

欲しいポートフォリオに素早く、ストレスなく到達するためのフィルタ機能の開発に最も気を配りました。”All Projects” ページでは、ユーザーは必要なフィルタが全て閲覧できる状態でページを回遊できます。フィルターが一つ選択されると、検索結果が絞られるように設計されていて、次の選択がしやすくなっています。

例えば、ユーザーが”航空業界”を選択すると、そこに属しないフィルターは表示されないようになります。（教育、レクレーションなどのフィルター）このことにより、検索結果がゼロになるような、ユーザーがストレスに感じるような状況を避けることができます。

プロジェクト検索でも同じ機能を実装しました。ユーザーが欲しい情報をフィルタすると、必要ないフィルタは消えるようにしました。例えば、ユーザーが”学校”とフィルタすると、”年”のフィルタがアップデートされ、実績のある年のフィルタのみが表示されるような形です。

検索結果を画像またはリストで表示されることが必要だったので、表示方法を切り替えるようにしました。画像で表示される際、注目プロジェクトは大きいサイズ、そのほかのプロジェクトは小さくなど、表示サイズを変えました。コンテンツを編集する際には、編集チームが表示方法を選べるようにしました。

サイト検索体験を向上するため、検索結果はグループに分けられました。例えば、ユーザが”ヒューストン”と検索すると、検索結果は3つに分けて表示されるようにしました。プロジェクト検索結果（プロジェクトの中にその言葉を含む場合）、ニュース検索結果（ニュースストーリーというカテゴリーにその言葉を含む場合）、追加結果（その言葉を含む色々なページでの検索結果）といった具合です。目的はユーザーにもっと整理されて、理解しやすい検索結果を提供することです。

ページの表示時間

高速表示を達成するために（Google Page Speedでは97点を達成）、以下を含むたくさんのフロントエンドのベストプラクティスを採用しました。

HTML、CSS、SVG、Javascriptの縮小(Speedyモジュールのおかげで達成)
ページの<head>にインラインクリティカルCSSを、残りのページに非同期ローディング
JavaScriptをページの最下部に移動し、hook_js_alter（）によってスクリプトの実行を遅くする
pngquant、opting、pngcrush、jpegoptim、jpegtran、およびjfifremoveを使用したImageAPI Optimize（またはImage Optimize）モジュールによるイメージの最適化
匿名ユーザー、圧縮されたキャッシュページ、CSS / JavaScript集約のためのDrupalコアページのキャッシュ
リソースのプリフェッチとDNSプリフェッチ
アパッチサーバー構成

効率的なコンテンツ管理

PGALのマーケティングチームは管理機能が使いやすいCMSを求めていました。CMSをDrupalに変更してから、ホームページやプロジェクトページ、幹部の略歴ページなど、全てのコンテンツが簡単に維持管理できるようになりました。

リーダーシップ、キャリア、所在地など、特定のコンテンツタイプはサイト中のいくつかのページで使用される可能性がありました。複数のページにまたがって変更する手間を省くため、これらのコンテンツは複数ページで適用されるように設定しました。

例えば、11のオフィス所在地の詳細が更新されれば、設定している全てのページでも変更が反映される、という具合です。同じ機能をクライアントページにも実装しました。プロジェクトページに新規クライアントの名前が追加されると、マスターリストページにも追加されるようにしました。

開発プロセス

このプロジェクトは完了するのに3ヶ月かかりました。開発はアジャイル手法を使って進められ、毎週進捗状況をクライアント共有し、昨日開発が進んだ部分について評価・テストして進めるようにしました。サイトはChrome、Firefox、Safari、Chrome for Android、iOS Safari、Internet Explorer 10と11でチェックしました。

成果

2015年と2016年の4月11日から21日を比較して、以下のような成果がありました。

新規ユーザーが19%アップ
ページビューが22%アップ
ページごとのセッション数が15%アップ
直帰率が31%減
ページスピードスコアが59%アップ（61点から97点へ）

終わりに

いかがでしたか？今回の事例のポイントは「検索性の向上」と「ページ表示時間の向上」だと思います。ユーザー体験の中でも最も重要な部分の一つだと思いますが、それらが向上することで、直帰率が30%以上も改善されました。

いかに直感的な体験を提供することがサイトを自社の資産として有効活用できるのか、ということを締める良い例だと思います。Drupalでサイトを開発される際の参考にして頂ければと思います。

Drupalの導入支援・開発・保守管理サービス KAIZEN