【WEBデザイン研究所016】ACTION！ | 東映 リクルートサイト
■サイトURL
■MEMO
「ACTION！」
このサイトが投下された日、WEB業界に小さくないどよめきが走った。
視覚領域を制限するだとか、平体をかけるだとか、デザインのタブーをおかしつつ絶対的なアイデンティティを確立した「こんなの初めて〜！」なサイトなのです。
色んな表現が出尽くした今、新しい表現は新しい技術でしか生み出せないのか？って疑問に一石を投じるサイト。
しかし、ただ奇をてらったアイデアであれば沢○さんがやってきて「別に。。。」って吐き捨てられるかもしれないですが、しっかりと東映さんの世界観にのっとったデザインになっています。
一体どんなことになっているのか見てみましょう！
■フォント
和文：Shippori Mincho（見出し）/ noto-sans-cjk-jp（本文）
欧文：Lato（https://fonts.google.com/specimen/Lato）
日本語の本文は可読性の高いNotoですが、それに対して見出しはしっとりエモエモなしっぽり明朝が使われていて、かつ平体がかけらてて我を爆発させています。
欧文は肉厚なサンセリフ体ですが角に丸みをもたせていてちょっとポチャっとした愛嬌が印象的なGill SansライクなLatoです。（※ウェイトはThin〜Blackまで豊富なのも魅力。）
■デザイン
サイトの特徴を大きく３つにわけると
①はみだすデザイン
②特徴的なフォントのあしらい
③色の切り替え
サイトを訪れるとローディングの後にまずこのナビゲーションが表示。
ファーストビューがまずインパクトすごいですが、もう画面はみ出しちゃうデザインになっています。
その中でもメインコンセプト、NEWS、そして仮面ライダー1号と東映映画のオープニングでおなじみ荒波などの主要コンテンツはファーストビュー内で担保されるレイアウトになっています。右下のプラスマイナスのナビゲーションで画面を引くと…
全貌がこのようなかたちでコンテンツがいっぱいに敷き詰められていて、パンフレットや広告などグラフィックを彷彿させる1枚もののデザインになっています。サイト閲覧者に選択肢を与える作りになっていて、冒険心を掻き立てられる見たことのない構成にワクワクさせられます。
ここまで個性が立つとこのアイデアそのものがアイデンティティなので、真似たりもできないですよね。（むしろこの東宝さんの世界観にマッチしていることもあるので、それを何か別のところで使おうが同じように効果的な成果（ビジュアルの訴求面で）を出せるとは限らない。）
次の見ていきたいポイントがこの意図的に平体をかけたフォントですね。
サイト全体で見出し部分にはすべてcssのtransformであえて変形をさせています。通常、デザイナーになりたての新人が１ヶ月目で先輩デザイナーから怒られるアルアルパワープレーをあえてやっているのです。
（なんで？）ってなりますよね。怒られる理由はフォント自体がひずんで可読性もさがってしまうからなのですが、ここではこのタブーが世界観の構築に一役かっています。そもそもこういった平体や長体といったフォントをギュッとするのは、文字で余白をキチキチに埋めるグラフィック（新聞など想像してもらうとわかりやすいと思います。）で、テキストで幅を稼いだり、埋めたりする場合には使ったりします。
今回は先でも説明した通りパンフレットなどグラフィックっぽい見せ方でおもしろい演出をしているので、その世界観を演出させる意図があるのかなと思います。（その証拠に、余白がたっぷりある中であえてcssでスタイルを与えています。）それに加えて、東宝さんの昭和レトロなイメージの再現というのも狙いにあるかなと。
ここまでのイメージでもお気づきかもしれませんが、テーマカラーはグレーベースに赤→青→緑→と、メインカラーが一定時間で切り変わる仕様になっています。このカラクリにも恐らくらしさ全開の意図がこめられていますよね。きっと、特撮ヒーローにちなんだ「色」でサイトを「変身させる」ってことなんじゃないかなと予想してます。じゃないと、こんな突飛な仕様を放り込まないですもんね。ちなみに上の組織図もsvgで用意して色を切り替えてます。細やかな芸にうっとりしますね。
社員紹介の写真は、まるで役者さんのようなタッチで存在感バチバチのフルスクリーンサイズで大胆にレイアウトされています。これ以外の対談記事なども同様に。プロフェッショナルな印象を、否応なしに感じ取ることができます。
その他の社員さんもそれぞれにアー写のような独特の世界観で作り込まれています。かっこいい〜！
いかがでしたでしょうか。
今日もなかなかHPを消費するサイト分析でしたが、とても勉強になるおもしろいサイトでした。画用紙をはみ出して絵を描くような、クリエイティビティのスタンスはいくつになっても大切にしていきたいなと感じました。
それではシーユーネクストグッドウェブサイト！！
この記事が気に入ったらサポートをしてみませんか？