学校法人藤田学園 PROJECT

独自のPM手法で5サイト同時公開を実現
医科大学/大学病院サイトリニューアルプロジェクト

Outline

限られた期間でインパクトを生み出すためのプロジェクト設計

愛知県豊明市の藤田保健衛生大学は、創立50周年の記念日となる2018年10月10日に『藤田医科大学』へ学校名を変更しました。既存のサイトが持つ構造上の問題を改善し、学部改組に伴う内容を見直す。さらには、受験生や病院の患者さんなど幅広いユーザーにも分かりやすいコンテンツ発信を実現する。さまざまな目標を掲げた本プロジェクト。

4月からスタートしたプロジェクトは、10月10日という外せないスケジュールに向けていかに進めていったのか?5つのサイトを同時にリニューアルするプロジェクト設計はどう実現したのか?ロフトワーク京都が担当した短期集中の大規模Webリニューアルをご紹介します。

プロジェクト概要

  • 支援内容
    ・要件定義
    ・情報設計
    ・ブランディング/デザイン方針策定
    ・コンセプトビジュアル作成
    ・Webサイト設計・開発
    ・構造設計/情報設計
    ・デザイン/コーディング
    ・CMSテンプレート開発(WebRelease2)
    ・コンテンツ移行
    ・新規コンテンツ制作
    ・写真撮影
  • プロジェクト体制
    ・クライアント:学校法人藤田学園(法人本部 広報部)
    ・プロデュース:篠田 栞
    ・プロジェクトマネージメント:入谷 聡
    ・デザインディレクション:国広 信哉
    ・コンテンツディレクション:堤 大樹、基 真理子
    ・テクニカルディレクション:川竹 敏晴、村田 真純
    ・コンセプトビジュアルデザイン:一野 篤(Movebell Situation)
    ・イラストレーション:川原 瑞丸
    ・ライティング:土門 蘭(文鳥社)、竹林 篤実・寒竹 泉美(チーム・パスカル)
    ・写真/動画:吉田 周平
    ・写真:ウォレスともみ
    ・Webデザイン:竹田 京司・亀山 真櫻(株式会社モンブラン)、松原 史典(BARUSU)
    ・HTMLコーディング・WebRelease2開発:株式会社ネクストページ
    ・コンテンツ移行:株式会社プロトソリューション

Outputs

6ヶ月間のプロジェクトで対象5サイトをすべてリニューアル

Point

「統一性」と「独自性」のバランスを追求したプロジェクト体制

プロジェクト開始時点では、大きく「大学サイト」、「第1病院サイト」、「第2病院サイト」の3つにプロジェクトを分割し、別々のチームで制作を進めることも考えられました。しかし、それぞれのサイトが新たに「藤田医科大学グループ」として足並みを揃えつつ、納期必達の短い期間でプロジェクトを完遂するには、コミュニケーションコストの面でリスクがあります。

そこで、1名のプロジェクトマネージャーが5サイトすべての設計・制作進行とコミュニケーションを統括し、制作領域ごとにディレクターを置いて、その下に機能特化したクリエイターがつくというチーム体制をとりました。

この体制のもと、5サイトの共通部分を多く持たせながらも、それぞれのサイトが十分な独自性を出していくための方法として、「コンセプトビジュアル制作」、「CMSコンポーネント開発と『コンテンツ移行』の先行実施」、「特徴的な取り組みに連動した新規コンテンツ制作」という3つのアプローチを採用しました。

5サイト横断の世界観を生み出すコンセプトビジュアル制作

一般的なWebサイトの制作プロセスでは、まず大学Webサイトのトップページデザインを作って各サイトに展開する、あるいは同時並行で大学・病院のトップページを検討するといったアプローチを取ります。

しかし、個性の違う複数サイトを同時に扱う場合、各サイトのデザインが「似すぎる」または「違いすぎる」リスクがあります。

コンセプトビジュアル:一野篤(Movebell Situation ) http://movebell.com/

そこで、Webサイトデザインよりも一段階上のレイヤーとして、5サイトに共通する「藤田医科大学/藤田学園としてのデザインコンセプト」を、コンセプトビジュアル(ダイヤグラム)として可視化するという方法を取りました。

アートディレクター・一野 篤さんが、経営陣(理事長、学長、病院長ほか)のインタビューや現地見学で得たインスピレーションをもとに、「有機的生命体」というキーワードを核とした、ポスター形式のコンセプトビジュアルを作成。各機関が自立的に進める数多くのユニークな取り組みと、それぞれがゆるやかに繋がりながら1つの大きな主体として「FUJITA」を形成する、といった想いが込められています。

この世界観と、各機関に対応するカラースキームの定義を受けて、Webデザインチームがサイトデザインに落とし込みました。各サイトでは、単純なカラーバリエーションだけでなく、このコンセプトビジュアルを引き継ぐ様々なディテールが散りばめられています。

大学サイトトップ「HOTTEST TOPICS」と、「建学の理念=独創一理」の提示

コンセプトビジュアルを発展させた背景のあしらい

各サイト共通のアーチ型メインビジュアル

CMSコンポーネント開発と「コンテンツ移行」の先行実施

最近では「アジャイル開発」がかなり普及しているとはいえ、多様なステークホルダーとの合意形成が重要になる大規模Web構築では、ウォーターフォール型のプロセスが依然として主流です。しかし、通常の「デザインFix⇒コーディングFix⇒CMS開発⇒移行」のステップを素直に進める場合、プロジェクトの長期化が避けられません。今回は5サイト計1000ページ近くの既存コンテンツ移行を含めて「6ヶ月」という短期間に納めつつ、各学科・診療科など個別の担当部局を含む確認期間を確保する必要があったため、プロセスの工夫が必要でした。

