【WORKS】神戸にあるエーザイグループ「株式会社カン研究所」様|第3話

2015/11/14   カテゴリー:Sixについて

みなさん、こんにちは。
神戸のWebブランディング事務所「Six」(シックス)です。
「ブランディング&コミュニケーション」で、経営戦略として資産価値を高めるための
Webサイト制作(ホームページ制作)・Webデザインを企画から運用までトータルにプロデュースいたします。

《神戸、明石、芦屋、西宮、尼崎、加古川、姫路、加西、西脇、兵庫県各地、京阪神各地、お気軽にご相談下さい!!》

神戸の東遊園地で開催されている社会実験「URBAN PICNIC」のアウトドアライブラリーに、本を寄贈して参加しています。
テーマは、「キッチンは、ライフスタイルである」「企画を助けてくれる本」です。
良かったら、探してみてください。
ちょうど事務局の「アーバンピクニック」の概要とねらいのお話もお伺いしました!

urban

前回に引き続き、コーポレートサイトのリニューアルさせていただいた神戸にあるエーザイ株式会社グループの「株式会社カン研究所」様をご紹介いたします。

第3話は、全体の構成やアニメーションのデザインについてご紹介します。

神戸にあるエーザイグループの研究所「株式会社カン研究所」様のWebサイトリニューアル。

神戸のポートアイランドにあるエーザイグループの研究所「株式会社カン研究所」様のWebサイトリニューアルをいたしました。
神戸の医療産業都市にある創薬研究の会社です。
現時点は、PC(パソコンサイト)とSP(スマートフォンサイト)の日本語版が公開されています。(英語版は、後日公開予定)

株式会社カン研究所

kanfront

トップページから、インパクトとイメージを伝えるアニメーション。

トップページのアニメーション(CSS3とJavaScriptのアニメーション)は、「カン研究所」様の創薬研究事業、エーザイグループとしての「hhc」(ヒューマンヘルスケア)に貢献する事業をストーリーとして展開しています。

まず、各研究のアイコンが動いています。

01

各研究内容が、中心の光に吸い込まれるように、引き寄せられるように、ひとつになりました。

02

光の環が広がり、生活者のさまざまな世代が現れます。

03

「カン研究所」様のキャッチコピーが現れます。
「Knowledge Action Network for hhc」

04

最後に、「カン研究所」様のメッセージと、外観が現れます。

05

ちなみに、アニメーションは、CSS3とJavaScriptで対応しています。
Flashのように、スマホなどで見れないといったことはありません。
ただし、もし対応出来てない端末では、最後の外観の静止画が表示するような対応にしております。

アニメーションは、トップページのメイン画像です。
スライド画像はよくありますが、今回は、「カン研究所」様のオリジナリティを表現するためにアニメーションを活用しています。

★ トップページは第一印象を決め、メッセージ性の強い表現が大切です。

全体の構成は、規則正しく、企業の信頼性を伝えるデザインです。

Webサイト(ホームページ)全体には、「グリッドシステム」を導入しています。

《グリッドシステムとは》

レイアウトを行う際、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに 文字や図版を配置し、無駄なくスッキリした 画面を作る手法。

grid

「カン研究所」様の理念である「知の交流」を全体的にわかりやすく配置し、デザインしています。
また、研究所の目的である「知の交流」と、 さらに四角く整然とした並びは、企業の誠実さや組織の信頼性も表現しています。

他のコンテンツページも、同じように「グリッドシステム」を導入して、レイアウト配置しています。
全体の統一性と、どのページも決まった構造にコンテンツ配置することで、ユーザーがページ構成を簡単に理解しやすくなります。

企業のWebサイト(ホームページ)なので、当然ですが、1ピクセル単位での正確さを伴います。
研究が、日々の少しずつの積み重ねであるように、デザインもこういった細部に至る丁寧なデザインの積み重ねによって制作しています。

★ 「グリッドシステム」の導入によって、全体的の構成に規則性をもたせ、企業の信頼性も表現しています。

Webサイトは、目的に沿って、コンテンツの優先順位を整理すること。

Webサイト(ホームページ)は、目的に沿って、デザインの方向性を決めて行きます。
最初は、コンテンツの整理していき、優先順位から全体構成を決定していきます。
「カン研究所」様の前回のWebサイト(ホームページ)の「研究内容」に加えて、「研究業績」をグローバルメニューに追加するなど、よりユーザビリティに配慮して設計構築しています。

《旧サイトのグローバルメニュー》

◆ 会社案内
◆ 研究理念
◆ 研究内容
◆ お問い合わせ・アクセス
◆ リンク

《新サイトのグローバルメニュー》

◆ 企業情報
◆ 研究理念
◆ 研究内容
◆ 研究業績
◆ お問い合わせ

kanmac

コンテンツの並びに大きな違いがないようですが、「研究業績」は、外部研究者にとって、知りたい内容のひとつです。
研究発表や論文、特許など、ご自身の研究テーマとリンクすることがあるかなど、事前に知りたいことでもあります。

コーポレートサイトは、目的に沿って、情報の整理から、デザイン、運用に至るまで、全体を設計構築することが大切です。

★ コーポレートサイトは、情報設計が大切な基礎となります。

Archive |「株式会社カン研究所」 様

関連記事も合わせてご覧ください。

主に、デザインリニューアルを行う目的とコンセプト策定についてご紹介しています。
◆ 【WORKS】神戸にあるエーザイグループ「株式会社カン研究所」様|第1話

フラットデザイン、細部のデザインについてご紹介しています。
◆ 【WORKS】神戸にあるエーザイグループ「株式会社カン研究所」様|第2話

あなたのビジネスに最適なWebブランディング・Webデザインをお手伝い致します。まずは、現状の課題をお気軽にご相談ください。