美味しい、楽しい、新しい！ペヤングのある日常 | ニコアンド　＜モバイルファーストサイト100選　その31＞

「ペヤングソースやきそば」といえばいちインスタント食品の枠を超え、もはや生活に溶け込んでいる国民食。定番でありながら挑戦的でもあるそのユニークな存在に敬意を込めて、〈niko and …〉ではコラボを展開！オマージュしたイラストをあしらったユニークな雑貨を日常に取り入れて、ペヤングをかわいく楽しんじゃおう。

前回に引き続き『niko and …』のコラボ商品のサイトです。

https://www.dot-st.com/nikoand/cp/202210product_zakka

前回も面白い仕掛けがたくさんありましたが、
今回もへぇ～～っていう点がたくさんありました。

構成

背景部分には、リンク等はありません。完全に背景です。
メインは真ん中配置ですが、
この画面、移動しません。

PC時はボタンとスクロールで、
sp時はボタンとスワイプで、
表示が次のブロックに切り替わる感じです。

外枠は動かずに、カップ麺の中身だけが
次々と変わっていきます。

へぇ～、こういうのもできるんですね。

そして、次々とめくっていくと、
左上のタイマーが減っていって、
スクロールし終わると、ちょうど3分がなくなります。
ゼロになったところで、焼きそばができた、というアニメが再生されます。

面白いですね。

上から順にスクロールして、一番下まで見るという
一連の流れを作っていますね。
商品一つ一つではなく、
ページ全体を見せたい意図が見えます。

そのためか、ページ内リンクはありません。
ナビも必要ないんでしょうね。

一応、フッターナビのようなものはありますが、
全部ページ外へ飛ぶリンクになっています。

配色

このサイトのカラーはこちら

商品に寄せた色使いですね。

フォント

日本語本文は　ヒラギノ角ゴシック
見出しに　Ronde B
英数字に　Adso　が使われています。

字間が狭くなると、ちょっと見にくいかなと感じました。

まとめ

とっても手の込んだサイトだと感じました。
初めて見ましたが、面白いですね。

こんなこともできるんだ、と勉強になりました。
（だいぶ製作費かかってんだろうな・・・（笑））