第2回 スクロールとページングのUIを考える（2） | gihyo.jp
スクロールするUI UIの基本を見てきましたが、Web UIの世界では、今まで当たり前だったものが、時代の変化に伴って廃れていったり、新しいものに置き換えられていくということが頻繁に起きます。今回のテーマであるスクロールとページングを例に、まずはスクロールバーの歴史を紐解いていきましょう。 スクロールバーとは スクロールバーは上下または左右にスクロールするために使用されるGUI（Graphical User Interface）の代表的なUIコンポーネントの一つで、近年、役割が変化しつつある部品です。 スクロールバーの役割としては次のようなものが挙げられます。 ページ全体の分量がどの程度なのか把握する 現在の位置がどこなのか把握する 指定位置にジャンプする 細かいスクロールをする 最初に登場したスクロールバーは、直接操作して画面を上下または左右に動かすものでした（図1・注3）。 図1
第2回 スクロールとページングのUIを考える（1） | gihyo.jp
連載2回目となる今回は、WebページにおけるスクロールとページングのUIを取り上げます。ユーザに最高のUX（User Experience）を提供するためにフロントエンドのUI（User Interface）設計は欠かせません。エンジニア観点から見たUI設計思想について語りたいと思います。 UIの基礎知識 最適なUIというものは、表示するデータの性質や利用者の使い方、使用しているデバイス、慣れによって変化していきます。 「万人にとって普遍的で、そこそこ使いやすいUI」を目指すべきなのか、あるいは、「一部の人にとって最高に使いやすいUI」を目指すべきなのか。UIを設計する人それぞれでポリシーは異なるでしょう。 誰でもそこそこ迷わずに使える優等生的デザイン。最初はとっつきにくくても、慣れれば最速で使える奇抜なデザイン……。一口にWebページのUIと言っても多種多様です。 たまにしか使わないサ
View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す
はじめに こんにちは、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,
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
フィッツの法則と、UXにおけるその応用
ターゲットまでの移動時間は、ターゲットの大きさとターゲットまでの距離に依存する。 Fitts's Law and Its Applications in UX by Raluca Budiu on July 31, 2022 日本語版2023年1月10日公開 歴史 ポール・フィッツは、ヒューマンエラーが単なる人間による誤りではなく、不適切なデザインに起因することを理解した最初の心理学者の1人である。彼は第二次世界大戦中に飛行機のコックピットのデザインを研究し、ヒューマンエラーが原因であるとされていた多数の戦死が、実際にはデザインの不適切さによるものであると主張した。 1950年代になると、彼はシャノンの有名な情報理論の影響を受ける。そして、ジョージ・ミラーがチャネル容量の概念を人間の記憶に適用し、その過程で人間の短期記憶の情報処理能力として有名なマジカルナンバー7を導き出したように、フィッ
「SPAのタブ永遠に開きっぱなし問題」を更新ボタンを設置せず解決した - 橋本商会
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった？みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは？ SPAとstaticなwebサイトの違い static
UIを作る、減らす、完全になくす - 橋本商会
mobileでは、テロメアの詳細時刻と行permalinkのメニューが邪魔で行頭にカーソルを置けなかった
令和時代のページネーションを考える (REST API編) - Sweet Escape
今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
スプラトゥーンの特許 - naoya2kの日記
スプラ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
みんなが使えるカルーセルUIを考える | CyberAgent Developers Blog
Ameba事業部の谷（@hiloki）です。Amebaのデザインシステム Spindleのマネージャーをしつつ、UIの設計・開発をしています。 2021年は多くのガイドラインやUIコンポーネント設計・開発に取り組んできました。この記事ではCyberAgent Developers Advent Calendar 2021の3日目の記事として1年を振り返り、特に考えることの多かったカルーセルUI について、その設計視点やアクセシビリティを考えてみました。 カルーセルUI とは あらためてこの記事におけるカルーセルUI（以下「カルーセル」と呼称します）を定義します。 『デザイニング・インターフェイス（第2版）』におけるカルーセルの定義を引用すると下記のように説明されています。 視覚的に興味を引くことができる項目のリストを、横一列またはアーチ状に配置し、画像のサムネイルを左右にスクロールまたはス
Interaction Testing sneak peek
Storybook is the industry standard tool for building component driven user interfaces. It enables structured UI development, documentation, and testing. I’m thrilled to share a preview of Storybook’s supercharged testing features. Stories capture key states of your components. Leading teams like Shopify, Adobe, and O’Reilly Media already import stories in their test files to expand UI test coverag
Our Justified Layout Goes Open Source | code.flickr.com
We introduced the justified layout on Flickr.com late in 2011. Our community of photographers loved it for its ability to efficiently display many photos at their native aspect ratio with visually pleasing, consistent whitespace, so we quickly added it to the rest of the website. It’s been through many iterations and optimizations. From back when we were primarily on the PHP stack to our lovely ne
Building the Google Photos Web UI
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歳が自殺 「－73万ドル」の残高に絶望 | Forbes JAPAN 公式サイト（フォーブス ジャパン）
「収入のない20歳がどうして100万ドル近くのレバレッジを割り当てられたのか？」──これは今月12日、アレクサンダー・E・カーンズのパソコンで両親が見つけたメモに残されていた言葉だ。カーンズはこの日、20歳の若さで自ら命を絶った。 米ネブラスカ大学の学生で、イリノイ州ネイパービルで両親と同居していたカーンズは、新型コロナウイルス流行の最中にロビンフッドのアプリを使い投資を始めた。ロビンフッドはミレニアル世代をターゲットにした、手数料無料で手軽に投資ができるアプリで、新規ユーザーに対する無料株式プレゼントのキャンペーンも行っている。カーンズのようにコロナ流行中に加入した人は多く、2020年第1四半期の新規アカウントは過去最多の300万件に達した。 新型ウイルス流行により株式市場が激しく変動する中、カーンズはオプション取引を始めた。パソコンに残された遺書には、「自分が何をしているのか全く分かっ
米国の株高は「株取引アプリとは無関係」、投資銀行が指摘 | Forbes JAPAN 公式サイト（フォーブス ジャパン）
ここ最近の米国市場における株価上昇をもたらした1つの要因は、「ロビンフッド」などの、手数料無料の株式取引アプリを使う個人投資家が急増し、投機的売買を行っている事だとの見方が浮上していた。しかし、投資銀行のバークレイズはこの憶測を否定した。 バークレイズによると、ロビンフッドの利用者が好む銘柄の大半は、株価を下げているという。 バークレイズは、ロビンフッドの顧客の購入銘柄と株式市場の動きを分析した結果、個人投資家による売買が相場を押し上げているような相関関係は見られないとの結論を導いた。バークレイズのアナリストのRyan Preclawは、今回の調査結果により、「個人投資家たちが株価の上昇を招いているとの憶測が疑わしいことが、示された」と述べている。 ロビンフッドなどの株式取引アプリは手数料がゼロであることで知られ、証券業界では、これらのアプリを用いる新参の個人投資家が相場を押し上げていると
「きららファンタジア」メニュー項目が整理されていたので比較しました - ゲームアプリのUIデザイン
こんにちは、ちょこきなこです。 「きららファンタジア」のメニュー項目を新旧で比較してみました。 リリース直後は以下のようなデザインだったようです。 色とか並び方が雑然としている印象です。 上の方にメインコンテンツを配置しているのかな…。ですが、色がバラバラです。 今現在のメニューは以下のようなデザインです。 項目は増えましたが、項目ごとに整理されて、ぱっと見の把握がしやすくなりました。 並べてみるとこんな感じです。 Before⇒After 項目の分け方の妥当性に関しては割と言ったもん勝ちで良いと思います。 (ホームは枠から外れて左下に配置に移動してますね) 例えば 「ミッションってメイン？」「トレーニングって育成だからキャラじゃないの？」とか疑問は浮かびますが、意外と「ミッションもトレーニングもメイン！」って言いきれば良いだけだと思います。 実際、プレイしていてそこに疑問は持たないですし
CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会
非表示のReactコンポーネントの中でしっかりライフサイクルが走っていて、イベントハンドラは登録され、stateを持って動いている
複雑GUIの会を主催した - No Regrets in Bathing
「GUIの雑談を無限にしたいなぁ」と思い、会を開催しました。 twipla.jp 上記のイベントページを立てて、Twitter上で募集をかけたところ、 この内容だけでピンと来てしまったガチ勢が9人も集まりました。 ドローツールやマインドマップ、作曲ツール等を自作するフルスクラッチマンたちです。 予約したルノアールの会議室は過密状態になってしまいました。 （もう少し広い部屋にしておけば…と後悔しました） （ルノアールです） #複雑GUI会 pic.twitter.com/XDGWs3EwZd— みやおか (@miyaoka) May 2, 2019 職人タイプの方が多かったので終始和やかな雰囲気でしたが、 やはり実装に深入りしていくことが多く、あまりの情報密度に 私も話についていくのが大変だったと自白しておきます。 あと、なぜか開催前に「バウンディングボックス大会」が行われる雰囲気が醸成され
ノンデザイナー向けに「デザインとはなんぞや勉強会」をした話 - hitomedia Tech Blog
デザイナーのばっこ（@is178）です。 ヒトメディアでは、毎月有志が集まって勉強会を開いているのですが、先月、ノンデザイナー向けに「デザインとはなんぞや」という発表をしまして、その時の資料を公開したいと思います。 デザインとはなんぞや デザインはめっちゃ範囲が広い グラフィックデザイン、UIデザイン、UXデザイン それぞれの特徴 グラフィックデザインは「視覚（ビジュアル）のロジック」を考える UIデザインは「対話（インタラクティブ）のロジック」を考える UXデザインは「工程（プロセス）のロジック」を考える デザインがデザイナー以外にも解放された デザイン≠センス、デザイン≠ロジック 終わりに デザインとはなんぞや 「デザイン」と聞くと、最初に思い浮かぶのはきっと、華やかな感じの、センスがどうとかクリエイティブがどうとか、何か見た目が良いものを作るようなイメージが強いと思います。 しかし、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
複雑GUIの会 Vol.1 - HackMD
