■クリエイティブ部メンバー

• 長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
• 須田：UIデザイナー／ゲーム・ドラムに日々没頭
• 古川：PdM／クリエイティブ部マネージャー
• 飯野：PdM／カドベヤのお兄ちゃん、ゲーム・アニメ・SEOがすき
• 山口：Webディレクター／カドベヤ新メンバー、Apexにハマり中

🔳　今週のピックアップ【インディゴ白書】

UIデザイナーの須田によるデザインコーナーvol.35。

今週の須田的ベストデザインは「浮世絵×WebGL～絵巻物が伝えるブランドストーリー｜【インディゴ白書】」。

引用元：https://45r.jp/ja/indigo-hakusho/

須田(UID)：

 今回紹介するのは、デニムで有名なアパレルメーカー”45R”の特設サイト『インディゴ白書』です。

インディゴ※に込められた想い・ストーリーをコンテンツにしたようです。

※インディゴ：鮮やかな藍色や青紫系の色

長津(COO)：

サイト名だけで雰囲気あるな～。

須田(UID)：

全体として、巻物を開くようなスクロールエフェクトになっていて、和紙っぽい質感の背景と浮世絵風のイラストが特徴ですね。

あと、縦書きのテキストが使われていて日本の伝統的なデザインをWebで表現しているのがすごい…。

長津(COO)：

巻物がスクロールするってこと？

須田(UID)：

そうなんです。通常の縦スクロールではなくて横に移動していくんです。

本物の巻物を開いていくような疑似体験ができちゃいます。

↓

↓

長津(COO)：

それはおもしろいな。WebGLとか使ってるの？

須田(UID)：

パララックス効果を活用した2Dアニメーションですね。

ただ、巻物部分の3D処理にはWebGLが絡んでるかも。

須田(UID)：

全体の和風テイストに合わせて「自然な動き」にこだわってる感じがしました。

長津(COO)：

そういう細かい演出って、見る人は意識してなくても印象に残るよな。

須田(UID)：

ですね。スクロールエフェクトも普通のパララックスじゃなくて、ちょっと「手で引っ張る」ような感覚があるんです。スマホで試したら特に顕著で、軽くスワイプすると巻物を開くようにじわっと動く。

飯野(PdM)：

一般的な「スッと流れる」スクロールとは違うんですか？

須田(UID)：

勢いよくスクロールしすぎるとちょっとブレーキがかかる感じ。

だからこそページを「めくる」感覚があるんですよね。

長津(COO)：

めっちゃ触りたくなるやつじゃん。

須田(UID)：

そうなんですよ～。さらに、そこに合わせて背景のテクスチャが微妙に変化するんですよ。

たぶんCSSで背景を動的に切り替えてるのかな？

単なる背景画像じゃないのがポイントですね。

長津(COO)：

単なる装飾じゃなくて体験そのものをデザインしてるって感じだね。

須田(UID)：

最近のWebデザインって見た目の美しさだけじゃなくて、「触ったときの気持ちよさ」が重要視されてるな〜と改めて思いました。

長津(COO)：

サイトを触る楽しさって意外と重要だよな。

須田(UID)：

ですね。このあたりのインタラクション設計もすごく勉強になりました。

須田(UID)：

話を巻物全体の世界観に戻すと、全体的にイラストのタッチが浮世絵風で、登場するキャラクターがみんなジーンズを履いて、まさにアメリカ大陸を目指してるような感じがしますね。

飯野(PdM)：

単なるブランディングではなく、物語を語る要素としてデザインが機能してる感じか～。

長津(COO)：

それはおもしろいね。コピーとかも和テイスト？

須田(UID)：

はい。「色落ちのあはれ」とか歌舞伎っぽい言い回しが使われていて、ブランドのアイデンティティを強く感じますね。

長津(COO)：

細かいところまで世界観を作り込んでてすごいな。

須田(UID)：

もっとデザイン観点で話すと、Webデザインというよりは紙デザインに近い表現が多いですね。

例えば、ハンコ風の装飾やタイトルの装飾の使い方も完全に和紙のデザインです。

長津(COO)：

日本の伝統的な紙のデザインとWebの融合って珍しいよな。

須田(UID)：

しかもクリックすると実物のジーンズの写真がポップアップするんですけど、そのバツボタンのデザインも和の要素を取り入れてますね

長津(COO)：

徹底してるな！

須田(UID)：

スマホ版もかなり考えられていて、基本的にはPC版のレイアウトをそのまま活かしながら、表示範囲を調整することで最適化されてます。縦書きのレイアウトが電子書籍みたいな感覚で読めるんです。

長津(COO)：

じゃあスマホでも違和感なく見れるんだ。

須田(UID)：

はい。スマホだとどうしてもコンテンツを縮小するだけで対応するサイトが多いですけど、「読ませる」デザインということで、ちゃんとユーザーがストレスなく楽しめる設計になっているのがすごいですね！

長津(COO)：

世界観を壊さずにUXも考えられてるのはすごいな。

今日はここまで！

次回も新しいトピックでお会いしましょう！

〆