スクロールするUI UIの基本を見てきましたが、Web UIの世界では、今まで当たり前だったものが、時代の変化に伴って廃れていったり、新しいものに置き換えられていくということが頻繁に起きます。今回のテーマであるスクロールとページングを例に、まずはスクロールバーの歴史を紐解いていきましょう。 スクロールバーとは スクロールバーは上下または左右にスクロールするために使用されるGUI（Graphical User Interface）の代表的なUIコンポーネントの一つで、近年、役割が変化しつつある部品です。 スクロールバーの役割としては次のようなものが挙げられます。 ページ全体の分量がどの程度なのか把握する 現在の位置がどこなのか把握する 指定位置にジャンプする 細かいスクロールをする 最初に登場したスクロールバーは、直接操作して画面を上下または左右に動かすものでした（図1・注3⁠）⁠。 図1　

連載2回目となる今回は、WebページにおけるスクロールとページングのUIを取り上げます。ユーザに最高のUX（User Experience）を提供するためにフロントエンドのUI（User Interface）設計は欠かせません。エンジニア観点から見たUI設計思想について語りたいと思います。 UIの基礎知識 最適なUIというものは、表示するデータの性質や利用者の使い方、使用しているデバイス、慣れによって変化していきます。 「万人にとって普遍的で、そこそこ使いやすいUI」を目指すべきなのか、あるいは、「⁠一部の人にとって最高に使いやすいUI」を目指すべきなのか。UIを設計する人それぞれでポリシーは異なるでしょう。 誰でもそこそこ迷わずに使える優等生的デザイン。最初はとっつきにくくても、慣れれば最速で使える奇抜なデザイン……。一口にWebページのUIと言っても多種多様です。 たまにしか使わないサ

はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇‍♂️ 今回実装した最終成果はこちらです。 また、コードはこちらにあります。 View Transitions APIとは？ View Transitions APIとは、2023年4月11日現在Chrome 111とOpera 97(pre-release)以降で実装されている遷移のアニメーションを行うブラウザーAPIです。下記は、MDNからの引用です。 View transitions are a popular design choice for reducing users' cognitive load,

ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると

ターゲットまでの移動時間は、ターゲットの大きさとターゲットまでの距離に依存する。 Fitts's Law and Its Applications in UX by Raluca Budiu on July 31, 2022 日本語版2023年1月10日公開 歴史 ポール・フィッツは、ヒューマンエラーが単なる人間による誤りではなく、不適切なデザインに起因することを理解した最初の心理学者の1人である。彼は第二次世界大戦中に飛行機のコックピットのデザインを研究し、ヒューマンエラーが原因であるとされていた多数の戦死が、実際にはデザインの不適切さによるものであると主張した。 1950年代になると、彼はシャノンの有名な情報理論の影響を受ける。そして、ジョージ・ミラーがチャネル容量の概念を人間の記憶に適用し、その過程で人間の短期記憶の情報処理能力として有名なマジカルナンバー7を導き出したように、フィッ

こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon

mobileでは、テロメアの詳細時刻と行permalinkのメニューが邪魔で行頭にカーソルを置けなかった

今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js

スプラ3が良い出来だったし、これは特許出願できるアイデア満載じゃねえか!!って思ったので特許が出てないか調べてみた。基本的に新製品に関する特許は世の中に発表される前に出願する必要があるが、出願から1年間1年半は公開されない*1ので、スプラ3にかかわる特許のうち今公開されているものがすべてというわけではない。 (2023/5/3追記: ここで漏らしていたものや、その後に公開された他の興味深い特許について下記に追記を書いたのでそれも見てやってください スプラトゥーン3の特許(part2) - naoya2kの日記 ) 検索してすぐに見つかるのは次の3件(+1件)だった。 特開2022-124257(P2022-124257A) https://www.j-platpat.inpit.go.jp/c1800/PU/JP-2022-124257/14784BEACFACFFFAA6A51AE109

Ameba事業部の谷（@hiloki）です。Amebaのデザインシステム Spindleのマネージャーをしつつ、UIの設計・開発をしています。 2021年は多くのガイドラインやUIコンポーネント設計・開発に取り組んできました。この記事ではCyberAgent Developers Advent Calendar 2021の3日目の記事として1年を振り返り、特に考えることの多かったカルーセルUI について、その設計視点やアクセシビリティを考えてみました。 カルーセルUI とは あらためてこの記事におけるカルーセルUI（以下「カルーセル」と呼称します）を定義します。 『デザイニング・インターフェイス（第2版）』におけるカルーセルの定義を引用すると下記のように説明されています。 視覚的に興味を引くことができる項目のリストを、横一列またはアーチ状に配置し、画像のサムネイルを左右にスクロールまたはス

A few years ago I had the privilege of being an engineer on the Google Photos team and part of the initial launch in 2015. A lot of people contributed to the product — designers, product managers, researchers, and countless engineers (across Android, iOS, Web, and the server) to name just some of the major roles. My responsibility was the web UI, and more specifically the photo grid. We wanted to

