同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。 半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。 下記は、上はベタ塗り、下は半透明です。
鳳(ホウ) @hou_PN 🇯🇵の「毒の色」の話で。 🇺🇸「ポケモンとかやってると思うんだけど、🇯🇵人って「毒=紫」だよね」 🇫🇷「確かに!自分は”紫”って雅な色だと思うんだけどね」 🇯🇵「逆に皆さんは何色を”毒”だと感じるんです?」 🇩🇪「”緑”だな、自分は」 🇫🇷「”緑”だね」 🇺🇸「”緑”だよ!」 ”緑”って🇯🇵だと回復系が多い不思議っ 2024-02-01 20:41:17 鳳(ホウ) @hou_PN 🇬🇧人の同僚も。 🇬🇧「”毒は緑”だな、ツイステのヴィルの毒も”緑”だろ?”毒は紫”っての、🇯🇵位だと思うぞ」 🇯🇵「なんと…」 🇬🇧「🇯🇵人が何で毒を"紫"だと認識するかは判んねェけど欧州は多分、"シェーレ・グリーン"と"パリ・グリーン"つぅ「緑」の染料が”猛毒”だったからだと思うぞ」 ※1🇬🇧人の意見です。 2024
更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました
はじめに 以下のツイートが500いいねを超えましたので解説記事を書きます。 デモ&ソースコード CodePen に完成品のデモとソースコードを置いてあります。 グリッチとは 元々は「一過性の障害」という意味ですが、映像の世界ではしばしば「映像の乱れ」という意味で用いられます。ホラーやサイバーなどでよく見られる演出の一つ。 https://www.google.com/search?q=glitch&tbm=isch RGB ずらしとは 色収差、RGB シフト、RGB split (RGB 分割) など、さまざまな言い方がありますが、要するに本来光の三原色である Red、Green、Blue がズレることなく重なって映像を映し出すところ、それがズレた状態で表示されることです。 グリッチエフェクトと一緒に用いたり、場合によっては色ズレも含めてグリッチと言ったりしますので、今回も合わせて実装する
アーティストのコンチェッタ・アンティコは、子供の頃からいつも「ちょっとだけ奇抜」だったという。彼女は10年前、自分が見ている世界が他の人のそれとは文字通り違うことを知った。彼女にとって、この世界で生きるとはどういうことなのだろうか──。 彼女の生きる「サイケデリックな世界」 芸術家が作品のために事実とは異なる表現をすることを、「アーティスティック・ライセンス」と言う。コンチェッタ・アンティコの絵画に使われる鮮やかな配色を見れば、あなたはすぐに彼女もそれをやっていると思うだろう。 アンティコが描くユーカリの木の幹は、紫と藤色を帯びており、オウムの黄色いトサカは、うっすら青緑がかっている。彼女が描く庭の奇抜な配色は、ほとんどサイケデリックなほどだ。 「単に芸術家を気取りたいわけでも、アーティスティック・ライセンスを使っているというわけでもないんです」とアンティコは言う。 「私は本当に見たままを
人間の目は赤・緑・青という3つの光の波長を知覚し、それを組み合わせることで多くの「色」を識別していますが、自然界には人間が知覚できない色を識別している生物も存在します。3年にわたる実験で、鳥が人間に識別できない「紫外線」まで識別し、人間とは全く異なる世界を見ていることを示した驚くべき論文が、新たに発表されています。 Wild hummingbirds discriminate nonspectral colors | PNAS https://www.pnas.org/content/early/2020/06/09/1919377117 Hummingbirds Can See Colours We Can't Even Imagine, Experiment Reveals https://www.sciencealert.com/hummingbirds-can-see-colour
スケール、視覚的な階層、バランス、コントラスト、ゲシュタルトの原則を正しく適用すれば、美しいデザインを生み出せるだけでなく、ユーザビリティも向上させられる。 5 Principles of Visual Design in UX by Kelley Gordon on March 1, 2020 日本語版2020年12月17日公開 ビジュアルを見たとき、我々はそれが魅力的か不愉快かを、通常、すぐに判断できる(なぜならば、こうした判断は、Don Normanのエモーショナルデザインのモデルでいうところの、本能レベルで展開されることが多いからだ)。しかしながら、レイアウトが視覚的に魅力的である理由を言語化できる人はほとんどいない。だが、優れたビジュアルデザインの原則をグラフィックに活かすことで、エンゲージメントを促進し、ユーザビリティを向上させることは可能である。 ビジュアルデザインの原則は、
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか? それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
ライブドアニュース @livedoornews 【イノベーション】箱根駅伝を席巻、「靴」めぐる戦い激化か news.livedoor.com/article/detail… 昨年7月に発売されたナイキの「ヴェイパーフライネクスト%」。今年の箱根では8割近くの選手がこの靴を履くとの予想も。 pic.twitter.com/uw0hg5ldEN 2020-01-02 07:31:54 てんげるまん🌀tengelmam @fcbliebe1900 箱根駅伝の選手の足元を見ると、殆んどの選手がNIKEの厚底シューズ、ヴェイパーフライを履いてる。1区区間賞の創価大・米満選手もインタビューで「ヴェイパーフライとかシューズの効果もあると思うんですけど・・・」とNIKEのシューズの事を言ってたので相当すごいシューズなんだな。#箱根駅伝 pic.twitter.com/Hh4oITYo5H 2020-01
書きちらし @kakichirashi ボールペンで、誰かの言葉を手本に字の練習をしています|ウィットと毒に富んだフレーズが好きです|普段は薬剤師をしています|ツイートが一冊の本になりました✍️→ amzn.asia/d/4noGDws |アソシエイトとしてAmazonに参加しています youtube.com/@kakichirashi リンク よくみれば雑食 【雑学】国によって『えっちな色』と認識する色は異なるって知ってた? - よくみれば雑食 ピンクをえっちな色だと思ってるのって日本人だけだって知ってる? 雑学好きの友人が喜々として問いかけてきた『えっちな色』問題。今まで気にしたことがなかったけれど、言われてみれば確かに『えっちな色=ピンク』は日本以外でも通じるものだと思っていた。 ところがどっこい、調べてみると世界中でえっちだと感じる色は多種多様で、実に面白かったので備忘録として書き
アクリル樹脂などに代表されるポリマーに規則的に亀裂を入れることで発色させる新たな印刷技術を開発したと、京都大物質-細胞統合システム拠点(iCeMS、アイセムス)のシバニア・イーサン教授(化学工学)らの研究グループが、20日付の英科学誌「ネイチャー」電子版に発表した。亀裂自体が模倣されにくく、高精密な印刷が可能で、紙幣や身分証明書の偽造防止印刷などへの応用が期待できるという。 アクリル樹脂などに代表されるポリマーに規則的に亀裂を入れることで発色させる新たな印刷技術を開発したと、京都大物質-細胞統合システム拠点(iCeMS、アイセムス)のシバニア・イーサン教授(化学工学)らの研究グループが、20日付の英科学誌「ネイチャー」電子版に発表した。亀裂自体が模倣されにくく、高精密な印刷が可能で、紙幣や身分証明書の偽造防止印刷などへの応用が期待できるという。 コガネムシの体表などにみられる鮮やかな色は「
以前はどんな地方都市でも「町のゲーム屋」が多数存在していた。駅前には複数のファミコンショップがひしめき、休日になるとそれらに子どもたちが押し寄せ目当てのゲームを買い、中古の棚を漁り、小遣いとにらめっこしながら、友達と貸し借りの相談をしながら、長い時間を過ごしていた。 今、そんなファミコンショップは恐ろしいほどに数を減らしている。「町のゲーム屋」は絶滅危惧種となった。ゲオやツタヤがその代わりを果たすようになった……といえばいいのだが、それらも今やゲームから撤退した店舗すらある。 そういう薄ら寒い状況にあるゲーム業界の小売店だが、さて、いったいいつ、どれだけ町のゲーム屋が減っていったのかを把握している人はいるだろうか? 衝撃的なデータが存在する。メディアクリエイト(一部の人にはとても有名なゲーム関連のデータをやり取りしている会社だ)が発売している「テレビゲーム産業白書」には、「テレビゲームの小
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
よしもとよしとも @yoshitomosan 強度の色覚異常という点でオレも障害者なのだが手帳が出るわけでもなく不便はある。なぜカラー原稿が描けるかというと20年前のコピックのマーカーを使ってるからで、これは色の識別に「物体の名前」が付いている。 2021-04-15 09:10:09 よしもとよしとも @yoshitomosan 「Peach Skin」なら女の肌、「Yellowish Skin」なら男の肌、肌の影は「Skin Shade」というように。実はこの色だけ見ても判別ができない。「物体の名前」がないと。「なんちゃらブラウン」でなく「Bread」とあればそれが何かわかる。 pic.twitter.com/hBzfHBIqMK 2021-04-15 09:10:10
2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します! ↑私が10年以上利用している会計ソフト! とにかく夜間見えづらい! 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか!こりゃー私には危険だわ
浅井純子(じゅんじゅん) 全盲の世界を超ポジティブに生きる人 @nofkOzrKtKUViTE 全盲になったら、世界が何色になるかって、ご存知ですか? 私は正直、全盲になる前は真っ暗闇を想像していた。けれど、実際になってみたら真っ白な世界。これは人によって違うらしい。(ピンクや青色の人もいるとか。) 障害のある世界って、実は皆さんの想像とは違う世界なんです。。 2021-03-21 13:19:44 浅井純子(じゅんじゅん) 全盲の世界を超ポジティブに生きる人 @nofkOzrKtKUViTE 全盲で盲導犬ヴィヴィッドと新しいチャレンジや発見をする毎日 小学校のゲストティーチャーや講演などを行う I'm completely blind person who takes on new challenges and discoveries every day with my guide do
概要 みなさんは、このドロップシャドウを見てどう思いますか? ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、 あまり綺麗なドロップシャドウとは感じないですよね? この記事では、これが発生する原因 と 綺麗なドロップシャドウの使い方を解説していきます。 この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう! ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。 例えばUIだと、 ベースとなる平面に、カードの平面が重なっていたり、 カード平面の上に画像やボタンといったオブジェクトが置かれています。 このように、UIやグラフィックデザインは2次元で作られているのではなく、 各平面・オブジェクトがZ軸上に重なることで作られています。
すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。 CSSの色指定に何を使用していますか? #FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。 さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。 CSS HD Gradients CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏(@ar
「作りたい資料に適したフォントがわからない」 「どの色を選べばいいかわからない」 「スライド資料のデザインをもっと洗練させたい」 スライド資料をデザインするとき、こんな悩みを持つ方は多いのではないでしょうか? スライド資料の印象は使用する「フォント」と「色」によって大きく変わり、うまく活用すれば見る人の心を動かし、行動を促す資料を作成できます。 そんな効果的な資料を作成するには、フォントと色の基本知識が必要不可欠です。それぞれについて学ぶことでデザインセンスが高まり、あなたのスライド資料に適した色とフォントを、効率よく選べるようになるでしょう。 ということで、この記事ではスライド資料のデザインに役立つ「フォント」と「色」の基本知識から、適切な種類を選ぶポイント、もっとデザインを学びたい方におすすめの書籍まで、フォントや色に関するノウハウをたっぷり紹介していきます! デザインに苦手意識がある
この世界には電磁波(Electromagnetic waves)という、空間を伝わるある種のエネルギーの波があることが知られています。 電磁波には波長(Wavelength)というものがあります。文字通り、「波の長さ」です。これは波が一回振動したときの距離で、山から山、または谷から谷までの長さということになります。 さまざまな波長の電磁波があります。電磁波の波長の単位はm(メートル)ですが、波長が数千km(キロメートル)に及ぶものから、十億分の1mm(ミリメートル)以下のものまで、さまざまな種類があります。 ひょっとすると電磁波という呼び方をしないので、気づいていないかもしれませんが、電磁波はとても身近なものです。たとえば……。 ・ラジオやテレビ、Wi-Fi、Bluetooth、レーダーなどの「電波」も電磁波 ・電子レンジで食べ物を温める「マイクロ波」も電磁波 ・病院でレントゲン写真を撮る
神戸大学大学院工学研究科の杉本泰助教らは、半永久的に変色・退色しない塗料を開発した。光の波長程度の微細構造による分光を利用した構造色によるもので、色素を用いないため分解による変色や退色が起きない。従来の構造色塗料の課題を解消し、見る角度に依存せず、明確な色合いを実現。塗料や顔料のほか、化粧品やバイオ材料などの素材としての活用や微小ディスプレーへの応用など、広い用途を見込む。 同塗料の原料は直径ナノメートル(ナノは10億分の1)レベルのケイ素結晶の微細粒子。真球に近い形状の整った粒子作製技術を用い、作製した粒子を直径ごとに分離する。光の波長程度の直径を持つ球形の内部で発生する光の散乱と、粒子の集団による増幅効果による「ミー共鳴」現象により、粒子の直径ごとに特定の波長の光を強く散乱する。粒子のサイズによって色合いを制御できる。粒子が分散した溶液により大面積への塗布も容易。 通常の色素を使った顔
百千万億 萬(つもいよろず)氏は5月11日(水)、200パターンの白色のなかから指定された1色を見つけ出すゲーム『White 200』をオンライン上で無料公開した。 思い立って、200色の白の中から目的の白を探すゲームを作りました! みんな遊んでね! 200色の白から見つけよう! – White 200 https://t.co/DxYz87J9qa #white_200 pic.twitter.com/QpxpfOa1dk — 百千万億 萬 (@TumoiYorozu) May 11, 2022 本作は、画面左上に表示されたカラーコードと一致する白色を200色の候補のなかから探していくブラウザゲーム。ルール自体はシンプルながら、色に対する知識や経験が問われる難易度となっている。 ゲームを起動すると、比較的グラデーションが視認しやすい200色でのチュートリアルが開始。回答自体は何度でも行え
新宿駅の改札内でお茶漬けを食べた後、向かいの店を見て「冷静に考えたらヤバいな」となった 和才雄一郎 2024年4月20日 いま、新宿駅の改札内がアツい。人が多くて暑苦しいという意味ではなく(それも若干あるが)、グルメスポットが誕生したという意味でアツい。 ちょっと前(2024年4月17日)にオープンした「イイトルミネ(EATo LUMINE)」である。先日公開した記事でも紹介したから覚えている人だっているかもしれない。 そのエリアの中に、お茶漬け&おにぎりの店がある。『お茶漬けおにぎり 山本山』といい、名前からわかる通り海苔の “山本山” の新業態だ。 山本山といえば、私(1981年生まれ)にとっては「上から読んでも山本山、下から読んでも山本山」というCMが真っ先に頭に浮かぶが、今の若い人は知らないだろうな〜。あのCMの海苔メチャクチャ高級感があって美味そうだったんだよな〜 ……ってことを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く