そこで、トップページデザインが完全に固まる前に、「パーツ集(コンポーネント)」のデザイン制作・コーディング・CMS開発を切り出して先行し、画面デザイン展開と並走して「移行」を早期に着手するというアプローチを取りました。

これまでロフトワークが手がけた数多くの大規模大学Webサイト構築の知見とノウハウが、このアプローチを可能にしました。特に、京都産業大学・東北福祉大学・大阪医科大学などのプロジェクトを通じて精度を高めたWebRelease2.7の共通仕様(ロフトワークでは「記事セット」と呼称)を下敷きにすることで、長文のページ/複数の写真によるレイアウト/PDFリンクリスト/複雑な表組など、大学Webサイトの移行時に頻出するパターンを的確に網羅。

加えて、本格着手前の「サンプル移行」による品質確認や、クラウド型データベース「Airtable」を利用したページ別ステータス管理など、大量のコンテンツ移行を齟齬なく行うための独自のノウハウを活用しました。結果、初期スケジュール通り納品前の1ヶ月間を学内での移行確認期間に充てるとともに、プロジェクトリソースを主要ページのデザインやコンテンツ開発に注力することができました。

各サイトの独自性と、訪問者に価値ある情報を生み出す新規コンテンツ

トップページデザインや既存コンテンツの整理・移行だけではなく、各サイト固有のターゲットユーザーに対して、最も価値のある情報を充実させるため、様々な新規コンテンツを制作しました。

特集コンテンツ「藤田医科大学の研究」

藤田医科大学サイトでは、「教育」、「研究」、「医療」の分野を際立たせ、特に研究では「医のフロンティア」を走るテーマとして再生医療・精神神経疾患・ロボティクスの3つを選定。専門知識を有する理系ライターユニット「チームパスカル」による取材と、映像による研究内容の可視化により、発信が難しい専門的な研究内容をわかりやすくPRする工夫をしました。

受験生サイト SPECIAL FEATURE

大学サイトではもう1つ、高校生を対象とした「受験生サイト」の中で、医療分野の幅広い職種を紹介しながら各学科の特色を端的に伝え、受験生の興味を刺激する施策として、「お仕事MAP」「OB/OGインタビュー『私の相棒』」を制作。これまでにない切り口で、藤田医科大学の専門領域と、医療職の社会的意義を表現しました。

第1病院トップページの特色訴求エリア

2つの教育病院サイトのうち、日本屈指の大規模病院である本院「藤田医科大学病院」のサイトでは、ロボット/医療安全/国際化の3本柱で特色ある取り組みを再編集。プロジェクト期間内に国際医療機能評価「JCI認証」取得というニュースもあり、患者さんが安心できる情報を前に出すことに注力しました。病院サイトでは基本となる外来(特に初診時)、入院、交通アクセスの案内ページも再構成し、トップページとグローバルメニューからすぐに必要な情報にアクセスできる構造にしました。

ばんたね病院トップ 診療センター紹介エリア

名古屋市内に立地する第2教育病院・ばんたね病院のサイトでは、複数の診療科で構成される7つの「診療センター」を紹介するページに注力。各センター長個々のヒアリングをもとに、高度な専門性と「患者さんに伝わる説明」の両立を目指し、コンテンツを編集しました。

Member

入谷 聡

入谷 聡

株式会社ロフトワーク
クリエイティブディレクター

国広 信哉

株式会社ロフトワーク
シニアディレクター / なはれ

Profile

堤 大樹

堤 大樹

株式会社ロフトワーク
シニアディレクター

基 真理子

株式会社ロフトワーク
HRディレクター

Profile

川竹 敏晴

株式会社ロフトワーク
テクニカルグループ テクニカルディレクター

Profile

村田 真純

株式会社ロフトワーク
テクニカルグループ テクニカルディレクター

Profile

メンバーズボイス

“時間制約が強く、ステークホルダーが多い高難度のプロジェクト。ぎりぎり許容できる「手戻りリスク」を常に読みながら、進行プロセスを試行錯誤しました。ここ数年担当した各種大学案件で得た、汎用的なCMS仕様や移行テクニックの経験値を下敷きにしつつ、腕の良いクリエイター陣の働きに本当に助けられました。”

クリエイティブディレクター 入谷 聡

“積み上げられた歴史と信頼の表現の土台に、変化し続けながら新たな取組を行う藤田学園の姿勢を表現できるデザインを目指しました。デザインの数も多く、細部まで配慮しながら進めるのは難易度が高かったですが、粘り強くフィードバックをいただいた学園のみなさん、及びフレキシブルに対応いただいたクリエイターのみなさんに本当に感謝しています。”

クリエイティブディレクター 国広 信哉

“多くの大学が差別化のポイントとして注力している、コンテンツの制作。突飛なアイディアに頼らずに、どうすればその中で藤田医科大学らしさが光るものを作ることができるのか頭を悩ませました。コンテンツの方向性が決まったあとは、その枠の中で各クリエイターの味を生かせるように配慮して制作を進行。参加クリエイターからこちらの要望以上のものを提案いただき、非常に前のめりに制作に取り組んでいただけたおかげで、無事に納めることができたのではと思います。”

クリエイティブディレクター 堤 大樹

“半年間5サイト同時リニューアルを実現できたのは、ロフトワークが持つ大学サイト構築の知見とテクニックを適材適所で使用できたからだと思います。またクライアントである藤田学園広報部はじめ、学内、病院関係者の皆様にも多大なご協力をいただき、膨大な情報の中でもフォーカスを合わせ取り組むことができました。”

クリエイティブディレクター 基 真理子

Keywords

Next Contents

国立研究医療機関の「分かりにくさ」を、易しく身近にするデザイン