1日1WEBサイト デザイン分析 #20 "東北新社"

こんばんは。WEBデザイナー目指して勉強中のかいもちです。
今日は、すこーし前、ワイドショーを賑わせておられたこの会社のページを見ていきます ! おしゃん !

"東北新社"

目的・ターゲット

目的
・新規開拓 (顧客 & 採用)

ターゲット
・東北新社に事業を頼みたい、と思っている会社の担当者
・東北新社で働くことに興味がある人

配色

・まずですね... なんとこのサイト、自分で好きなテーマカラーを選べるんです ! (詳しくは下記ファーストビューにて)
　ということで、配色は、いろんなパターンあり。↑はテーマ"shinsha"(初期設定)を選んだ場合の配色。

・全体的に、近未来...というか、ハイテクノロジーを思わせる配色。

・左端ブルーは、ロゴにも使われている、東北新社のテーマカラー。
　文字は基本、白か黒で読みやすく、シンプル。薄紫はアクセントカラーとして、ボタンなどに使われている。

 

フォント

・Stevie Sans (英字)
→ Adobeフォントで使用可。
　丸みがほぼ無く、縦のラインが強調されたsans体。

・Source Han Sans Japanese = 源ノ角ゴシック(日本語)
→ weightが7種類もあるので、太さによって印象が変わるが、ゴシック体の中ではかなりスッキリと見える。読みやすく、きれいな印象。

ファーストビュー

・ローディング、からの、真ん中ロゴどーん ! 

・注目すべしは右上、好きなカラーテーマを選ぶと背景のグラデーションの色が変わる。↓

・カラーテーマの選択は、こんな感じ。
「我々はクリエイティブ集団だぞー ! 」という気概を感じる。

・グラデ背景は、マウスホバーに合わせて、オーロラのように波打って美しい。

・右真ん中にハンバーガーアイコンという珍しい作り。開くとこうなる↓

コンテンツ

・グラデ背景に文字、というシンプルな作り。コンテンツによっては白背景を足していたり、写真やイラストが使われている。

・文字や写真それぞれにアニメーションがついていて、ふわっと浮き上がってくる感じ。ボタンのマウスホバーは、鏡にキラリと反射するようなアニメーションがついている。

感想

・とにかく「他と違う」、制作会社らしい、アーティスティックなページだと思った。

・右中央のハンバーガーメニューは、意外と操作性が良い。
　右上または左上がオーソドックスなイメージだけど、視線誘導的には一番上じゃなくてもいいはず、💡

最後に、このページの面白いところをもう一つ。
なんとね、ファビコンの色も時間差で変わるんですよ... びっくり !