No.041 大塚製薬

No.041 大塚製薬

大塚製薬

大手製薬会社、大塚製薬のWebサイト。

ファーストビューの印象

まず気になったのは、丸さ。ウィンドウやボタンの角が軒並み丸い。それぞれのオブジェクトの大きさに応じて、border-radiusを12px,13px,22px…など、分けて設定している。

レイアウト

シングルカラム

レスポンシブ対応

あり
ブレイクポイント：750px,834px,1100px

フォント

見出し：TBUDゴシック
本文：TBUDゴシック

メニュー

PC：ナビゲーションバー
SP：ハンバーガーメニュー

カラー

ベースカラー：#F5F4F2　オフホワイト
メインカラー：#014195　ブルー　グラデーション
アクセントカラー：#B11B2E　レッド
サブカラー1：#BAC5E2　淡青紫

感想、参考になった部分

なにもない空間で女性が青と赤の布を翻し舞う姿が大きく中央に映し出されている。その躍動感としなやかさ。そして背景のブルーのグラデーションから爽やかな印象、影からは太陽に向かう様子＝生命力を感じた。

コーポレートシンボルは、製薬会社であることから、生命に不可欠な水、血液を表しているのではないかと推測したが、ブルーのグラデーションは「開放感」「自由」「知性」「未来」を、赤の○はグループのエネルギーを表しているそう。

上述したが、ウィンドウ、ボタンの角が軒並み丸い。大塚製薬のO、コーポレートシンボルと合わせたのだろうか。

上部に配置されたナビゲーション、右に配置されたインフォメーションは最低限の見出しのみが露出し、詳細は格納されていて、項目をホバーすることでスライドインする仕組み。ビューをスッキリ見せる効果があると思うが、ホバーから展開までの時間が少し長く、うっかりクリックすると展開したものがすべて閉じてしまう仕様のため、もう少し展開時間を短くすると操作性が向上するかもしれない。

No.041 大塚製薬|Webサイト100選