ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
『Stable Diffusion web UI』自作のアイコンを無料で手軽に作成 | つれづれげーむず
「アイコン」「ロゴ」というのは自作すると結構たいへんなものです。 私のサイトで現在使ってるはというと windowsの付属ペイントで作成したこれでもかなりマシになりました。 この「アイコン」「ロゴ」というのは個人サイトにしろ、企業にしろイメージに直結するので、客商売と考えると費用対効果が実はかなり高いポイントですが、イラスト門外漢だとどうしても適当になってしまいがちですよね（実感）。 今回はこの「アイコン」「ロゴ」を『Stable Diffusion web UI』で作ってしまおうというものです。 作成作業自体は簡単ではあるのですが、『Stable Diffusion web UI』の導入が前提となります。 『Stable Diffusion web UI』の導入については私が導入した際の記事を挙げていますので参考にしていただければと思います。
タッチパネル式食券機を作ってる連中ってバカなの？
もういろんなところで言われてるけど、最近よく見るタッチパネル式の食券発券機ってなんであんなに無駄なステップが多いの？ 行きつけのラーメン屋でノーマルラーメンを頼もうと思ったらこんだけの画面を経なきゃならない。 ・ラーメン、サイドメニュー、ドリンクからラーメン選択 ・ラーメン、チャーシューメン、煮卵ラーメンなどからラーメン選択 ・トッピング選択画面でトッピング無しを選択 ・麺普通、大盛から普通を選択 ・お支払方法選択ボタンをタッチ ・電子マネー、現金から電子マネーを選択 ・いくつかの選択肢からたとえば交通系ICを選択 ・カードをタッチ→発券 こんなのこうすりゃ簡単じゃん。 ・注文画面（＝初期画面）で注文する品を選択→他メニューやトッピングも追加選択できる状態で「電子マネーをタッチ、あるいは現金を入れてください」の表示 ・カードをタッチあるいは現金を投入して発券（どの電子マネーかは自動判別）
Konsta UI - Mobile UI components built with Tailwind CSS
🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥
「デザイナーいないんですか？」松屋の食券機のUIがどんどん悪化してきたがここに来て『極み』に到着した感が出ている
enden @enden_nix これまでも牛丼1杯と半熟玉子頼むだけで16回のボタン操作が必要だったりして異常だったけど流石にこれは無いと思う、個人経営のラーメン屋さんがなんとか導入したとかならまだしも大手全国チェーンの最新型機ですよ？？？？
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
医師とデザイン。なぜ医療現場は複雑なUIが好まれるのか？｜Kei Kobayashi
医師は情報が詰めこまれたスライドが好き？こんにちは、株式会社CureAppデザイナーの小林です。精神科の医師ですがデザインが好きすぎてデザイナーとして働いています。 医療の世界から会社員に転身すると、日々さまざまな発見があります。先日社外の人とプレゼンテーションの話題になり 「医師向けのプレゼンでは、シンプルなものより情報が詰め込まれたスライドが好まれるんです」 と言われ驚きました。 たしかに医療系のスライドは医師に限らず文字が詰めこまれた分かりづらいスライドが主流ですが、それはデザインへの関心が低いだけでけっして「好き」なわけではない、そう思っていました。 しかし改めて「もしかして医師は本当に複雑なデザインが好きなんじゃないか？」という疑念がわいてきました。 よく見る医療系スライドの一例 https://www.dinf.ne.jp/doc/japanese/resource/kouse
親にLINEの使い方を教えようとしたけど、UIの意味から伝わらなくて詰んでしまった話→こういう層はどうやって生まれるのか
うめめ @beConjuror 親にLINEの使い方を教えていると、UIの意味が圧倒的に届かない層があることが再認識される。写真を送るアイコンは理解できず、パスワード入力の目のマークはわからない、ハンバーガーメニューは意味不明、スワイプ操作は異次元。そういえば自分はどうやってこれらのマークの意味に慣れたんだっけ...。 2022-08-27 11:21:05 うめめ @beConjuror 「うわぁ…！スライドしたらトークが消えてしまった！どうなっているんだこれは」みたいなこと、自分も過去に経験したはずなんだけれど、いつのまにかなんとか使えるようになっている。「IT機器利用センス」みたいなパラメータを知らない間に鍛えているのではないか。 2022-08-27 11:27:33
SPAでボタンコンポーネントをリンクにする時に気をつけること
この記事はVueアドベントカレンダー2021の7日目の記事です。 SPAでボタンのコンポーネントをリンクとして扱いたいときに気をつけたいことを書きます。 Vueに限った話ではないのですが、僕がVueで開発をする機会が多いのでサンプルコードではVueを使用しています。 他のフレームワークを使っている方は、適宜置き換えて考えていただければ幸いです。 ボタンのコンポーネントでリンクさせたい時ありますよね？ Vue Routerを使用していれば router.push('/foo') のように関数を実行して遷移させることができるので、コンポーネントの内部が aタグ でも buttonタグ でもリンクとして動作させることが可能です。 どちらでもできるけど aタグ を使おうぜというのが本記事の言いたいことです！ サンプル 早速ですが、サンプルを使って紹介していきます。 見た目の同じボタンが2つ並んでい
マイクロソフト、マルチプラットフォームUIを実現する「.NET Multi-platform App UI」（MAUI）を実際にデモ。単一コードからWebとWindowsアプリを生成
マイクロソフト、マルチプラットフォームUIを実現する「.NET Multi-platform App UI」（MAUI）を実際にデモ。単一コードからWebとWindowsアプリを生成 マイクロソフトは2月26日にオンラインイベント「.NET Conf 2021 - Focus on Windows」を開催しました。 イベントの中で同社は、マルチプラットフォームUIを実現するフレームワーク「.NET Multi-platform App UI」（以下、.NET MAUI）を用いて開発したアプリケーションをデモし、実際に単一コードから生成されたWebアプリケーションとWindowsネイティブなデスクトップアプリケーションを披露しました。 .NET 6に組み込まれる「MAUI」はマルチプラットフォームUIを実現 .NET MAUIは、今年11月に正式リリース予定の「.NET 6」に組み込まれる予
UI Interactions
copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transform 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transform: rotate(-45deg); } .ui-
結局VanillaJSである。 - nobkzのブログ
anond.hatelabo.jp nida3001.hatenablog.com 上記のブログに刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。しかし、なんか書くのダルいので、大分大雑把にかくぞ。 さて、さっそく結論を述べよう。今のフレームワーク論争やらに対する解決策はVanillaJSを使うってことである。 フロントエンドSPAのフレームワークについて まず、今のほとんどのフレームワークが使えないってのはそのとおりである。その話してみよう。その理由は、「フロントエンド」 ってのは一括りにできないからである。「ハッカーと画家」のとある言葉をアレンジして言えば「フロントエンドはユーラシア大陸のようなものである」。フロントエンドが関わる範囲が大きすぎるのである。ヨーロッパもあればアジアもあれば中東もあるという感じである。 範囲が大きすぎて、フレームワー
Home - Office UI Fabric
All Microsoft Global Microsoft Security Azure Dynamics 365 Microsoft 365 Microsoft Teams Windows 365 Tech & innovation Microsoft Cloud AI Azure Space Mixed reality Microsoft HoloLens Microsoft Viva Quantum computing Sustainability Industries Education Automotive Financial services Government Healthcare Manufacturing Retail All industries Partners Find a partner Become a partner Partner Network Fin
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/t_takasaka/status/1570716749565231104
駅のタッチパネル券売機で、一般の人が躓くところはどこにあるのかという疑問に対して様々な意見 - Togetter
https://twitter.com/fladdict/status/1458294748918083588
ニコニコ動画（Re:仮）
Components – Material Design 3
