デザイン

デザイン

ユーザーエクスペリエンス向上!人気カーソルの使用例をご紹介

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、Large Cursors: Pointing the Way Towards a Better Web
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

271 views

読了時間 : 約4分1秒

最近、マウスポインタでさまざまな実験が行われています。カーソル効果やウェブデザインでの円形カーソルの使用に関する記事もあるくらいです。多くの人が、カーソルというコンピュータースクリーンを横切って自分の動きを示してくれる小さな装置に夢中になっているように感じます。間違いなく、この話題に釘付けです。

 

多くのカーソルがありますが、それらのほとんどは目的が単にインパクトを与えることの単なる装飾的なものです。しかし、この分野には、プロジェクトのインパクトだけに貢献するのでなく、ユーザーエクスペリエンスを向上させることを目的としたものもあります。みてみましょう。

 

より大きなカーソル – より良いユーザーエクスペリエンスへ

 

これには2つの重要な点が関係しています。

 

まず、ほとんどの場合、カーソルの開発者たちは矢印を捨てて円を選んでいます。円形マウスカーソルへのトレンドは避けられないもので、これにはもはや驚きはありません。

 

そして2つ目は、マウスの動きです。これはシンプルです。カーソルがロゴ、リンク、ソーシャルメディアのアイコン、ナビゲーションなどの重要な領域に入ると、それらの重要性を強調するためにサイズ、色、透明度を変えるという風に、目立つものになります。

 

さまざまな方法でインターフェイスに役立ちます。

・見た目が少し面白くなります。

・平凡なインターフェイスから脱却できます。

・ユーザーにとっての操作性を改善します。

・ウェブサイトの閲覧をより直観的にします。

 

これは新しいことではありません。ナビゲーションリンクやボタンなどのウェブサイトの細部をアクセスがあったときに、目立たせるためにホバー効果を使用することにはもう既に慣れているので。

 

しかし、下にご紹介するものはもう少し進んで、カーソルを別の側から強化するようにしています。アイデアは素晴らしいものなので、いくつか例をみてみましょう。

 

Everest Agency

 

トレンドの代表例としてEverest Agencyをまずみてみましょう。

 

最新の技術で構築され、洗練されエレガントに見える典型的なウェブサイトです。良い印象を生み出す数々の小さなスライダーがあります。ウェブサイトはスタイリッシュな機能が満載です。

 

マウスカーソルに関しては、通常の矢印ポインタで、ねじれがあり、周りはシンプルな円で囲まれています。カーソルがメニューの領域に当たると、丸い尾のサイズが大きくなり、ポイント部分がスポットライトに照らされます。

 

Media Tree

 

Media Treeは非常に清潔で控えめな美学からできています。ランディングページは新鮮でぱりっとした非常にフレッシュな良い感じがします。ここでは、マウスカーソルの役割を果たす中央が赤い円が使われています。ウェブサイトのナビゲーション要素だけでなく、コンテンツにも影響を与え、さらに、必要なことをユーザーに示すための小さなヒントも提供されています。現代のようなミニマリストの環境では、このようなおふざけは医者がやるように命じたようなものに感じます。

 

Happy Online

 

Happy Onlineは幾何学的な魅力がある美しいサイトです。カラフルで比較的大きな三角形、ボックスやストライプがデザインを華やかにします。そこに円形の軌跡を持つカーソルが完全に溶け込み、各リンクでホバー時の変化は目をひきつけます。シンプルでエレガント、そしてフレンドリーです。

 

Uptec

 

前の例と同じように、追加機能を持つ円形カーソルの使用は、Uptecでも行われています。上部中央のヒーローエリアに散らばっている巨大な白丸に注意してください。退屈に見える部分を救ってくれています。

 

縦線と白抜きのタイポグラフィもあります。 ここでは、丸いカーソルがぴったりです。 チームはまた、動きが見える小さな追跡装置のようなものもカーソルに付け、ロゴ、リンク、言語スイッチャー、画像の上にマウスを移動すると、サイズ、透明度、および動作が変わるようにしました。

 

De Jongens van Boven

 

前の例では、トレンドは楽しい付加のようですが、De Jongens van Bovenの場合は必要不可欠なものです。 ウェブサイトには、たくさんのレイヤー、幾何学的な詳細、そして装飾的な効果がある視覚的に重めのヒーローエリアがあります。そこでは容易に目で追える比較的大きいサイズの目立つポインターは必需品です。

 

ここでは、1つ目は小さくてしっかりしているのに対し、2つ目は大きくて半透明の2つの円を組み合わせたマウスカーソルがあります。サイズを変更し、ナビゲーションコンポーネントを強調表示します。スライドに応じて色も変わり、デザインの一貫性をさらに強めてくれます。

 

Wewo

 

ご紹介したほかの例と同じように、Wewoにも複雑なヒーローエリアがあります。変わったアニメーションなどはありませんが、レイヤーがカーソルの動きを目で追うのを少し困難にしてしっています。ここで採用されているカーソルは完璧に合っています。

 

ここでは2つの注意点があります。まずは、チームがさまざまなサイズのカーソルを使用して重要な領域に当てたときにそれを明示することです。 そして第二に、遊び心のあるもの赤外線効果です。

 

Dominic Berzins

 

小さな丸がウェブサイトに何の違いももたらさないように感じたら、それを百倍に拡大して注目を集めるなど、常に極端な対策をとることもできます。Dominic Berzinsは優れた個人用ポートフォリオでこの極端さを示しています。

 

このウェブサイトの美しさはミニマリズムが特徴です。こういったサイトは重要な要素を強調するために、あまり余分な助けを必要としません。しかしカーソルを人目を引くものにすることを決めて、使用しています。

過度だと考える人もいるかもしれません。しかし、それはここでのぴったり適合し、全体的なテーマに貢献するだけでなく、それはまたクールな要素としても役に立っています。

 

大きくそして大胆に

 

この傾向はエキサイティングで有望なものです。重要なのは、それが実用的であると同時にエンターテイメントであるという事実にあります。それはユーザーエクスペリエンスに確実に役に立っています。

 

最近の調査によると、携帯電話やタブレットでインターネットを閲覧する人が増えているので、マウスカーソルは必要不可欠なものであるとは言えなくなってきています。 しかし、いまだにパソコンやノートパソコンを好む人がいるでしょう。 したがって、カーソルは常に独自の活躍の場所を持つことになります。

 

大きなカーソルの使用についてどう思われましたか?面白いと思いますか? 役に立ちますか? それとも無用でしょうか?

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