前回の記事『階層メニューやトーストUIが簡単に作れる新技術! JavaScriptで利用するポップオーバーAPI』ではポップオーバーAPIについて紹介しました。今回はその続編として、Chrome 133、Edge 133で新しく追加されたpopover="hint"属性に焦点を当てます。ツールチップなどのUIの実装に便利な属性で、その特徴や使い方、他の属性との違いを詳しく説明します。 ポップオーバーAPIのおさらい まずはポップオーバーAPIについて簡単におさらいしましょう。ポップオーバーAPIはその名の通りポップオーバーを実装するためのものです。ポップオーバーとは画面上の最前面に表示させるUIで、確認メッセージやトースト、メニューなどに使えます。 ポップオーバーAPIを使わなくてもCSS、JavaScriptを駆使して同じようなUIを作れますが、ポップオーバーAPIを使えば細かなケアを実
SWET第二グループのKuniwakです。本記事では画面仕様（後述）の仕様書に対する静的検査器を開発した事例について紹介します。 伝えたいこと 画面表示と画面遷移を記述する仕様書は機械可読にできる 仕様書が機械可読であれば仕様の静的検査ができる 静的検査によって自身の担当範囲の15%の画面から計40件弱の欠陥を発見した 機械可読な仕様書にはさらなる応用が見込める おさらい：仕様とは 仕様の定義はいくつかあります。 ここでは仕様とは実装の正しい振る舞いを定める基準とします。 ある実装が正しいと判定されることを、実装が仕様を満たしたといいます。 誰による判定でも実装が仕様を満たしたかどうかの判定結果は一致すべきです。 さて実装の欠陥と同様に、仕様にも欠陥が生じえます。 本来正しいと意図した実装の振る舞いを誤っていると判断したり、その逆に誤っていると意図した実装を正しいと判断する仕様には欠陥があ
Web プラットフォームの Interoperabilityを実現する！ Open UIのあゆみとこれから 問題 Button要素ってどんな見た目？ Button要素ってこんな見た目！ I am a button who has suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper suuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuper long content!!!!!!! Yey!!!! 「昔は？」 これぜーーーんぶブラウザネイティブのButton！ ref: Styling form controls | 456 Berea Street これぜーーーんぶFFのブラウザネイティブButton！ これが
We are excited to announce support of submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシック の halt と hmtx（水平方向のレイアウト情報）を値をダンプしてみる。 ttx -t GPOS YuGothicUI-Regular.ttf ttx -t GPOS YuGothic-Medium.ttf ttx -t hmtx YuGothicUI-Regular.ttf ttx -t h
日本語表記ルールの目的と方向性 表記ゆれをなくしたい 日本語は表記ゆれを起こしやすい言語。同義語が多く存在するし、一つの文章内にひらがな／カタカナ／漢字／アルファベットが混合し、同じ読みの単語ですら文字種の混ぜ方によっていく通りものバリエーションが存在する。何も考えずに闇雲に混ぜ合わせると読みにくい文章が生まれてしまう。そのため新聞や雑誌では書き手が異なる記事が混在していても読みやすいよう全体で統一した表記ルールを持っている。 これはコンピュータのユーザインターフェイス（UI）でも同じ話。考えてみればユーザがアプリケーションを行き来しながら画面の断片にその都度注目する行為は新聞で複数の記事をまたぎながら流し読みするのと似たようなものだ。 とはいえ UI においては短いテキストが多いためルールの重要性が想像しにくいかもしれない。ここで一つの例を考えてみよう。ほとんどのアプリケーションで編集メ
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ 2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。 たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。 最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。 ユーザーとして騙されないように知識を増やしておくのにも有用です。 著者は「UXライティングの教科書（紹介記事）」や「ザ・マイクロコピー（紹介記事」などでお馴染みの仲野 佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
プラットフォームによってはアプリケーションの実装技術には複数の方法があり、開発側の要件や制約、好み等に合わせて適した技術を選ぶことができます。例えばiOSアプリケーションの実装技術には、Appleが提供するCocoa Touch（およびUIKitやSwiftUIなどのフレームワーク群）がありますが、そのほかのベンダーから提供されている技術として、FlutterやReact Native, Titanium, Xamarinなどのフレームワークも存在します。 どのフレームワークが一番優れているのかを語ろうとすると宗教戦争に発展してしまいますので、そこは避けつつも「ネイティブとは何か」の解釈をはっきりさせておきたいと思いました。 どのようにして実装技術を選ぶのか開発現場としては、大抵は次のような観点で実装技術を選ぶことになると思います。 ・開発コスト、運用コスト重視 ・開発スピード重視 ・技術
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
なぜこの記事を書くのかこんにちは。Zaim で iOS アプリ開発をしている@akatsuki174です。 iOS アプリの話をする時、iOS エンジニアが何気なく使う専門用語があります。名称とモノが結びつくだけでも会話がスムーズになると思うので、「iOS エンジニア以外の人もこれを覚えておくと良いかも！」と思うものをまとめました。部品名だけでなく説明も書いているので、iOS の UI をもっと理解したい方は、こちらも頭に入れておくと良いと思います。 注： ・一部、iOS アプリに限らず Web アプリなどでも使用される用語も載せましたが、基本、iOS アプリの文脈で書いています。 ・重要度は、筆者が勝手に①頻出度合い、②iOS アプリを語る上で知っておいてほしい度合いを判断して割り振ったものです。 ・ほとんどHuman Interface Guidelines（以下 HIG）から情報を引
ブログプラットフォームMediumで活躍するUXデザイナーのマルチン・ヴィハルィが数週間日本を滞在した際、まず目についたのが日本で日常的に使われているUI（ユーザーインターフェース）だった。掲示板やボタン、また日本人にとって当たり前である日常的な行動、例えば並んで電車を待つことや飲食店で食券を買うことなどが、外国から来た人間にとっては驚くべきことだった。 2週間の日本滞在中、掲示物からゴミ箱に至るまで、日本式の物事への取り組み方について気づいた様々なことをツイッターで配信していった。結果、ツイートのスレッドは300にまで膨れ上がり急速に世界に知られることとなった。 This epic thread of @mwichary‘s observations and surprising moments in Japan, with an emphasis on everyday UIs,
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
というわけでNintendo Switchを発売日に(会社をサボって)入手した。 全体的に素晴しいデキで、ゲームコンソールのあるべき姿を提示したのではないかと思う。細かい変な仕様も散見されるが、実装面ではマルチユーザ型コンテンツプレイヤの模範と言って良いのではないか。 曖昧な"やめる": プレイ中であることが明示できないなら"キャンセル"など対にならない語にすべき まとめ ゲームは必要数のコントローラと形態(スティック2本必要等)をシステムに宣言するデザインになっていると考えられる ゲームは接続形態の変更に動的に対応する必要がある コントローラの組み合せによって操作不能になるシーンは許容されている(ユーザは何らかの方法でHOMEに戻って対処する必要がある) ライブラリ/抽象化層の提供側としては、これらの宣言を行えるAPIを提供した方がスムースに統合できるように見える。 据え置き機のような外
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
