MEN'S CLUB様60周年記念特設ページ

MEN’S CLUB様 60周年記念 特設ページ

http://sp.mensclub.jp/fashion/60th/

Category: Webデザイン

Type:ブランディングサイト

Concept:「還暦」という大きな節目にふさわしいリッチな仕様に

Skill: / / / / /
60th-anniversary_01

日本で最も歴史のある月刊男性ファッション誌『MEN’S CLUB』様の創刊60周年を記念した特設ページ「メンズクラブを振り返る(※Web版)」をGlitter Styleが製作させていただきました。

実際の誌面上では20ページに渡る特集をWebページ化。総ページ数13+αの6つのトピックスセクションで再構成。
トップページはパララックスかつ、各セクション毎に異なるモーションとギミックを備え、それぞれのトピックスセクションを印象的に見せながら閲覧者の方に「体験」を提供することに重点を置いたつくりに。Movieあり、SVGアニメーションあり、多数のギミックと時限性の仕掛けありの60周年(=還暦)という節目を記念するにふさわしいリッチかつ盛り沢山な仕様に。

2014-11_width308 (※画像)実際の誌面。2014年11月号

UI & UX

コンテンツ閲覧に必要なアクションは最小限に

パララックスを採用し、ほとんどのギミックがスクロールに応じて自動で稼働する仕様。
閲覧者はただスクロールしていくだけ、ただ眺めているだけでもおおまかな内容が把握できるようになっている。

パララックスページはスクロール量が多くなりがちなので、前のセクションや先のセクションへの移動は面倒なケースが多い。その為、サイドにページナビゲーションが常に表示されるように設置し、移動の苦も軽減。(※画像下)

60th_ui01 60th_ui01_2

スタートから期待感を

Movie+音楽とリンクさせたSVGによるラインアニメーションとエフェクトというリッチな演出をページトップに配置(スキップも可)。Movie終了後には各セクションへのスムーズスクロールのバナーが瞬きながら表示される仕様に。

60th_ui02

ストーリー性を意識した構成

「メンズクラブを振り返る」というメインタイトルをキーワードに、このキーワードを元にそれぞれのトピックスが繋がっていく構成に。 メンズクラブ様がこれまで重ねてきた「時」の流れをイメージして、ステージに見立てた背景の上を次々とコンテンツが駆け抜けていく演出に。
各セクショントピックスそれぞれも際立たせるために、キーカラーの設定とセクショントピックス毎に違った演出をデザイン。

60th_ui03

キーカラー

各トピックスには複数の記事があり、それぞれを行き来できるように構成されている。 現在どのトピックスの記事を見ているのか、直感的に理解しやすくする為、また記事どうしの関係性も感じてもらう為にもトピックス毎に色を定めて視覚的に分け、全ページを通してこのカラーを統一。
視覚的にそれぞれの記事、トピックスの繋がりを感じるようにデザイン。

  • (※上画像)トップページでのカラー。赤はトップページを示しています
  • (※下画像)記事ページでのカラー。次へ/前へといったページャーにもキーカラーを配置。次に閲覧する記事がどのトピックスのものかを示唆。
60th_ui04 60th_ui04_2

Pick up – トップページのみのトピックスとそのギミック

トップページをただの「リンク集」にしたくなかった(=トップページ自体も見る意義のあるものにしたかった)為、トップページにしか記載されていない内容を用意。

Topics03 メンズクラブ60年間の歩み

スクロールと共に次々の歴代の号が時系列で流れていき、クリック/タッチによってその詳細が閲覧できるつくりに。
オーバーレイ表示のまま前後の詳細へ移動できる仕様にすることでユーザビリティの向上も。

60th_ui05 60th_ui05_2

Topics06 60のワード

誌面デザインをほぼ忠実に再現。メッセージが次々に届く様をイメージしてスクロールと共に徐々に表示される演出に。
ビデオメッセージがあった2名の箇所はアイコンを表示。クリックで動画やスペシャルメッセージへのリンクがオーバーレイ表示される。

60th_ui06 60th_ui06_2

JavaScript Not Working!

当サイトでは閲覧の快適性向上と、あなたの操作に対し応答を行う為にJavaScriptを利用しております。
JavaScriptがOffの状態ではこれらの機能が動作しません。本来の状態で閲覧するにはJavaScriptを「有効」にして、ブラウザの「再読み込み」をお願い致します。

» 各ブラウザでのJavascriptをオンにする方法