結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
はじめに ジャンプSQ.という月刊誌で『有限世界のアインソフ』という漫画を描いていた、日高十三男という者です。これが初めての連載で、世の多くの漫画がそうなるように、打ち切りになりました。全11話なので、まあ短かったですね。商業作品である以上、仕方のないことですし、総じて自分の力量不足だったなぁとも思うので、めっちゃ悔しいですが、特に恨みはないです。 こんな漫画を描いていたよ(^ω^) （画像クリックでAmazonに飛びます） ただ、連載を始めるまでにやっておけば良かったなぁと思うこともあったので、漫画家志望の方（特にジャンプSQ.という雑誌で連載を目指している方）に、私の経験が少しでも参考になればと思ってこの文章を打っています。あと、別に漫画を描かない方にも、打ち切りを食らうタイミングとか知ってもらえたらいいかなぁと思って……（ツイッターなどでは既出の情報ですが）。 それから、『アインソフ
海外では毒＝緑色のイメージだが日本ではなぜか毒＝紫色のイメージになるという話が話題に、その理由をめぐって大きな論争が巻き起こる
鳳(ホウ) @hou_PN 🇯🇵の「毒の色」の話で。 🇺🇸「ポケモンとかやってると思うんだけど、🇯🇵人って「毒=紫」だよね」 🇫🇷「確かに！自分は”紫”って雅な色だと思うんだけどね」 🇯🇵「逆に皆さんは何色を”毒”だと感じるんです？」 🇩🇪「”緑”だな、自分は」 🇫🇷「”緑”だね」 🇺🇸「”緑”だよ！」 ”緑”って🇯🇵だと回復系が多い不思議っ 2024-02-01 20:41:17 鳳(ホウ) @hou_PN 🇬🇧人の同僚も。 🇬🇧「”毒は緑”だな、ツイステのヴィルの毒も”緑”だろ？”毒は紫”っての、🇯🇵位だと思うぞ」 🇯🇵「なんと…」 🇬🇧｢🇯🇵人が何で毒を"紫"だと認識するかは判んねェけど欧州は多分、"シェーレ・グリーン"と"パリ・グリーン"つぅ「緑」の染料が”猛毒”だったからだと思うぞ｣ ※1🇬🇧人の意見です。 2024
【読売新聞】 日勤と夜勤でマスクの色を変える――。滋賀県甲賀市の甲南病院が、そんなちょっとした工夫で残業時間を大幅に減らすことに成功した。「余分な経費はかからず、リスクもゼロ、働きやすい職場環境にもつながる」（担当者）という“一石三
最近Webサイトやスマホアプリを利用していてふと気づいたことがある。 「あれ、さっき見てたのどれだっけ？」と思うくらい無意識のうちにどれだったかがわからない状態。そう、アイコンがどれも似ている。その感覚自体は以前にもあったのだが、今回は趣が少し違う。 以前は「アイコン全てカラフル問題」だったのが、今回は「アイコンどんどん黒くなっていく問題 = ブラック化現象」が発生している。 そう、最近は白と黒のアイコンがあまりにも多くないか？そんな気がして少し考察してみることにした。 【トレンド分析】最近のアイコンのデザインが似通ってきている問題 X → Twitterへのドラスティックなリブランドの衝撃まずその傾向の代表が、爽やかな水色からシックなモノトーンになった Twitter、いや、Xだろう。
没�ｭ怜ﾖ脳�研【Tech.0×徹底工戰】 @Qto6BshdBJYXdch バーチャル何もしない人、もしくはバーチャル何でもやる人。 小学生の頃、夏休みの宿題のポスターコンクールで金賞を取ったことがあります。 物が売れると嬉しいです。 リストで色々見ているので、不快でしたらすみません…。 その他の情報 lit.link/ic4r3b3c4u53y0… f0r8uck5.booth.pm
基本無料アプリ内課金あり運営型のゲーム、いわゆるスマホゲームにおいて、夏の風物詩といえば水着ガチャだ。 RPGだろうが、リズムゲームだろうが、アクションだろうが関係ない。多くのキャラクターたちは水着の装いとなり、普段よりちょっと、あるいは随分と大胆な姿を我々に見せてくれる。 刺激的な姿にドキドキして目は回るしガチャもよく回る。気温に反比例して財布は寒くなっていく。 そんな夏が終わった。今は10月。秋、そして冬に向かう季節だ。 気温の変化に適応すべく、衣服の布地面積が増えていく自然の摂理に悲しみを覚える前に、ひとつやり残した使命があることに気づいた。 どんな水着が今年の夏を彩ったのか……2023年の水着のトレンドを調査し、記録に残さねばならない！！ これは単なる欲望ではない。意味はあるし意義もある。大義ですらあるような気がしている。 そんなわけで、56作品233人の2023年にお披露目された
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
AIによる便利ツールが増えてきましたね！ WebサイトやスマホアプリのUIデザイン用に、入力されたプロンプトを元に色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツールを紹介します。 AI Color Co...記事の続きを読む
スライド資料のデザインが劇的に良くなる！現場で学んだフォント・色の選び方｜fuyuna blog｜デザイン・ライフスタイル・キャリアについて書くデザイナーのブログ
「作りたい資料に適したフォントがわからない」 「どの色を選べばいいかわからない」 「スライド資料のデザインをもっと洗練させたい」 スライド資料をデザインするとき、こんな悩みを持つ方は多いのではないでしょうか？ スライド資料の印象は使用する「フォント」と「色」によって大きく変わり、うまく活用すれば見る人の心を動かし、行動を促す資料を作成できます。 そんな効果的な資料を作成するには、フォントと色の基本知識が必要不可欠です。それぞれについて学ぶことでデザインセンスが高まり、あなたのスライド資料に適した色とフォントを、効率よく選べるようになるでしょう。 ということで、この記事ではスライド資料のデザインに役立つ「フォント」と「色」の基本知識から、適切な種類を選ぶポイント、もっとデザインを学びたい方におすすめの書籍まで、フォントや色に関するノウハウをたっぷり紹介していきます！ デザインに苦手意識がある
VFXと色収差
この世界には電磁波（Electromagnetic waves）という、空間を伝わるある種のエネルギーの波があることが知られています。 電磁波には波長（Wavelength）というものがあります。文字通り、「波の長さ」です。これは波が一回振動したときの距離で、山から山、または谷から谷までの長さということになります。 さまざまな波長の電磁波があります。電磁波の波長の単位はm（メートル）ですが、波長が数千km（キロメートル）に及ぶものから、十億分の1mm（ミリメートル）以下のものまで、さまざまな種類があります。 ひょっとすると電磁波という呼び方をしないので、気づいていないかもしれませんが、電磁波はとても身近なものです。たとえば……。 ・ラジオやテレビ、Wi-Fi、Bluetooth、レーダーなどの「電波」も電磁波 ・電子レンジで食べ物を温める「マイクロ波」も電磁波 ・病院でレントゲン写真を撮る
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
ブルーベリーの青色は「構造色」だったと判明！ - ナゾロジー
みなさんの目に、ブルーベリーは何色に見えているでしょうか。 そう、名前にもある通り、ブルーベリーは「青色」に見えますよね。 ところがブルーベリーに青い色素は含まれておらず、果実を搾って得られるのはダークレッド（暗色系の赤色）の色素だけです。 では、どうして青色に見えるのでしょうか？ 英ブリストル大学（University of Bristol）が新たに調査したところ、ブルーベリーを含む実が青く見える果実の皮表面を構成するワックス層が青い光を散乱させる微細構造でできていることが明らかになりました。 つまり、ブルーベリーの青はいわゆる構造色で、皮自体に青の色素は存在せず、表面の構造により青色が生み出されていたようです。 研究の詳細は2024年2月7日付で科学雑誌『Science Advances』に掲載されています。 Scientists reveal why blueberries are
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 が挙げられていますが、この記事では「これら
リビングに置いても違和感のないオシャレな消火器をめぐり賛否両論、｢保有率が上がるのでは｣｢非常時に見つけられない｣と激論が交わされる
佐々木俊尚 @sasakitoshinao おおーこういうのなら自宅に置いても良さげ！ 消火器のデザインをオシャレにするなんて考えたこともなかった。／リビングに置いても違和感のない魅せる消火器 gizmodo.jp/2023/12/art-fi… pic.twitter.com/1YJEtTKCbq 2023-12-17 08:08:01
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（明度
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の純正カメラアプリは、自動的に見栄えのいい映像が撮影できるように設計されています。しかし、標準状態では多くの情報
Tailwind CSS初心者が絶対ハマる落とし穴
ムーザルちゃんねるのzaruです。今回はムーさんと、Tailwind CSS初心者が絶対ハマる落とし穴について話しました。Tailwind CSSを使い始めた人、あるいはまだ使ったことがない人には是非見てほしいです。すでにこの落とし穴から抜け出している人はあるよねーって感じで眺めてください。 すごいサムネイル… ハマるポイント クラス名の動的指定 クラス名のコンフリクト クラス名の動的指定 例えば、通常は背景を青だけど、エラーの時は赤くしたい。そんなときにJavaScriptでクラス名を組み立てると以下のように書きがちです。bg- と -500 は固定なので変化する red blue だけ変数で組み立てるやり方です。 const color = error ? 'red' : 'blue'; <div class={`bg-${color}-500`}></div>
サンライズワールド クリエイターインタビュー 第18回<br /> 『聖戦士ダンバイン』原作・総監督 富野由悠季 - サンライズワールド｜アニメの最新情報を日々更新
サンライズワールド クリエイターインタビュー 第18回 『聖戦士ダンバイン』原作・総監督 富野由悠季 サンライズの作品のキーパーソンとなったスタッフに自身が関わった作品の思い出を伺うクリエイターインタビュー。第1８回のゲストは今年で放送４０周年を迎えた『聖戦士ダンバイン』の富野由悠季総監督にお話を伺った。 ネクスト・ダンバインは見えるか？ ――『聖戦士ダンバイン（以下、ダンバイン）』は、今年で放送40周年を迎えました。 富野 先日、TVで『風の谷のナウシカ』（1984）を放送していましたよね。ちょっとだけ見たんですが、宮﨑（駿）監督は、根っからアニメ－ションとして物事をとらえられる人ですから、やっぱり作品の手触りに滑らかさがあるんですね。さらに『ルパン（『ルパン三世 カリオストロの城』）』以降、いろんな企画が難渋したこともありつつ、久々に映画に取り組んでみたらなんとかなったという雰囲気も漂
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSS、TypeScript、Turborepo、ESLint、React Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記：ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向けフロントエンドアーキテクチャの基本原則 エンタープライズ規模のアプリケーション向けにフロントエンドソリューシ
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.
みねたけ@個人開発と投資やってる @MinetakeT 平日の昼間から映画見てビール飲んで温泉に入りたい♨️ ｜ iOSアプリ開発（23本リリース！）｜ Swift,Go,Java,Python,いろいろ！ ｜ 日本株、米国株、不動産投資やってる ｜ From. 20231009 appstore.com/yasuhirokojima
ダークモードは人気があるが、必須ではない。ユーザーはダークモードを好むが、ダークモードなしでも行動は変わらない。ダークモードをアプリケーションレベルではなくシステムレベルで考えているからだ。ダークモードをサポートする場合は、ダークモードでよくある問題を避けるために、そのデザインをテストしよう。 Dark Mode: How Users Think About It and Issues to Avoid by Tanner Kohler and Amy Zhang on August 27, 2023 日本語版2024年1月15日公開 ダークモードがかつてないほど流行している。少なくともこのトピックに関する多くのウェブデザインの記事を読む限りでは、ダークモードは必要不可欠とさえ思うかもしれない。しかし、ダークモードを完全にサポートし、「うまく活用する」ためには貴重な時間とリソースを必要とす
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
Isao Okuma @isakuma1990 自然ガイドがライフワークの公園管理官です _(┐「ε:)_ @NACSJ 自然観察指導員 講師 / 公園管理運営士 / 博士（農学: 野生動物管理学） / 学芸員 / 狩猟者（エゾシカ・アライグマ culler） / 1児の父 自然系以外のつぶやきはこっち→ @Isakuma19902 note.com/isakuma1990 いさくま @isakuma1990 公園にスズメバチの巣が落ちていました。材質をよく見るとねずみ色と茶色と・・・青色！？Σ（ﾟдﾟ ） 巣の材は働きバチたちが木の皮や朽木などを噛みくだいたもので、唾液と混ぜあわせて貼り付けられたものです。青色は…なんでしょう。どこかに捨てられていたビニールシートか…遊具のペンキかな？ pic.twitter.com/HqahM1HEl8 2023-08-18 20:55:00
米GoogleのWebブラウザ「Google Chrome」のアイコンが、突如ゆるキャラやマスコットとして人気になり出した。Xでは「Chromeくん」などとして、手足の生えたアイコンのファンアートなどが相次いで投稿されている。きっかけはGoogle日本公式Xアカウントが6月5日に投稿したとある図版だ。 公式アカウントが投稿したのは「実はChromeのアイコンにはグラデーションがかかっている」ことを示す画像。青・白の丸を赤・黄・緑のパーツが囲むおなじみのマークだが、実は赤・黄・緑の部分は単色でなく、微妙にグラデーションがかかっていることを紹介するものだ。 これだけでもちょっとした豆知識だが、Xユーザーには違った受け止められ方をした。この図版がまるでキャラクターのように見えるという意見が相次ぎ、ファンアートが作られ始めたのだ。 というのも、図版はアイコンに引出線（説明する箇所を強調する線）をつ
CSS の @property ルールを使うことで、CSS のカスタムプロパティ を定義できます。カスタムプロパティを定義することでプロパティの構文チェック、初期値の設定、プロパティが値を継承するかどうかの設定が可能になります。 @property --my-color { /** red や #fff のように色のキーワードまたはカラーコードを代入可能 */ syntax: "<color>"; inherits: false; initial-value: red; } /* カスタムプロパティを使用 */ .my-element { --my-color: blue; color: var(--my-color); } @property ルールのメリット @property ルールを使うことで、以下のようなメリットがあります。 カスタムプロパティによりコードをドキュメント化する 誤
2023年9月：デザインの参考にしたい魅力的なWebサイト12選 | Web Design Trends
2023年9月に見つけた「デザインの参考にしたい魅力的なWebサイト」をまとめました。 優れたWebデザインに触れることによって、トレンドのデザインを知ることができたり、デザインのヒントを見つかったりするなど、得られるものがたくさんあります。ぜひ自身のデザインの参考になるような素晴らしいWebサイトを探してみてください。 Webデザインのおすすめギャラリーサイト23個まとめ【2022年最新】 様々なインスピレーションを与えてくれるデザインの優れたWebサイトをチェックするには、国内、海外の最新Webサイトの情報が日々更新されているWebデザインのギャラリーサイトがおすすめです。 ギャラリー... Web Design Trends
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
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の欠点 制限されたスタイリングオ
【永久保存版】知らないと損をする、悩まない配色えらび講座
あなたは、自分のアイデアや考えを誰かに伝えたいとしましょう。 文字をベースにしたコンテンツはもちろん重要ですが、イラストやチャート図、グラフ、アニメーションGIFなどの画像を作成することで、読者の注意を引き、記事やレポートをより充実させることができます。 成功のカギはずばり、色彩理論を知ることで、コンテンツを際立たせるのに役立ちます。 しかしそうは言っても、あなたもこんな風に悩んだことがあるはず。 「魅力的でかっこいいデザインをする方法がよく分らない。」 「私、クリエイティブじゃないし、。」 私は、”売れるデザインとは？”という究極の悩みを考え続け、このサイトで公開する記事用のビジュアルを作成する日々を、１５年ちかく送ってきました。 ちょっとした配色の違いで、アクセス数が２倍、３倍に変わったことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、配色で
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
2024年のトレンドカラーは癒やしのカラー！ やさしさに満ち溢れた桃色「ピーチファズ（Peach Fuzz）」、HTMLのコードは「#FFBE98」
2024年のトレンドカラーがPantoneから発表されました。 トレンドカラーは心と体を豊かにするビロードのようなやさしい桃色「ピーチファズ（Peach Fuzz）」、人に寄り添う親切な雰囲気を作り出します。 桃の産毛や...記事の続きを読む
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度（Lightness）、彩度（Chrome）、色相（Hue）の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
明度を用いて配色を直感的に行うコツ／たじま ちはる（HUMORE） #ノンデザ25周年｜ノンデザイナーズ・デザインブック【日本語版公式】
『ノンデザイナーズ・デザインブック』25周年記念、特典PDF「Missing Pages 2023」からの抜粋です。 25周年キャンペーン情報 特典PDF「Missing Pages 2023」のpp. 65-69に掲載しています。 配色を直感的に行うための明度の使い方を3つのステップで紹介します。 このテクニックは、『ノンデザイナーズ・デザインブック』の第5章で説明されるコントラストに関連しています。 色の三属性と色相環本題に入る前に、配色の基礎知識として色の三属性と色相環について説明します。 色の三属性とは、「色相（色味）、明度（明るさ）、彩度（あざやかさ）」を指します。これらの属性を調整することで、扱える色の幅が広がります。 色相環とは、色を円環状に配置して表したもので、色相を体系的に捉えられます。 Step 1 | 色の選択に役立つ明度チェック1-1. 印象をコントロールするコツ色
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
一介の漫画オタクが月刊誌で連載してみた打ち切り考察｜日高十三男
日勤と夜勤でマスクの色分け、残業時間が大幅減…「はよ帰り」「おつかれさま」など声かけやすく
最近のロゴがどんどん黒くなっていく「ブラック化現象」について デザイン会社 ビートラックス: ブログ
着物警察や弓道警察を冷笑しておいてなんだが俺はカーキ警察かもしれん「知らなかった…」「誤用が定着している」
233人の美少女キャラクターの水着姿から2023年水着トレンドを調査してみた
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
Node.js の進化に伴い不要となったかもしれないパッケージたち
LCHは、UIにベストなカラースペース｜hirotoarakawa
iPhone 15 Pro／Pro Maxでついに可能となった「Log撮影」とは何なのか？
CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 | POSTD
GitHub - bensadeh/tailspin: 🌀 A log file highlighter
ダークモードの需要は意外と侮れない。メモアプリへのレビューから見えてくる「眩しさ」への拒否感、ダークモード搭載の安心感
スズキ、新型「スイフト」は5ナンバーサイズキープ 価格は172万7000円から
ダークモード：ユーザーの考え方と避けるべき課題
CSSでライトモードとダークモードのスタイルを簡単に定義できる、新しい関数「light-dark()」が便利すぎる！
公園に落ちていたスズメバチの巣をよく見てみるとなんか色が普通じゃない「芸術家のスズメバチがいる」
Chromeのアイコン、突如ゆるキャラとして人気に 公式も「びっくりしています」
CSS の `@property` ルールでカスタムプロパティを定義する
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors