UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors

2024/05/21 11 users ドーン カラーパレット UIデザイン カラー 彩度

WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポ... 続きを読む

ダークモード時の画像の扱い方

2022/11/10 26 users 扱い方 画像 彩度 CSS ダークモード

2022年11月10日 CSS, Webサイト制作 以前から個人的にダークモードの対応を推奨しています。基本の書き方は過去記事「Webサイトをダークモードに対応させよう」を読んでもらうとして、今回は画像まわりのダークモード実装方法を中心に紹介します！ 画像の明度や彩度を落とす 明るい背景色の場合、画像は鮮やかで明るい色... 続きを読む

「かわいい！」が詰まったスイーツの国内Webサイト

2022/05/31 8 users スイーツ 国内Webサイト 淡い色合い 会計 パッケージ

2022年5月31日 Webデザイン スイーツって商品自体もかわいくて、パッケージやWebサイトもおしゃれなデザインが多いですよね。今回はそんなスイーツを紹介したかわいいWebサイトを紹介します。どれも食べたくなってしまう…！ ↓私が10年以上利用している会計ソフト！ かわいいデザインのポイント 淡い色合い 明度の高い、... 続きを読む

UIデザインは奥が深い、CSSで美しいシャドウを実装する方法

2021/09/30 31 users CSS 美しいシャドウ 彩度 UIデザイン シャドウ

Webページやスマホアプリなど、UIデザインで使用されるシャドウをより美しく実装するテクニックを紹介します。 シャドウをぼんやりとしたグレーにするだけでなく、美しく最適化して実装します。また、シャドウのサイズで要素に標高差をつけ目立たせたり、彩度と明度の関係など、UIデザインに効果的なテクニックも詳しく... 続きを読む

新海カントク『面白い分析ですね』／／ 新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。 - Togetter

2020/05/24 527 users Togetter 彩度 プロイラストレーター 驚愕 発覚

昨日バズった『プロイラストレーターが多用する明度彩度の領域』ですが、新海誠監督が使用する明度・彩度を調査した所、驚愕の事実が発覚。 商業イラスト（ソシャゲ・ラノベ表紙・キャラデザ）などを請け負うプロイラストレーターの方と、新海誠監督が多用する明度・彩度の領域がここまで違うとは… pic.twitter.com/Kn4m... 続きを読む

filterプロパティで、どんな背景画像でもテキストが読める状態にする | かちびと.net

2019/05/07 10 users result fff ＢＧ background-image

Result どんな背景でもテキストを読める状態にする、というもの ちょっと語弊があるかもしれませんが、要は背景画像の明度とコントラストをfilterプロパティで抑えて#fffに指定したテキストの可読性を維持しよう、という内容です CGMサイトなんかで使う機会があるかも、と思ったので備忘録 css .bg { background-image:u... 続きを読む

文石科技(Onyx) Boox シリーズ の最新ファームウェア V2.1.1 がすごい！最強PDFリーダーの誕生 - メモ@inudaisho

2019/04/21 27 users 総評 ファームウェア OnyX Boox Max boox

Boox Max2 ファームウェア V2.1.1 がやっと来た NeoReader 3.0 ページ分割ができるようになった！ 明度もいじれる タッチでの設定も詳細にできる！ テキストファイル ノートアプリ シェアできる PDFに直接書きこみできるようになった クラウド対応 書店が変更 総評 Boox Max2 ファームウェア V2.1.1 がやっと来た さてBo... 続きを読む

色のセンスがない人でも大丈夫、色を段階的に変化させるカラーパレットを簡単に作成できる便利ツール | コリス

2018/08/22 30 users 色相 コリス 彩度 同一色相 ドーン

Webデザインでも最近は、同一色相でトーンに変化をつけた色の組み合わせを使用するデザインが増えてきました。単に明るい・暗いの明度だけでなく、彩度や色相を段階的に変化させてカラーパレットを作成できるオンラインツールを紹介し...記事の続きを読む 続きを読む

日本全国の「赤色立体地図」が見放題、国土地理院がウェブで公開 - INTERNET Watch

2018/06/06 489 users INTERNET Watch 国土地理院 赤色立体地図 彩度

ニュース 日本全国の「赤色立体地図」が見放題、国土地理院がウェブで公開 永沢 茂 2018年6月7日 06:00 　国土地理院は6日、ウェブ地図サービス「地理院地図」において、日本全国の「赤色立体地図」を公開した。 「地理院地図」で表示した「赤色立体地図」の例。「火山基本図データ（基図）」と合成して表示した状態 　赤色立体地図とは、地形の立体表現手法の1つで、傾斜量を赤色の彩度で、尾根谷度を明度に... 続きを読む

UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方 | コリス

2018/05/29 79 users 彩度 コリス UX Movement テクニック スマホアプリ

背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記は UX Movement の記事を意訳したものです。UX Movementでは他にもUXデザイ... 続きを読む

1枚の画像が音楽に自動変換！　元・三木道三のDOZAN11が開発した音楽ソフト「PhotoMusic 2」が斬新すぎる - ねとらぼ

2018/02/20 49 users DOZAN11 とらぼ 自動変換 音楽 色調

“画像”を読み込んで色調や明度を解析し、オリジナルの楽曲を自動で作曲してくれる音楽ソフト「 PhotoMusic 2.0 」が斬新です。三木道三の名義で活動していたレゲエミュージシャン・DOZAN11さんが音楽プロデューサーとして開発に携わっており、2月に解説ビデオを公開して注目を集めています。 「PhotoMusic 2.0」 公式サイト 使い方は簡単で、好きな画像をドロップするだけで、4小節（... 続きを読む

Raspberry Pi 3 + Google Homeでエアコンを音声操作できた - 丁寧に手を抜く

2018/02/13 44 users Raspberry Pi エアコン 音声 気圧 湿度

2018 - 02 - 13 Raspberry Pi 3 + Google Homeでエアコンを音声操作できた プログラミング 先月届いた赤外線センサーキット。 craftzdog.hateblo.jp 夜の空いた時間を使ってやっと開封してセットアップしたのでその過程をシェアしたい。 なんか・・生き物みたいやな・・笑 上にぴょんぴょん出ているのは温度や気圧、湿度、明度のセンサー。今回は使わないけ... 続きを読む

197(週末盛)未来チェック+インテリア心理効果3 (黄系)+フラ語の言葉 - Ayako's life (阿矢子の独り言)

2017/09/15 12 users Ayako's life 独り言 フラ語 彩度 阿矢子

2017 - 09 - 15 197(週末盛)未来チェック+インテリア心理効果3 (黄系)+フラ語の言葉 インテリア インテリアカラー 心理効果 黄系 明度 彩度 配色 バランス ブログ 雑記 雑学 学び その他 意識 色 心理テスト 週末 オマケ こんにちは&お疲れ様です あ～やです 日本は台風大丈夫ですか? 連休あたり通過しそうな 続きを読む

色の組み合わせに役立つ！指定した色をベースに美しい色をつくりだす無料ツール -ColroMe | コリス

2017/03/14 27 users 色相 彩度 コリス 配色 ドーン

最近は、色のトーンを変化させた配色が注目されています。 例えば、同じ色相のブルーでも、彩度や明度を変化させたり、ホワイトやブラックを加えたり、同じトーンの色を使うことで、全体的に統一された美しいデザインをつくりだすことが ...記事の続きを読む 続きを読む

さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 - Literally

2016/10/29 169 users 色相 彩度 パラメーター Literally 配色

2016 - 10 - 29 さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 デザイン 今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。 1. 色を決める3つのパラメーターをおさえよう まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。 色相 赤、青、黄などの色みの違いを表します。これは分かりやす... 続きを読む

その文字、薄すぎない？ デザインにおける灰色の明度は何%が最適か | UX MILK

2016/07/25 403 users UX MILK 文字 デザイン 何％

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。 UX Movement - Why Your Gray Text Should Never Exceed 46% Brightness (2016-04-05) 一言で灰色と言っても、明るいものもあれば暗いものもあり、実に様々なバリエーションがあります。Webサイトなどでは、いたるところでお目にかかる... 続きを読む

これからのWeb制作に役立つ、69個の有益で大切なポイントのまとめ -69 Website Design Tips | コリス

2015/08/26 139 users コリス ユーザエクスペリエンス ビジター Web制作 ロゴ

Web制作のデザイン、ユーザエクスペリエンス、コンテンツ、制作・開発、そしてこれから必要もの、避けておきたいものをまとめた「69 Website Design Tips」を紹介します。 ターゲットとなるビジターを調査するのが重要 カラーは2, 3色をベースに、多色が必要なら明度に変化をつける ロゴは、デザインされた高品質なものを使う コンテンツが魅力的でも読めないテキストでは意味が無い 要素が減っ... 続きを読む

あんきらとCIの明暗を分けたアイドルマスターシンデレラガールズ第18話with幸子 - 玖足手帖-アニメブログ-

2015/08/16 12 users 明暗 あんきら 玖足手帖 照明 アイマス

