macOSのSafariでは、ボタンやリンクにTabキーでフォーカスを移動できないのがデフォルトの設定になっている Safariでは、「設定」画面の「詳細」パネル内にある「Tabキーを押したときにWebページ上の各項目を強調表示」のチェックを入れていないと、Tabキーを押したときにボタンやリンクにフォーカスが移動しません（Optionキーを押しながらTabキーを押すと移動できます）。デフォルトではチェックが入っていない状態になっています。 また、macOS版Firefoxでは、「設定（about:preferences）」内の「タブキーでフォームコントロールおよびリンク間のフォーカスを移動する」にチェックが入ってないと、Safariと同じくボタンやリンクにはTabキーでフォーカスが移動しないようになっています。これはSafariの挙動にあわせて追加されたようで、やはりデフォルトではチェック

うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル（ネットショッピング、旅行予約サービス、飲食店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス）について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました（利用者数については、ニールセンとICT総研の調査を元にしています）。このうち、16のサービスの運営企業から回答がありました（回答率は53％）。 回答した企

私は電車にほぼ乗ったことが無い。 正確に言うと、旅行先で親戚に手を引かれながら乗ったことはあるのだが、その後高熱を出したせいで何も覚えていない。 普段の移動で電車を使ったことは一度もない。 電車でもバスでも行ける場所なら、バスの方が時間がかかるとしても後者を選んできた。 地元付近の電車を肉眼で見たことすらない。 駅のことは「○○駅という名前の小さな、または大きな商業施設」と認識している。 あの場所のどこかで電車とやらが出入りしているイメージが全く湧いていない。 高校生くらいまで、「電車が遅延した」というのを「電車がチェーンした」だと勘違いしていた。 「チェーンが絡まったかのように動けないから遅れている」みたいなイメージから派生した言葉なのかと思っていた。 これが、まともに電車を利用したことがない人間の実態だ。 てっきり、電車に乗ったことが無いなんて普通のことだと思っていた。 おかしいとも思

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「この悪い子猫ちゃんめ！」、通称「わるこね」における会話シーンのカメラ演出の事例をご紹介します。 このデザインにより、以下の特徴があるように感じました。 一人称視点のカメラが固定式から移動式に変化することで、新しい表現になっている（新奇性） 該当の画面はこちらです。 最初はよくある会話シーンだと思っていました。 画面中央にキャラクターが表示されて、演技する系の画面デザインですね。 ©2021 xeen Inc. 会話を続けていくとキャラクターがプレイヤーに近づきます。 これにより見ている画面はプレイヤー自身の視点であることが強く意識されます。 ©2021 xeen Inc. 更にキャラクターに手を引かれてカメラが

日々ゲームを楽しむにあたって、“没入感”を大切にしているプレイヤーは少なくないだろう。しかし、どっぷりとゲームの世界観に浸りたくとも、ちょっとしたことで興をそがれてしまうことがある。よくある例が、「暗転した画面に自分の顔が映り込んでしまう」というものだ。画面がツルツルして反射しやすい、携帯ゲーム機やスマートフォンで顕著に発生する事象である。虚構から突如として現実に引き戻されてしまい、人によっては大きなダメージを受けることだろう。 この「映り込み現象」に対して、女性向け恋愛シミュレーションゲーム、いわゆる乙女ゲーム業界では、興味深い対策がおこなわれていたようだ。ゲームプログラマーのまかべひろし氏はTwitterに「大昔、乙女ゲーとかではLoading画面とか真っ黒な画面を作るの禁止、って仕様が流行ったの思い出した」と投稿。その投稿を見たH/de. 氏はPSP向け乙女ゲーム『アルカナ・ファミリ

三菱電機は2月14日、「直感的に操作できるリモコン」を発表した。リモコンは、視覚障がい者が通う横浜訓盲学院の教師や生徒と共同で開発。操作する項目ごとに形状や動きが異なり、機器操作に慣れていない人や視覚障がいのある人でも直感的に操作できるという。 通常の家電製品では、同じような形状のボタンが並んでいたり、ボタンの配置が直接的な意味を持たなかったりするため、視覚障がい者にとって理解しにくいことがあるという。例えば、エアコンのリモコンでは、設定温度を操作するボタンが水平に設置されていることが多く、先天性視覚障がい者には理解しにくいそうだ。 そこで、温度を調節するボタンを垂直方向に配置。最上部を31度、最低部を16度とし、1度ずつ設定できるよう階段状のデザインにした。これにより、上下の概念を垂直方向で理解でき、視覚障がい者も積極的にリモコンを操作しやすくなるという。風量はボールの数で表現。右側にボ

ウェブサイトでもアプリでも、ボタンやアイコンのデザインは統一するのが当たり前である。これが守られていなければ、見た目の印象も悪くなり、操作性にも影響する。しかしながら、電子カルテの業界では、この常識は通用しないようである。 これはＦ社の電子カルテで使用されているボタンの一部であるが、見事なほどにデザインがばらばらで、まるで時代遅れのボタンの見本のようである。一つのソフトウェアにこれだけテイストの異なるボタンを使っていることに、感動すら覚える。 下請けに任せた結果、このような事態を招いたのではないかと想像するが、事前にUIに関する明確なルールを決めてなかったのだろうか。フラットデザインとか贅沢は言わないので、せめてボタンのデザインだけでも統一してもらいたい。

