コスモヘルス様（コーポレートサイト）｜Web制作実績 レスポンシブ対応｜制作実績

今回、リニューアルの主要な目的として、「企業としてのブランディングを強化したい」というご要望をいただきました。そのため、トップページ内のサービスコンテンツの見せ方について、特にこだわって設計しました。 

具体的には、PCの画面の広さを活かし、スクロールに合わせて7つの各サービスページへのサムネイル写真付きの導線ボタンが、画面右側から上下交互に現れるアニメーションを採用いたしました。このように、ユーザーの視線を引きつける導線設計により、思わず気になったサービスページを確認したくなる工夫を施しています。

スマートフォンサイトのハンバーガーメニューでは、ブランディング強化に有効と考えられる「コスモヘルスのビジョン」「活動報告」の2ページの導線ボタンを、視認性と訴求力を高めるためサムネイル写真付きで大きく配置しました。その他のページへの導線ボタンは、円形のサムネイル写真を付けてコンパクトに配置しております。主要ページへの導線ボタンにサムネイル写真を付けることで、それぞれのページ内容がイメージしやすくなり、ユーザーが興味のある情報に遷移しやすくなる導線設計に仕上げました。

デザイン面では、トップページのファーストビューに水面のような模様が広がる動画を背景として配置し、お客様のイメージにふさわしい健康的な清涼感を演出しました。さらに、ページをスクロールすると白い円が弾けるように広がり、淡いブルーのグラデーションに白い光の粒子が遺伝子構造をかたどって舞う動画の背景へと移り変わりますこのような段階的な変化により、ユーザーの興味を惹きつけ、自然とコンテンツへ引き込む洗練されたデザインを実現しました。

システム面では、開催したイベントや講演会の情報を管理者様がタイムリーに更新できる「活動報告」をオリジナルのCMSで自社開発しました。こちらのCMSでは、管理画面から記事のタイトルやカテゴリー、画像などを登録するだけで、トップページ内の「活動報告」コンテンツにバナーとして自動表示できる仕様にいたしました。そうすることで、ユーザーが最新の情報をスムーズに確認できるため、お客様の予防医療講演情報や社会貢献活動をより効果的に訴求できるシステム設計に仕上げています。