こんにちは。
エンジニアの宇野です！
今回はほぼ僕の趣味みたいなものです！笑
アパレル業界から退いた今もファッションサイトはチェックをしているのですが、その中でこだわっているなと思ったサイトをご紹介したいと思います！
まずは日本発のブランド（メーカー）から
DESCENTE ALLTERRAIN
スポーツをやっている方なら聞いたことがあるかもしれませんね！有名スポーツメーカー「DESCENTE」です。
DESCENTEの中でも「ファッション性」、「素材」、にこだわりを持って高級ラインとして展開されているのが「DESCENTE ALLTERRAIN」です。
WEBのアワードサイトにもよく取り上げらています。
WebGLを実装し、スクロールするごとに服の背景部分がなびいたように錯覚する動きになっています。
服のデザインとともに、サイトデザインも無駄がなく重要な部分のみフォーカスさせるための最大の動きなのだと思いました。
母体であるDESCENTEのサイトもカッコ良い動きのスライダーを実装しているので是非ご覧ください！
DESCENTE ALLTERRAIN
DESCENTE
TEATORA
今非常に人気のあるブランドです！有名セレクトショップで多く取り扱われています。
シンプルなデザインで素材、パターンにこだわったブランドです！
「ワークチェアで戦うクリエーターのためのワークウエアメーカー」というコンセプトのもと、デザインされています。
まさにエンジニアにぴったりなブランドですね！笑
服自体もそうですが、サイトデザインも非常にシンプルに作られています。
時間差でスクロールを追従している表現は最近多いですね！とても上品な印象を与えます。
サイト中部のアイテム紹介ではクリックすると畳まれて開いたような形でモーダルが立ち上がります。控えめな動きながら画面全体を使った大胆な演出ですね！
ブランドの持ち味をそのままサイトで表現されています！
TEATORA
sacai
日本のブランドながらパリでもコレクションを発表しているファッションブランド。
独特の素材の組み合わせが特徴的で、オリジナルで素材も作っています。
ワンスクロールでページがめくられていく仕様はこちらも最近のサイトではよく使われていますね。
サイトも派手な演出はないものの、癖のあるイメージから、ルックまで組み合わせるのが難しい素材をうまく組み合わせて世界観を表現しています。
派手なデザインながら綺麗にまとめたサイトですね！
sacai
kentamatsushige
こちらは新進気鋭の若手ブランドのサイト。
レディースブランドということもありサイト全体も清楚なデザインでまとめています。
トップ画面とコレクションページのイメージ背景は、スクロールとともに縦に揺れ、マウスも動きで横の揺れが出るようにアニメーションします。
こちらもWebGLでの実装。こだわりが見えますね。
服自体もロングワンピース、ロングスカートのドレープの効いたものが中心で背景のアニメーション、シンプルなデザインにしているのがとても伝わります。
kentamatsushige
ここからは海外ブランド
adidas
言わずと知れた超有名スポーツブランド。
最近履いている人をよく見ますね。「ULTRA BOOSTATR」のページです！
スクロールのアニメーション時のアイコン、テキストの演出、、、さすがです。。
ワンページごとに異なる気候をWebGLを使って演出しています。製品の特徴、特性を言葉だけでなく、とてもうまく視覚で感じられるように表現されています。
気候ごとの音声も入っており臨場感溢れる演出になっています。
また、シューズの隣に出てくるアイコンをドラッグなり、ホールドすると気候での特徴を見ることができます。
言葉ではなく視覚から伝わるのでよりわかりやすいですね！
adidas
converse
こちらも超有名ですね！履いてない人を見ない日はないんじゃないかってぐらい発見率の高いスニーカーブランド。
最近はスニーカー以外にもTシャツや、ヘッドウェアなどファッションアイテムにも力を入れているみたいですね！
１００周年記念アイテムの紹介サイトです。
とにかく動く動く！！説明箇所がありすぎ大変なので、とりあえず見てください。笑
日本がフューチャーされているのは嬉しいですね！
CONVERSE
G-STAR RAW
細身のロックなデニムでお馴染みのブランド。
王道のデニムのパターンとは異なる独特な切り替え、シルエット、ダメージが特徴印象的。
トップページからいきなりパンツのオンパレード！
マウスオーバーすると、なにやら動き出します！独特のシワの動きやポケットの開閉など、ディテールが一目でわかりますね。
動画でもなく静止画で服の動きの表現がとても上手に感じます。
クリックではなく、軽くホールドすることでシームレスにアイテムページに遷移し、マウスオーバー時と同じような動きを見せてアイテム説明をしてくれます。
サイト全体がシームレスになのと歯切れの良いアニメーションで飽きずに、見ていられますね！
クールな印象のブランドでしたが、サイトは少しポップな印象も受けます。程よいギャップです。
G-STAR RAW
CREATION OLIVER LAPIDUS
最後のご紹介です。
こちらは正直全然知らないブランドです。。。
アワードサイトで見つけて表現がおもしろかったので載せました！
全体の世界観はクリーンでミニマルな印象です。
とても面白いのはアイテム紹介ページです！
まずモデルの頭が表示され、スクロールしていくとモデルの頭から爪先まで回転しながらアイテムを３６０度見ることができます。かつ、スクロール中に小型の画面が表示され、イメージムービーが流れ服の動き、着た時のイメージがとても伝わります。
G-STAR RAWに続き、WEBでの服の見せ方の新しい表現だなと感じました！
CREATION OLIVER LAPIDUS
最後に
いかがでしたでしょうか？
WEBとしての新しい技術は少なかったかもしれませんが、それぞれのブランド持つ「個性」をうまく落とし込み、世界観を伝える演出は見事でしたね！
技術を磨くことはもちろんですが、アイデア次第で無限の見せ方ができるの個人的に、再認識しました。
記事を書くにあたって、日頃から見ているサイト以外にも様々なファッションブランドサイトを見ました。
ここで紹介していないサイト含め、生地や素材の開発しているスポーツブランドやアウトドアブランドは特に、WEB新しい技術を取り入れているサイトが比較的多いなと思いました。
普段からテクノロジーと触れ合う機会が多いのかWEBへの関心が強いように感じました。
今回ご紹介したサイトの全体の傾向として、フルスクリーンでのデザイン、イメージ・ムービーを大きく使っていたり、スクロールの遅延追従は多くのサイトで見られました。また、アニメーションスピードもゆっくりとしているのものが多く、一つ一つのコンテンツをしっかりと見せてようとしているのがうかがえました。一部サイトでは無限スクロールや、マウスオーバー時の画面全体への演出、スライダードラッグによるアニメーションなどユーザーに見てもらいたいことに対しての最適な表現がなされていました。
今回はあまり載せませんでしたが、いわゆるラグジュアリーブランドと言われるブランドは、サイトの表現の仕方がまた違っていました。こだわりがあるのはとても感じたのですが、インタラクティブな部分が少なくどっちかというと、ポスターなどの紙媒体からそのままWEBへ移したものが多くを占めていました。
服は、「見る」、「着る」、「触る」で、初めて良さが伝わるものだと思います。ですが、広告では「着る」、「触る」は不可能です。「見る」ということにどれだけの体験があるかで、リアルに「着る」に近づけるが変わってくると思います。そういう意味ではWEBとファッションの関係はとても近いものになっていくのではないかと思っています。
個人的には「adidas」が一番楽しく、わかりやすかったかなと思います！
iOS11のリリースでARkitが実装されたり、VRも浸透しつつあったりと、まだまだこれから取り込める技術がたくさんあります。そういった技術を応用して「着る」、「触る」をより身近にできるともっとファッションも盛り上がるのかなと密かに期待しています。
ECが先行し、商品を並べるだけのサイトが多い中（もちろんそれも大事ですが）、ブランド、一商品にここまでフォーカスしてこだわりを持って作り込まれたものがあるのはとても嬉しく思いました。
いつかこういうサイトも手がけてみたいものです！
またこういう記事を書きたいと思います。
