京都大学

概要

京都大学公式ウェブサイトのCMS（コンテンツマネジメントシステム）からデザインまでを一新するプロジェクト。今回のプロジェクトでは、運用管理の課題削減や、グローバルな水準においてトップレベルの発信力をもつウェブサイトの構築を実現することを目的として開発を進めました。

プロジェクトの背景と目的

京都大学様の公式ウェブサイトは2014年のリニューアルより約6年が経過し、業務フローや技術的な課題が多く発生していました。特に、リニューアル前のウェブサイトでは管理画面の表示に数十秒かかるなど運用担当者様の負担となっており、応答速度の改善が大きな課題の一つとして挙げられていました。それらの問題を解決し、かつ新たなワークフローシステムの導入やコンテンツ再編成を見据え、利用者及び管理者が運用しやすい環境を構築すべく、日本語サイトと他言語サイトを含めた全面リニューアルを実施することとなりました。

プロジェクトの主な目的は次のとおりです。

CMS「Drupal（ドルーパル）」の導入による課題解決
- WebAPI を利用した学内他システムとの連携による柔軟なワークフローの実現
- 高安全性・高稼働率・高速処理の実現による応答時間短縮の達成
グローバルな水準において高い発信力をもったウェブサイトの実現
- 京都大学の学術文化・文脈を効果的に発信いただくためのコンテンツ再編成を見据えた利用者及びシステム管理者が運用しやすい環境構築
- University Identity に基づく統合されたコンセプトのビジュアルデザインの採用

Drupal の導入を決定されたポイント

今回のプロジェクトにおけるCMS選定は、京都大学様のWeb戦略室が主体となり検討を行われました。リニューアル前のウェブサイトでは、高機能で分散的ワークフローに向いている別のオープンソースソフトウェアのCMSを導入されていましたが、あまりシェアが高いとはいえないCMSであったため開発業者が少なく、ベンダーロックになってしまう可能性があることから継続的な利用への懸念を持たれていました。

そこで、新たに導入するCMSを決定するために数あるCMSを比較検討いただいた結果、オープンソースソフトウェアでかつ世界的シェアが高く、世界の有名大学でも多数採用されている実績がある Drupal が筆頭候補として挙がりました。当初は同じくオープンソースのCMS「WordPress（ワードプレス）」も候補に上がっていたそうですが、学内のシステム部門も含め検討を重ねられた結果、様々なユーザーが多岐に渡る利用を行う今回のプロジェクトには適していないということで採用を見送られました。一方で、今回のプロジェクト方針や運用フローをふまえると、柔軟な権限設定や拡張性が高いといった観点から Drupal が最適であるという結論に至り、Drupal の採用を決定されました。

アプローチ

パフォーマンスの改善

「プロジェクトの背景と目的」でも挙げた通り、今回のプロジェクトでは応答性の改善が大きな課題の1つでした。過去データを元に想定されるアクセス規模をふまえて応答性を検討し、各ページがアクセスから3秒以内に概ね全ての内容を表示できることを目標に改善を行いました。パフォーマンス改善への主なアプローチとしては以下のような対応を行いました。

CDN「Fastly」の導入

コンテンツ配信ネットワーク（CDN）の Fastly を利用することで、ページ表示速度の高速化を実現しました。Fastly はウェブサイトのコンテンツを世界中のサーバーに保存し、各ユーザーの地理的位置を追跡、ユーザーに最も近いサーバーからすばやくコンテンツデータを配信することでサイトの高速化に貢献してくれます。Fastly の導入により読み込み時間の短縮に成功し、ユーザーエクスペリエンスに劇的な改善をもたらすことができました。サイトへのアクセスが集中する合格発表時には Fastly に対して1秒間に約1000リクエストのトラフィックがありましたが、キャッシュヒット率99%以上でサーバー側にはまだ余裕がある状態であることも確認できました。ページの応答性に問題が出ることもなく、CDNが良いパフォーマンスを発揮してくれた好事例となりました。ちなみに Drupal の公式サイト Drupal.org でも Fastly が利用されています。

閲覧環境に即したレスポンシブ画像対応

ウェブサイト上で利用する画像はレスポンシブ画像と低画質画像を使ったプレースホルダーを実装し、端末に応じた出し分けを自動で行えるように実装を行うことで、顧客の閲覧環境に最適化したマルチスクリーンへの対応を実現しました。これにより高解像度ディスプレイに対応しつつ、デザイン面においても表示速度においても良いパフォーマンスを実現することができました。

