大学病院 研究グループ ポータルサイト制作

依頼内容

名古屋大学医学部小児科学教室 感染症グループ（NUPID）は、「無症候性先天性サイトメガロウイルス感染症における前向き観察研究」をはじめとする臨床研究を行うグループです。
これまで研究情報は大学の小児科学教室サイト内の1ページのみで、発信できる情報量に限界がありました。多施設共同研究を東海3県から全国へ拡大するにあたり、独自のプロジェクトサイトの構築を弊社へご依頼いただきました。
サイトの目的は2つ。医療機関・研究機関に向けては研究協力施設のリクルーティングとネットワーク拡大、患者様・保護者様に向けては疾患への正しい理解促進と研究参加の案内です。これら異なるターゲットへの情報発信を、一つのサイトで実現することが求められました。

方針・UX検討

サイトの訪問者は「医療従事者・研究機関」と「患者・保護者」の2つに大きく分かれるため、まずターゲット別の導線設計から着手いたしました。
他の大学医学部研究グループのサイトを調査したところ、メインビジュアルにターゲット別の入口を設ける構成が主流でした。
ただし今回は、グループ自体の認知度が低い段階から情報発信を行う必要があったため、入口を目立たせつつも、TOPページにグループメッセージを掲載し、まず「どんな研究グループか」を伝えることを優先いたしました。
また、共同研究の問い合わせ・患者家族からの相談など、問い合わせ種別が複数想定されたため、選択肢に応じて入力項目が切り替わる「条件分岐型フォーム」を採用。
フォームを目的ごとに複数用意するコストを抑えながら、ユーザーに必要な入力だけを提示できる設計にいたしました。

トンマナ提案

今回はサイト内で「医療従事者向け」と「患者・保護者向け」で明確にターゲットが分かれているため、それぞれのユーザーが求める印象に合わせてトーン＆マナーを設計いたしました。
デザインコンセプトは「大学研究機関としての信頼性・専門性」と「小児に寄り添うやさしさ」の両立。医療領域のサイトとして安心して情報を受け取っていただける信頼感をベースに、ターゲットごとにカラーやビジュアル表現を調整いたしました。

〈医療従事者向け〉

医療従事者向けページでは、ユーザーに与える印象を「信頼感」「清潔感」の2軸で整理し、デザインパターンを検討いたしました。

◼️ Aパターン：落ち着いたブルーをメインにした信頼感重視
メインターゲットである医療従事者を意識し、ネイビーを基調としたデザインを提案いたしました。
深みのあるブルーによって、知性・安定感・誠実さ・専門性を表現し、研究機関としての信頼性が直感的に伝わるトーンに設計いたしました。
また、濃いブルーはテキストや情報整理との相性が良く、セクションごとの区切りや重要情報を明確に伝えやすい点も特徴です。
論理的で読みやすい情報設計を実現できるため、医療従事者向けページに適したデザインとして採用いたしました。

◼️ Bパターン：ブルーをベースに清潔感を重視
ライトブルーを中心に、医療従事者・一般ユーザー双方に受け入れられるバランス型のデザインを提案いたしました。清潔感のあるカラー設計により、クリーンな印象や安心感、親しみやすさを表現しています。
ネイビーが「専門性や重厚な信頼感」を表現する一方で、ライトブルーは「親しみやすい信頼感」を伝えることができるため、より柔らかく、先進的な印象を与えるデザインとして設計いたしました。

検討の結果、研究機関としての信頼性をより強く伝えられるAパターンを採用いたしました。

〈患者・保護者向け〉

患者・保護者向けページでは「安心感」を最も重視し、医療従事者向けページとの差別化を図りました。
やさしいブルーをベースカラーに、アクセントとしてオレンジを取り入れることで、重要情報へ自然に視線を誘導できるカラー設計にしています。

◼️やさしさを感じるビジュアル設計
背景やイラストのテイストを柔らかくすることで、医療サイト特有の緊張感を和らげ、初めて訪れるユーザーにも安心感を与えるデザインにしています。

◼️余白を活かした読みやすい構成
情報量が多くなりやすい医療サイトだからこそ、余白を十分に確保し、視線の流れを意識したレイアウト設計を行いました。
情報を整理して見せることで、ユーザーが必要な情報へ迷わずアクセスできる、分かりやすく使いやすい構成を実現いたしました。

◼️フォント設計
医療従事者向けページとの差別化として、患者・保護者向けページでは丸ゴシック系のフォントを採用いたしました。文字の印象を柔らかくすることで、親しみやすさと安心感を演出し、患者様・保護者様が安心して情報を受け取れるデザインとして設計いたしました。

デザイン制作

〈医療従事者向けページ〉

専門性や研究機関としての信頼感を重視し、青色をベースに落ち着いたトーンで設計いたしました。
イラストなどの装飾要素は控えめに使用し、情報の正確性や読みやすさを優先したデザインとすることで、医療情報を適切に伝えられる設計といたしました。

〈患者・保護者向けページ〉

不安を抱えるユーザーにも安心して閲覧いただけるよう、親しみやすさを重視したデザイン設計を行いました。
両ページ共通で「医療機関としての信頼感」を損なわないことを意識し、ブルーを軸としながら、ターゲットに合わせた色合いの調整を行いました。

実装

CMSにはWordPressを採用いたしました。研究グループのメンバー様が自ら更新・投稿できるよう、更新対象のページや掲載内容に応じて、カスタムフィールドによる入力フォームを整備いたしました。
協力医療機関の一覧ページでは、都道府県に紐づけて医療機関を登録できるカスタムフィールドを実装。インターネット操作に不慣れなメンバー様でも直感的に登録・更新できるよう、公開後の運用フローまで考慮した設計を行いました。
また、悪意あるボットによる自動送信を防止するため、セキュリティ対策も実施いたしました。
サイト公開後には、研究グループ様より、活動報告を自らの手で問題なく投稿できていることや、デザイン面についても高い評価をいただいております。