autofill_ui.md 見た目の上で、隠されているフィールドに対しても自動入力してしまうという問題が話題になっている(2017年1月) https://github.com/anttiviljami/browser-autofill-phishing のだけれど、この問題の歴史はとても古い。自分も調査したり問題を報告したりしているので、振り返ってみる。 2012年の話 2012年4月のShibuya.XSS #1 https://atnd.org/events/25689 で、Hamachiya2が発表した http://hamachiya.com/junk/x-autocompletetype.php この問題に関連して「手の込んだクリックジャッキング」を使って情報を盗み出すデモを作った。 https://plus.google.com/112675818324417081103/

最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック

AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be

インタラクションには行為のコストがある。インタラクション自体のみならず、その行為を始めるまでのインタラクションのコストを考えることが大切だ。今回のテキストでは、主にVR（ヴァーチャルリアリティ）やAR（拡張現実）におけるインタラクションの問題を例に、「インタラクションコスト」について考察していく。 ここで注目するのは、プロダクトやサービスを利用する際のインタラクションではなく、その体験の「外部」で生じるインタラクションである。インタラクションコストという用語で示したいのは、利用状態に入るまでのインタラクションが、行為を始める上での障壁になるということだ。 体験の外部にもあるインタラクション 現在「VRとインタラクション」について聞くと、没入感を高めたり酔わないようにする設計など、VRコンテンツというVR空間の「内部」に関わる話がほとんどだ。そこにも多くの課題はあるものの、筆者が常々思う課題

日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ、このあたりのことについて書いてみたくなった。 僕はjQueryで最後の五文字では改行が起きないようにいじったりしていた(うろ覚えで書いたもので、実際にはもっと複雑にやっていたと思う)。見出しがテキストのみの場合、最後の数文字の間に非改行ゼロ幅スペース(U+FEFF)を仕込むことで、その間で改行が起こらなくなるという仕組みだ。ここでは比較のためにクラスで判定するように書いてあるが、実際にはh1から

任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。 nakajmg/ScriptAutoRunner 使い道 スニペットを実行させておきたいときに jQueryなどのライブラリを挿入しておきたいときに デバッグに devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。 ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。 ホスト名でフィルタリングできるので、デバッグにも使えると思います。 使い方 まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。 オプションページは次の3つの方法で開くことができます。 拡張機能のアイコンを押して歯車アイコンをクリック 拡張機能のアイコンを右クリックして"オプション"

増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検索ボックスが表示され、検索ボックスの左上にある✖をクリックすると閉じることができる。実際のウェブサイトではリンクの代わりに虫眼鏡のアイコンでも使ってやれば良いだろう。 マークアップ <aside id="search" class="searchbox"> <h1>Search this site</h1> <form> <input class="query" placeholder="Enter sea

■ 職場のビルのエレベータがすばらしいので自慢する Facebook某所でエレベータのマナー的な話をしていて、うちのオフィスが入っているビルのエレベータがすばらしいのを思い出したので自慢しておくことにする。べつに自社ビルでもないし、ビル自体は新しくもなく、エアコンが雑な作りだとかいろいろ文句はあるけど、この日立製エレベータだけは本当に素晴らしいので。 まず第一に「閉」ボタンがない。必要ないから(なぜ必要ないかは後述)。よく、エレベータの「閉」ボタンをカチカチとせっかちに押す都会の日本人の悪癖が揶揄されることが多いけど、ここのエレベータではそもそもそれがない(できない)。 さらに「開」ボタンも基本的に押すな、と書いてある。押していいのは危険防止のときだけにしろという。けっきょく利用者は行先階のボタンを押すだけで良くて、そしてそれで十分すぎるほど快適に利用できるようにチューニングされている。

今回(2014年9月)のAppleのウェブサイトのリニューアルにはいくつもの興味深い点がある。ナビゲーションの二本線とバツ印が共にインラインのSVGなことなどもそうだし、多くのポーションがモダナイズされたにも拘らずPrototype.jsを継続利用したこともすごく気になる。その中でも一番気になったのは狭い画面向けの横にはみ出すナビゲーションだ。 これまでの通常は隠されている狭い画面向けのナビゲーションの多くは、次の3つに大別されていた。 ドロップダウン オーバーレイ ドロワー 極稀にアイコンのみのコンパクトに横へ並べたものもあったが、いずれの場合もナビゲーションの項目は縦に並んでいることがほとんどだ。一覧性に富み、アクセス性が高く、ユーザーの学習コストも低い。 これに対して横にはみ出すナビゲーションは、項目を画面外にはみ出すように横に並べ、スワイプでスクロールして探させるという形のものだ。

モバイルファースト室の @rejasupotaro です。 今年のGoogle I/OではAndroid One、Android L、Material Design、Android Ware、Android Auto、Android TV、Google Cloud Platform、Google Fitなどの発表がありました。弊社からは私と @sys1yagi と @__gfx__ が参加したので、何回かに分けてGoogle I/Oの発表の内容を紹介します。 今回のテーマはMaterial Designです。内容は公式ドキュメントやセッション動画の要約や参考リンクからの引用を含みますが、筆者の考察や主観も含まれます。 Material Designとは Material Designとは、Googleが発表したビジュアル、モーション、インタラクションのプラットフォームやデバイス間の包括的な