Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
はじめまして、株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 1年目デザイナーが日々の学びをnoteに綴っていきたいと思います。 雰囲気や想いなどをデザインとして具現化するのって難しいですよね。 何かヒントになるようなものがあると嬉しいなと思い…。 今回はペルソナやトンマナを決める際に役立ちそうなブランドアーキタイプ についてお話しします。 アーキタイプとは？アーキタイプとは、心理学者カール・ユングが提唱した概念です。 人々の深層心理に共通して存在している、典型的なキャラクターや象徴を指します。 ブランドアーキタイプとは？ブランドアーキタイプは、その理論を応用したもので、ブランドが持つパーソナリティや特性を表現する枠組みとして使われます。 ブランドは12の主要なアーキタイプに分類されます。 デザインとブランドアーキタイプの関連性デザインを行う際にブランドアーキタイプを活用す
北海道テレビがコナミとのコラボにより野球中継画面がパワプロ仕様に→｢アウト表示が出るせいで普段の試合では感じることのないイライラ感がある｣
HTB北海道テレビ @HTB_kouhou ♪onちゃん6⃣ﾁｬﾝHTB！でおなじみ、HTB北海道テレビの公式アカウントです＊YouTubeもﾌｫﾛｰお願いします＊ #水曜どうでしょう #ハナタレナックス #おにぎりあたためますか #イチモニ #イチオシ ◆SNS利用規約htb.co.jp/htb/shisei/sns… youtube.com/c/HTB6CH HTB北海道テレビ @HTB_kouhou ＼#イチオシファイターズ⚾／ オリックス🆚北海道日本ハム あす5/4(土)ごご1時からHTBで放送📺 GW特別企画🎏 人気ゲーム「#パワプロ」とコラボ！ プロ野球中継の画面表示がほぼパワプロ⁉ ゲームのデータで選手の特徴もわかりやすくお伝え！ ファイターズ戦観戦チケットなどが当たるプレゼントも🎁 pic.twitter.com/vAuRWSoST7 2024-05-03 13:0
個人ゲーム制作の理想と現実私は個人でゲームを制作をすると同時に、ゲーム制作を通じてより社会を良くしていきたい、と考えている者です（その辺のくわしい話はこちら）。 近年、インディーゲームと呼ばれる、個人や小規模で作成したゲームがランキング上位に入るような機会も増えると同時に、個人でも無料でゲームを作れる環境が大分整ってきました。 将来のなりたい職業ランキングに「ゲームクリエイター」、が入るような時代になり、「ゲームを実際に自分でも作ってみよう！」と思っている人もきっと多いと思います。 しかし、実際のところゲームを完成させたり、継続して作っている人の数は、体感そこまで増えていないと感じます。 その理由はなにか？ そこにはゲーム制作を始めると感じる、理想と現実の大きなギャップが要因の一つにあると感じています。 具体的なギャップの中身としては、 ・プログラミング知識が必要だが、難しくて挫折 ・時間
ネット記事に発信元情報 偽情報の拡散抑止、来年開始へ ｜ 共同通信
全国の新聞社やテレビ局、IT企業、広告代理店が加盟する団体が、偽情報の拡散を抑止するため、インターネット上の記事や広告に発信元の情報を付ける技術の開発を進めている。ユーザーが発信元を確認して、信頼できる情報かどうかを判断しやすくする。 この技術は「オリジネーター・プロファイル（OP）」と呼ばれ、記事や広告に、第三者機関が確認した発信元の企業情報やコンテンツの編集方針をひも付け、表示する仕組み。来年、米グーグルの「クローム」などの閲覧ソフトにこの機能を追加できるようにする計画だ。 ネット上には真偽不明の情報も多い。報道機関の配信記事の見出しや内容を改ざんするケースも発生している。生成人工知能（AI）の技術進化で、コンテンツが真正かどうかを見極めるのが難しくなっている。 OPの技術研究組合の理事長は「日本のインターネットの父」と呼ばれる村井純・慶応大教授が務める。村井氏は「偽情報の拡散が抑制さ
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
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
与作さん(YsK439) @YsK439 音楽レーベルの主宰 @diversesystem クリエイティブに関わる雑用やゲーム開発協力が仕事です。重度のライトゲーマー。昔は音ゲーとガンシューのスコアラーやってました。 DiverseSystemの事はDiverseSystemにお問い合わせ下さい。 gamersnest.com
寺田 学（@terapyon）です。2024年4月の「Python Monthly Topics」は、Python Web UIフレームワークの1つであるStreamlitを使ってWindowsやmacOSのデスクトップアプリを作る方法を解説します。 目的・モチベーション Pythonで自動化のスクリプトを作ったり、JupyterLabやColaboratoryでデータの可視化を行うことがあります。これらを作成者以外の多くの方に利用してもらう方法として、Webシステムやデスクトップアプリとして提供する方法が考えられます。 Webシステムの構築やデスクトップアプリの作成となると、技術的なハードルがあります。他には、時間的なコストに見合わないという状況もあり得ます。 Python Web UIフレームワークを使うことで、比較的少ないコードでWeb UIからスクリプトの実行や可視化をするアプリ
アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。 このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Section(header: Text("タイトル")) { Text("テキスト") Text("テキスト") Text("テキスト") } } .listStyle(.plain) }これをプレビューすると、各リストの間に 物理ピクセル数 1 の太さの線が表示されます。 iOSアプリのリストAndroidアプリのリストは以下
IIJは、2024年2月7日、ダークパターンやCookie利用における法規制や企業対応をテーマとしたセミナーを開催した。 インターネットが日常生活に必要不可欠で、当たり前に使用するツールとなった現在、消費者は、個人情報を窃取されたり、意図に反した行動を取らされたりしないよう、常に注意しなければいけなくなった。一方で、サイトやサービスを運用する企業側が、プライバシー規制の厳格化と相まって、配慮すべきトピックとなっているのが「ダークパターン」および「Cookieの利用」だ。 本記事では、国内外のダークパターン規制および具体例を紹介するセッションと、ヤマハ発動機やライオンのサイト担当者が登壇したCookieバナー実装がテーマのパネルディスカッションの様子をレポートする。 国内外のダークパターン規制事情、日本でも特定分野やケースで法令違反となることも まずは、「欧米でのダークパターン規制の動向と日
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。 「パーツ別デザインまとめ」シリーズも第３弾となりました。 今後も地道にUIパーツの収集・調査を続けていく予定です！ （前回までの記事も是非ご覧ください ↓） はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。 今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか？という調査も含めデザインを収集しました。 💡横に整列宅トラカードの中に手順の概要やイラストをまとめている形式です 中身の情報量によりますが、4ステップ程度だと丁度よいサ
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
5年後、生成AIでエンジニアの仕事はどう変わるのか？ メルカリ、LayerX、Algomaticの3社が語るAIへの取り組み
生成AIの技術革新が相次いだ2023年、生成AIを本格的に業務やサービスに導入する企業が増える中、生成AIの最前線に取り組むエンジニアは、現状をどう観察していて、今後どうなっていくと考えているのだろうか。本セッションでは、メルカリ、LayerX、そして2023年に創業したばかりのスタートアップAlgomaticの3社が集い、事業フェーズの異なるそれぞれの視点から、生成AIへの現状の取り組みや、今後期待する変化について語った。 生成AIへの3社の取り組み 「生成AIを本気で推進するトップランナーが語る！AIの展望2024年とその先」と題したパネルディスカッションでは、PIVOT 蜂須賀大貴氏がモデレーターを、メルカリ 石川佑樹氏、LayerX 松本勇気氏、Algomatic 南里勇気氏がパネリストを務めた。 冒頭で蜂須賀氏は「他の2社に負けない生成AIへの取り組み」というテーマを提示し、各社
待ち受けにしてるうちの犬、なんか当然のように時間より前にいるし、救急車呼ぶときもこいつがいる真っ白な空間を通らないといけない
原口フ二ャオ @haraguchitachi 待ち受けにしてるうちの犬、なんか当然のように時間より前にいるし、救急車とか呼ぶときもこいつがいる真っ白な空間を通らないといけないのマジでやばい pic.twitter.com/FBNKUmcyBw 2024-04-23 21:58:57
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
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 最近、プロダクトやサービスの内容を紹介する手段として、イラストやモーショングラフィックなどを用いた動画が使用されているのをよく見かけます。 そこで今回は、サービスの内容を1~2分でまとめたサービス紹介動画を複数ピックアップし、その構造を分析してみることにしました。 はじめに本記事を書くに至った経緯私は現在、映像のデジタル合成やモーショングラフィックの制作などができるAdobeのソフト“After Effects”の学習をしています。 直近のゴールとして、モーショングラフィックを用いたサービス紹介動画を作れるようになろう！ということで、今回の記事はその学習の一環としてまとめました✍️ 動画で伝えるために大切なことAfter Effectsのスキルも重要なのですが、サービス紹介をする上でより重要なのはそのストーリー構成
株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方
1.Tooltip こちらは定番ですね！ 特に、何か注釈などの追加情報をユーザーに知らせる時はよく利用します。要素のホバー時だけ表示できるので、エリアの狭い箇所でも利用できるUIです。ただ、警告などの内容には非推奨な点やモバイルユーザーの考慮を必要とする点はデメリットですかね。 // page.tsx <div className="mt-10 mx-auto text-center"> <Tooltip label="ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。"> <span className="p-2 bg-gray-100 rounded-full">🗑️</span> </Tooltip> </div> // Tooltip.tsx import { ReactNode } from "react" type TooltipProp
HTML-first, framework-agnostic implementation of shadcn/ui - franken/ui
Coming Soon We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates. Just a demo The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements m
こんにちは、MLOpsチームです。先日OCRモデルを学習するためのアノテーションにおいて、作業効率を検証するためのPoCとしてアノテーションUIを開発しました。本記事ではこのアノテーションUIにおける工夫について、試用によって得られた知見をまじえつつ紹介します。 はじめに アノテーションUIを開発することとなった背景について説明します。 アノテーションUIとは アノテーションUIは機械学習の学習データを作成するためのUIです。アノテーションUIはアノテーション作業の効率に強く影響し、アノテーション作業によって得られる学習データの量は機械学習の精度に大きく寄与します。したがって、アノテーションUIは機械学習において最も重要なコンポーネントのひとつといえます。 UIを開発した背景 キャディではOSSツールなどのUIを用いてアノテーションが行われていましたが、ここに独自の工夫を導入すれば入力効率
HTML の popover 属性が、すべてのモダンブラウザにおいて正式にサポートされ、足並みがそろいましたので、popover 属性について簡単に紹介します。 先日、Firefox 125 （125.0.1） が正式にリリースされましたが、このバージョンで、HTML の popover 属性、および popovertarget 属性、popovertargetaction 属性、CSS の :popover-open 疑似クラス、::backdrop 疑似要素の popover 対応といった Popover API 関連のサポートが行われました。 Firefox 以外のモダンブラウザではすでにサポートが完了していましたので、これですべてのブラウザで使用できる状態になったといえます。 popover - Can I use... 個人的に画面上に何かしらポップアップして表示するような UI
“消えない広告” ×マークが押せません!? | NHK
スマホを使っていて、イラッと感じること、ありませんか。 「×マークが小さくて、消そうとしたら、意図せず広告に触れてしまった」 「×マークを押そうとしたら、急に広告が動き、誤って広告サイトに飛んでしまった」 ウェブでの不快なことを聞いたある調査では、「広告を誤って押してしまったり、押しそうになった」と答えた人が、最も多いという結果でした。 実は、これ、「ダークパターン」と呼ばれ、世界で問題になっています。 （デジタルでだまされない取材班 芋野達郎） 押す気はないのに、広告を… マーケティングのリサーチ会社「クロス・マーケティング」が、20代から60代の1100人に、ウェブサイトやアプリを利用している際に感じる不快なことを、複数回答でたずねました。 すると、最も多かったのは『広告が表示され、押す気はないのに誤って押してしまった（押しそうになった）』で、29.5％、およそ3割にのぼりました。 続
BARフロントえんどう #2 「CSS Library / Framework」での登壇資料
Guppi @clgldh2119 大学4年間この機能のおかげで いくつもの課題たちを助けられたが 社会人になりOutlookになったせいで 添付忘れ今のところ2回してる。。。。 Gmailに甘やかされた証拠。。 x.com/shinagawajp/st… 2024-04-19 20:38:40
システム開発においてテストの自動化は欠かせない要素になってきている。継続的に開発を進めながらサービスを成長させるモダンな開発スタイルは、高い頻度でテストすることで品質を担保しているからだ。一方、自動テストを実施したいと考えながらも、実行まで至らない、実行し始めてもうまく継続できていないという開発者も少なくないだろう。本セッションでは、ソフトウェアテストの専門企業である株式会社ヒューマンクレストの浅黄友隆氏が、UI層を操作するE2Eテストの自動化の取り組みについて具体的に紹介した。本レポートでは、自動テストを進める際に現れる2つの山と激しい環境変化にどのように対応するのか、そのポイントを解説する。 自動テストを進めるうえで直面する2つの課題と環境変化 株式会社ヒューマンクレスト 取締役 兼 技術推進本部 本部長 / テスト自動化研究会（STAR） 浅黄友隆氏 セッションの前半で、浅黄氏は自動
meta社製StyleXやChakraチームのPanda CSSなど、CSSフレームワーク界隈は大盛り上がり。そんな各CSSフレームワークはどのような仕組みで動いているのか、自らも「Kuma UI」というCSSフレームワークを作っている観点から深掘りしていきます
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
「業務システムの画面デザインを作るときに参考になるサイトってある？」 「使いやすいUIにするにはどのようなポイントに注意したら良い？」 業務システムは操作性が命。システムの画面デザインが優れていないと、ユーザーが不便に感じてしまうかもしれません。使いやすいシステムを構築するには完成しているデザインやUIを参考にし、開発中の業務システムにうまく取り入れる必要があるでしょう。 そこで本記事ではデザイン・エンジニアリング両面からサービスの設計・開発を行っているFlowzが以下の内容について詳しく解説します。 業務システムの画面デザインサンプル7選 画面デザインにおける5つのポイント 改善すべき画面デザインの特徴 デザインのサンプルを探している方はもちろん、画面を設計する際に意識すべきポイントについても解説するので、ぜひ最後までお読みください！ なおFlowzではデジタル領域でのサービス設計、プロ
This is my claim: we, as a civilization, forgot how to center things. I mean, we know how to do it. It has never been simpler: display: flex; justify-content: center; /* Horizontal centering */ align-items: center; /* Vertical centering */ (don’t ask why you need to remember four words instead of just horizontal/vertical, it’s still better than before) Or you can use grids if you want: display: gr
近年、AIの進化によりソフトウェア開発のプロセスが大きく変化しています。これまで手作業で行われてきた画面設計やプログラミング作業も、AIの登場により驚異的なスピードに進化しています。今回は、その中でも私が実際に使っている2つのAIツール、UizardとUI Sketcherについて紹介します。 なお、本記事では医師と患者を繋ぐマッチングサービスという架空のサービスを例に話を進めます。 Uizard: サービス概要からUIデザインを自動生成 Uizardは、画面設計作業を劇的に短縮する革新的なAIツールです。このツールを使えば、サービス概要を入力するだけで、わずか数分で美しく洗練されたUIデザインが生成されます。つまり、開発者は時間をかけてUIデザインを考える必要がなくなり、その時間を他の重要な作業に集中することができます。 Uizardの使い方 メニューから Generate with A
「ExcelのフォントをMeiryo UIにしてる人の資料はマジで安心感があって信頼できる」資料に使う文字フォントにも色々な宗派があって時に聖戦が起こる
ぴよすけ @piyopiyosakana1 ExcelのフォントをMeiryo UIにしてる人の資料はマジで安心感があって信頼できる。 逆に、他のフォントは開いた瞬間、テンション下がって眺める気になれない。 2024-04-12 20:54:10
この記事は enechain Advent Calendar 2023 の18日目の記事です。昨日は okp さんの「経験が裏目に？！大手IT企業出身PdMが3カ月で学んだこと」でした！ はじめに なぜ、今ダークモードか ダークモードおさらい ダークモードの歴史 ダークモードって意味あるの？ 省電力の効果について 文字が見やすい＆目への負担が少ない ダークモードの利用率 各サービスのダークモードの実際 2023版 X Gmail ミュージック & App Store Instagram iSPEED ダークモード未対応のアプリ＆ダークモードのみのアプリ ダークモード未対応のアプリ ペイ系 ショッピング系 ダークモードのみのアプリ ダークモードの行方 まとめ はじめに 私はenechainのプロダクトデザイナーで、デザインマネージャーの近藤です。今年の10月に入社しており、もうすぐ3ヶ月が経
コンビニコーヒー「R買ってL注いだ」窃盗告白に議論沸騰、「犯罪者も被害者も生まないシステムを」犯罪機会論の視点 - 弁護士ドットコムニュース
弁護士ドットコム 犯罪・刑事事件 コンビニコーヒー「R買ってL注いだ」窃盗告白に議論沸騰、「犯罪者も被害者も生まないシステムを」犯罪機会論の視点
増えるタッチパネルに困ってます 視覚障害者には何も伝わらず 「世の中は便利になるけど」増す生きづらさ：東京新聞 TOKYO Web
荒川区町屋の職場近くのスーパーでは、支払い方法をタッチパネルで選ばなければいけない。全盲の長島さんは店員に操作してもらっている。カードの暗証番号は知られたくないので、スマートフォンのバーコード決済を使う。混雑時は店員に申し訳ないと、買い物には行かないようにしている。 銀行のATMは、一部の操作がタッチパネルでないとできない。行員に暗証番号を口頭で伝えて入力してもらう必要がある。視覚障害のある仲間も、マイナ保険証の利用時にタッチパネルで暗証番号の入力を求められ困っている。「信用はしているが、個人情報が守られているだろうかという不安は消えない」
KFCのアプリやばすぎて笑う
KFCのアプリが最近リニューアルされたんだけど、稀に見るやばい出来になってて笑える。 これまでのアプリは特段大きな不満もなく使えるものだったのに、何故かいきなりアプリが刷新された。 【新アプリの惨状】 ・これまでのアプリでは会員未登録でもマイルが貯まる仕様だったが、新アプリ移行後は会員登録しないとマイルが貯まらない仕様に。 で、会員未登録のままアプリをアップデートしたユーザーのマイルはすべて消滅。 ・アップデートで未登録会員のマイルが消滅する旨について碌な告知もなかった。 ・アプリに合わせて（？）リニューアルした公式サイトが内容すっからかんでやばい。 https://www.kfc.co.jp/ ・会員登録しようとすると入力画面の携帯電話番号と郵便番号を入力出来る桁数が足りず詰む。 ・ログインの為にワンタイムパスワードが必要だが、送られてくるSMSのパスワードが空欄で詰む。 ・そもそもたか
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインのペルソナ設定やトンマナの決定に役立つ！「ブランドアーキタイプ」とは？｜koppi
見栄えが悪いゲームは誰も遊ばない！ダサイゲームをこの世から駆逐する！｜ゆーりんち
Creating a pointer-friendly submenu experience
LCHは、UIにベストなカラースペース｜hirotoarakawa
デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
なんか本人認証のチェックが出てきたんだけど今俺は何を聞かれている? どうすればいい?「面白すぎて無理(笑)」
Python Web UIフレームワークで作るデスクトップアプリ | gihyo.jp
iOSとAndroidの"Divider"の線幅の違いと各社の対応｜鈴木慎吾 / TSUMIKI INC.
企業が避けるべき「8つのダークパターン」と「Cookieバナー実装」、IIJが説明 (1/3)
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？
「ステップ・フロー」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
The Front End Developer/Engineer Handbook 2024
Webデザイナーが「サービス紹介動画」を構造分析してみた（8事例）｜nanami
【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ｜mayuki@Rabee
個人的によく使う、省スペースで表示できて雑然としないUI with TailwindCSS
アノテーションにおけるUIの工夫 - CADDi Tech Blog
popover 属性 （含む関連属性） がすべてのモダンブラウザで利用可能に
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
Gmail、ほんと頭いいな→「わしはこれで1000回命を救われた」「私らがAIに求めてんのこういうことなんよな」
ソフトウェアテスト専業企業が事例で語る、UIテスト自動化の始め方と続け方は？
現代CSSフレームワークの内部実装とその仕組み
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
【定石】業務システムの画面デザインサンプル7選！UIを改善するポイントも紹介 - Keeperz
Hardest Problem in Computer Science: Centering Things
「弊社開発事例ではございません」ケンタッキーアプリの旧開発元、無関係をアピール中【やじうまWatch】
AIによる爆速開発：画面設計からプログラミングまで自動化！？ - Qiita
ダークモードを巡るあれこれ：ダークモードの明るい未来 - enechain Tech Blog