あなたは、自分のアイデアや考えを誰かに伝えたいとしましょう。 文字をベースにしたコンテンツはもちろん重要ですが、イラストやチャート図、グラフ、アニメーションGIFなどの画像を作成することで、読者の注意を引き、記事やレポートをより充実させることができます。 成功のカギはずばり、色彩理論を知ることで、コンテンツを際立たせるのに役立ちます。 しかしそうは言っても、あなたもこんな風に悩んだことがあるはず。 「魅力的でかっこいいデザインをする方法がよく分らない。」 「私、クリエイティブじゃないし、。」 私は、”売れるデザインとは？”という究極の悩みを考え続け、このサイトで公開する記事用のビジュアルを作成する日々を、１５年ちかく送ってきました。 ちょっとした配色の違いで、アクセス数が２倍、３倍に変わったことも何度もあります。 このような経験があるからこそ、ハッキリ言えることがあります。 それは、配色で
株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ
配色が苦手な人でも、センスに自信がない人でも、たった3色だけでおしゃれな配色が完成する新発想の配色本を紹介します。 「配色が決まらない」「色が多いとゴチャゴチャする」「おしゃれにまとまらない」「どの色を使えばいいのか分からない」そんな悩みを一発で解決する、デザインやイラストに役立つ必携の配色本です。 Twitterやブログで大評判なので、知っている人も多いと思います。手にしてみると、発売されてすぐに品切れになったのも納得の一冊です！ 発売当初はAmazonで品切れが続いていましたが、現在は増刷され、在庫も十分確保されています（担当者様談）。著者のingectar-eは、「けっきょく、よはく。」「ほんとに、フォント。」なども手がけています。
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
transitionをかけたホバーアクションのopacityがちらつく問題を解消する 公開日 : 2022.08.22 最終更新日 : 2022.10.05 コーディング こんにちは！AndHAコーディング部です。 突然ですが新人コーダーさん！コーディング勉強中の皆さん！ こんな不具合に遭遇したことありませんか？ 「transitionをかけたホバーアクションのopacityがちらつく！」 新人コーダーの私も、何かと悩まされていました… そこで今回は、この問題をどうにか解消していきたいと思います。 ちらつく問題についてアニメーションがちらつく問題Webサイトの制作をしていると、避けて通れないボタンやリンクなどのパーツ。ホバーしたときの動きを指定することがほとんどですよね。 中でも、「opacity: 0.7」などと透過を指定したうえで、「transition: .3s」などとふわっとアニメ
2024年のトレンドカラーがPantoneから発表されました。 トレンドカラーは心と体を豊かにするビロードのようなやさしい桃色「ピーチファズ（Peach Fuzz）」、人に寄り添う親切な雰囲気を作り出します。 桃の産毛やたんぽぽの綿毛をイメージしたような桃色で、心地が良い癒やしのカラーです。
Generate dark CSS for your web page effortlessly If you want to add dark theme to your web page, all you have to do is paste the URL of the page and download the ready to use CSS Dark CSS theme for your website Dark themes and dark mode in general have been gaining popularity in the past couple of years. We've reached a point where dark UI is not only for the geeks, but actually is a mainstream st
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度（Lightness）、彩度（Chrome）、色相（Hue）の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
配色はデザインにおいて欠かせない重要な要素です。しかし、配色がなかなか決まらずに悩んでしまったという経験は、誰しも一度はあるのではないでしょうか。 今回は、Webデザイン制作で便利な配色カラーパレットに関するHTML/CSSスニペットをまとめてご紹介します。 美しいグラデーションやクリックするだけで配色をコピーできたり、配色が苦手なひとでもボタンひとつで作成できる自動生成ツールなど、色に困ったときに使いたい便利なHTMLスニペットが揃います。 よ手軽な配色ツールをお探しのひとは、以下の記事も参考にしてみてはいかがでしょう。2020年の最新ツールも追加アップデートしています。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ Webデザイン配色は怖くない！制作で便利なHTML/CSSカラースニペットまとめ Gradients Collection Pr
おすすめ配色サイトまとめ https://t.co/z1N35xsj1u
序花王が美白という表現を取りやめることを公表した。 https://www.nikkei.com/article/DGKKZO70408840W1A320C2TJC000/ 化粧では「日本人の肌」に合わせた化粧といった売り文句も使われたり、従来から問題のある表現が無批判的に使われたりもしていた。けれど、肌の色は単一ではないし、その基準も単一ではない。 この種の肌の色をめぐる問題は私の専門領域である美術においても議論になることだ。「黒く美しい」と聖書の中で書かれたシバの女王が、絵画の中では白くされたように、美術における色には差別的な危うさが潜んでいる。 今日、ギャラリーなどはWhite Cubeと呼ばれる白い壁面を備えた形式をとることが多い。これ自体は特に差別性があるとは言えないが、ナチスドイツもWhite Cubeを推進していたことを考えると、こうした白さにはどこか危険な香りが漂ってくる。
ブラウザに表示されたWebページはもちろん、Photoshop, Illustratorをはじめとするすべてのアプリからカラーをすくうことができる、シンプルで使いやすい高性能なカラーピッカーを紹介します。 macOS対応のアプリで、オープンソースなので商用でも無料で利用できます。 カラー値は、HEX、RGB、HSB、HSLに対応。 ネイティブで非常に高速 macOS 10.15 Catalina以降対応のアプリです。 アクセシビリティ重視 カラーを比較して、WCAGへの準拠をすばやく確認できます。 コンパクト メニューバーに対応、必要のないときに邪魔になりません。 ログイン時に起動 設定からログイン時に起動を選択、いつでもクリックまたはショートカットでアクセスできます。 アクセスが簡単 設定からグローバルホットキーを設定できます（⇧⌘Dがお勧め）。 カラーのフォーマット HEX、RGB、H
『ノンデザイナーズ・デザインブック』25周年記念、特典PDF「Missing Pages 2023」からの抜粋です。 25周年キャンペーン情報 特典PDF「Missing Pages 2023」のpp. 65-69に掲載しています。 配色を直感的に行うための明度の使い方を3つのステップで紹介します。 このテクニックは、『ノンデザイナーズ・デザインブック』の第5章で説明されるコントラストに関連しています。 色の三属性と色相環本題に入る前に、配色の基礎知識として色の三属性と色相環について説明します。 色の三属性とは、「色相（色味）、明度（明るさ）、彩度（あざやかさ）」を指します。これらの属性を調整することで、扱える色の幅が広がります。 色相環とは、色を円環状に配置して表したもので、色相を体系的に捉えられます。 Step 1 | 色の選択に役立つ明度チェック1-1. 印象をコントロールするコツ色
当ブログでもいろいろな配色本を紹介してきましたが、今回はイラストやデザインに役立つ魅力的な配色だけでなく、色の組み合わせで世界観を創り出す、カラーパレットを理論的に解説した配色本を紹介します。 まさに、イラストレーターや絵師さんにぴったりな最強の配色本！ 眺めているだけでもインスピレーションが刺激され、創作意欲が高まる一冊。 各ページに掲載されている描き下ろしのイラストには、実際に配色が適用されており、イラストレーターさんによると「この組み合わせで、こんなに引き立つのか」「このトーンでまとめると、統一感が出るんだ」と気づきの連続だったそうです。 配色アイデア手帖シリーズ（最新刊の紹介記事）でお馴染みの桜井 輝子氏による、ファンタジーの物語や文学のキーワードを元にした世界観設定にぴったりな配色本です。世界の美しい物語53編から、88項目のテーマと2376の配色見本が収録されたイラスト画集のよ
以下の記事は、Adobe Illustratorを使用した特色データ作成のコツです。ただしこれは、正しいデータの作り方とか、RGB入稿とか、そういう話ではまったくありません。特色をCMYKで出すやつとも無関係です。印刷通販の入稿ガイドなどとは、まるっきり違う話を書いています。初心者の方は読まないほうが良いです。 画面の色はあてにならない Illustratorで特色を使う場合（CMYK＋特色の5色刷りや、スミ+特色の2色刷り／3色刷りなど）、たいてい、DICのスウォッチ「スウォッチライブラリ→カラーブック→DIC カラーガイド」を使うと思います。データ作成としてはそれでいいんですが、作り慣れてくると、画面に表示される色味に不満をおぼえますよね。なんでこんなにくすんだ色味なんだって。 表示を「オーバープリントプレビュー」にすればだいぶ鮮やかになります。それでもまだ現物とはかけ離れた色が出るこ
A fun way to discover interesting color combinations.
CIE LCh カラーモデルベースの色相環カラーピッカーを作りました。 https://luncheon.github.io/lch-color-wheel/ この記事はその経緯です。 HSL 色表現と色相変数 CSS で使える色表現の 1 つに HSL カラーモデル があります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。 色相を CSS カスタムプロパティ（変数）にすれば、彩度と輝度を固定して色相だけ変えることが簡単にできます。 .btn { background-color: hsl(var(--hue), 100%, 60%); border: 2px solid hsl(var(--hue), 100%, 40%); } .btn:hover { box-shadow: 0 0 8px hsl(var(--hu
タイトルの通り、Goで標準出力をフィルタしてよしなに色を付けるツール書きました。 irir モチベーションは「 go test に色を付けるツールを作った #golang 」と同じです。 ある標準出力に対して、なんらかの文字列を含んでいたらその文字列に色を付けたり、行全体に色を付けたいという要求はよくあることだと思います。今回は、そうした小さな色付けルールをYAMLで記述してフィルタを適用する感じのツールにしました。 READMEにある通りですが、以下の様なログファイルがあったとして、 $ cat example.log 2023/05/19 23:56:54 [info] GET /some/resource 200 0.001 2023/05/19 23:56:55 [warn] GET /some/resource 200 0.001 2023/05/19 23:56:56 [err
CSSフレームワーク「Bootstrap」の最新バージョンである「Bootstrap 5」がアルファ版としてリリースされました。バージョン5ではjQuery依存からの脱却や、Internet Explorerのサポート終了によるCSSカスタムプロパティの強化など、数多くの新機能が追加されています。 Bootstrap 5 alpha! | Bootstrap Blog https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/ 目次 ◆ドキュメントページやロゴのデザイン変更 ◆jQueryとJavaScript ◆CSSカスタムプロパティ ◆ドキュメントの改善 ◆フォームの改善 ◆ユーティリティAPI ◆グリッドシステムの強化 ◆ドキュメントの生成方法変更 ◆ドキュメントページやロゴのデザイン変更 バージョン5では、ドキュメントペ
イメージはなんとなく浮かぶけど、じゃあその配色は具体的にどうすれば、、、そんなデザインやイラストの悩みに大活躍する配色本を紹介します。 本書は人気シリーズの第3弾で、今回は「カラー縛り」のデザイン案件に役立つ配色になっています。例えば、レッド系でもさまざまなトーンのレッドと色の組み合わせを写真・イラスト・パターン・キーワードなどさまざまな角度の配色が分かります。 本書は、当ブログでも好評だった「配色デザインインスピレーションブック」の第3弾（第1弾の紹介記事、第2弾の紹介記事）。第1弾も第2弾も発売後は書店でもAmazonでも売り切れ状態がずっと続いていました。 第3弾となる本書もさらに充実しており、前書を持っている人はもちろん、今回初めてという人にもお勧めです。
CSS colors sorted by their hue, saturation and lightness
Yesterday I was thinking about how long it took me to get a colorscheme in my terminal that I was mostly happy with (SO MANY YEARS), and it made me wonder what about terminal colours made it so hard. So I asked people on Mastodon what problems they’ve run into with colours in the terminal, and I got a ton of interesting responses! Let’s talk about some of the problems and a few possible ways to fi
Web Platform Dive into the web platform, at your pace.
あずき色のスプレーを買ったら、「赤2号」と書いてある。”あずき色”の名前はカッコのなかに入っているから、おそらく”赤2号”が本名なんだろう。俺はけっこう鉄道が好きなので、これが何を意味しているかわかる。国鉄時代に多用されたちょっと青みがかった赤。あれを赤2号って言うんだ。しかし、いまどきこのスプレーで鉄道模型を塗る人はあんまりいないだろうし、「そもそもMr.カラー（GSIクレオスの模型用塗料）に鉄道用の色なんてほかにありましたっけ？」と、しばし考え込む。 ▲ヘッドライトの周りと窓の帯が「赤2号」だ 「Mr.カラーには昔、赤2号以外も『鉄道模型用カラー』というのがラインナップされていたらしい」ということはわかったが、それ以上詳しいことはあまり手がかりがない。しかし、自分のなかにちょっと確証めいたことがあったので、GSIクレオスの広報担当者に詳しく話を聞いてみた。すると1970年代、Mr.カラ
グラデーションは鮮やかな配色や動く流体Blobシェイプなど、さまざまな方法や見せ方で見かけるようになっています。 2色の配色によるグラデーションをつかった影、シャドウグラデーション（英: Shadow Gradients）を手軽に作成できるオンラインツール「CSS Shadow Gradients」が公開されています。 CSS Shadow Gradientsで作成したグラデーションは、CSSコードとしてワンクリックでコピー、利用できます。 CSS Shadow Gradients https://alvarotrigo.com/shadow-gradients/ 🧑💻 使いかた CSSグラデーションシャドウは、疑似要素をつかって表現しており、backgroundプロパティにlinear-gradient関数を使うことで、手軽にスタイリングすることができるようになりました。 使いかた
Offers を運営している株式会社 overflow の あほむ でございます。今回は個人的に気になって調べてみた系のネタを散漫に書いたブログです。 ダークモードに対する疑問の発端 美観やバッテリーパフォーマンス[1]を理由とする話を念頭に置きつつ OS レイヤーにおける UI のスイッチングは自動で行われるとして、モバイルアプリや Web の個々の提供者が向き合う必然性はどこにあるのでしょうか？ Web で実装するときは prefers-color-scheme を使って CSS Custom Properties で宣言されたカラーパレットを切り替えることになります。モダンブラウザのサポートが充実しているので実装上の難関はありません。よって本記事では何のためにダークモード[2]を提供するのかという動機付けの理解を目的とします。 ダークモードの存在を肯定しうる理由たち よく目にする主要
皆さんこんにちは！！ 前回に引き続き、フロント（Vue.js）側の開発を始めていきます。 Vue.jsに皆さんも大分慣れてきたのではないでしょうか？ 前回は、予定の詳細表示ダイアログを作成しました。 前回までの記事はこちらからどうぞ Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編①Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編②Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フ
ある特定の色を表現するために利用される色空間には、RGBやHSV、HSLなどがあり、それぞれの色空間で色を表現する方法が異なります。データ可視化ツールのDatawrapperでCTOを務めるGregor Aisch氏が、「人間が感じる色」に基づいて色を使い分けるには、色空間が重要であると自身のブログで語っています。 How To Avoid Equidistant HSV Colors https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/ Take Care of your Choropleth Maps https://www.vis4.net/blog/2011/12/choropleth-maps/ Aisch氏が色の選択の重要性に気づくきっかけとなったのは、「The Guardian」が公開していたアメリカの
ピットワン（岐阜市）は、光陽オリエントジャパンとコラボして、ポルシェ『911』を世界一黒いと言われる塗料「真・黒色無双」を使用して全塗装を施工した。 光陽オリエントジャパンの真・黒色無双は、2020年9月に販売を開始した世界一黒い水性アクリル塗料。対象物の表面に大きな表面積の粉状塗膜層を作ることで、光を層の内部に閉じ込めて超低反射の黒い外観を実現している。塗装環境を選ばない水性塗料で、Reach、RoHSといった環境規制にも対応。塗料自体もほぼ無臭のため、気軽に高品質な黒色塗装を楽しむことができる。 スーパーブラックコーティングといえば、2019年のフランクフルトモーターショーで話題となったBMW『X6』の「ベンタブラック」が有名だが、真・黒色無双の全反射率はベンタブラックよりも低い0.6％。「世界一真っ黒な車」に仕上がっている。
!important はすべてを上書きできるのか？ CSS において話題に出すといろいろな意味で盛り上がるキーワードが!importantです。 CSS でのスタイル宣言時に!importantを付与すると、細かな詳細度の差異などを無視して強制的にスタイルを適用できます。濫用するとあっという間に無秩序になるため、一般的には慎重な利用が推奨されることが多いです。 さて、ではこの!importantですが、何もかもを上書きできるのでしょうか？ 実際のところそうではありません。今回は、CSS 仕様をいろいろと調べているうちに、!important で上書きできないスタイルの存在を知ったため、その情報をまとめてみました。 CSS における Cascade Sorting Order CSS は Cascading Style Sheets という名前の通り、カスケードと呼ばれる仕組みでスタイルの適
日清食品ホールディングスは4日、即席麺「チキンラーメン」のパッケージの配色が商標登録されたと発表した。 【写真】進化し続ける 日清食品ホールディングスの安藤宏基社長 セピア、白、オレンジの3色からなる横じま模様で、同社は「配色だけでもチキンラーメンと認識してもらえるようになった」と説明している。
Well I can’t say we were really planning on it but over the last few weeks we’ve been having a ton of fun dumping new and exciting features into Tailwind and now feels like the right time to cut a release, so here it is — Tailwind CSS v2.2! We’ve built-in a new high-performance CLI tool, added ::before and ::after support, introduced new peer-* variants for sibling styling, added variants for styl
WebサイトのUIに使用するヘッダ、ボタン、イラスト、カード、カラム、ラインなど、UI要素のさまざまなカラースキームをまとめた配色サイトを紹介します。 カラースキームはページ全体、コンポーネントごとにまとめられており、それぞれのカラーは16進のHEX値が記載されています。各カラーをクリックするだけで簡単にコピーして利用できます。 Spectrum.Art Spectrum.Artは魅力的で視覚的にも優れたUIデザインを簡単に実現するために、UIデザイナーが厳選した色の調和に優れたカラースキームをまとめたサイトです。鮮やかで人目を引くカラースキームから、繊細でエレガントなカラースキームまで幅広いオプションが提供されています。 Spectrum.Art 2023年9月現在、カラースキームは16種類あり、各カラースキームはページ全体やコンポーネントごとにまとめられています。 では、Color s
弁護士ドットコム インターネット 黒タイツは「芋くさい」、レッグウェアメーカー「アツギ」の動画炎上→謝罪「配慮に欠ける表現がございました」 レッグウェアメーカー「アツギ」のエックス（旧ツイッター）公式アカウント（ @ASTIGU ）が、黒いタイツを「芋くさい」と投稿し、批判が殺到している。 問題の投稿は、現在削除されており、アツギは「配慮に欠ける表現があった」として謝罪した。 ⚫️「黒ストッキングの透け感が嫌だから黒タイツを使ってるのに」 アツギは、ミニスカートの女性の寒さ対策として、自社商品のベージュのタイツと黒いストッキングを二重に履くことを提案する宣伝動画を制作し、エックスに投稿した。 その際に、「黒いタイツを履くと芋くさくなる人」などと呼びかけ、透ける黒ストッキングの着用を勧めていた。 問題の投稿（エックスより） このことから、「黒タイツを使っている人に失礼」「黒ストッキングが透け
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
