東京都健康長寿医療センター様(施設サイト)|Web制作実績 レスポンシブ対応|制作実績
異なるターゲットが見ても、必要な情報にスムーズにたどり着ける設計・デザイン
クライアント | 東京都健康長寿医療センター様(東京都板橋区) |
---|---|
制作プラン | Meta定額制30プラン |
カテゴリ | 施設サイト 医療・美容・薬品 施設関連 |
URL | https://www.haic.jp/ |
制作チーム |
|
REPUTATION
お客様アンケート評価
相談しながらリアルタイムでデザインを反映していただけたので、イメージ通りのサイトとなりました!
5段階評価平均
5
-
担当者の評価
5/5
-
担当者の知識
5/5
-
リクエスト対応
5/5
-
デザイン
5/5
-
フルオーダーメイド設計
5/5
-
CMS更新システム
5/5
-
制作料金
5/5
ネオインデックスを選んだ理由は?
- フルオーダーメイド設計
- 高品質なWebデザイン
- 担当者が良かった
POINT
制作のポイント
お客様のご要望
- 集客(新規)を増やしたい
- リクルートを強化したい
- ブランディング向上
- HPデザインを良くしたい
アルツハイマー型認知症の治験をはじめとする、高齢者医療の研究支援に取り組まれている「東京都健康長寿医療センター様」のHAIC施設サイトをリニューアルいたしました。
今回のリニューアルの目的として「ターゲットごとに情報をわかりやすく発信したい」というご要望をいただきました。そのため、ファーストビューに「企業の方へ」「研究者の方へ」「患者さん・一般の方へ」という3つの導線を大きく配置しました。そうすることで、サイトを訪れたユーザーが迷うことなく必要な情報にすぐにたどり着くことができます。
今回、「ターゲットごとにサイトを閲覧する目的が異なるため、導線をわかりやすく分けたい」というご要望をいただいたため、情報をターゲットごとに整理し、それぞれの入口となる導線を設けました。そうすることにより、目的の異なるユーザーがスムーズにそれぞれの必要な情報にたどり着くことができます。
また、情報量の多い下層ページでは、ページ内ナビゲーションメニューを画面右側に固定表示しました。ユーザーが閲覧している項目にハイライトをつけることで、ページ上で現在どのあたりを閲覧しているかが一目で分かるため、ページの全体像を直感的に把握できます。また、ページ内では大見出しと中見出しの2種類の見出しデザインを使い分けることにより、情報を視覚的にわかりやすく整理しております。
Webデザイン
モバイル用サイトでは、企業の方や求職者の方が移動時間にスマートフォンでホームページを閲覧することを考慮して制作いたしました。
今回の目的の一つとして「ターゲットごとにわかりやすく情報を発信したい」というご要望をいただいたため、モバイル用サイトではハンバーガーメニューを工夫しました。「企業の方」「研究者の方」「患者さん・一般の方」という3つのカテゴリーをハンバーガーメニュー内上部に配置し、クリックすると下層ページが現れるようにいたしました。そうすることで、最初に表示される情報を絞り込むことができ、ユーザーが最短導線で必要な情報にたどり着けるようにしています。
今回、もうひとつの目的として「採用強化につなげたい」というご要望もいただきました。そこで、求職者に向けた専用のページとして「採用情報ページ」を新設しました。採用情報ページでは、ターゲットである若者に向け、ファーストビューに様々な仕事風景写真をスライドショーで表現することで、サイト全体に躍動感を演出しました。また、実際に働かれている社員様のお写真を数多く使用することで、ホームページを閲覧しただけで職場の雰囲気が伝わるようにしました。使用したお写真は、プロのカメラマンが撮影しているため、社員の皆様や職場の自然な明るい雰囲気を引き出したお写真となっています。
また、求職者がホームページを閲覧している際にいつでもスムーズに応募できるよう、「採用エントリーはこちら」というボタンをページの下部に固定表示しました。エントリーフォームは、お問い合わせフォームと項目が異なり、求職者の方の情報入力の手間を最小限となるよう工夫しています。
さらに、「『老い』を科学する専門家集団」などの印象的なキャッチコピーは、プロのライターが制作しました。仕事内容を的確に表現したキャッチコピーをつけることで、求職者に入社後の自分の活躍する姿を想起させることができ、応募への後押しとなります。また、現在働いている社員様も、ホームページをリニューアルしメッセージ性が強まることで、改めて仕事の意義を認識することができ、働くモチベーションの向上につながります。
Webデザイン
デザイン面では、ホームページを訪れたユーザーに安心感を与えられるよう、パステル調の柔らかな色味でまとめました。また、各下層ページはターゲットごとに淡い色味のテーマカラーを設定することで、視覚的な統一感を演出しています。
また、ターゲットごとにテーマカラーを設け、色分けを行うことで視覚的な差別化をはかりました。具体的には、「企業の方へ」はパステルバイオレッド、「研究者の方へ」はパステルグリーン、「患者さん・一般の方へ」はパステルピンクのカラーを使用しております。さらに、「企業の方へ」はスーツ着用した女性と研究員の男性が会話をしている写真、「研究者の方へ」は顕微鏡を使用している研究者の写真、「患者さん・一般の方へ」は笑顔の夫婦の写真を使用し、それぞれのターゲットイメージに合わせた写真選定を行いました。
さらに、臨床研究が進んだ先の未来を明るく感じられるよう、光彩系のテクスチャを使用し、光を感じられるようなデザインに仕上げました。また、年齢層が高めのユーザーからの閲覧が多いため、全体的に文字を大きく太めにすることで、視認性を高めています。
エンジニア
システム面では、治験の募集や共同研究の情報などを発信できる「お知らせ」をオリジナルのCMSで自社開発しました。こちらのCMSでは、「企業様向け」「研究者様向け」「患者さん・一般の方向け」という3つのカテゴリーをボタンひとつで簡単に設定できます。さらに、カテゴリー分けされた「お知らせ」は、各ページに連携表示されるため、それぞれのターゲットに必要な最新のお知らせを届けることができます。
Web制作・運用サポート一覧
PC・タブレット用フルオーダーメイド設計、オリジナルWebデザイン、PC用UI/UX設計、ワイヤーフレーム作成、HTML/CSSコーディング(レスポンシブサイト)、Googleアナリティクス設定、各種CMS開発、jQueryコーディング、PLESKサーバー、アフターサポート
BEFORE AFTER
劇的ビフォーアフター
旧サイトにメスを入れ、お問い合わせが絶えないホームページへ
リニューアル前は、情報が整理しきれておらず、ユーザーが必要な情報にたどり着きにくい設計となっている点が課題でした。そのため、「ターゲットごとに情報をわかりやすく発信したい」というご要望をいただきました。
リニューアル後は、「企業の方へ」「研究者の方へ」「患者さん・一般の方へ」という3つのページを作成し、導線をファーストビューに配置しました。また、ターゲットごとにテーマカラーを設定し色分けすることで、視覚的にも分かりやすくデザインしました。そうすることで、それぞれ異なるターゲットが必要な情報にスムーズにたどり着けるホームページ設計に仕上げています。
PC DESIGN
PCサイトデザイン
お客様の特長を活かした、”世界にひとつ”のオリジナルデザイン
SMARTPHONE DESIGN
スマートフォンサイト
デザイン
ターゲットに最適なユーザビリティを考慮した、UI/UXデザイン
WORKS