tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。 こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら
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（明度
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。 CSS color-scheme-dependent colors with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるシステムカラー light-dark()関数の基礎知識 light-dark()関数の使い方 はじめに システムカラーには、現在使用され
没�ｭ怜ﾖ脳�研【Tech.0×徹底工戰】 @Qto6BshdBJYXdch バーチャル何もしない人、もしくはバーチャル何でもやる人。 小学生の頃、夏休みの宿題のポスターコンクールで金賞を取ったことがあります。 物が売れると嬉しいです。 リストで色々見ているので、不快でしたらすみません…。 その他の情報 lit.link/ic4r3b3c4u53y0… f0r8uck5.booth.pm
!important はすべてを上書きできるのか？ CSS において話題に出すといろいろな意味で盛り上がるキーワードが!importantです。 CSS でのスタイル宣言時に!importantを付与すると、細かな詳細度の差異などを無視して強制的にスタイルを適用できます。濫用するとあっという間に無秩序になるため、一般的には慎重な利用が推奨されることが多いです。 さて、ではこの!importantですが、何もかもを上書きできるのでしょうか？ 実際のところそうではありません。今回は、CSS 仕様をいろいろと調べているうちに、!important で上書きできないスタイルの存在を知ったため、その情報をまとめてみました。 CSS における Cascade Sorting Order CSS は Cascading Style Sheets という名前の通り、カスケードと呼ばれる仕組みでスタイルの適
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
AIによる便利ツールが増えてきましたね！ WebサイトやスマホアプリのUIデザイン用に、入力されたプロンプトを元に色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツールを紹介します。 AI Color Co...記事の続きを読む
Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
grep is the ultimate text search tool available on virtually all Linux machines. While there are now better alternatives (such as ripgrep), you will still often find yourself on a server where grep is the only search tool available. So it's nice to have a working knowledge of it. That's why is I've created this interactive step-by-step guide to grep operations. You can read it from start to finish
みんな独立したプロパティ使ってる。使ってないのお前だけ。transformは与えられた要素に移動(translate)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形(transform)を適応させるCSSプロパティです。 transform: translate(-50%, -50%);で中央寄せ(現在ではあまり使用されないレガシーな手法です)といった静的な配置に用いることもありますが、主にCSSアニメーションを実装する際に使われることが多いです。 そのtransformプロパティの値のうち傾斜(skew)以外は現在では独立したプロパティで指定することができます。 /* 従来の書き方 */ .sample { transform: translateY(12px) rotate(90deg) scale(1.1); } /* 独立した書き方 */ .sample
Creating color palettes with the CSS color-mix() function | MDN Blog
Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the
結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
デザインをするときに、頭を抱えがちな「配色どうしよう」問題。いかに手早くイメージに合った色を選べるかがカギになってきます。 各デザイン用途に役立つ配色ツールも十分便利なのですが、AIの力を借りることで誰でもより簡単に、これだ！と感じる色に巡り会えるかもしれません。 この記事では、AIを活用した配色ツールをまとめてご紹介します。 実際にわたしがツールを試した使用感、デザイン制作に役立つと感じた点と一緒にまとめています。 キーワードから配色を提案するColor Magic AIでオリジナルのカラーパレットをつくれるサービスColor Magic。 雰囲気やイメージのキーワードから、今すぐ使える配色を簡単に生成できます。 日本語での入力に対応している点もうれしいポイント。無料版では、5回/日までカラーパレットを生成可能。 使い方はいたってシンプル。キーワードを入力するだけで、5色のカラーパレット
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
ブルーベリーの青色は「構造色」だったと判明！ - ナゾロジー
みなさんの目に、ブルーベリーは何色に見えているでしょうか。 そう、名前にもある通り、ブルーベリーは「青色」に見えますよね。 ところがブルーベリーに青い色素は含まれておらず、果実を搾って得られるのはダークレッド（暗色系の赤色）の色素だけです。 では、どうして青色に見えるのでしょうか？ 英ブリストル大学（University of Bristol）が新たに調査したところ、ブルーベリーを含む実が青く見える果実の皮表面を構成するワックス層が青い光を散乱させる微細構造でできていることが明らかになりました。 つまり、ブルーベリーの青はいわゆる構造色で、皮自体に青の色素は存在せず、表面の構造により青色が生み出されていたようです。 研究の詳細は2024年2月7日付で科学雑誌『Science Advances』に掲載されています。 Scientists reveal why blueberries are
海外では毒＝緑色のイメージだが日本ではなぜか毒＝紫色のイメージになるという話が話題に、その理由をめぐって大きな論争が巻き起こる
鳳(ホウ) @hou_PN 🇯🇵の「毒の色」の話で。 🇺🇸「ポケモンとかやってると思うんだけど、🇯🇵人って「毒=紫」だよね」 🇫🇷「確かに！自分は”紫”って雅な色だと思うんだけどね」 🇯🇵「逆に皆さんは何色を”毒”だと感じるんです？」 🇩🇪「”緑”だな、自分は」 🇫🇷「”緑”だね」 🇺🇸「”緑”だよ！」 ”緑”って🇯🇵だと回復系が多い不思議っ 2024-02-01 20:41:17 鳳(ホウ) @hou_PN 🇬🇧人の同僚も。 🇬🇧「”毒は緑”だな、ツイステのヴィルの毒も”緑”だろ？”毒は紫”っての、🇯🇵位だと思うぞ」 🇯🇵「なんと…」 🇬🇧｢🇯🇵人が何で毒を"紫"だと認識するかは判んねェけど欧州は多分、"シェーレ・グリーン"と"パリ・グリーン"つぅ「緑」の染料が”猛毒”だったからだと思うぞ｣ ※1🇬🇧人の意見です。 2024
Flutter 3.0でスタイル指定をもっと便利にするThemeExtensionの紹介 | MoT Lab (GO Inc. Engineering Blog)
今年1月からFlutterのWebアプリケーションを開発している孫と申します。 Flutter 3.0から公開されたThemeExtensionはあなたのコードをもっと綺麗に整えるのができます。なぜThemeExtensionシステムを使うべきなのか、どのように使ったらいいのかを確認してみましょう！ ※ Youtubeの「ThemeExtension | Decoding Flutter | Decoding Flutter」の内容を元に編集しました。 WEBではセマンティック情報とスタイル情報を分けた方が良いという話があります。 例えば <p style="color: red;">どうする？GOする!</p>上記のように同じところに置くことより <!-- index.html --> <p>どうする？GOする!</p>/* style.css */ p { color: red; }セ
【永久保存版】知らないと損をする、悩まない配色えらび講座
あなたは、自分のアイデアや考えを誰かに伝えたいとしましょう。 文字をベースにしたコンテンツはもちろん重要ですが、イラストやチャート図、グラフ、アニメーションGIFなどの画像を作成することで、読者の注意を引き、記事やレポートをより充実させることができます。 成功のカギはずばり、色彩理論を知ることで、コンテンツを際立たせるのに役立ちます。 しかしそうは言っても、あなたもこんな風に悩んだことがあるはず。 「魅力的でかっこいいデザインをする方法がよく分らない。」 「私、クリエイティブじゃないし、。」 私は、”売れるデザインとは？”という究極の悩みを考え続け、このサイトで公開する記事用のビジュアルを作成する日々を、１５年ちかく送ってきました。 ちょっとした配色の違いで、アクセス数が２倍、３倍に変わったことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、配色で
はじめに ジャンプSQ.という月刊誌で『有限世界のアインソフ』という漫画を描いていた、日高十三男という者です。これが初めての連載で、世の多くの漫画がそうなるように、打ち切りになりました。全11話なので、まあ短かったですね。商業作品である以上、仕方のないことですし、総じて自分の力量不足だったなぁとも思うので、めっちゃ悔しいですが、特に恨みはないです。 こんな漫画を描いていたよ(^ω^) （画像クリックでAmazonに飛びます） ただ、連載を始めるまでにやっておけば良かったなぁと思うこともあったので、漫画家志望の方（特にジャンプSQ.という雑誌で連載を目指している方）に、私の経験が少しでも参考になればと思ってこの文章を打っています。あと、別に漫画を描かない方にも、打ち切りを食らうタイミングとか知ってもらえたらいいかなぁと思って……（ツイッターなどでは既出の情報ですが）。 それから、『アインソフ
任意の要素に対して、ブラウザデフォルトのフォーカスリングが描画されるように明示的に設定したいことがある。たとえばスタイリングの都合により、一度取り除いたフォーカスリングをふたたび適用したいとき。 フォーカスリングのスタイルは、ブラウザの種別や状況によってまちまちであるため、CSSでそれらしいものをエミュレートするのが難しい。そのため、同じものを呼び出せるような特別なやり方を採用できると望ましい。 一つの方法として、outline: revertを適用すればデフォルトの挙動を復元できる。 * { outline: 0; } button { outline: revert; } しかし場合によっては、通常はフォーカスリングが描画されない要素に対して、ブラウザのデフォルトと同じフォーカスリングが描画されるようにしたい、ということもあるだろう。この場合、outline: revertではフォーカ
はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSS、TypeScript、Turborepo、ESLint、React Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記：ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向けフロントエンドアーキテクチャの基本原則 エンタープライズ規模のアプリケーション向けにフロントエンドソリューシ
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
リビングに置いても違和感のないオシャレな消火器をめぐり賛否両論、｢保有率が上がるのでは｣｢非常時に見つけられない｣と激論が交わされる
佐々木俊尚 @sasakitoshinao おおーこういうのなら自宅に置いても良さげ！ 消火器のデザインをオシャレにするなんて考えたこともなかった。／リビングに置いても違和感のない魅せる消火器 gizmodo.jp/2023/12/art-fi… pic.twitter.com/1YJEtTKCbq 2023-12-17 08:08:01
2024年のトレンドカラーは癒やしのカラー！ やさしさに満ち溢れた桃色「ピーチファズ（Peach Fuzz）」、HTMLのコードは「#FFBE98」
2024年のトレンドカラーがPantoneから発表されました。 トレンドカラーは心と体を豊かにするビロードのようなやさしい桃色「ピーチファズ（Peach Fuzz）」、人に寄り添う親切な雰囲気を作り出します。 桃の産毛や...記事の続きを読む
Googleマップの新デザイン、見慣れました？ 元デザイナーは苦言を呈しているが、アクセシビリティーの観点からメリットもありそう
Googleマップのデザインが11月中旬頃に変わりました。主に地図全体の配色が変更され、一目で「変わったな」と分かる大きなアップデートです。従来の配色とかなり異なるため、一部では賛否両論のようですが、アクセシビリティーの観点でメリットを指摘する声もあるようです。 Googleの元デザイナー「人間的ではない」 実は9月頃から、一部ユーザーを対象にGoogleマップの新しいデザインがテストされてきました。11月中旬のタイミングで多くのユーザーに反映されたようで、今注目が集まっているということです。 海や緑地の色が淡い色合いになったり、道路上の横断歩道が表示されるようになったりと、見慣れたGoogleマップの見た目が変わって新鮮に感じる一方で、一般道と高速道路が同じ灰色基調で表示されるなど、見づらくなったと言う人もSNSで見かけます。 米Googleの元デザイナーで、Googleマップのデザイン
黒タイツは「芋くさい」、レッグウェアメーカー「アツギ」の動画炎上→謝罪「配慮に欠ける表現がございました」 - 弁護士ドットコムニュース
弁護士ドットコム インターネット 黒タイツは「芋くさい」、レッグウェアメーカー「アツギ」の動画炎上→謝罪「配慮に欠ける表現がございました」 レッグウェアメーカー「アツギ」のエックス（旧ツイッター）公式アカウント（ @ASTIGU ）が、黒いタイツを「芋くさい」と投稿し、批判が殺到している。 問題の投稿は、現在削除されており、アツギは「配慮に欠ける表現があった」として謝罪した。 ⚫️「黒ストッキングの透け感が嫌だから黒タイツを使ってるのに」 アツギは、ミニスカートの女性の寒さ対策として、自社商品のベージュのタイツと黒いストッキングを二重に履くことを提案する宣伝動画を制作し、エックスに投稿した。 その際に、「黒いタイツを履くと芋くさくなる人」などと呼びかけ、透ける黒ストッキングの着用を勧めていた。 問題の投稿（エックスより） このことから、「黒タイツを使っている人に失礼」「黒ストッキングが透け
【読売新聞】 日勤と夜勤でマスクの色を変える――。滋賀県甲賀市の甲南病院が、そんなちょっとした工夫で残業時間を大幅に減らすことに成功した。「余分な経費はかからず、リスクもゼロ、働きやすい職場環境にもつながる」（担当者）という“一石三
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
CSS Color Module Level 5に追加された新しい関数light-dark()を使用すると、ライトモードとダークモードのスタイルを簡単に定義できるようになります。 下記のようにlight-dark(#333, #ccc)と記述すると、テキストのカラーにライトモードでは#333が、ダークモードでは#cccが適用されます。 Easy Light-Dark Mode Color Switching with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライトモードまたはダークモードへの対応 light-dark()関数によるライトモードとダークモードの対応 <color>値以外への対応は？ light-dark()関数のブラウザサポート light-dark
最近はデザインの範囲がかなり広がり、デザイン思考や、UXデザイン、そしてサービスデザインなど「見た目」だけではないデザイン領域が注目されている。 それと同時に「デザイナー」と呼ばれる人の中で基本的なビジュアルデザインに関する知識が乏しい人も少なくはなくなってきた。 しかし、いかなるデザインフィールドであったとしてもデザインの基礎知識が重要であることには変わりない。 そこで今回はヴィジュアルデザインの細部に関する視覚的錯覚 = 錯視に関しての11のポイントを紹介したい。 「神は細部に宿る」と言われる通り、”良いデザイナー”と”素晴らしいデザイナー”を分けるポイントの一つに、細かい部分の作り込みが挙げられる。 デザインソフトを使って自動調整しても何故かしっくりこない時がある。それは、視覚的錯覚が理由。 ヴィジュアルデザインにおいては、いわゆる錯視と呼ばれる状態が頻繁に発生するのだ。ここで紹介さ
基本無料アプリ内課金あり運営型のゲーム、いわゆるスマホゲームにおいて、夏の風物詩といえば水着ガチャだ。 RPGだろうが、リズムゲームだろうが、アクションだろうが関係ない。多くのキャラクターたちは水着の装いとなり、普段よりちょっと、あるいは随分と大胆な姿を我々に見せてくれる。 刺激的な姿にドキドキして目は回るしガチャもよく回る。気温に反比例して財布は寒くなっていく。 そんな夏が終わった。今は10月。秋、そして冬に向かう季節だ。 気温の変化に適応すべく、衣服の布地面積が増えていく自然の摂理に悲しみを覚える前に、ひとつやり残した使命があることに気づいた。 どんな水着が今年の夏を彩ったのか……2023年の水着のトレンドを調査し、記録に残さねばならない！！ これは単なる欲望ではない。意味はあるし意義もある。大義ですらあるような気がしている。 そんなわけで、56作品233人の2023年にお披露目された
デジタルのスクリーンで文章やコードの読み書きのためにデザインされた、アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームを紹介します。 WebサイトやスマホアプリのUIデザインに使用したり、VS Codeなどのエディタに使用したり、ライトモードでもダークモードでも読みやすさと知覚バランスを考慮してカラーが調整されています。 Flexoki Flexoki -GitHub Flexokiは先日リリースされたばかり。アナログ印刷のインクと紙の温かみのある色合いからインスピレーションを得たカラースキームで、MITライセンスで利用できます。 サイトのUIデザインにもこのカラースキームが使用されています。
If you’re new to creating color palettes for digital spaces, check out my previous article, Color for brand designers working with product teams, for tips on selecting your brand colors. 👉🏻 Follow along in Figma: Community File What is a color ramp?A color ramp, also known as a color scale, is a visual representation of how colors transition from light to dark in a smooth and continuous manner.
Use LCH color space to come up with predictable and accessible color palettes
iPhone 15 Pro／Pro Maxは前世代のiPhone 14 Pro／Pro Maxからカメラが大きく進化しており、特にムービー撮影ではApple ProResコーデックで最大4K・60fpsの映像を撮影可能で、さらにiPhoneシリーズでは初めてApple LogによるLog撮影に対応しました。このLog撮影について、プロの映像制作者兼写真家であるスチュ・マシュヴィッツ氏が解説しています。 Log is the “Pro” in iPhone 15 Pro — Prolost https://prolost.com/blog/applelog Log is the “Pro” in iPhone 15 Pro (Free LUTs!) - YouTube iPhoneの純正カメラアプリは、自動的に見栄えのいい映像が撮影できるように設計されています。しかし、標準状態では多くの情報
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.js の進化に伴い不要となったかもしれないパッケージたち
LCHは、UIにベストなカラースペース｜hirotoarakawa
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
着物警察や弓道警察を冷笑しておいてなんだが俺はカーキ警察かもしれん「知らなかった…」「誤用が定着している」
!importantで上書きできないブラウザのスタイルとは
シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム
CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
Grep by example: Interactive guide
えっ！？まだtransformプロパティを使ってるの！？ ｜ TAKLOG
「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
色はAIで決める、デザイナーが知っておきたいAI配色ツール10選
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
一介の漫画オタクが月刊誌で連載してみた打ち切り考察｜日高十三男
任意の要素に対してブラウザデフォルトのフォーカスリングを適用する方法
Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 | POSTD
[PDF]公文書作成におけるカラーユニバーサルデザインガイドライン｜川崎市総務局
スズキ、新型「スイフト」は5ナンバーサイズキープ 価格は172万7000円から
日勤と夜勤でマスクの色分け、残業時間が大幅減…「はよ帰り」「おつかれさま」など声かけやすく
GitHub - bensadeh/tailspin: 🌀 A log file highlighter
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
GoogleやYouTubeなどのロゴを分析 デザイナーなら知っておきたい11の錯視と調整方法
233人の美少女キャラクターの水着姿から2023年水着トレンドを調査してみた
UIデザインにも最適！ アナログ印刷のインクと紙からインスピレーションを得たカラースキーム -Flexoki
How to create a color ramp used in design systems
Huetone • Make colors accessible
iPhone 15 Pro／Pro Maxでついに可能となった「Log撮影」とは何なのか？