今日のデザイン#068 自由なパララックスエフェクトが楽しい!イランのブランドザクロ「NARNI」の公式サイト

イランの農場GREEN FIRMの人気ブランドザクロ「NARNI」の公式サイトです。
「NARNI」の紹介と、ジュース、シロップ、ジャムといった関連商品を紹介しているサイトで、ザクロの色でもあるマゼンタの同系色でまとめられた配色設計によりスタイリッシュな印象を受けるサイトです。

[ via Narni – We make your life tasty ! ]

NARNI-001
ページに遷移すると、まずは全画面で「表紙」的なページが表示されます。背景では動画が使われており、マゼンダのフィルターを通したザクロの映像が流れています。

NARNI-002

NARNI-003
画面の指示に従いスクロールすると、画面中央から円形のエリアが拡大されていきます。
パララックスエフェクトの一種ですが、画面中央からの拡大表示により、”前後””奥行き”を感じるスクロールになっています。

NARNI-004
そのままスクロールを続けると、製品紹介のセクションでは、エリア全体が右から左方向へスクロールします。
ユーザーは一定の同じ操作をしていますが、エリアによりエフェクトが大きく変わるため、触っていて楽しいサイトです。

NARNI-005
左上のメニューを押すと、メニューが画面全体に表示されます。
(メニューの背景は微妙に透過しています。)
基本的に「白背景&アクセントにマゼンダを使用」というルールで構成されているサイトに対し、メニューは「背景色がマゼンダ」背景色と文字色が反転している関係にたっています。
そのため、メニュー開閉にダイナミックさがありますね。

レスポンシブデザインが採用されているので、スマートフォンでも綺麗に表示されます。
NARNI-006

パララックスエフェクトも問題なく動作しています。

NARNI-007

NARNI-008.PNG

全画面表示やスクロールのパララックスエフェクト自体は決して新しい表現ではありませんが、「アニメーションの種類(方向)がページ途中で大きく変わる」という仕掛けが非常に印象的で、サイト作りの参考になるのではないでしょうか。

[ via Narni – We make your life tasty ! ]

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です