総合研究大学院大学ウェブサイトリニューアル業務

次世代の研究者を養成するというコンセプトのもと、1988年に設立された総合研究大学院大学（以降、総研大）は、旧ウェブサイトに課題を抱えていました。
総研大のウェブサイトに訪れた誰もが情報を見つけやすいよう、UIとUXおよび構造の再設計が急務でした。一方、日々の運用においても、ウェブサイトへ新規コンテンツを公開する作業を、迅速に実施する運用体制の見直しが迫られていました。
他に総研大サイドの要望として、ウェブサイトを通じ各地に分散する教員、研究者および学生間の教育研究交流を深められるようなコンテンツの整備や、大学関係者が校内における諸手続きを円滑に行うための情報ページを実装したいというリクエストがありました。

訪問者をスムーズに誘導するための施策

ウェブサイトの良し悪しを、モバイルデバイス利用者の視点から判断すると、デザイン性の高さやビジュアルインパクトよりも、ページの表示速度で評価点が変わります。SEOの観点からも、読み込み時間を短くすることがあらゆる端末で求められています。
「ウェブページのロードタイムは5秒以下でも遅い。訪問者の47%は、2秒以下でも離脱してしまう」と、BLUE CORONAをはじめ、海外のADエージェンシーやマーケティングファームでは、ローディング2秒ルールに力点を置きデジタルプランニングを進めています。

訪問者をストレスなく目的のページへ誘導することを優先し、ビー・オー・スタジオは慎重にCMS選定を行いました。「シンプルなサイト構造」と「再現性の速さ」※の両立が実現できること、そして稼働性やセキュリティ性の高さで評価されているシステムであること。さらに要件にフィットする費用感、コーディングの経験や知識を持たない人でもページの更新が可能ということで、最終的にはPower CMSを採用することに決まりました。

※ページロードの時間短縮のためスタイルシートの軽量化を図り、同時にマルチスクリーンで可能な限り再現性を高めた。

Power CMSの利点

CMSの表示スピードが、静的HTMLで組まれているページより遅い理由には、読み込むリソースの多さと転送スピードにあります。一番ポピュラーなWordPressを例に、クライアントサイドとサーバーサイドでどのようなやりとりがあってページが表示されるかを説明していきましょう。閲覧者がウェブページにアクセスすると、PHPというプログラムが実行され、MySQLというデータベースからデータを引き出し、HTMLに整えます。HTML形式に整えられたデータを、次にHTTPプロトコルを経由して閲覧者のPCあるいはスマートフォンに転送。クライアントサイドのブラウザでは転送されたデータ内のHTML言語以外のCSSやJavaScriptをサーバーサイドにリクエストし、それが戻ってクライアントサイドで動き、再現されます。

クライアント側がサーバ側に「リクエスト」を投げる
サーバ側でリクエストを解析・処理してリクエストの答えを作る
サーバ側がクライアント側に「レスポンス」を返す

参考までに、レスポンシブウェブデザインで作っているビー・オー・スタジオのサイトは、トップページを表示する数秒の間に、リクエストとレスポンスが200前後繰り返されています。

総研大のウェブサイトに採用したPower CMSはPerlで実行されます。利点の1つは静的HTML生成が可能なことです。PHPやSQLなどプログラムを記述することなく、HTMLと独自テンプレートだけでウェブサイトを運用できます。必要な場面でのみデータベースを介しカスタムフィールドの情報を読み込み、動的にページを処理。動的に吐き出した場合にも、プラグイン設定をキャッシュするなどして無駄なレスポンスとリクエストを省略するプログラムコードが書かれています。その上、見過ごしていると肥大化しがちなシステムログをローテーションするなど、データベースのレスポンスを落とさないための機能が標準で備わっています。
さらにプログラムとテンプレートが完全に分離されているため、セキュリティ上の問題が発生しにくく、予期せぬデータ破壊の起きる可能性も低い点も特徴です。

情報を求めている人を迷わせないサイト設計

総研大の新サイトはレスポンシブウェブデザインを採用。新しいロゴデザインに合わせ、全体をモノトーンの色調でまとめ、できるだけ白の配分を多くとった2カラム仕様にしました。

入学志願者を募ることを目的に、トップページには総研大の基本情報や、研究内容、学費、入学手続きに関する情報を目に入りやすい位置にレイアウト。その下には訪問者の好みによりグリッド表示、リスト表示で閲覧できるセクションを設けています

PC版のナビには「メガメニュー」を実装。左固定のグローバルナビから、カテゴリのタイトルを選ぶと該当するコンテンツ一覧が表示されるイメージです。ウインドウの右スクロールバーと並行になるよう、言語セレクターとアクセスマップへのトリガーを設置。ちなみにメガメニューの背景は透過にしてあるため、一覧を展開してもセレクターやアクセスマップへの誘導ボタンが確認できます。

社会で活躍するための実践力を究める人にも、学びを転機に新たな目標を立てる人にも、また研究職を志す人にも、総研大はトップレベルの環境を提供しています。その強みがウェブサイトを通じ閲覧者に伝わることを目指し、4カ月をかけプロジェクトが完了しました。