Uiデザイン
-
キャラクターがログインフォームをチラチラ見てる
画面上の目がマウスカーソルを追いかけるというと、X Window System の Xeyes の昔(Wikipedia によれば 1988 年!)からあるアイデアですが、ウェブサイトのログイン画面を見ているキャラクターというアイデアがこちら What a cute login form 🥰 pic.twitter.com/Qc1csk0I52 — Victor …
-
ScrollyVideo.js - ブラウザのスクロールと動画ファイルを簡単に同期できるライブラリ
ScrollyVideo.js は、ブラウザの画面効果のためのライブラリで、mp4 で置いた動画ファイルをページのスクロールと連動してくれます。 と、言葉で書いても伝わってる気がしません。ScrollyVideo.js のサイトで見るのが一番わかりやすいと思います。 このデモでは、サンフランシスコのゴールデン・ゲート橋をドローンで空撮した mp4 ファイルが使われています。ページを下にスクロールし …
-
pixelguesser - あなたのwebデザインのサイズ感に挑戦するクイズ
Pixel Guesser(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。 幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。 あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。 ブラウザ上での矩形領域を勘で指定してうまく当て …
-
#HEXWORDS - 16進カラーコードで「意味のある単語」をまとめたサイト
HTML/CSS の色指定などで使われる16進コード、0から9とA,B,C,D,E,F までの16文字を使って16進数でRGBの三原色の割合を示すものです。3桁(#3C3)や6桁(#BD2031)で使われます。 #3C3 #BD2031 16文字の中にアルファベットが6文字入っているので、数値によっては英単語のように見えるものもあります。(たとえば #DECAFE) これに、0から9までの数字を似 …
-
88x31 コレクション - 太古のウェブで多用されたサイズの懐かしバナーを収集
The 88x31 GIF Collection は、名前の通り、横88ピクセル x 縦31ピクセルのウェブバナーを収集して公開しているサイトです。 動画を開く 88x31 サイズのバナーが広まったのは、1994年にスタートし当初のインターネット・ウェブ空間の一大勢力となった無料ホームページ公開サービス ジオシティ(Geocities)。1996年のジオシティのトップページには、サイドバーに7つの …
-
YesAQ - 「はい」になる回答だけを集めたFAQ
Basecamp というサービスの FAQ に特徴があるという書き込みがあったので、チェックしに行きました。 よくある質問(FAQ)を置いてあるウェブサービスは多いと思います。問い合わせが多い質問に対してあらかじめ回答を見せておくことで、サポートの人員を減らせますし、利用者もメール等の返事を待つことなく疑問が解消できます。 すべての答えが「はい」なら Basecamp の yeaAQ は、すべての …
-
Rotary Dial - ダイヤル電話のダイヤルをウェブ上に再現するライブラリ
使いどころがわかりませんが、一定年齢以上の人だけ使い方がわかる、ダイヤル電話式の入力インタフェースをサイトに設置できるライブラリがvictorqribeiro/dialです。 デモサイト このダイヤルUIの使い方ですが、「黒の丸いところをクリックし、右側の三角のところまでドラッグすると丸が赤色に変わります。そこで手を離すと、その数字がテキストフォームに入力されます。」ということ。こりゃわからんわ …
