はじめに プロダクト UI / UX 開発における品質向上において、様々な組織が検討を重ねていると思います。 デザインレビューをどのように実施するのか WCAG 2.2 に準拠したアクセシビリティ改善 上記の課題を解決すべく、アクセシビリティ改善をふまえたデザインレビュー自動化プロセスを検証してみました。 直面した課題 課題① : コンパクトになっていったデザインレビューの文化 これまでのデザインレビューは、まとまった機能を開発する際に、PdM とエンジニア、そしてデザイナーが同期的に Figma を確認をするプロセスをとっていました。 また、開発プロセスに AI ツールが組み込まれたことで、エンジニアが UI を作り、デザイナーがレビューするというケースも増えています。 上記の背景がある中で、加えて事業スピードが加速していることもあり、担当者間のみのデザインレビューを行うことが増えていま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Google I/O 2025が、5月20日（火）と21日（水）の2日間にわたって開催されましたが、皆さんはご覧になりましたか？ Googleは「Gemini 2.5 Pro」や「AIモード」など、多くの新機能や製品を発表し、大盛り上がりのイベントとなりました！ I/Oの基調講演の最後には、CEOのスンダー・ピチャイ氏が、講演中に「AI」や「Gemini」という言葉がどれだけ発言されたかを示す「AIカウンター」を披露するほど、今回のGoogle I/Oの主役は間違いなくAIでした。 この記事では、そんなGoogle I/Oで発
はじめに こんにちは、普段 Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。 最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosuke とともに、Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。 目次 デザインシステムと開発の現状課題 MCP サーバーの登場 Ubie UI MCP の構築 デモ テキストだけで UI 実装が可能に デザイナーの壁打ち相手としての可能性 今後の展望 デザインシステムと開発の現状課題 Ubie では「Ubie Vitals」というデザインシステムに則って
<dialog>、Popover、Invoker CommandsがHTML標準で整いつつあります。JavaScriptを書かずにHTMLだけでインタラクティブなUIを作ることができるようになっていっているわけですが、それでもイベントをフックして何かしらの処理を実行したいことはあります。これらのUIのイベントはいくつか種類があるので、それぞれのUIや呼び出し方法に対応するイベントをまとめてみました。 前提 <dialog> <dialog>はHTML標準のダイアログUIです。このダイアログUIはモードレスダイアログとモーダルダイアログの2つのモードがあります。モードレスダイアログはopen属性を付与することで表示されますが、モーダルダイアログはshowModal()メソッドを呼び出すことで表示されます。つまりこれまではモーダルダイアログを開く手段はJavaScriptを使うしかありませんで
本ライブラリは NICT のセキュリティイノベーター育成プログラム「SecHack365」にて開発を進めました。この場を借りまして、トレーナー、アシスタント及び事務局の皆様に感謝を申し上げます。 「GingaUI」は LLM を活用しウェブサイトのデザインテーマを自動で生成する機能を備えた UI コンポーネントライブラリです。React で構築されており、Next.js などのフレームワークと組み合わせて利用できます。 どんなもの？ 以下のポートフォリオサイトに PoC を実装しているので、ヘッダー右上のボタンからぜひお試しください。 一言で言うと、ウェブサイトの文章にふさわしいテーマを自動で生成する機能を備えた UI コンポーネントライブラリです。 先に書いておくと、テーマというのは配色やフォント、角丸の大きさなどのスタイル部分を指しており、レイアウトやコンポーネントの配置等の画面設計に
モーダル・プッシュ・タブ iOSの画面遷移には、大きく分けて３つの画面遷移があります。 ３つの画面遷移アニメーションを見てみましょう。 モーダル プッシュ タブ モーダルは下から次の画面が、プッシュは右から次の画面が表示されます。 タブには小さなアニメーションがついていますが、瞬時に切り替わるように感じます。 これらの使い分けや、考え方は次の記事が参考になります。 遷移する前から認知は始まっている この記事では、画面遷移の前段階に焦点を当てます。特にモーダルやプッシュは、ボタンがトリガーとなることが多く、ボタンデザインの多様性から遷移の種類が分かりにくくなることがあります。 実際に、このボタンだけではどんな画面遷移が起こるか分かりにくい。 ユーザーが画面遷移を特別意識することは少ないかもしれませんが、iOSを使用する以上、正しい画面遷移のルールは無意識に認知されています。 誤った遷移方法を
mobileでは、テロメアの詳細時刻と行permalinkのメニューが邪魔で行頭にカーソルを置けなかった
はじめに この記事は、nvim-cmp という neovim のプラグインををメンテしている間に出てきたいろいろな課題や、いま考えていること（やるとは言っていない）を説明することを目的としています。 nvim-cmp とは？ neovim における、補完プラグインです。 Pure Lua で書かれており、カスタマイズ性が高いことが特徴の補完プラグインです。 「いろいろな課題」とは？ 大別すると 3 つの課題があると考えています。 ▼ UI を内蔵してしまっている nvim-cmp は UI 関連の実装を内蔵しています。 例えば、custom_entries_view.lua や wildmenu_entries_view.lua などが実装として存在しており、いくつかのカスタマイズ向けのオプションが提供されています。 補完メニューの表示位置をカーソルに合わせるか、キーワード位置に合わせるか
Intro ここまでで <dialog> 要素が標準化され、Modal/non-Modal な Dialog がネイティブで出せるようになった。 今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。 Top Layer inert :modal / ::backdrop CloseWatcher Focusable Scrollers etc しかし、<dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。 そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、<dialog> の標準化の裏で並行して行われた。 Toast 最初の目立った
Intro 前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。 今回は <dialog> の API としての使い方について、具体的に解説していく。 各要素の使用 open 属性 <dialog> は、デフォルトでは不可視 (display: none) な要素となっている。open 属性が付くと表示される。 <dialog open> <div> <h1>Hello Dialog</h1> </div> </dialog> show()/showModal() 基本的に <dialog> は動的に表示されるため、JS で開くことになるだろう。しかし、open 属性を動的に付けるのではなく、show()/showModal() を用いるのが基本だ。 document.querySelector("button.show").addEventLis
Intro showModalDialog() は今から考えれば、確かにひどい API だった。 しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、Cookie バナー、ログインなど多々ある。 そういった場面では、ライブラリなどを用いて実装する必要があったが、Modal を実装するのは実際にはそんなに簡単ではなかった。 Modal, Dialog, Modal Dialog 最初に、用語を少し整理しておこう。 Modal Dialog Modal Dialog non-Modal Dialog Dialog とは、そもそも「対話」という意味であり、UI の文脈では入力や選択を求める「対話的な UI」のことを指す。 既に実装されている alert(), confirm()
Intro HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初にあ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webサービスのフォームに住所を入力するとき、丁目や番地などを入れる欄について、数字やハイフンを全角で書かなければいけない「全角縛り」をやっているフォームをよく見ます。半角文字を入力してしまってエラーになったり、咄嗟に変換方法を思い出せなかったり、全角と半角の見分けが付きづらかったり、「全角縛り」であることが明示されていなかったり、「ハイフン」としてどの文字を使うべきかわからなかったり……と、鬱陶しさを感じることが多くあります。 「住所は全角のみ」（数字やハイフンも絶対に半角を受け付けない）という仕様がどういう経緯で生まれて、どう広まっ
TOPフォーカス気持ちよいUIができたら後は放置。傑作Flash『艦砲射撃・マテスナ』作者の素敵な“悪癖”【フォーカス】 ゲームクリエイター TANAKA U ゲーム制作フリーランス。「動かしているだけで気持ちよい」が信条で、UI制作に強いこだわりを持つ。専門学校でゲームづくりを学んでいた2003年にFlashゲームサイト「NEXTFRAME!」を立ち上げ、多数のゲームを制作。2006年にバンダイナムコゲームス社に入社し、2009年からフリーランス。ソーシャルゲームを中心に、UI演出、UIコンサルティング、ゲームデザインなどを手がける。仮想通貨「Monacoin」についてSNSでつぶやいただけで、何者からか400万円相当のMonacoinを振り込まれ、戦慄したことがある。 X NEXTFRAME! 2000年代のWeb上には、「Adobe Flash」規格の無料ゲームが、個人によって多数制
こんにちは。技術部検索グループの原島です。 上の画像は、スマートフォン（ブラウザ版）で見たクックパッドの検索結果ページです。レシピだけでなく、ニュースも表示されていますね。献立や掲示板のスレッドなどが表示されることもあります。 クックパッドでは、検索結果ページに表示するコンテンツをクエリなどに応じて最適化しています。最適化は、膨大なログデータと最新の機械学習を用いることで、実現しています。このエントリでは、クックパッドにおけるコンテンツ最適化の裏側を紹介します。 最適化の背景 スマートフォンの普及に伴って、ユーザが利用するプラットフォームは PC からモバイルにシフトしつつあります。クックパッドにおけるモバイル利用者の割合も、ここ 2 年で 10% 以上増加しました。最近では、60% 以上のユーザがモバイルからアクセスしています。 ユーザの利用形態が変化すれば、検索結果ページもその変化に対
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo! JAPAN研究所で快適に操作できるUIを作るといったインタラクション分野の研究をしている山中です。 この記事では、リンクやボタンの大きさに基づいてタップの成功率を推定するモデルについて解説します（国際会議ISS 2020で発表した研究成果です [1]）。 このモデルを活用すると、アプリやウェブページのデザインをするさいに、デザイナーが経験的にボタンやリンクの大きさを設定するのではなく、「リンクがこの大きさであれば95％の確率でタップできるから十分だ」などと操作性に基づいてユーザインタフェース（UI）を設計できるようになります。 タップの成功率を推定できると何が嬉しい？ スマートフォンやタブレットPC向けの
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く