プロジェクト概要
安心感と信頼感が伝わるコーポレートサイトを目指して制作いたしました。
WordPressで構築した、東京・大手町と虎ノ門の精神科クリニック メディカルケア大手町・虎ノ門(医療法人社団雄仁会様)のコーポレートサイトです。働く方のメンタルヘルスを専門に、外来診療と復職支援の医療リワークを手がける2院の案内を1つにまとめました。ご挨拶・医師紹介、診療案内、診療時間・費用、各種外来、医療リワーク、よくある質問、採用情報、交通アクセス、お問い合わせなどのページで、平日20時までの夜間診療やリワークのプログラム、更新情報とメディカルメディアの記事を掲載しています。
心の不調を抱えて受診を迷う方と、社員の復職について相談したい産業医や企業の双方に、安心感と専門性を伝えたい。大手町と虎ノ門の2院で外来と医療リワークの機能が分かれているため、診療時間や電話番号、各外来の違いを迷わず確かめられる分かりやすさが必要でした。
赤レンガの建物の夜景写真に「働く方のこころの健康のために」のコピーを白文字で重ね、緑を基調に落ち着きと清潔感をもたせました。ヘッダーには2院共通の電話番号と各種ボタンを置き、画面右下に本日の診療・電話受付時間のパネルを固定して、受診前の情報へすぐ届くようにしています。下層には特徴、医療リワークの紹介動画、メディカルメディアの記事を続け、これらはWordPressで院側が更新できる構成にしました。
制作のポイント
赤レンガの建物の夜景写真にコピーを重ねる
最初の画面は、ライトアップされた赤レンガ造りの建物と高層ビルの夜景写真を大きく敷き、「~働く方のこころの健康のために~ うつ、双極性障害、大人の発達障害など」で始まるコピーを白文字で重ねています。配色は緑を基調にし、ヘッダー上部に細い緑のラインを入れています。
電話番号と診療時間をヘッダーと固定パネルに置く
ヘッダーには採用情報・お問い合わせ・交通アクセスのボタンと、大手町・虎ノ門共通の電話番号を並べ、その下にアイコンつきで「ご挨拶・医師紹介」から「Medical Media」までの6項目を横並びにしています。画面右下には「本日の診療・電話受付時間」として診療中かどうかと曜日別の時間を示すパネルを重ねています。
更新情報とメディカルメディアを一覧にする
写真の下部に「更新情報」として日付つきのニュースを5件並べ、「ニュース一覧」ボタンに続けています。下層には当クリニックの特徴、医療リワーク紹介動画、「メディカルメディア」の記事一覧があり、WordPressで更新できる構成です。スマホではヘッダーを電話アイコンとメニューボタンだけにまとめています。
デザイン

