![見出し画像](https://assets.st-note.com/production/uploads/images/92712947/rectangle_large_type_2_24f56a5451b11e62166476d197bc7a77.jpeg?width=1200)
【デザインニュース】vol.5 パララックス・スクロールで遊びゴコロを。
=================================================
長津:カドベヤCOO/弊社WEBディレクターの長(おさ)的存在
須田:UIデザイナー/ゲーム・ドラムに日々没頭
竹田:WEBディレクター/サウナのためなら全国に出没
森山:WEBディレクター/無類のガジェット好き
古川:WEBディレクター/クリエイティブ部マネージャー
=================================================
🔳 今週のピックアップ 「VERMILLION」
UIデザイナー須田によるデザインコーナーvol.5。
今週の須田的ベストデザインは「VERMILLION(ヴァーミリオン)」。
![](https://assets.st-note.com/img/1670298772201-ga3Vr3b7wx.png?width=1200)
須田:ジュエリーを販売しているブランドのサイトになります。こちらのサイトは、「WOTD(Website of the Day)」という賞を獲得したサイトで、日本の制作会社が制作しました。
長津:すごいね。しかも日本人が作ったサイトで。
須田:調べてみたら渋谷区にオフィスがある制作会社でしたね。うちとご近所さんのようです。
長津:行こうよ。今から行こうよ。
須田:行きますか?(笑)「ヴァーミリオン見ました!」って言って(笑)
長津:このサイトどう思った?
須田:海外の流行りにすごく敏感な印象を受けたのと、後は純粋にプロダクトや商品が強いなって。
長津:海外の流行りって?
須田:えーっと、大きく書体を使って、パララックスな感じや不揃い・ランダムな感じですかね。
長津:なるほどね。このサイト、トップページの下部にInstagramのコンテンツも入ってるね。デザイナーが作りたい感じの、削ぎ落とされた情報のデザインだよね。
![](https://assets.st-note.com/img/1670298871989-psDQ7Sa9yi.png?width=1200)
🔳 パララックス・スクロール
長津:商品ページもちゃんときれいになってるんだね。
須田:左右でスクロールが固まるタイミングが別だったりしますね。
長津:情報の要素としては、普通のECサイトの要素がそのまま入ってるね。
須田:ですね。これ、12星座の全部モチーフがあるんですよ。純粋に欲しくなっちゃった。
長津:この商品ページ、スクロールで商品を見せていくスタイルが理にかなってるよね。
長津:指で横にフリックさせていくスタイルは直感的じゃない感じするけど、縦にスクロールしていくこのサイトはダラ見したくなるよね。
須田:ですよね。スクロールの方が誤動作とかもきっと少ないですよね。
長津:スマートフォン表示時のトップページだと、どういう表現になるの?
須田:スマートフォン表示時だと、横に入ってたメインのコピーが縦書きになるみたいですね。
須田:すごい!写真がちゃんとしてないと、こうは表現できないですよね。
長津:こういうブランドページだと写真力がすべてで、おそらくスマートフォン表示から作ったね。
須田:でも、スクロールからのバラケさせかたからするとPCから作ったようにもみえる。スマートフォン表示は、PCを一旦全部作って後は削れば良いので。
長津:辛口智子先生的には、どう評しますか?
越智:いつから辛口になったんですか?
長津・須田:(笑)
越智:結構日本のシーズンモノのサイトに多いですよね。左右ずらしてっていう見せ方とか。
長津:そっか、コンセプトがあるモノを伝えやすい構造になってるのか。
越智:モデルにすごいフォントを重ねちゃって大丈夫かな?って心配するデザインではありますね。
長津:確かに。モデルさんから怒られそう。
越智:そうなんですよね。まあバナー専用に撮ってるのかな。とはいえそこが大胆ですよね。
![](https://assets.st-note.com/img/1670299334278-kHM2iKuFFs.png?width=1200)
長津:どうですか、ファッションリーダーの森山さん。
森山:うーん…そうですね。あんまりこういうデザインは好みじゃないといったら語弊があるかもしれないのですが、ぱっと見た感じ、商品がバラバラで探せないんですよね。
長津:なるほどね。
森山:スマホ片手にずっと見てるんですけど、どこに何があるかが分かりずらいですね…。
長津:商品自体は1万円台とかもあるし高すぎではないよね。
須田:そうですね。
長津:24金にしちゃうと20数万とか高くなっちゃうんだろうけど、1万円台の商品とかは若者がちょっと気の利いたプレゼントとしてあげることもできそうだよね。
須田:ですね。やっぱり若者向けと考えると、遊び心のあるサイトにふりきったデザインなのかな。
長津:PCの方で拘りというか遊び心のあるモノって…どうせ若者だからスマホばかり見るんだろうなって気がするけど、ちゃんと抑えてるところは抑えてるね。ブランドとして、PCのデザインはしっかり作るって大事だよね。
須田:こちらのサイトは「ナイン・インク」さんという会社が制作されたみたいですね。
長津:代々木上原じゃん。日本の会社も追っかけて友だちつくろうよ。
須田:日本もかなり頑張ってると思います。外国の流行で英語を主体にして、日本語を入れるのってすごく難しいと思うんですけど、レイアウト含めて絶妙なバランスでデザインされていますね。
長津:「Type-S」選び大事だよね。
須田:大事だと思います。
長津:海外のブランドなのか解らないけど、日本ではこの「Type-S」でいきましょうってほぼ全てきまっちゃうじゃん。日本語からローカライズするのって、難しそうな気がするね。
須田:日本語の方が、フォント選びはデザイン段階で割りと大変ですね。(笑)
長津:そうだよね、ナイン・インクさんお近づきになりたいな…!
じゃあ今日はここまで。アディオス!
〆