MEN’S CLUB様 60周年記念 特設ページ
http://sp.mensclub.jp/fashion/60th/
日本で最も歴史のある月刊男性ファッション誌『MEN’S CLUB』様の創刊60周年を記念した特設ページ「メンズクラブを振り返る（※Web版）」をGlitter Styleが製作させていただきました。
実際の誌面上では20ページに渡る特集をWebページ化。総ページ数13＋αの6つのトピックスセクションで再構成。
トップページはパララックスかつ、各セクション毎に異なるモーションとギミックを備え、それぞれのトピックスセクションを印象的に見せながら閲覧者の方に「体験」を提供することに重点を置いたつくりに。Movieあり、SVGアニメーションあり、多数のギミックと時限性の仕掛けありの60周年（＝還暦）という節目を記念するにふさわしいリッチかつ盛り沢山な仕様に。
（※画像）実際の誌面。2014年11月号
UI & UX
コンテンツ閲覧に必要なアクションは最小限に
パララックスを採用し、ほとんどのギミックがスクロールに応じて自動で稼働する仕様。
閲覧者はただスクロールしていくだけ、ただ眺めているだけでもおおまかな内容が把握できるようになっている。
パララックスページはスクロール量が多くなりがちなので、前のセクションや先のセクションへの移動は面倒なケースが多い。その為、サイドにページナビゲーションが常に表示されるように設置し、移動の苦も軽減。（※画像下）
スタートから期待感を
Movie＋音楽とリンクさせたSVGによるラインアニメーションとエフェクトというリッチな演出をページトップに配置（スキップも可）。Movie終了後には各セクションへのスムーズスクロールのバナーが瞬きながら表示される仕様に。
ストーリー性を意識した構成
「メンズクラブを振り返る」というメインタイトルをキーワードに、このキーワードを元にそれぞれのトピックスが繋がっていく構成に。
メンズクラブ様がこれまで重ねてきた「時」の流れをイメージして、ステージに見立てた背景の上を次々とコンテンツが駆け抜けていく演出に。
各セクショントピックスそれぞれも際立たせるために、キーカラーの設定とセクショントピックス毎に違った演出をデザイン。
キーカラー
各トピックスには複数の記事があり、それぞれを行き来できるように構成されている。
現在どのトピックスの記事を見ているのか、直感的に理解しやすくする為、また記事どうしの関係性も感じてもらう為にもトピックス毎に色を定めて視覚的に分け、全ページを通してこのカラーを統一。
視覚的にそれぞれの記事、トピックスの繋がりを感じるようにデザイン。
- （※上画像）トップページでのカラー。赤はトップページを示しています
- （※下画像）記事ページでのカラー。次へ/前へといったページャーにもキーカラーを配置。次に閲覧する記事がどのトピックスのものかを示唆。
Pick up – トップページのみのトピックスとそのギミック
トップページをただの「リンク集」にしたくなかった（＝トップページ自体も見る意義のあるものにしたかった）為、トップページにしか記載されていない内容を用意。
Topics03 メンズクラブ60年間の歩み
スクロールと共に次々の歴代の号が時系列で流れていき、クリック/タッチによってその詳細が閲覧できるつくりに。
オーバーレイ表示のまま前後の詳細へ移動できる仕様にすることでユーザビリティの向上も。
Topics06 60のワード
誌面デザインをほぼ忠実に再現。メッセージが次々に届く様をイメージしてスクロールと共に徐々に表示される演出に。
ビデオメッセージがあった2名の箇所はアイコンを表示。クリックで動画やスペシャルメッセージへのリンクがオーバーレイ表示される。
Author's Comment
Designer: 深井 学
「サイト」と各「ページ」の関係性を考える
規模の大きなサイトでは、今回のような「サイト内に多層ページを作成する」というケースも多々あります。
その中で、特に内容としてサイト本体から独立したものであれば、その多層ページ群として見た時でも「一つのサイト」として成り立つように構成するのが妥当ではないかと考えています。
また、トップページは大抵の場合力が入っていたりするため華やかです。華やかゆえに「メイン」と捉えられるところもありますが、サイトにおいては「あくまでもインデックス（＝索引）」です。
しかし、トップページには非常に力が入れられているものの、下層ページが作り込み的にもデザイン的にも軽んじられているケースは少なくありません。
この「落差」はあまりつけるべきではないと考えています。
トップでの期待感を裏切ることにもなり、閲覧する側としては落胆してしまいます。また、内容としてメインになるならば、相応の扱いをすべきと考えます。
今回の製作においては、仕様上トップのインパクトがあまりにも強い為、この落差が少し強く付きすぎてしまった感は否めませんが、下層ページも動きが少ないゆえにおとなしく見えるものの、実は結構細かいところまで作り込んでいます。是非、そういったところも目を向けてご覧になっていただけると幸いです。
これまでで最も光栄な製作
どの製作であれ、携わらせていただけることは大変光栄です。ただ、その中でもアニバーサリーを任せていただけることは格別であり、なおかつそれが老舗のもので「節目」のものであるならばそれは特別なことと考えています。
「MEN’S CLUB」様という雑誌は自分自身長らく購読していた雑誌でもあり、その思い入れのあるものの「還暦」を祝うという特別なイベントに、自分自身も大きく携われたことを大変嬉しく思っています。
まだまだ至らないところがあり、止むを得ず削ったものもあり、要望すべてに応えきれなかったところもありましたが
幾度もの直しにも大変丁寧にご指導いただき、完成までお付合いいただけたことを心より感謝申し上げます。
製作の過程で私自身のMEN’S CLUB愛が暴走することもありましたが…苦笑
それだけ特別な思い入れのある製作をさせていただけたと感じております。
この素晴らしい機会を下さった担当者様に改めてこの場をお借りして、厚くお礼申し上げます。