2015-08-16 あんきらとCIの明暗を分けたアイドルマスターシンデレラガールズ第18話with幸子 感想 アイマス アニメ Tweet Share on Tumblr で、アイドルについて語るPは沢山いると思うんですが。僕はアニメとして語ってみようかと。今回、僕的に印象的だったのは照明の使い方ですね。と言うか、今回明度が低かったですね。 幼稚園ごっこ番組とか、アイドルと着ぐるみのゆるふわ散歩... 続きを読む

カラーコードより色を推測するメソッド(カラーコードの仕組みについて)

2015/06/11 47 users メソッド カラーコード 井畑 Photoshoptips 色相

16進数のカラーコードの仕組みや法則を解説しつつ、カラーコードより「色相」「明度」「彩度」を推測する方法をご紹介します。creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 about contact こんにちは、井畑です。最近、暇つぶしの時にハマっているサイトにGuess the Hexというのがあります。これ... 続きを読む

フリーで使える高機能画像編集ソフト　─　ＧＩＭＰ　─ - 写真お直し.comのブログ

2015/03/30 14 users GIMP フィルタ インク レイヤー 鉛筆

ＧＩＭＰ 今日ご紹介するGIMPは無料で使える画像編集ソフトとしては最高峰とも言えるグラフィックツールです。 ブラシ、鉛筆、インク、エアブラシといったツールを使って絵を描いたり 写真や画像の拡大・縮小、切り抜きといった編集はもちろん明度や彩度・コントラストなど調整といった フォトレタッチ機能、ぼかしや変形、芸術的効果などのフィルタも多数搭載されています。 またレイヤーやマスクといった機能も備わって... 続きを読む

青黒・白金ドレス - dadabreton's diary

2015/02/28 14 users Sideswipe 青黒 錯覚 水色 茶色

2015-02-28 青黒・白黒ドレス なぜドレスの色の錯覚はおきたか？-色の恒常性- - Sideswipe なぜドレスの色の錯覚はおきたか？-色の恒常性- - Sideswipeの話。自分はこの写真のドレスを青と黒のドレスと認識する。もっともカラーピッカー的な意味（上の記事の最後の拡大画像）で言えば水色と茶色がかったグレーに見える（明度が高く見える）のだけど「青と黒のドレスだけれども光の関係で... 続きを読む

ウェブデザインをはじめるあなたへ - tushuhei blog

2014/07/05 1184 users ウェブデザイン ノンデザイナー メインカラー 彩度 あなた

ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare色彩センスのいらない配色講座色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベ... 続きを読む

電々伝記: ゲームモデルやローポリにおけるテクスチャの作り方メモ

2014/06/14 50 users ローポリ 色相 彩度 テクスチャ 後々

ゲームモデルやローポリにおけるテクスチャの作り方メモ ローポリのテクスチャ表現は作品のクオリティを決める重要な要素 テクスチャのレイヤーにもある程度のお約束事が存在する、それは 「色相、彩度、明度が個別に調整でき、尚且つ、レイヤー数が一定に保たれるようにする」 これは、テクスチャを作る際、その質も重要だが、後々の調整作業の時の管理のしやすさも求められるから なぜかというと、チームで制作する前提があ... 続きを読む

石巻を舞台にした「Ingress Meetup」開催、グーグル副社長も登場 - ケータイ Watch

2014/05/12 60 users 石巻 グーグル副社長 ケータイ Watch 舞台 メインエリア

ニュース 石巻を舞台にした「Ingress Meetup」開催、グーグル副社長も登場 被災地巡り、ゲームを通じて震災前後を知る――iPhone版はまもなく （2014/5/12 11:42） ゲームのメインエリアの1つ、日和山にも多くのポータル（スマートフォンの画面は明度・コントラストを加工） 緑の陣営と青の陣営に分かれて、日々、街中にある“ポータル”を巡ってバトルするスマートフォン向け位置情報ゲ... 続きを読む

地味だけど便利！Photoshopでカラーの明度のバリエーションを簡単に展開できる機能拡張 -Lighten / Darken Color | コリス

2013/10/20 81 users コリス カラーピッカー 中程 Photoshop 増減

Lighten / Darken Color カラーの明度を変更するのはもちろんPhotoshopのカラーピッカーで調整することはできますが、いちいち手作業でやるのは面倒くさいもの。そんな時は、この機能拡張を入れるとショートカットで簡単にできます。 明度を10%の増減で展開 Lighten / Darken Colorのインストール インストールは簡単です。 下記ページの中程の「Downloade... 続きを読む