見出し画像

マウスカーソルのデザイン集めてみた。

東 莉緒／Rio Azuma

2021年1発目のnoteです〜
今、3月末〜4月頭にリリース予定の新規事業のブランドサイトを制作中で、アイディアを探るためにリサーチしていました。

海外サイト、国内のサイトで、
ざっと探した中でユニークなマウスポインタ/カーソルのサイトをリサーチ結果として紹介したいと思います〜

noteにGIF貼り付けようとしたら容量的にアウトだったので、捨て垢のTwitter作りました。笑
（フォローフォロワー共に0人😏）

今後、noteに動画貼りたいときはTwitter経由で貼ろうと思います！

（一応）画面録画からnoteに掲載する方法
① QuickTime Playerで画面録画する
② Premier proで軽く編集する
③ Twitterに投稿（mp4に変換）
あら簡単👏


それではいきましょう〜


状態変化型のマウスカーソル

| BASIC Moves

サンディエゴにあるデジタルエージェンシーのブランドサイト

🔍マウスカーソル
・通常は円が追従する
・ユーザーが何かアクションすべき時は、カーソルに操作方法が示され、その操作に従うとサイトに反映される


| BLUES DESIGN

愛知県にあるプロダクトデザイン事務所

🔍マウスカーソル
・通常はアウトラインの円が追従する
・「CLICK & HOLD TO MENU」がFVでの状態
・例えば、商品の詳細を見る画面だと「PROJECT DETAILS」と記載される


| BASIC™ | Culture Manual

Our online employee handbook introduces new hires to our agency and creative culture.
（新入社員に対して自社のカルチャーやバリューなどを紹介するハンドブック）

🔍マウスカーソル
・詳細を閲覧できる時は「＋」、閉じる時は「×」
下に要素がある時は「↓」、次のページに遷移する時は「→」が追従


| Blend | A creative agency

イタリアのクリエイティブエージェンシーのブランドサイト

🔍マウスカーソル
・通常は透過された円が追従
・クリック可能なエリアに入ると矢印付きの円になる


| Design Scramble

渋谷を拠点にしたデザインフェスティバルの公式サイト

🔍マウスカーソル

・通常は円が追従する
・カーソルの動きと共に背景に波紋が広がる
・テキストの部分などにカーソルを当てると色がカラフルになる



モチーフ型のマウスカーソル

| MEDULLA

パーソナライズドシャンプーのブランドサイト

🔍マウスカーソル
・ロゴやメニューなど一部のリンクエリアにカーソルを当てると波紋のようなアニメーションが広がる



| DENTSU RECRUIT 2020

電通の2022年卒向けの採用サイト

🔍マウスカーソル
・マウスカーソルやポインタがゲーム仕様のデザインで、通常より大きく表示されている



| Wow Tapes

ローマを拠点にした動画制作会社

🔍マウスカーソル
・2つの円が追従し、クリックエリアは円のサイズが大きくなる


| Cortez

ナイキの45周年祝いのサイト

🔍マウスカーソル
・靴のモチーフのカーソルが追従する


| キンカン渋谷の夢

「キンカン」という医薬品（虫刺され薬）のポップアップギャラリーへの出店に関する公式サイト

🔍マウスカーソル
・虫（蚊）のオブジェクトが追従する


| フェリシモ

フェリシモ定期便の公式サイト
コンセプト：ファンタジーの世界や魔法に憧れる、少女の気持ちを持ったあなたへ。魔法部は、日常をがんばるみんなに、ときめきと勇気が湧いてくる素敵なアイテムをお届けします。さあ、一緒に、わたしたちの魔法の世界をつくりませんか？

🔍マウスカーソル
・FVではキラキラなオブジェクトが追従し、下層部分では鍵や雲などのオブジェクトが追従する



| ハイキュー×JUMP 合同練習会

コラボ商品を扱ったECサイト(?)

🔍マウスカーソル
・商品の上にカーソルを当てるとバレーボールのオブジェクトになる



虫眼鏡風、色の反転のマウスカーソル

| ALEX

Alex Theryさんのポートフォリオサイト

🔍マウスカーソル
・カーソルを当てると、塗りが透明になり、テキストに境界線が付く
・テキスト周辺部分はぼやける


| Plastic

デザインエージェンシーのブランドサイト

🔍マウスカーソル
・カーソルを当てると、色が反転したり、カラフルに色が変化する
・FVでは「scroll」というテキストが示される



| Azab

建築会社のブランドサイト

🔍マウスカーソル
・写真にカーソルを当てると「SHOW」と示される
（終わりがなくて怖い）


| Sabcomeed

高品質なコーヒーの生産、輸入などを行う会社のブランドサイト

🔍マウスカーソル
・半透明の薄い紫の円と白円が追従する
・カーソルを動かすと薄い紫色の中に、背景のイラストが浮かび上がる


| 京都国際舞台芸術祭

芸術祭の公式サイト

🔍マウスカーソル
・カーソルの動きに線が付いてくる
・テキストにhoverすると円が現れて、反転する

なんだこれ、思ったより時間かかった・・・・😿

今までマウスカーソルとかあまり気にしたことなかったので、世界観の作り込みの一つとして取り入れたいと思います。笑



参照サイト



この記事が気に入ったらサポートをしてみませんか？