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

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

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

冥王星に「巨大な氷火山群」 探査機からの画像分析

2022/04/02 5 users 冥王星 表層 もや NASA 大気

冥王星の氷火山地帯を斜め上空から撮影した画像。表層と大気のもやがグレースケールで表示されている。過去の火山活動がどのように作用した可能性があるかが、青色で重ね合わせて描かれている（2022年3月29日公開）。(c)AFP PHOTO /NASA/Johns Hopkins University Applied Physics Laboratory/Southwest Research Instit... 続きを読む

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

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

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

プロのUXデザイナーから学ぶ！デザインをする時にグレースケールで始めると、デザインがよくなる4つ理由 | コリス

2019/02/21 45 users レイアウト 空白スペース デザイナー 要素 コリス

Webページやアプリをデザインする時、空白スペースが効果的に使えない、要素のグループ化や情報の構造化が苦手、そんなデザイナーの人にお勧めなのが、カラー無しのグレースケールでデザインを始めることです。 カラーを使用する前に、グレースケールでデザインを作成すると、レイアウトを明確に考えることができ、UXデ... 続きを読む

新型フィットネストラッカー「Fitbit Charge 3」発表--50m防水、タッチ画面 - CNET Japan

2018/08/21 10 users Fitbit タッチ画面 CNET Japan 50m防水

Fitbitは米国時間8月20日、フィットネストラッカーのボディにスマートウォッチ製品の機能を盛り込んだ最新のフィットネストラッカー「Fitbit Charge 3」を発表した。洗練されたデザインのCharge 3は、防水性能（水深50mまで）とグレースケールのタッチスクリーンを備えている。また、Fitbitのフィットネストラッカーとし... 続きを読む

富士フイルム、おつかれさま。ついにモノクロフィルム/印画紙の販売を終了 | ギズモード・ジャパン

2018/04/06 12 users 印画紙 ギズモード 富士フイルム イルフォード ACR

Image: ricochet64 / Shutterstock.com 富士フイルム、おつかれさま。ついにモノクロフィルム/印画紙の販売を終了 2018.04.06 18:50 残るモノクロフィルムはコダックとイルフォード、ケントメア、アグファフォト…あれ、 まだ意外とあった 。 光あれば影がある。その世界をグレースケールで収め続けてきた富士フイルムのモノクロフィルム「 ネオパン 100 ACR... 続きを読む

色に恋したサイボーグ、ニール・ハービソンが問う「人間の条件」｜WIRED.jp

2018/01/01 21 users サイボーグ WIRED.jp アイデンテ 人間 条件

SHARE STORY 2018.01.01 MON 13:00 色に恋したサイボーグ、ニール・ハービソンが問う「人間の条件」 その男は、頭頂部から伸びたアンテナで色を感知する。生まれつきの色覚異常のためグレースケールの世界しか知らなかった少年は「色」を渇望し、それをテクノロジーの力で手に入れた。自ら“サイボーグ”になった男、ニール・ハービソン。彼の営みから見えてくるのは、「人間とは」「アイデンテ... 続きを読む

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です。 ウィジェットは数多く提供されています。 フォーム系。 スライ... 続きを読む

Webカムの映像を使ったソフトウェアを開発するなら使ってみよう「SimpleCV.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ|オープンソース

2012/12/09 45 users MOONGIFT OpenCV ライブラリ Webカム 映像

SimpleCV.jsはWebカムの映像を手軽に扱えるようにするJavaScript版SimpleCVです。Pythonベースで作られたOpenCVを手軽に扱えるようにするライブラリがSimpleCVです。そしてそれをJavaScriptにポーティングしたのがSimpleCV.jsになります。 上がWebカムから取り込んでいる画像です。下がそれをグレースケール処理したものになります。リアルタイムで... 続きを読む

画像不要！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... 続きを読む

RGBのままリッチなモノトーン・ダブルトーン画像を作る方法

2012/03/29 12 users RGB 変換 勿体無い モノトーン 印刷物

いきなりグレースケールに変換？　それは勿体無い！ RGBを活かしたままで、カラー写真を変換する方法。 印刷物ではちょくちょくあるが、WEBサイトでも イメージとして、モノトーンやダブルトーンの写真を 使用することが時々ある。 「いきなり、グレースケールに変換してませんか？」 RGBとグレースケールを比べた時、 それぞれが持つことのできる画像としての情報には 大きな差がある。 グレースケールに変換し... 続きを読む

11月9日、今度は小惑星が地球に大接近 : ギズモード・ジャパン

2011/11/04 19 users ギズモード 小惑星 プエルトリコ 地球 ジャパン

NASA/宇宙モノ , サイエンス 11月9日、今度は小惑星が地球に大接近 2011.11.04 23:00 [0] [0] Tweet Check でも、ぶつからないので安心してください。 上の画像でグレースケールで示された小惑星「2005 YU55」は、プエルトリコにあるアレシボ天文台のレーダー施設で2010年4月に撮影されたものです。この画像だと、小惑星がまるで地球に直接ぶつかってきそうに見... 続きを読む

何これ、かわいい！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... 続きを読む

Photoshop講座 : 白黒写真の色づけ

2005/03/14 32 users Photoshop講座 白黒写真 ゴンドラ フォトショップ

白黒写真に色を塗る、、、これができるようになると、おじいちゃんやおばあちゃんの宝物の古い写真、それを修正してキレイに蘇らせることだってできるのだす♪ ほんでは、さっそく左のピエロに色をつけていきましょうか。 [1] 写真をフォトショップで開きましょう。まずは「イメージ」→「モード」で、もしその写真がグレースケールであったら、これを「RGB」にしてください。レベル調整やらカーブやらを利用してコントラ... 続きを読む