次世代画像フォーマット「WebP」の利用

京都大学様のウェブサイトでは、Google によって開発された次世代画像フォーマット「WebP（ウェッピー）」を採用しています。

WebPはJPGと同じ非可逆圧縮でありつつアルファチャンネル（≒透過）にも対応しているという大きな特徴を持っており、さらにGIFのようにアニメーションもサポートしているという、いいとこ取りのような画像形式です。Google の公式ドキュメント（参照: A new image format for the Web）によると、WebP はPNGより26%、JPEGより25-34%圧縮した形で画像を扱うことができます。WebP採用により画像ファイルサイズを軽量化できるため、トラフィック量の節約につながり表示速度改善が期待できます。

2010年に登場した当初は、対応できるブラウザが少ないという理由でまだまだ浸透していなかった画像フォーマットですが、対応が遅れていた Firefox と Microsoft Edge もここ数年で相次いで対応し、2020年秋にはついにモダンブラウザ全てが対応しています。日本企業でもトヨタ自動車や ANA などが全面的にWebPを導入しており、今後益々WebPを取り入れる企業・団体が増えてくるのではないでしょうか。

学内用ワークフローツールとの連携

京都大学様の学内の新しい仕組みとして、教職員アカウントがあればどなたでも投稿可能な新しいワークフローツールを今回のリニューアルに合わせて導入されました。Drupal 上に API を実装し、それらのツールとの連携を行いました。これにより、これまで複数の編集者が編集されることにより引き起こされていた、スタイル崩れやウェブサイト全体の統一感の低下等の問題が軽減されました。新たな運用フローの整備に伴って、承認ワークフローを含む一部工程を Drupal でシステム化し、またワークフローツールから投稿された記事をダッシュボードに表示することにより、承認者がスムーズに対応できる仕組みを整備いたしました。ウェブサイトの公開前には京都大学のご担当者様と共に運用に向けての説明会を実施させていただきました。

グループモジュールを使った権限管理

本プロジェクトでは、京都大学様にて運用中のグループウェアで利用しているグループ概念を新しいウェブサイトでも用いて運用を行いたいというご要望がありました。そのためDrupal のグループモジュールを用い、グループ単位で権限を割り当てられる機能を実装しました。

グループモジュールは、Drupal 上のユーザーアカウントをグループ化したり、グループ用のコンテンツを管理することができるモジュールです。

グループウェアから出力した情報を開発したカスタムモジュールでインポートし、シングルサインオン認証時に取得したメールアドレスを Drupal アカウントと紐付けることで、グループウェアグループとの連携を実現しました。

University Identity に基づく統合されたコンセプトのビジュアルデザインの採用

デザイン面においては、ユーザビリティ・アクセシビリティ・デザイントレンドを押さえながらも、グローバルな水準においてトップレベルの発信力を持つ京都大学にふさわしいウェブサイトを目指して設計を行いました。

高度かつ先端的研究を行ってこられた京都大学様の歴史的背景や環境、教育の独自性、そしてそれらのカテゴリの情報発信による国内外の研究者・学生の獲得という大学の目的に対応できるデザインを実現するために、学内の担当チームの皆様と共に検討を重ねました。デザインの制作開始前にはウェブサイト全体で共通利用するコンポーネントの定義から開始し、各デザインエレメントは京都大学ビジュアルアイデンティティに則った設計に配慮しました。ヘッダー部分には縦書きの「京都大学」というロゴタイプを用い、配色はスクールカラーの濃青を基準とするなど、ウェブサイト全体を通して一貫性のあるトーン&マナーを策定しました。

また、予め用意したコンポーネントを Drupal の管理画面からページ上に配置できる機能を備えることで、使い勝手の良さとトーン＆マナーを維持したまま、編集者が自由にページを編集できる柔軟性を実現しました。

案件概要

クライアント名	京都大学様
URL	https://www.kyoto-u.ac.jp/
Drupal バージョン	Drupal 8
ジャンル	法人・施設・団体サイト
デバイス	PC／スマートフォン／タブレット
当社スコープ	Drupal導入／システム要件定義／デザイン／コーディング／マニュアル作成・研修／プロジェクト管理
プロジェクト期間	約12ヶ月