私たちが競争社会で人の目を引いて生き残るには、他の人よりさらに多くの努力が必要となります。これが現代の、オンラインというジャングルで生き抜くためのまず最初のルールです。ただし、それは必ずしも、何かを新しく作り直したり、人より多くのお金を持っていなければならないというわけではありません。
重要なのは、大きなアイデアを取り巻くすべてのあわただしさの中でも、細かい部分のディテールに目を向けているかということです。それによって、違いを生み出すことができるのです。たとえ基本的な構造と従来のデザインをしたごく普通のWebサイトであったとしても、目立たせることは可能です。それには、ユーザー体験を向上させるために考え抜かれたちょっとした機能を取り入れればよいのです。多くのクリエイティブがすでにこの方法に目を向けているので、現代のWebサイトには小さなソリューションであふれています。なので、ちょっとしたトレンドはさまざまなところで常に目にすることができるのです。
小さいながらもスマートで印象に残るトレンドの１つは、リキッドエフェクトです。その特色は、静かに機能するという点にあります。ユーザー体験を向上させ、全体的なイメージを強化します。そして、滑らかでエレガント、さらに洗練されたイメージを与えてくれます。
Davide Perozzi / Nature Elixir / Nesatex
Davide Perozzi氏の個人ポートフォリオ、Nature Elixir、およびNesatexを見てみましょう。これらの３つの例は、さまざまな角度からの傾向を示しています。
Perozzi氏は、水の動きのイメージを利用して、自身のWebサイトのキャッチコピーを、自然な形で強調しています。強調していることすら気づかないほどです。それにもかかわらず、注意を引くのに十分な効果を発揮していて、すっきりと整ったインターフェイスに魅力的なポイントを与えています。また、アーティストの独創的なクリエイティビティを反映すると同時に、トレンドを追い続けるPerozzi氏が、ユーザーを圧倒することなく、それを的確に実現できる人物であることをうまくアピールしています。
Nature Elixirのチームは、スライダーの１つに水面のイメージ効果を利用しています。マウスのカーソルで自由に遊んでみてください。さざ波を起こしたり、水の跡をつけることができるでしょう。水面の静けさを乱すこともできます。このソリューションは、プロダクトそのものを際立たせ、そのイメージ作りにも役立っています。
Nesatexの場合、液体のようなムーブメントは、ヒーローエリアに個性と独創性のあるタッチを与える単なる贅沢とも言えます。スライダーにも搭載されていますが、ここではスライドにダイナミクスをさらに加え、スライド間の動きを豊かに表現する役割をしています。
eumRay Academy
リキッドエフェクトはあらゆるところで使われています。最近ではWebサイトのアーティストの間で非常に人気があります。その使用範囲は、目立たせるためのものであるにもかかわらず、ヒーローエリアの背景としての使用だけにとどまりません。スライダーを次のレベルにアップグレードするのに理想的な候補であることは既におわかりでしょう。 eumRay Academyを見てみましょう。このソリューションでは、幻想的なエフェクトにより、ユーザー体験全体に効果をもたらしています。
eumRay Academyは、レイアウトと色の点で従来のデザインと変わりありません。しかし、リキッドエフェクトにより、他との違いを際立たせています。インターフェイスが興味深く、魅力的なものとなっています。そして同時に、このテクニックは商業的にも通用するイメージを備えています。つまり、eumRay Academyはリキッドエフェクトを、スクロールのセクションを表示するための主なエフェクトとしてスライダーで使用しています。
Fleava / Kombu Drinks
FleavaとKombu Drinksの制作チームは、いとも簡単に上品な美学と奇抜さを表現しています。どちらの場合も、スライド間の素敵な「移行効果」として機能することで、基本となるカルーセルをオリジナルで魅力的なものに見せています。
Ruya Digital
トランジションエフェクトに関しては、ハンバーガーボタンの後ろに隠れているすべてのスライドアウトナビゲーションメニューに有益な傾向が見られます。Ruya Digitalをわかりやすい例として見てみましょう。メインメニューを開くたびに、上から下に向かって流れる特別なレイヤーが表示されます。
非常に滑らかで微妙な動きを伴う、美しいレトロなグラデーションの背景です。前面と背面をくっきりと分離しながらも、すべてを巧みに結び付けています。
Balconi / Lukas Jardin
リキッドエフェクトは、魅力的なひねりとして作用させることができます。BalconiとLukas Jardin氏の個人ポートフォリオを参考にしてみましょう。
Balconi公式Webサイトの製作チームは、このソリューションを使用して、サイトのとても単純なデザインにスパイスを加えています。ご覧のとおり、背景は２つの水平セクションに分割されていて、まず上部が動き始めます。そして、その動きはそれだけで完結するのではなく、全体の美しさをより際立たせるように非常に穏やかで繊細です。このソリューションは、ユーザーが何に注目すべきかを、控えめながらも確実に伝えるだけでなく、全体のイメージそのものを際立たせています。
Jardin氏は、彼の独創的な個人ポートフォリオのトーンを水の動きと一致させています。ヒーローエリアのスライダーに配置された画像に適用することにより、訪問者に良い第一印象を残すことができます。過度におおげさでもなく、邪魔にもならず、程よく楽しい印象を与えています。
このエフェクトはWebサイトの他の部分とうまく連携し、さらに個性的な魅力を加えます。これは、画像ベースの通常のカルーセルを、特別で個性的なものに感じさせることに成功した、素晴らしい例です。
Azure The Oceanic / Cobra Ultra Swipe
サイトのホームで水の効果を感じられるのは、言うまでもなく水にヒントを得たテーマのデザインです。Azure The OceanicとCobra Ultra Swipeを見てみましょう。
１つ目のWebサイトは、名前の通りです。水をテーマにした物語が始まることを、その名前から伺い知ることができます。つまり、水の動きを巧みに再現できなければ、間違いなく何かを失うことになるとも言えます。Nature Elixirのように、このWebサイトでは動的な表面を持つ小さな遊び場に招待された気分になり、水の表面にさざ波を残すこともできるのです。それは楽しく、魅力的な体験となることでしょう。
Cobra Ultra Swipeに関しては、その名前からは背後にあるストーリーを読み取ることはできませんが、ヒーローエリアですべてを物語っています。このWebサイトは水中ゴーグルを専用に取り扱うサイトで、製作チームが水をモチーフにしたことはある意味当然と言えるでしょう。ヒーローエリアのみならず、Webサイト全体で見られるリキッドエフェクトは、手にぴったり合う手袋のように、イメージとフィットしています。
「水」の表現がもつ魅力
人の心をひきつける、この小さなトレンドの磁力は、巧みに作られた水の動きのイミテーションに起源にあります。誰もが知っている通り、人々に永遠に与えられるものが３つあります。「水」はそのうちの１つなのです。
リキッドエフェクトは、ユーザーの心をつかむために使われるものです、そしてそれは間違いなく、人々の心を魅了するでしょう。ほんの少しリキッドエフェクトを加えるだけで、プロジェクトの質は向上し、忘れがたいユーザー体験を生み出すことにつながるのです。
