LCHは、UIにベストなカラースペース｜hirotoarakawa
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（明度
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 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
"松屋の食券機UIがわかりにくい"ツイートからおよそ2週間で改善の兆しが見えて好評価「こういうの大事」
お客さんからのフィードバックを受けてさっそく改善してる！その後のこともちゃんと話題にして修正に踏み切った人を評価したいな～と思ったのでまとめました。
「使える人にだけ使わせる」 ~ マネーフォワード IDのログインUXから見るパスキー普及のポイント - r-weblife
ritouです。 いよいよドコモさんもパスキー対応が始まりましたね！いや、これを書いている時点ではまだです。 k-tai.watch.impress.co.jp それよりも、今回はマネーフォワード IDのパスキー対応に注目します。 corp.moneyforward.com (4/5追記) マネーフォワード側からも解説記事が出ていました。この記事で言いたいことが全部書いてあります。 moneyforward-dev.jp ブラウザのパスワードマネージャー機能を利用したパスワード認証のUX パスキー対応に触れる前に、マネーフォワードIDのパスワード認証のUXから見ていきましょう。 マネーフォワードの「メールアドレスでログイン」のフローを何も考えずに使うと、最初にメールアドレスを入れてからパスワード入力を求めるUXになっています。 このようなUXでブラウザのパスワードマネージャーの機能を使う場
ダークモードとライトモード：どちらが良いのか
正常な視力の人（または視力を矯正している人）は、ライトモードのほうがよく見える傾向があるが、白内障および関連疾患のある人の中には、ダークモードのほうが見え方が良好になる人もいる。その一方で、ライトモードでの長時間の読書は、近視を引き起こす可能性も指摘されている。 Dark Mode vs. Light Mode: Which Is Better? by Raluca Budiu on February 2, 2020 日本語版2022年10月31日公開 最近、iOS 13へのダークモードの導入をきっかけに、ダークモードのデザイントレンドとしての人気とそのユーザビリティについて、ある記者からコメントを求められた。また、UXカンファレンスの参加者からもダークモードについてのこの質問を何度か受けている。 iOS 13：ライトモード（左）とダークモード（右）。 前もって言っておかなければならないが
Python: Streamlit を使って手早く WebUI 付きのプロトタイプを作る - CUBE SUGAR CONTAINER
Streamlit は、ざっくり言うと主にデータサイエンス領域において WebUI 付きのアプリケーションを手早く作るためのソフトウェア。 使い所としては、ひとまず動くものを見せたかったり、少人数で試しに使うレベルのプロトタイプを作るフェーズに適していると思う。 たとえば、Jupyter で提供すると複数人で使うのに難があるし、かといって Flask や Django を使って真面目に作るほどではない、くらいのとき。 使った環境は次のとおり。 $ sw_vers ProductName: macOS ProductVersion: 11.3.1 BuildVersion: 20E241 $ python -V Python 3.8.9 もくじ もくじ 下準備 基本的な使い方 基本的な書式 プレースホルダー プログレスバーを使った処理の進捗の可視化 基本的な可視化 組み込みのグラフ描画機能
「私たちは慣れに支配され、使いにくさに気づいていない」 UI研究者・増井俊之氏が語る“使いやすさ”の本質
機能とUIの進化はなぜ比例しない？ UI研究者に聞く、使いやすさの本質とUIのこれから 「私たちは慣れに支配され、使いにくさに気づいていない」 UI研究者・増井俊之氏が語る“使いやすさ”の本質 誰もが気軽に電子機器を持つようになった今、私たちの生活はデジタルの恩恵で確実に便利になっています。しかし、UIは“よりよさ”を求めた結果、期待した評価とは正反対の声が集まること少なくありません。 そこで今回は、慶應義塾大学環境情報学部の教授で、予測型テキスト入力システム「POBox」やiPhoneのフリック日本語入力システムの開発者であるUI研究者の増井俊之氏に、UIの本質についてお話をうかがいました。まずは増井氏がUIに関わることになったきっかけと、使いやすさの本質について。 UI研究に関わるようになった流れ ーー学生時代には電子工作やソフトウェアに興味をお持ちで、現在のUIにつながる研究は社会人
TrelloのDescription欄だけでUIを超えた手触りが良すぎて学びしかない - Make組ブログ
TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。 とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表示される際はリンクになります。ただそれだけの要素ですよ。 ただそういう次元じゃないんですよね。たとえば以下の機能があります。 Descriptionが空のときは「Add a more detailled description...」を表示する Descriptionが空のときはマウスホバーで背景色を濃くしてクリックを促す Description内に描画する内容があるときは、 cursor: pointer にするだけで背景色は変わらない Descriptio
CarloでNode.jsのツールにUIをもたせる - Qiita
先日、GoogleがCarloというライブラリをリリースしました。 少し気になったので、軽くメモを残しておきます。 Carlo is 何 CarloはChromiumを画面描画エンジンとして動作するNode.js アプリケーションフレームワークです。 Node.js、ChromiumともにV8が動作するため、JavaScriptのみでデスクトップアプリが作れるよ、というわけです。 公式のサンプルとほぼ一緒ですが、次のようにコードを書くと、index.htmlがデスクトップアプリ風に立ち上がります。 const carlo = require('carlo'); (async () => { const app = await carlo.launch(); // html/CSS/JavaScriptを配置しているフォルダを教える app.serveFolder(__dirname); /
家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手..
家には77歳の年寄りがいるんだけど、iPadでもやはり難しいようでまったく手にとらない。 Androidは論外だった。 アプリにはだいたい主要な画面が4つか5つほどあり、簡単にいうとその画面を行き来しながら利用する物が多い。 年寄りにとって一番利用しやすいのは画面がリニアに進むということだ。 アプリをタップしたら常に最初にメニュー画面、メニューからボタンを押したら目的の画面のように進まなければ、そこで理解がむずかしくなる。 アプリによってはアプリタップ後、最後の画面を表示してくれる物も多い。そういうのは年寄りには難しい。まずは元に戻りたいと思うようだ。 スタート画面が設定されているのもあればない物もある。 アプリによってはしばらく時間があると普段とは違うメッセージが出る物もある。 タップでボタンが表示される奴は論外だ。タップの仕方によりボタンが出ない・出るで教える最中に喧嘩になる。 タップ
よく考慮したコーディングとパフォーマンスの関係 - ワザノバ | wazanova
http://hacksoflife.blogspot.com.au/2015/01/the-four-horsemen-of-performance.html 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Benjamin Supnik曰く、高いパフォーマンスをだせるソフトウェアは、高いパフォーマンスを目指したデザインプロセスが大切。「本当にひどい状態になったら、プロファイラで調べて直すから。」といっても色々積み重なると簡単には直せなくなると指摘しています。そして、ゲーム開発において遅いコードを生み出すパターンを挙げてくれてます。 1. 無駄なことをする テーブルを再描画する際、ユーザが見える部分だけでなく、テーブル全体のデータを取得していないか？ 同じ値が計算されて何度も使われるケースで、都度計
UIは画面サイズと解像度だけで解決できなくなる - ワザノバ | wazanova
http://wordpress.tv/2014/11/05/luke-wroblewski-from-the-front-lines-of-multi-device-web-design/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 WordCamp San Francisco 2014におけるLuke Wronblewskiの講演です。UIデザインで考慮すべきは、画面サイズと解像度だけでなく、視聴距離、ポスチャー（詳細後述）、周囲の明るさという要素も必要になってくるという話。 スマホ端末を両手もしくは片手で持つ場合を合わせて、75%のユーザは親指を使って操作している。 タブレットのランドスケープモードとポートレートモードの利用比率は、6:4とか7:3とか言われるが、要は両方に対応する必要がある
ユーザーインターフェイスのリニューアルにおけるユーザーの覚えなおしコストについて - Line 1: Error: Invalid Blog('by Esehara' )
はじめに そういえば、最近はUbuntuからWindows 8を使いなおしている。なんでWindows 8をあえて使っているのかというと、それはいろいろな人が「使いにくい」と言っていたからだ。だから、その使いにくさを体験したいために、あえて使ってみているんだけど、その評判と違って普通に使いやすくなっていて驚いた。 少なくとも以前みたいな「スタートメニュー地獄（何かのアプリをインストールするたびにフォルダが増えていくアレ）」はなく、基本的にスタートのタイル画面からアプリにアクセスすることを考えると悪くない。そしてそのタイル画面にアプリを登録するのも簡単だ。また、それらのライブアプリを並べることが出来るので、デスクトップ画面で何かを作業しながら、スケジュールを入力するのも楽だ。それらの基本的にアプリにしても検索を中心にアクセスするという意味ではUbuntuのUnityで慣れているので、悪くはな
xib/storyboardとの付き合い方について - blog.ishkawa.org
アプリが大きくなるとstoryboardの小回りの利かなさに泣きたくなることがあると思います。 そうした反動からすべてのUIをコードで実装しているiOS開発者も少なくないと思います。 自分は全部storyboardにして痛い目にあってから、全部コードにしてまた痛い目に遭い、 結局コードとxibとstoryboardを上手く使い分けるのが良いという結論に達しました。 最近、やり方が定まってきてストレスを感じなくなってきたので方法をまとめます。 これから書くことは個人の見解ですが、自分のやり方を決める上では無駄にならないと思います。 使い分け方と理由 基本方針: 以下に挙げる条件にマッチする場合除いて、コードで実装を行います。 xibを使う条件 viewの複雑度が高い場合(subviewが2,3個以上の場合)にはxibを使います。 xibを利用する理由は以下のような退屈なコードをたくさ
【iOS7】フラットデザインUI実装に役立つライブラリのまとめ - Qiita
iOS7で採用されたフラットデザインっぽいUIを、現行iOS（〜6.x）で実装する際に役立つライブラリ（OSS）をまとめました。後半ではiOS7っぽく下のビューをブラーかけて半透過表示するライブラリや、パララックス表示するライブラリも紹介しています。 FlatUIKit フラットデザインなUIコンポーネント詰め合わせ。ソースをみると、ほとんどのコンポーネントが該当するUIKitコンポーネントのカテゴリやサブクラスとしてつくってあって、使いやすそうです。 UI7Kit iOS5, iOS6 で iOS7 の見た目を実現するUIKitのサブクラス集。 iPhone Flat Design UI フラットデザインのサンプル集的なXcodeプロジェクト。コンポーネント化されて使い回せるわけではありませんが、こう設定すればこういう見た目にできるのか、という参考になります。 QBFlatButton
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
GitHub - elkowar/eww: ElKowars wacky widgets
「Enter押したら改行じゃなくて送信になるサービス、全部この世から消えて欲しい」に共感の声
Go Ando / PREDUCTS / THE GUILD on Twitter: "ついに来てしまった、プロンプトでアプリUIを生成するGalileo AI @Galileo_AI プロダクションのためのデザインの前に「思考するためのデザイン」がとても重要で、このステップは確実に爆速になるなぁ。 意思決定の… https://t.co/rrPDHWOTeV"
https://choc-ui.tech/
