【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI｜Goodpatch Blog グッドパッチブログ
おたろう @otarou01 セルフレジであたふたしてる年配者を見るに、あの手の人々の特徴として「文字を読まない」というのがあると思う。 ディスプレイの中にも外にも文字で色々と使い方が記されてるけど、基本それらを読まずに直感でボタン押してるだけの様子。 説明書読まない系、結論として文字情報は彼らには無力。 2024-06-23 10:17:20 おたろう @otarou01 よくセルフレジで困ってる年配の人を手助けするけど、動きから文字を読んでないのが分かる。 自分は説明書は最初にきちんと読むタイプだが、説明書を読まない人達は文字から何かしらの情報を得て事に当たるという習慣が無いから、困ったらまず目の前の文字を読むという事をしない。 2024-06-23 10:21:54 おたろう @otarou01 そういう意味では高齢者が使うインターフェースの開発には日本語が読めない外国人をシュミレー
話題のClaude「Artifacts」は対話型AIにおける「UX革命」である｜梶谷健人 / 新著「生成AI時代を勝ち抜く事業・組織のつくり方」
ChatGPTのライバルサービスの一つである「Claude」が、彼らのサーバーが一時パンクするくらい話題になっている。 その理由は、運営元のAnthropicが発表した2つのリリースだ。 リリースの1つ目は新しい大規模言語モデル「Claude 3.5 Sonnet」のリリース。そしてもう一つが、今回の話題の中心である「Artifacts」機能のリリースだ。 「Claude 3.5 Sonnet」は、ほぼ全てのベンチマークでOpenAIの最新モデル「GPT-4o」を打ち負かしており、処理スピードは前モデルの「Claude 3 Opus」の2倍で、API費用は1/5程度に下がっている。 シンプルに性能、速度、費用面などの面でトップクラスの大規模言語モデルが登場したのだ。 しかし、今回Claudeが話題になっている理由は「Claude 3.5 Sonnet」というよりも、もうひとつのリリースであ
じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば？」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが（良くない）実際にずれていて、ではなぜそんなことになっちゃっているのか
ランサムウェアの侵入経路は今はVPN機器とかRDPの脆弱性だった。「怪しいメールの添付ファイル開かなきゃ大丈夫」は時代遅れなのか？→有識者の声が続々
ういにゃん|フリーランスUnityエンジニアDJ Youtuber @ui_nyan 2008年よりツイッター活動を開始。東京を拠点に活動を続け、秋葉原、渋谷、新宿の多数のパーティーに出没している。その幅広いジャンルを吸収したクロスオーバーなプレイスタイルは、国内海外各地の業界人や多数のクラウドから根強い人気を誇る。今、日本で最も注目される２次元アイコンの一人である。icon:@tougehiro uinyan.com ういにゃん|フリーランスUnityエンジニアDJ Youtuber @ui_nyan ランサムウェアの侵入経路、いまはほとんどがVPN機器とかRDPの脆弱性なのね... 「怪しいメールの添付ファイル開かなきゃ大丈夫」は時代遅れなのか.... pic.twitter.com/ulYojHuWdG 2024-06-14 15:44:12
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl
ソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロー...記事の続きを読む
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
X、「いいね！」を週内に非公開化すると発表
X（旧Twitter）は6月12日（米国時間）、今週中に「いいね！」を非公開にすると、エンジニアリングチームの公式アカウントで発表した。他ユーザーの「いいね！」タブが見られなくなり、他人の投稿に誰が「いいね！」したかが非公開になる。 自分が押した「いいね！」は確認でき、自分の投稿についた「いいね！」も通知に表示されるが、他人の投稿に「いいね！」したのが誰かは分からなくなくなる。「プライバシー保護のため」としている。 同社は、「いいね！」が公開されていることで、インパクトのある投稿に「いいね！」するのをためらったり、そうした投稿に「いいね！」したことによって攻撃されるなどの問題が起きていると考えており、非公開化する方針を明らかにしていた。 関連記事 Xのエンジニア、「いいね」タブを全ユーザーで非表示にするとポスト Xのプロフィールページの「いいね」タブを非表示にすると同社の複数のエンジニアが
概要 Windows11のコンテキストメニューをWindows10までの従来仕様に戻すスクリプトをまとめた話です。 ググれば同じ話はいくつも出てくるのでn番煎じ感が強いですが、PowerShellだけで行ってる例は少なかったので、そこは新規性があるかも？ コンテキストメニューって？ エクスプローラやデスクトップ上などでファイルとか何もない場所を右クリックしたときに表示されるメニューのことです。 このコンテキストメニュー、Windows10までとWindows11で仕様が大きく異なります。 Windows11では表示をすっきりさせるためなのか、従来のほとんどの操作は非表示になっています。 なので、例えば7zipでの解凍・VSCodeで開く・送るなどの操作をしたい場合は「その他のオプションを確認」をクリックして従来のコンテキストメニューを表示してから対象操作を選択する必要があります。とてもつら
サイゼリヤ元社長「日本の会社は、なぜシステム開発を外部のシステム会社に丸投げして適当に現場をヒアリングさせるという方法を取るんだい？？」→システム内製化は単純ではない話
マルスと「熟練が必要なUI」についての議論
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
『マンガ ドラゴンクエストへの道』は、エニックスが出版事業に参入してまだ日が浅い1990年2月に出版された。 同時期の「モンスター物語」などと同じB5判で、280ページ以上もある長編だ。 中身はご存じだろうが、堀井雄二と中村光一がエニックスと出会い、ドラクエ1を開発するまでの経緯をマンガにしたもの。 有名な本だ。 現在も本書は一線級の資料として扱われており、ときにはゲーム史の参考文献として使用されていることもある。 本の中にはフィクションともノンフィクションとも書いてないのだが、大部分は事実に沿って構成されているが、もちろん一部は脚色も入っているという見方が一般的である。 そこに罠があったという話を、今回やっていこうと思う。 いろいろあったが、結局入手するしかないという考えに至り、こうなった。 のち91年にガンガンコミックスから再編集版が出ているが、単純にオリジナル版のほうが内容が多いよう
こんにちは！株式会社Rabeeのtotoです🐝デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「生成AI」はほぼ初めて！というWEBデザイナーの方が、業務で使える活用術をご紹介します。 まずは基本的な使い方の習得を目指しましょう！ 今回は主にChatGPTを使った業務の効率化方法をお伝えします。 私が普段利用する時はTeamプランを使用していますが、無料プランでできるものを取り上げましたので、ぜひ実際に試しながら読んでみてくださいね！ 1. 生成AIを使うリスクとは？はじめに、生成AIを使う上での注意点をお伝えします。 漠然とリスクを感じているために、生成AIを業務に活用できていないという方も多いのではないでしょうか。 主にどのようなリスクがあるのかを把握し、何に注意をすれば良いのかを知りましょう。 1. データの
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
AIUI.me - Screenshot to code
Transform any screenshot into a fully functional, reusable component with just a single click.
サイゼリヤのモバイルオーダーが完全にガチ勢のための攻めた仕様になっている→逆にタブレット操作に慣れていない人ほど使いやすい仕様かも
Yuta SAWA @sawawww 数ヶ月ぶりにサイゼに来たが、いつの間にかモバイルオーダーが導入されていたんだが、流石にこれは攻めたUIだな。。。 pic.twitter.com/vn4FxpU8wr 2024-05-31 12:22:05 ラムダ🥒ラムダ技術部 @yoidea 番号を暗記していればミスなく爆速注文できそうな常連向けのUIなのは個人的に嬉しい！ リッチなUIのモバイルオーダーアプリは、視覚情報メインでわかりやすさを追求している代償として、1つの商品を選択するのに何回も画面遷移させられる傾向にあるから、対極的なこの攻めたUIを採用したのは興味深い x.com/sawawww/status… 2024-05-31 14:58:39
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
Google検索結果からAIによるまとめを排除するフィルタ「&udm=14」 - YAMDAS現更新履歴
udm14.com このサイトのドメイン名にもなっている「&udm=14」とは何かということだが、その前に the disenshittification Konami code というサイト名にも注意する必要がある。 disenshittification とは、ワタシも何度も（その1、その2）取り上げているコリイ・ドクトロウによるオンラインプラットフォームの質低下を指す造語 enshittification（メタクソ化）の対義語である。 そして、Konami code だが、もちろんコナミに由来する言葉で、いわゆる「隠しコマンド」全般を指すフレーズになってるそうな。 つまりは、「メタクソ化に抗う隠しコマンド」、それが「&udm=14」というわけだ。サイトデザインを見れば分かることだが、ここで対象となっているのは Google である。 検索エンジンとしての Google の質低下につい
聴覚障害者が便利になったなと思うこと
Holy Cater @linear_pcm0153 アメーバブログで「音響・映像・電気設備が好き 」というコンテンツを書いているアカウントです。音響映像設備の設計・施工・設定調整・保守、ビデオエンコード・編集、ごく稀にオペレートを行っています。詳しかったり詳しくなかったり。 ｢ヒゲドライバー｣｢suguruka｣というピコピコ・ミュージシャンが好きです。 ameblo.jp/holycater/
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
「内回り」「外回り」って意味あるの？
もう20年近く東京に住んでいて、かつ山手線を使って通勤しているのに、未だに山手線の内回りと外回りがどっち行きの電車を指しているのかを理解出来ていない。自分の乗っている電車が円の内側を走っているのか外側を走っているのかなんて普通意識しなくない？と思うのだが、案内放送やら駅の表示では常に内回り・外回りと表現され続けている不思議。他の人は感覚的にきちんと内回り・外回りを理解出来ているんだろうか。 同じ「◯◯回り」であれば、名古屋の地下鉄の「右回り・左回り」の表記のほうが余程わかりやすいような気がする。
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
みねたけ@個人開発と投資やってる @MinetakeT 平日の昼間から映画見てビール飲んで温泉に入りたい♨️ ｜ iOSアプリ開発（23本リリース！）｜ Swift,Go,Java,Python,いろいろ！ ｜ 日本株、米国株、不動産投資やってる ｜ From. 20231009 appstore.com/yasuhirokojima
System tests have failed
When we introduced a default setup for system tests in Rails 5.1 back in 2016, I had high hopes. In theory, system tests, which drive a headless browser through your actual interface, offer greater confidence that the entire machine is working as it ought. And because it runs in a black-box fashion, it should be more resilient to implementation changes. But I'm sad to report that I have not found
トヨタ自動車は、足元のペダルをなくし、ハンドルを手で操作するだけで車を動かせる新たな運転システムを公開しました。足に障害がある人の運転をサポートできるほか、ドライバーの運転姿勢の自由度が高まるメリットがあるとしています。 通常の車のような足元のペダルがなく、アクセルとブレーキの操作をハンドルの左右に取り付けられたレバーで行います。 両手でハンドルを握った状態で、右手の親指でレバーを押すと車が発進・加速し、左手の指でハンドルの裏側のレバーを引くと減速する仕組みです。 また、ハンドルは電気信号で制御され、交差点などを曲がる際も手を離して持ち替える必要はありません。 足に障害がある人の運転をサポートできるほか、一般のドライバーでも、運転姿勢の自由度が高まるメリットがあるとしています。 システムは、まだ試作段階だということで、トヨタでは開発を継続し、実用化を目指す考えです。 開発チームに参加してい
Droomから一生退去できなくて困っている【ほぼ解決】
【TL,DR】 ダイワリビング（大和ハウス）の賃貸住宅Droomを解約する際、解約専用サイトから申請できないトラブルが発生過去に別のアパートを借りていたことによって、2件分のIDが発行されており、無効な方でログインしていたのが原因（←これ結構混乱する） 正しいIDでログインし申請していたが、修正箇所を直そうとしたら申請前なのに受付を拒否されてしまう 仕方なく営業所に電話するも、そこは既に賃貸業をしていないので中央オペレーターにつなぐよういわれたオペレーターに電話するも全然繋がらないオペレーターから解約申請が終了していると告げられた。日程の変更は別途営業所から連絡があるらしい。たぶん解決 とりあえず解約までは終わったらしいので、表現がおかしかったり間違っている部分は後で訂正します 【注意】 一部に不適切な表現があります 必ずしもダイワリビングが悪いとは限りません自身の落ち度や勘違いもあります
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セルフレジであたふたしてる年配者を見るにあの手の人々は「文字を読まない」ので文字情報は彼らには無力
ペン型マウスが、外出時の「マウスがかさばる」＆「狭い場所で使えない」不満をまとめて解消してくれました！ 【テレワークグッズ・ミニレビュー 第100回】
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
「自分はわかるからOK」というオレオレ表記が開発を遅らせ、プロダクトの評価まで下げてしまう
【特集】 MS IME、ATOK、Google 日本語入力、一番使いやすいのはどれだ？ATOK信者が比べてみた
Googleが開発したPythonのUIフレームワーク「Mesop」の特徴を開発チームが解説
Windows11のコンテキストメニューを旧仕様に戻す方法 - Qiita
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
『ドラゴンクエストへの道』再検証 - 神殿岸2
WEBデザイナー向け！はじめての「ChatGPT」で業務効率化をするヒント｜toto｜Rabee.inc
ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
「パスキー」のユーザー体験を最適化させるデザインガイドライン、FIDOアライアンスが公開
HeadlessなUIライブラリを利用する価値
ユニクロでセルフレジを信用しきっていたせいでうっかり万引きしかけてしまったお話「これは怖い」「確認は大事だよ」
ノートパソコンのキーボードの配置や仕様はどうにかならないものか、というお話「この前やらかしたよ」
「エクスプローラー」に「Git」を統合 ～アプリ開発者のためのWindowsシェル改善／ファイル右クリックメニューからのTAR/7z圧縮、「Sudo for Windows」なども
ダークモードの需要は意外と侮れない。メモアプリへのレビューから見えてくる「眩しさ」への拒否感、ダークモード搭載の安心感
トヨタ “ペダルレス”ハンドル操作だけの新運転システム公開 | NHK
シャニソンが抱える問題をデザイナーの視点で考察する①ガシャ画面編【後編】｜noteさん
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita