カテゴリー
UIデザイン

キャラクターがログインフォームをチラチラ見てる

画面上の目がマウスカーソルを追いかけるというと、X Window System の Xeyes の昔(Wikipedia によれば 1988 年!)からあるアイデアですが、ウェブサイトのログイン画面を見ているキャラクターというアイデアがこちら

メールアドレスを入力するタイプに応じて雪男風のキャラクターの視線が動きますが、面白いのはパスワードを入力する時のキャラクターの動作。

パスワード入力時のマナーとして確立した挙動ですね。

twitter のリプライからは、この手のキャラクターがいつ登場したかの情報が集まっています。

小物に自分のデータを印刷して購入できるサービスSticker Mule のログイン画面

Sticker Mule のログイン画面

VPNサービス TunnelBear のログイン画面

昔 dribble でも見た、という反応は多かったのですが、Dribbble.com のことであれば、今のログインフォームにはキャラクターは居ないようです。

2019年の Flutter と Flare のデモで、スマートフォン上で同様のフォームを作るコードもありました。

GJJ2019/Flutter-Teddy-SignIn: A Flutter Project For Real Sign In Page Based on Flare Teddy animation

こちらの方は、このアニメーションを作る手順の記事につなげていますね。

via twitter

カテゴリー
UIデザイン

ScrollyVideo.js – ブラウザのスクロールと動画ファイルを簡単に同期できるライブラリ

ScrollyVideo.js は、ブラウザの画面効果のためのライブラリで、mp4 で置いた動画ファイルをページのスクロールと連動してくれます。

と、言葉で書いても伝わってる気がしません。ScrollyVideo.js のサイトで見るのが一番わかりやすいと思います。

このデモでは、サンフランシスコのゴールデン・ゲート橋をドローンで空撮した mp4 ファイルが使われています。ページを下にスクロールしていくと、動画が先に進むため、スクロールに合わせてみている自分が前に飛んでいるような感覚が得られます。

デモでは単純なスクロールとの同期だけでなく、スクロールの途中でテキストボックスが流れたりもしていますが、vanilla JavaScript のデモ(ダウンロードしてブラウザで開くだけで動きます)では、非常に短いHTMLのコードで基本的な部分が動くのがわかります。

自分で撮影した mp4 ファイルでももちろん動きましたが、あまりこのライブラリで見栄えのするような動画がなく。

デモのように前後に進む動画がおそらくよく合うんでしょう。部屋を360度ぐるっと回ってみる動画とかを表示してみましたがあまりいいものになりませんでした。

ライブラリはプレーンなJavaScript の他、React, Svelte, Vue からも呼び出せるようになっていて、それぞれのデモファイルがあります。

via FlowingData

カテゴリー
UIデザイン

pixelguesser – あなたのwebデザインのサイズ感に挑戦するクイズ

Pixel Guesser(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。

幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。

あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。

ブラウザ上での矩形領域を勘で指定してうまく当てられると、デザインの速度にいい影響があったりしますかね? 日常的にデザインしてる人はやはりいい点数出るんでしょうか。

via Hacker News