魅力を引き上げる！Webデザインにおけるスライダーの革新方法10選

3,895 views

読了時間 : 約4分11秒

あらゆるウェブサイトには、フルスクリーンのスライダーが含まれているようです。これは、機能的な製品やポートフォリオ部分などの重要なものに迅速にユーザーの関心を引き寄せるように確立された方法です。スライダーを使ったデザインを次のレベルに引き上げるのに役立つ10のアイデアをご紹介します。

1.奥行き感覚を与える

Webデザインにおける奥行き感は、視差効果に広く関連しています。この技術はますます使用されるようになってきており、その目新しさを失ったように見えますが、他の流行の機能といくつかのオリジナルのソリューションとの組み合わせで、信じられないほどの結果をもたらすことができます。 Matthieu Tourdesの個人的なポートフォリオの視差に頼るスライダについて考えてみましょう。

個々のユニットとして、これらの2つは退屈かもしれませんが、それらは一緒に使うことで非常に良いバイブレーションを生みます。このコンポーネントは、生き生きとしていて、興味をそそられ、野心的で魅力的です。また、Matthieuは配色においても非常によくデザインしています。

2.Three.jsのスプリンクルと共にあるEnliven

あなたがメリットをテストすることを恐れていない場合、このアプローチはあなたのためにあります。Three.jsは、それを利用しないことが罪であるといえるくらい非常に多くの機会を隠す強力なライブラリーです。確かにブラウザの互換性と明度が欠けています。しかし、正しく使いこなせれば強力な武器となるでしょう。

たとえば、Booreilandのスライダーには目を引く液体のようなアニメーションが備わっています。それは最初の１秒から関心を引き寄せ、去らせようとしません。

3.芸術的アプローチを採用する

イノベーションと野心を吹き込む以前の方法とは異なり、これは旧式のツールキットです。 WebGLと人工環境の時代でさえ、伝統的な芸術的アプローチは、常に独自の魅力、本物の魅力と不可解な機能を備えています。

I LIKE TOFUのウェブサイトのホームページのスライダーを見てください。魅惑的な装飾と絶妙な雰囲気が魅力的です。それぞれの美しい場面には動きがあります。独自の円形ナビゲーションもスマートなタッチです。スライダーは素晴らしく見えます。

4.角度をひねる

私たちは、スライドが水平または垂直方向に動くカルーセルに慣れています。大多数の開発者のためのこれらの2つの軸が唯一の方法だと思われます。しかし斜め方向に訪問者を導くことを止めるものはありません。

Ufomammotは角度を適切にねじる方法を示します。もちろん、それは古典的なカルーセルではありません。スライディング技術はその核心にあります。それぞれの動きは予期しない方向にあなたを連れて行きます。ユニークなデザインと一緒に、それは地球外にいる気分になります。

5.カラフルにする

色は時には無視され過小評価される強力なツールです。気分を高め、アクセントを置いて、デザインをフレッシュにしてくれるような力を持っています。一般に、それは小さな役割ですが、それが全体の美学の根底にあるLaborfitのケースではありません。

各スライドには、それぞれに割り当てられたトーンがあります。コンポーネントの放射状の形状とスムーズなアニメーションは、コンテンツがある中心に焦点を当てるだけでなく、興味深く例外的なものとなります。マテリアルデザインに触発された色の選択は、デザインをさらに強化します。

6.トランジションに焦点を当てる

時には、良いアイデアが不足していると、全体の構図が壮大なものに変わることがあります。たとえば、出入り口を改善するなど、小さな変更から始めることができます。

ワークショップの背後にあるチームは、スライド間の慣習的でない移行が、ユーザー体験を容易に向上させ、コンポーネントをアクションの中心に置く方法を示しています。効果は何か特別なものではありませんが、際立っていてあなたが必要とするものです。さらに、タグライン「スクロールして発見する」を説明して、スライダの複雑な環境に役立っています。

7.ブロック露呈効果を使用する

従来の解決策に続き、あなたが入口のためにいかなる種類の効果を気に留めておくことができない場合は、いつもブロック露呈効果のようなトレンディーなものを試すことができます。後者は最近人気が高くなっています。ある種のスケマティック・ボックス様式のコンテンツを表示することは、本当に魅力的です。一方で、それは真剣さと堅実さをもたらします。他方は遊び心の微妙な感触を加えています。