「収入のない20歳がどうして100万ドル近くのレバレッジを割り当てられたのか？」──これは今月12日、アレクサンダー・E・カーンズのパソコンで両親が見つけたメモに残されていた言葉だ。カーンズはこの日、20歳の若さで自ら命を絶った。 米ネブラスカ大学の学生で、イリノイ州ネイパービルで両親と同居していたカーンズは、新型コロナウイルス流行の最中にロビンフッドのアプリを使い投資を始めた。ロビンフッドはミレニアル世代をターゲットにした、手数料無料で手軽に投資ができるアプリで、新規ユーザーに対する無料株式プレゼントのキャンペーンも行っている。カーンズのようにコロナ流行中に加入した人は多く、2020年第1四半期の新規アカウントは過去最多の300万件に達した。 新型ウイルス流行により株式市場が激しく変動する中、カーンズはオプション取引を始めた。パソコンに残された遺書には、「自分が何をしているのか全く分かっ

ここ最近の米国市場における株価上昇をもたらした1つの要因は、「ロビンフッド」などの、手数料無料の株式取引アプリを使う個人投資家が急増し、投機的売買を行っている事だとの見方が浮上していた。しかし、投資銀行のバークレイズはこの憶測を否定した。 バークレイズによると、ロビンフッドの利用者が好む銘柄の大半は、株価を下げているという。 バークレイズは、ロビンフッドの顧客の購入銘柄と株式市場の動きを分析した結果、個人投資家による売買が相場を押し上げているような相関関係は見られないとの結論を導いた。バークレイズのアナリストのRyan Preclawは、今回の調査結果により、「個人投資家たちが株価の上昇を招いているとの憶測が疑わしいことが、示された」と述べている。 ロビンフッドなどの株式取引アプリは手数料がゼロであることで知られ、証券業界では、これらのアプリを用いる新参の個人投資家が相場を押し上げていると

こんにちは、ちょこきなこです。 「きららファンタジア」のメニュー項目を新旧で比較してみました。 リリース直後は以下のようなデザインだったようです。 色とか並び方が雑然としている印象です。 上の方にメインコンテンツを配置しているのかな…。ですが、色がバラバラです。 今現在のメニューは以下のようなデザインです。 項目は増えましたが、項目ごとに整理されて、ぱっと見の把握がしやすくなりました。 並べてみるとこんな感じです。 Before⇒After 項目の分け方の妥当性に関しては割と言ったもん勝ちで良いと思います。 (ホームは枠から外れて左下に配置に移動してますね) 例えば 「ミッションってメイン？」「トレーニングって育成だからキャラじゃないの？」とか疑問は浮かびますが、意外と「ミッションもトレーニングもメイン！」って言いきれば良いだけだと思います。 実際、プレイしていてそこに疑問は持たないですし

レスポンシブデザインは あくまで見た目の調整、表示・非表示のコントロールなので 下手に使うと、デバイス毎にインタラクションが違うUIのstateが無茶苦茶複雑になっていく コンポーネントという概念が無かった時代の設計を、SPAに持ってくるのはおかしい 画面サイズ毎にCSSで手軽にを切り替える、というのなら良い しかし、画面サイズ毎にインタラクションが違う部品が出てくると設計が破綻する 画面サイズ毎のがごちゃ混ぜになる コードが追えなくなり、バグの温床になる では、どうするか？ 素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい 使いまわせる部品は、コンポーネントとして切り出して再利用する 歴史を紐解く 2011年頃、レスポンシブデザインが生まれた 当時のwebにはコンポーネントが存在しなかった 単体で複雑な状態遷移をするインタラクティブなパーツ

「GUIの雑談を無限にしたいなぁ」と思い、会を開催しました。 twipla.jp 上記のイベントページを立てて、Twitter上で募集をかけたところ、 この内容だけでピンと来てしまったガチ勢が9人も集まりました。 ドローツールやマインドマップ、作曲ツール等を自作するフルスクラッチマンたちです。 予約したルノアールの会議室は過密状態になってしまいました。 （もう少し広い部屋にしておけば…と後悔しました） （ルノアールです） #複雑GUI会 pic.twitter.com/XDGWs3EwZd— みやおか (@miyaoka) May 2, 2019 職人タイプの方が多かったので終始和やかな雰囲気でしたが、 やはり実装に深入りしていくことが多く、あまりの情報密度に 私も話についていくのが大変だったと自白しておきます。 あと、なぜか開催前に「バウンディングボックス大会」が行われる雰囲気が醸成され

複雑GUIの会 Vol.1 === イベントページ https://twipla.jp/events/380070 実装のめんどくさいGUIについて、自作品を持ち寄って語らう会です。 こんな大変な

デザイナーのばっこ（@is178）です。 ヒトメディアでは、毎月有志が集まって勉強会を開いているのですが、先月、ノンデザイナー向けに「デザインとはなんぞや」という発表をしまして、その時の資料を公開したいと思います。 デザインとはなんぞや デザインはめっちゃ範囲が広い グラフィックデザイン、UIデザイン、UXデザイン それぞれの特徴 グラフィックデザインは「視覚（ビジュアル）のロジック」を考える UIデザインは「対話（インタラクティブ）のロジック」を考える UXデザインは「工程（プロセス）のロジック」を考える デザインがデザイナー以外にも解放された デザイン≠センス、デザイン≠ロジック 終わりに デザインとはなんぞや 「デザイン」と聞くと、最初に思い浮かぶのはきっと、華やかな感じの、センスがどうとかクリエイティブがどうとか、何か見た目が良いものを作るようなイメージが強いと思います。 しかし、