国立大学法人 滋賀医科大学
概要
国立大学法人 滋賀医科大学様は、滋賀県大津市に在る県内唯一の医学大学です。2017年4月にウェブサイトを弊社でリニューアルさせていただきました。おそらく日本国内では初となる Drupal 8 で構築された大学のウェブサイトとなります。
プロジェクトの目的
このプロジェクトの主な目的は次のとおりです。
- 10年以上運用を続けたウェブサイトのデザインを近代化し、動画などのインタラクティブな要素を設け大学のイメージや魅力がわかりやすいデザインとすること。
- 近年で主流となったスマートフォンやタブレットなどの様々なデバイスへの対応。
- JIS-X 8341-3:2016 レベルAに準拠し、高齢者や障害者もとってもアクセスしやすいウェブサイトとすること。
- 静的 HTML と CGI で構成されたウェブサイトを CMS 化し、運用コストを削減。
JIS X 8341-3:2016 ウェブアクセシビリティ レベル A 準拠への対応
滋賀医科大学様は準公的機関であるため、高齢者・障害者の利用を配慮した WCAG 2.0 を包含する JIS X 8341-3:2016 レベル A 準拠の達成が求められ、制作では、いかにデザイン性を崩さずにアクセシビリティを保って Drupal でシステム化することが大きな目標となりました。
弊社内でも音声読み上げソフト、スクリーンリーダーによるテストを実施し、サイト全体でセマンティックなマークアップを行ったことで、障害者の方へのアクセシビリティも十分に考慮した構造となっています。
ウェブアクセシビリティの対応状況などの詳しい情報は、滋賀医科大学様のウェブアクセシビリティ方針のページ をご覧ください。
デザイン
滋賀医科大学様ならでは魅力を表現
今回のホームページリニューアルにあたりデザインコンセプトとして掲げさせていただいたのは、「豊かな環境、豊かな教育、豊かな未来。〜地域に支えられ、地域に貢献し、世界へと羽ばたく〜」というキーワードです。
地域に貢献し、世界へと羽ばたく優れた医療人を育むことができるのは、琵琶湖をはじめとする豊かな自然と文化に囲まれた素晴らしい環境、そして、豊富なカリキュラムが用意された豊かな教育があってこそ。これらの豊かさが滋賀医科大学で学ぶ学生はもちろん、地域や世界の医療分野の豊かな未来をつくる礎となっており、滋賀医科大学様の大きな魅力のひとつであると考え、今回のリニューアルのデザインコンセプトとさせていただきました。 Webサイト全体を通して写真を豊富に使用し、「言葉」の表現にもこだわって、滋賀医科大学様ならではの「豊かさ」を随所に感じさせるデザインを目指したデザイン提案を行いました。
キャンパスマップ
キャンパスマップに掲載しているキャンパスマップのイラストも弊社で作成させていただきました。
ご提供いただいた俯瞰写真やGoogleMapの写真を元に、Adobe Illustrator CC というグラフィック制作用のソフトの遠近グリッドという機能を用いて作成しています。
こういった専門的なイラスト制作については外注されるWeb制作会社が多いかと思いますが、弊社では社内で一貫してご対応することができるため、無駄なコストをかけずにクオリティの高いイラストをご提供することが可能です。また、将来的に建物を増築された際のイラストのアップデートなどにも迅速にご対応させていただけます。
フロントエンド
オリジナルテーマ開発
Drupal 8 から搭載された Classy をベーステーマとして完全オリジナルのテーマを作成。サイト全体が5つのブレークポイントを使ったレスポンシブウェブデザインとなっており、どんな解像度のデバイスでもコンテンツを適切に閲覧することができます。
高精細ディスプレイへの対応
サイトの各所で使用される画像は高精細ディスプレイに対応する画像形式や最新のマークアップ方法でコーディングを行いました。高精細ディスプレイを搭載する iPhone や MacBook などの高精細ディスプレイを搭載した端末で閲覧しても、ジャギーが出ない美しい画像が表示されます。
メガドロップダウンメニュー
グローバルナビゲーションのメガドロップダウンメニューはフルスクラッチで制作。メガドロップダウンメニュー内のコンテンツや、メニューアイテムも Drupal の管理下にあり、管理画面上から簡単に変更することが可能となっています。
Drupal 8 CSS アーキテクチャへの対応
制作では Drupal 8 で新たに制定された SMACSS + BEM をベースとしたアーキテクチャに準拠し、それぞれの要素のスタイルは独立したコンポーネント（モジュール）となっていて、今後 CSS を拡張してもメンテナンス性が損なわれない堅牢な構成となっています。
タスクランナーによる効率化
また、フロントエンドの開発では Sass の利用に加え Susy、Autoprefixer などのツールを駆使し、それらのタスクは Gulp.js によって自動化。先進的な開発手法を取り入れることで開発スピードを大幅にアップし、品質の向上に時間を割くことができました。
管理機能
管理画面から不要な入力フィールドを排除し、できるだけシンプルな画面になるように設計しました。
スタイルガイド
本プロジェクトでは主要ページ以外のコンテンツは、滋賀医科大学様のウェブ担当者の方に作成していただいています。
弊社でデザインした要素のスタイルを、新たに作成するページでも再利用しやすいように、スタイルとコードを一覧化したスタイルガイドと言われるドキュメントを作成し、編集者はそれを参照するだけでスタイルが簡単に流用できるようにしました。
また、それらのスタイルは CKEditor の Content Templates プラグインを使うことで、編集フォーム上から簡単に選択して利用できる機能の拡張を行っています。
ナビゲーション構造の最適化
メガメニューや下層ページのナビゲーション、サイトマップなどは Drupal コアで提供されるメニュー機能の構造を工夫して実装を行い、メインのメニューツリーを一つアップデートするだけでほぼ全てのナビゲーションが連動して更新され、運用時の作業コストを削減することに成功しています。
承認ワークフロー
承認ワークフロー機能は Workbench モジュールにて実装し、複数の管理者用ロールを構成して記事の公開をスムーズかつシステマティックに行えるようなっています。なお、Drupal 8.2.x では、同等の機能を持つ Content Moderation モジュールが同梱されるようになりましたが、「試験的」な位置づけであるため利用を断念しました。
ちなみに Contnet Moderation モジュールは Workbench モジュールからアップグレードできるようにする予定もあるそうです。
サイトの多言語化
Drupal 8 から更に充実した多言語化機能を利用し、英語でのコンテンツ提供にも対応しています。管理者は日本語サイト・英語サイトを気にせずに同じ管理画面でシームレスにコンテンツを管理することが可能となりました。
Drupal 8 のプロダクション利用について
本プロジェクトは弊社にとって Drupal 8 を使った初めての案件です。（ちなみに案件ではない、この自社サイトは2年以上前のベータ版の頃に制作しました）Drupal 8 では内部の構造がほぼ丸々入れ替わったので今までのノウハウの半分くらいが使えなくなり、開発する方としてはかなり辛い場面がありました。Drupal 8 には細かなバグがまだ残っていますが、致命的なものは無く、カスタムモジュール等を開発することで、コアのプログラムを汚さずに何とかなることがわかりました。Drupal 7 に比べると開発スピードやコストではまだ劣るものの、Drupal 8 で搭載された多くの機能でより一層便利になり、十分にプロダクション用に使える品質に達した印象です。弊社の今後の案件では Drupal 8 での開発が多くなる見込みです。
案件概要
| クライアント名 | 国立大学法人 滋賀医科大学 様 |
| URL | https://www.shiga-med.ac.jp/ |
| Drupal バージョン | Drupal 8 |
| ジャンル | 法人・施設・団体サイト |
| デバイス | PC／スマートフォン／タブレット |
| 当社スコープ | デザイン／Drupal導入／コーディング／システム要件定義／写真撮影／マニュアル作成・研修／プロジェクト管理 |
| プロジェクト期間 | 約5ヶ月 |