UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方

2023/02/21 250 users ダークモード コントラスト メカニズム UIデザイン カラー

ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを... 続きを読む

「iPhoneの画面をグレースケールにするとスマホに全然触らなくなる」というスマホ中毒の解消技を試したら本当に魅力が激減して全然触らなくなった - Togetter

2021/05/27 497 users Togetter iPhone カラーフィルタ 吉永龍樹 僕秩

吉永龍樹（ヨシナガタツキ@僕秩） @dfnt 昨日の放送で一番反応があった「iPhoneの画面をグレースケールにするとスマホに全然触らなくなる」というスマホ中毒の解消技、 設定→アクセシビリティ→画面表示とテキストサイズ→カラーフィルタ→オン から設定できます。本当にスマホが色を失うだけで魅力が激減して全然触らなく... 続きを読む

Webブラウザにおける文字のアンチエイリアスの現状の最適解 | dwango creators' blog（ドワンゴクリエイターズブログ）

2017/05/17 612 users アンチエイリアス フォントレンダリング dpi WIn CSS

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いの... 続きを読む

Facebook UIデザイン大解剖──UIの使いやすさを決める「グレースケール」の配色ルール | root blog

2017/03/06 74 users Facebook root blog 内藤 モバイルUI 用語

初めまして、rootアシスタントデザイナーの内藤です。 今日はFacebookのモバイルUIを事例に、UIデザインにおける「グレースケール」の使い方について考えてみます。 そもそも「グレースケール」とはなんなのか。僕も、言葉だけ知っていてなんとなく使っていたので改めて調べてみました。 IT用語辞典（ e-words.jp ）によると グレースケールとは、画像などに使われる色の種類・範囲を表す用語の... 続きを読む

ディープラーニングで白黒アニメをカラー化するとこうなる - GIGAZINE

2016/05/10 209 users GIGAZINE ニューラルネットワーク YouTube

多層構造のニューラルネットワークによる機械学習、いわゆる「 ディープラーニング 」の力を使って グレースケール の画像をカラーに変換させるという試みが行われていて、実際に、白黒時代のアニメの映像をカラー化させたらどうなるかというムービーがYouTubeで公開されています。 Colorful Image Colorization http://richzhang.github.io/coloriza... 続きを読む

デスクトップ、スマートフォンで使えるシックなデザインフレームワーク「TopCoat」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/05/03 100 users TopCoat スライ フレームワーク ウィジェット 基調

TopCoatはグレー系を主体とした落ち着いた雰囲気のWebデザインフレームワークです。最近はWebデザインフレームワークが多数出揃ってきました。サイトの雰囲気によってフレームワークを選ぶと良いでしょう。グレー系の落ち着いた感じを出したいならばTopCoatを使ってみましょう。 グレースケールを基調としたはっきりとした見た目のUIです。 ウィジェットは数多く提供されています。 フォーム系。 スライ... 続きを読む

画像不要！HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | デザイナーブログ | 株式会社LIG

2012/10/15 81 users canvas チュートリアル Opera Safari 殆ど

こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します！ 現在CanvasはFirefox/Chrome/Safari/Opera/IE9など殆どのブラウザの最新版で実装されています。 未対応のIE8以前のバージョンにはgoogleが公開しているExplorerCanvasやuupaa-excanvas.jsを読... 続きを読む

数独を解く(画像解析) - cuspy diary

2012/06/29 392 users cuspy diary 画像解析 数独 OpenCV ワザ

画像として与えられた数独を解きます。 新聞に掲載されていたこの問題をOpenCVを使って画像解析する。(画像が斜めなのはワザとです) グレースケール変換 画像解析の前処理として、まずグレースケールに変換し、ガウシアンフィルタをかけてぼかします。ガウシアンフィルタをかける事で、安定した二値化が画像が得られます。1 二値化 次に二値化を行います。 二値化には、普通の方法、大津さんの手法、適応的二値化、... 続きを読む

JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる - かちびと.net

2012/06/27 70 users net JavaScript 元画像 画像 マウスホバー

ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。 2枚用意しろよと言われたら実も蓋もないんですけど、画像1枚だけでグレースケール⇔カラー画像を実装したい。画像の数は半分で済むし、加工の時間も不要になるのは大きなメリットです。 1年前に同じ事をunformedbuil... 続きを読む

何これ、かわいい！URLにサイズを指定すると猫画像を生成してくれる『Place Kitten』 - IDEA*IDEA ～ 百式管理人のライフハックブログ

2011/03/03 69 users IDEA ＨＯＭＥ ライフハック ライフハックブログ URL

Home > ライフハック > 何これ、かわいい！URLにサイズを指定すると猫画像を生成してくれる『Place Kitten』Olderすごいウェブサービスが登場したようですよ！URLにサイズを指定すると猫画像を生成してくれるという誰得サービスですｗ。カラーとグレースケールの2種類の画像が作れるようです。猫はサイズにあわせていろいろなのが現れるっぽい。たとえば・・・・。http://placeki... 続きを読む

見出し抽出機能が便利、ウェブページをPDFに変換するオンラインサービス -iWeb2Print | コリス

2011/02/03 133 users リーガル プリンター コリス レター 肖像画

iWeb2Printの特徴ウェブページをプリンターにフレンドリーなPDFに変換します。ウェブページをオフラインでゆっくり読んでください。ページのサイズは、レター、リーガル、A0-A9、B0-B10など多数のサイズに対応してます。風景・肖像画、グレースケール・画像無し・背景無しなど選択ができます。無制限に利用できます。登録やメールアドレスの必要はありません。iWeb2Printの使い方iWeb2Pr... 続きを読む