MEN’S CLUB様 60周年記念 特設ページ
http://sp.mensclub.jp/fashion/60th/Back Stage!
パララックスにするなら、自前で
個人的にではありますが、「こうしたい」という表現や動きがプラグインを使用した際に全然思い通りにならないことが多々あります。
ことパララックスに関してはそれが顕著で、弊社のWebサイトでもパララックスを使っていますが、様々なプラグインがあるものの、どれも思い通り演出を再現できなかったりしました。
結果的にパララックス箇所のすべてのスクリプトを自作したのですが、以来、ちょっと凝ったことをしたければ自分でつくったほうが、より好みのものにできるという考えを持ちました。
今回もパララックスを使うと決めた時点でプラグインを利用するという選択肢は無く、初めからすべて自作するつもりでいましたが、
結果的にそれが功を奏した部分もありました。
製作の過程で、追加があったり等でどんどんスクリプトが肥大化していくことがあります。
今回の案件でも、様々なJavaScriptを使用していますが、それらすべてをプラグインを使用した場合に比べて、データ量は半分以下で済ませられています。
全体のデータ量が膨大であればあるほど、その差は大きな差になります。
スクリプトの記述量が多いということは、それだけ処理が多い（＝ページロードも遅くなる）。
ペライチページのように、ただでさえ重いページであれば、尚その差は非常に大きくなります。
音作りに最もこだわり時間をかけたMovie編集
動画そのものは、元々エディットされた複数の動画をつなぎ合わせたくらいですが、場面転換時に入るフラッシュと音。某映画のメイキングやNG集などでお目にしたことがある方もいらっしゃるかと思います。
この表現を再現する為に、効果音を作成し、実際の映像を見ながら、フラッシュの強度と時間もほぼ同じに合わせて作成しました。特に音に関しては実際の音と遜色なくなるまで何度も何度も直したほどの力の入れようです。アシスタントさんの力作です。是非それも踏まえて改めてご覧いただけると幸いです。
ちょっとした裏話…
実はこの製作にあたり、あまり製作期間に余裕がないにもかかわらず一週間をまるまる棒に振るというとんでもない暴挙に出ました…。
というのも、three.jsを用いてモバイルでも閲覧・操作可能な3Dのトップページを作成していたのですが、キービジュアルに用いていた画像のいくつかが版権の関係上Webでの使用を認められていないものを使用してしまっていました。
それらの画像を削れば良いだけの話なのですが、それらがすべて揃っていてこそ「意味」が生まれるデザインだった為、一週間ほどかけて製作したビジュアルとプログラムでしたが、没にした…という経緯があります。
そこからは（当然のごとく…）地獄のような追い込みが待ってはいましたが、現在のデザインのほうが、より趣向にそうものになったと思える為、結果的には没にしてよかったなと思えています。
誌面デザインから少し離れて
以前に語ったことがあるかもしれませんが、私は自分以外のデザイナーさんに大変敬意を持っている（中でもエディトリアルデザイナーの方には特に）ため、なるべくその方が一度つくられたイメージから逸脱しすぎないようにしたいと考えています。
改めて再構成する場合も、可能な限り大切にしつつイメージを壊さないようにと考えてデザインするのですが、今回の製作に関しては記事ページは誌面デザインを踏襲したものの、トップページに関してはほぼ一から私の裁量でデザインさせていただきました。
60周年−還暦という大きな、一度しかない節目の特別な製作を、弊社に任せていただけたことへの最大限の礼儀として、今自分たちにできるすべてをぶつけさせていただこうという気持ちの表れです。
「下層ページ」も充実したものに
トップページと各記事ページは関係性上、記事ページが下層ページ（トップからリンクしている関連ページ）に当たりますが、内容として考えると「メインコンテンツ」です。
実誌面上でも充実した内容だけに、読み応えもあり、これまでのMEN’S CLUB様の歩みや歴史を振り返りながら楽しめるものになっています。
各ページは実誌面を模した形式にしてあり、誌面を読んだ方も、その感覚をまた感じていただけたらと考えています。
ところどころ、Webならではの「動き」や遊び心も加えさせていただきました。それぞれの記事も是非、じっくりと味わっていただけると嬉しく思います。 どれも大変素晴らしい内容です。
Author's Comment
Designer: 深井 学
「サイト」と各「ページ」の関係性を考える
規模の大きなサイトでは、今回のような「サイト内に多層ページを作成する」というケースも多々あります。
その中で、特に内容としてサイト本体から独立したものであれば、その多層ページ群として見た時でも「一つのサイト」として成り立つように構成するのが妥当ではないかと考えています。
また、トップページは大抵の場合力が入っていたりするため華やかです。華やかゆえに「メイン」と捉えられるところもありますが、サイトにおいては「あくまでもインデックス（＝索引）」です。
しかし、トップページには非常に力が入れられているものの、下層ページが作り込み的にもデザイン的にも軽んじられているケースは少なくありません。
この「落差」はあまりつけるべきではないと考えています。
トップでの期待感を裏切ることにもなり、閲覧する側としては落胆してしまいます。また、内容としてメインになるならば、相応の扱いをすべきと考えます。
今回の製作においては、仕様上トップのインパクトがあまりにも強い為、この落差が少し強く付きすぎてしまった感は否めませんが、下層ページも動きが少ないゆえにおとなしく見えるものの、実は結構細かいところまで作り込んでいます。是非、そういったところも目を向けてご覧になっていただけると幸いです。
これまでで最も光栄な製作
どの製作であれ、携わらせていただけることは大変光栄です。ただ、その中でもアニバーサリーを任せていただけることは格別であり、なおかつそれが老舗のもので「節目」のものであるならばそれは特別なことと考えています。
「MEN’S CLUB」様という雑誌は自分自身長らく購読していた雑誌でもあり、その思い入れのあるものの「還暦」を祝うという特別なイベントに、自分自身も大きく携われたことを大変嬉しく思っています。
まだまだ至らないところがあり、止むを得ず削ったものもあり、要望すべてに応えきれなかったところもありましたが
幾度もの直しにも大変丁寧にご指導いただき、完成までお付合いいただけたことを心より感謝申し上げます。
製作の過程で私自身のMEN’S CLUB愛が暴走することもありましたが…苦笑
それだけ特別な思い入れのある製作をさせていただけたと感じております。
この素晴らしい機会を下さった担当者様に改めてこの場をお借りして、厚くお礼申し上げます。