![見出し画像](https://assets.st-note.com/production/uploads/images/44899167/rectangle_large_type_2_b2ed455318c916e9af78fd927aa548f2.jpg?width=1200)
マウスカーソルのデザイン集めてみた。
2021年1発目のnoteです〜
今、3月末〜4月頭にリリース予定の新規事業のブランドサイトを制作中で、アイディアを探るためにリサーチしていました。
海外サイト、国内のサイトで、
ざっと探した中でユニークなマウスポインタ/カーソルのサイトをリサーチ結果として紹介したいと思います〜
noteにGIF貼り付けようとしたら容量的にアウトだったので、捨て垢のTwitter作りました。笑
(フォローフォロワー共に0人😏)
今後、noteに動画貼りたいときはTwitter経由で貼ろうと思います!
(一応)画面録画からnoteに掲載する方法
① QuickTime Playerで画面録画する
② Premier proで軽く編集する
③ Twitterに投稿(mp4に変換)
あら簡単👏
それではいきましょう〜
状態変化型のマウスカーソル
| BASIC Moves
サンディエゴにあるデジタルエージェンシーのブランドサイト
🔍マウスカーソル
・通常は円が追従する
・ユーザーが何かアクションすべき時は、カーソルに操作方法が示され、その操作に従うとサイトに反映される
— Rio's Design (@RiosDesign1) February 5, 2021
| BLUES DESIGN
愛知県にあるプロダクトデザイン事務所
🔍マウスカーソル
・通常はアウトラインの円が追従する
・「CLICK & HOLD TO MENU」がFVでの状態
・例えば、商品の詳細を見る画面だと「PROJECT DETAILS」と記載される
https://t.co/faJwu8a5sO pic.twitter.com/ZUwqgLHwUQ
— Rio's Design (@RiosDesign1) February 5, 2021
| BASIC™ | Culture Manual
Our online employee handbook introduces new hires to our agency and creative culture.
(新入社員に対して自社のカルチャーやバリューなどを紹介するハンドブック)
🔍マウスカーソル
・詳細を閲覧できる時は「+」、閉じる時は「×」
下に要素がある時は「↓」、次のページに遷移する時は「→」が追従
https://t.co/LEG0yz5LZC pic.twitter.com/5rftEI68IO
— Rio's Design (@RiosDesign1) February 5, 2021
| Blend | A creative agency
イタリアのクリエイティブエージェンシーのブランドサイト
🔍マウスカーソル
・通常は透過された円が追従
・クリック可能なエリアに入ると矢印付きの円になる
https://t.co/qP40gnLsfP pic.twitter.com/Wkg7lcKBcy
— Rio's Design (@RiosDesign1) February 5, 2021
| Design Scramble
渋谷を拠点にしたデザインフェスティバルの公式サイト
🔍マウスカーソル
・通常は円が追従する
・カーソルの動きと共に背景に波紋が広がる
・テキストの部分などにカーソルを当てると色がカラフルになる
https://t.co/azlPXFT7fY pic.twitter.com/N7rEteG4Zn
— Rio's Design (@RiosDesign1) February 6, 2021
モチーフ型のマウスカーソル
| MEDULLA
パーソナライズドシャンプーのブランドサイト
🔍マウスカーソル
・ロゴやメニューなど一部のリンクエリアにカーソルを当てると波紋のようなアニメーションが広がる
MEDULLAhttps://t.co/2HsJx1BJPj pic.twitter.com/78f7PcCUMH
— Rio's Design (@RiosDesign1) February 6, 2021
| DENTSU RECRUIT 2020
電通の2022年卒向けの採用サイト
🔍マウスカーソル
・マウスカーソルやポインタがゲーム仕様のデザインで、通常より大きく表示されている
https://t.co/JWRpTs6yYK pic.twitter.com/l2NkNeVeGj
— Rio's Design (@RiosDesign1) February 6, 2021
| Wow Tapes
ローマを拠点にした動画制作会社
🔍マウスカーソル
・2つの円が追従し、クリックエリアは円のサイズが大きくなる
https://t.co/7em6tSLj13 pic.twitter.com/wRPKipebPX
— Rio's Design (@RiosDesign1) February 6, 2021
| Cortez
ナイキの45周年祝いのサイト
🔍マウスカーソル
・靴のモチーフのカーソルが追従する
https://t.co/0l2a7TPejM pic.twitter.com/31U5QuMAcv
— Rio's Design (@RiosDesign1) February 6, 2021
| キンカン渋谷の夢
「キンカン」という医薬品(虫刺され薬)のポップアップギャラリーへの出店に関する公式サイト
🔍マウスカーソル
・虫(蚊)のオブジェクトが追従する
https://t.co/P7u69B0jos pic.twitter.com/prEH0PcwF4
— Rio's Design (@RiosDesign1) February 6, 2021
| フェリシモ
フェリシモ定期便の公式サイト
コンセプト:ファンタジーの世界や魔法に憧れる、少女の気持ちを持ったあなたへ。魔法部は、日常をがんばるみんなに、ときめきと勇気が湧いてくる素敵なアイテムをお届けします。さあ、一緒に、わたしたちの魔法の世界をつくりませんか?
🔍マウスカーソル
・FVではキラキラなオブジェクトが追従し、下層部分では鍵や雲などのオブジェクトが追従する
https://t.co/OloGD4f00m pic.twitter.com/82srkvj9Cb
— Rio's Design (@RiosDesign1) February 6, 2021
| ハイキュー×JUMP 合同練習会
コラボ商品を扱ったECサイト(?)
🔍マウスカーソル
・商品の上にカーソルを当てるとバレーボールのオブジェクトになる
https://t.co/kuMaqg1j9o pic.twitter.com/ZcZzMZ7oJF
— Rio's Design (@RiosDesign1) February 6, 2021
虫眼鏡風、色の反転のマウスカーソル
| ALEX
Alex Theryさんのポートフォリオサイト
🔍マウスカーソル
・カーソルを当てると、塗りが透明になり、テキストに境界線が付く
・テキスト周辺部分はぼやける
https://t.co/7CN1Re0cp2 pic.twitter.com/aLKeJ33SCy
— Rio's Design (@RiosDesign1) February 5, 2021
| Plastic
デザインエージェンシーのブランドサイト
🔍マウスカーソル
・カーソルを当てると、色が反転したり、カラフルに色が変化する
・FVでは「scroll」というテキストが示される
https://t.co/7IwKeiqqRJ pic.twitter.com/JcFLShl3Rs
— Rio's Design (@RiosDesign1) February 5, 2021
| Azab
建築会社のブランドサイト
🔍マウスカーソル
・写真にカーソルを当てると「SHOW」と示される
(終わりがなくて怖い)
https://t.co/IZGXUWrDjN pic.twitter.com/Re5ac0Qqk3
— Rio's Design (@RiosDesign1) February 5, 2021
| Sabcomeed
高品質なコーヒーの生産、輸入などを行う会社のブランドサイト
🔍マウスカーソル
・半透明の薄い紫の円と白円が追従する
・カーソルを動かすと薄い紫色の中に、背景のイラストが浮かび上がる
https://t.co/nJeztlu3AA pic.twitter.com/PHB70oMnam
— Rio's Design (@RiosDesign1) February 5, 2021
| 京都国際舞台芸術祭
芸術祭の公式サイト
🔍マウスカーソル
・カーソルの動きに線が付いてくる
・テキストにhoverすると円が現れて、反転する
https://t.co/2RXm05oaNh pic.twitter.com/RwPgYXAD4J
— Rio's Design (@RiosDesign1) February 6, 2021
なんだこれ、思ったより時間かかった・・・・😿
今までマウスカーソルとかあまり気にしたことなかったので、世界観の作り込みの一つとして取り入れたいと思います。笑
参照サイト
この記事が気に入ったらサポートをしてみませんか?