世界のことを知りたい

読書習慣を付けたい。…マンガも本だよね?

パララックスデザインを勉強したいと思わせるサイトたち

パララックスデザインのサイトは数年前からありますが、ここ最近多く目にするようになってきました。「パララックスデザイン」とは、 Web デザインではレイヤーが複数あってスクロールでそれがポッと出てくるようなデザインのことです。

最近ではこれを「スクロールエフェクト」と呼ぶようです。こちらの方が分かりやすいのですが、名前が格好悪いですね。「パララックス」の方が響きがカッコイイ。

以前にもパララックスデザインのサイトはありましたが、ここ最近はパララックスというエフェクトを使うだけではなく、デザインにも凝っているようです。私がパララックスデザインを勉強してみたいと刺激を受けたサイトを3つ紹介します。

ITOKIN MUSEE - color magic

color magic | ITOKIN MUSEE f:id:arityk:20151024232944j:plain

このサイトはカッコいいです。下にスクロールしていくと横からモデルが現れ、スクロールするとそれが動きます。すごい! くるっと回ってファッションを見せてくれます。ファッションショーを見ているかのようです。

スクロールするのが楽しいです。スクロールを止めればモデルの動きも止まります。こんなやり方もあるのかと感心しました。動画だと巻き戻しが大変ですが、このサイトは上にスクロールするだけで巻き戻せます。

株式会社いいなダイニング

株式会社いいなダイニング f:id:arityk:20151024233032j:plain

スクロールする度に1ページごと動いていくようなデザインです。まずは絵を見せ、その後ちょっと暗くして次は文字を見せる。非常に整っている印象を受けます。白が多く使われていて清潔感も感じますね。

スクロールによって縦長のサイトを上から見ていくのではなく、スライドを1枚ずつ見ていくような形です。これなら1スライドずつ作っていけば良く、区切りができてデザインを作りやすそうです。

新潟月岡温泉 白玉の湯 華鳳

新潟月岡温泉 白玉の湯 華鳳 公式HP ~新潟県ホテル温泉旅館~ f:id:arityk:20151024233048j:plain

全体的に暗めで夜を感じさせます。黒に金色のアクセント、そして書体も手伝って高級感があります。背景画像を暗めにして、白い文字で中央に言葉を添える。こういうのはカッコいいですね。

最近旅館のホームページが格好良くなっています。「箱根湯本温泉あうら橘」は開いたときに背景に映像が流れていて鮮烈さを感じますし、「京都の大原温泉の湯元・京の民宿『大原の里』」も綺麗な写真を見せています。

パララックスデザインをちょっと勉強してみます

特に ITOKIN のサイトは私に良い刺激を与えてくれました。ウェブサイトを見ていて楽しいと思ったのは久しぶりです。

パララックスデザインはものすごく難しいことをしているわけではないので、私でも頑張れば何とかなりそうです。色々なサイトを参考に少し勉強してみたいと思います。