【新連載】アニメスタジオのここが知りたい！ 色彩設計・石黒けいが語る“動画工房の色”
様々な職種のスタッフのチームワークによって命を吹き込まれるアニメーション。そんなアニメーション制作を支えるのがアニメスタジオだ。アニメスタジオは、作品の企画から制作、完成までを一貫して行う場所であり、アニメーターをはじめ、美術監督、3DCGデザイナーなど様々な専門家が集まって制作に取り組んでいる。 しかし、アニメスタジオの内部で実際にどのような仕事が行われているのか、その詳細を知る機会は多くない。 そこでリアルサウンド映画部では、アニメスタジオに潜入し、スタッフへのインタビューを通してそのスタジオが持つ“独自性”に迫る新連載「アニメスタジオのここが知りたい！」をスタート。記念すべき第1回目となる今回は、「動画工房」に取材を実施。色彩設計を担当するスタッフの目線から、「動画工房」の魅力を掘り下げていく。（編集部） 動画工房の階段には歴代の作品ポスターがずらり！ 先頭には『夜のクラゲは泳げない
The good colors – Full spectrum – OKLCH
Generate a palette of colors based on your preferences. Customize the colors, or generate a full spectrum palette.
UIデザインに最適！ トーンを合わせたカラーでカラーパレットを簡単に生成できる無料ツール -The good colors
WebサイトやスマホアプリのUIにトーンを合わせたカラーを使用すると、デザインに統一感が生まれます。このトーンを合わせたカラーというのは、明度と彩度が一貫されたカラーのことです。 デバイスに依存しない、トーンを合わせたカラーパレットをOKLCH色空間で簡単に作成できる無料ツールを紹介します。RGBやHEX値もサポートしています。 The good colors The good colorsは、OKLCH色空間を使用してカラーパレットを作成できるオンラインツールです。OKLCH色空間とは、明度（Lightness）、彩度（Chrome）、色相（Hue）の値で構成されるカラーで、LCHに比べて色相と彩度の均一性が改善された色空間です。そのため、明度と彩度が一貫された知覚的変化が保証されます。 OKLCH色空間を使用したカラーパレット 使い方は、簡単です。 「Lightness」と「Chrom
LCHは、UIにベストなカラースペース｜hirotoarakawa
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（明度
CSSの知っておくと便利な実装テクニック！ 相対カラー構文を使用して、1つのカラーに対して濃く薄くを簡単に設定できます
異なるカラーを濃くしたり薄くしたりするとき、個別にカラーを設定してもできますが、CSSの相対カラー構文（color: rgb(from green r g b);）を使用すると簡単に実装できます。 下記はそれぞれ元のカラーに対して相対カラー構文1つでそのカラーを濃くしたり薄くしたりしています。1つのカラーに対して複数の濃さが必要な場合に便利です。 CSSの相対カラー構文とは CSSの相対カラー構文のデモ CSSの相対カラー構文とは CSSの相対カラー（CSS Relative colors）構文を使用すると、他のカラーのパラメータを変更してカラーを定義できます。相対カラー構文は設定した色を相対色に変換します。変換には、fromキーワードを使用します。ブラウザはベースのカラーを変換して分解し、新しいカラーの定義で使用する変数として使用できます。
Color Contrast Auto Checker - 複数の色の組み合わせを簡単にコントラスト比チェック
「色を選択」 ボタンを押すと各ブラウザ標準のカラーピッカーが表示されますので、そこから色を登録します。 あるいは、ボタン横の入力欄に直接、16進数カラーコード（例： #FF0000）を入力することもできます。16進数カラーコード以外の入力は無効です。 色を 2つ以上 登録してください。最低 2つ、色が登録されていないとコントラストの比較ができないのでエラーになります。 初期状態で色の登録ボタンは 2つ 表示されますが、さらに色を追加したい場合は「新しい色を追加」ボタンを押すと、色の登録用ボタンが画面に追加されます。 必要な色の登録が完了したら「コントラスト比チェックを実行」ボタンを押すと、チェック結果が表示されます。なお、結果が煩雑にならないように、達成基準における「大きな文字」については考慮していません。 ※ データ保存機能などはないので、ページがリロードされるとそれまでに登録していた色
複数の色の組み合わせを簡単にコントラスト比チェックできる Color Contrast Auto Checker を作ってみました
複数の色の組み合わせを簡単にコントラスト比チェックできる Color Contrast Auto Checker を作ってみました Color Contrast Auto Checker は、コントラスト比をチェックしたい色をあらかじめ選択し、それら選択した各色の組み合わせのすべてをワンクリックで簡単にコントラスト比チェックできるオンラインツールです。 この記事は 「アクセシビリティ Advent Calendar 2023」 1日目の記事です。 毎年、年末恒例のアクセシビリティ Advent Calendar。自分の感覚では毎年参加させていただいて、何かしら書いている気がしていたんですが、昨年は書いていなかったらしく...... 多分なんか忙しかったんでしょうね。 で、毎度なるべく初日に近い方に書いて、ハードルが上がらないうちに逃げ切る作戦（謎）をとらせていただいているのですが、今年は僭
GoogleやYouTubeなどのロゴを分析 デザイナーなら知っておきたい11の錯視と調整方法
最近はデザインの範囲がかなり広がり、デザイン思考や、UXデザイン、そしてサービスデザインなど「見た目」だけではないデザイン領域が注目されている。 それと同時に「デザイナー」と呼ばれる人の中で基本的なビジュアルデザインに関する知識が乏しい人も少なくはなくなってきた。 しかし、いかなるデザインフィールドであったとしてもデザインの基礎知識が重要であることには変わりない。 そこで今回はヴィジュアルデザインの細部に関する視覚的錯覚 = 錯視に関しての11のポイントを紹介したい。 「神は細部に宿る」と言われる通り、”良いデザイナー”と”素晴らしいデザイナー”を分けるポイントの一つに、細かい部分の作り込みが挙げられる。 デザインソフトを使って自動調整しても何故かしっくりこない時がある。それは、視覚的錯覚が理由。 ヴィジュアルデザインにおいては、いわゆる錯視と呼ばれる状態が頻繁に発生するのだ。ここで紹介さ
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
Unity WebGL Player | IroSphere
IroSphere Web版 解説動画 Youtbe版, ニコニコ版 IroSphere Legacy版GitHubリポジトリ https://github.com/TaliPhoto/IroSphereLegacy ※こちらはWEB版以前のUnityプロジェクトファイルになります ライセンス ・このWEB版についての使用制限は一切ありません。ご自由にお使いください ・GitHubで公開しているプロジェクトファイルもCC0になります。ご自由にお使いください クレジット Tali → Twitter, Youtube, niconico えれのあ → Twitter 更新履歴 2023-04-28 ・OptionのLightnessだけResetが効かなくなっていたバグを修正 2023-04-25 ・OptionにLightness（明度）パラメーター追加 ・OptionのSaturatio
PANTONE に直接聞いてみた。DICとの違い。 - 株式会社サンコー：おもいをカタチにする仕事｜印刷・WEB・デザイン
「DICとPANTONEの違いについて、色々と調べてブログにまとめましたが、どうもよくわからない。」ということで、PANTONE(パントン・パントーン)の日本総代理店のユナイテッドカラーシステムズさんに直接電話して聞いてみたら、驚きの結果が！これは日本中のデザイナーさんに知って頂きたい。 PANTONE のインキは無い！？ サンコー）「PANTONE(パントン・パントーン)で色指示があり、近似色ではなくPANTONE(パントン・パントーン)のインキで印刷して欲しいので、インキを作ってくれるところを紹介して欲しい。」 ユ：「ユナイテッドカラーシステムズではインキは製造していないのでパントン社とライセンス契約したインキ会社に相談して下さい。」 えっ？・・・ PANTONE(パントン・パントーン)はあくまでカラーシステム（色見本）のみを持っており、実際にインキを作るのはライセンス契約をしている国
注目のWebデザイン用AIツール！ テキスト入力でWebサイトやスマホアプリ向けのカラーパレットをすぐに生成 -AI Colors
テキストを入力すると、Webサイトやスマホアプリ向けの美しいカラーパレットをすぐに生成してくれるAIツールを紹介します。 「企業サイト向けのクールで信頼感のあるカラーで、ベースはホワイト」「子供向けキャンペーンサイト、海と夏のイメージ」こんな感じにテキストを入力すると、Webサイトやスマホアプリ向けのカラーパレットを生成してくれます。 AI Colors AI Colorsの特徴 AI Colorsの使い方 AI Colorsを使ってみた AI Colorsの特徴 AI ColorsはOpenAIのGPT-3.5を使用して、テキストからAIによりWebサイトやスマホアプリ向けの美しいカラーパレットを生成します。また、他の人が作成したカラーパレットを検索・編集・視覚化することもできます。 利用にあたっては無料で、登録なども必要ありません。
APCA Contrast Calculator
Click on a color patch next to "Text" or "Background" above to use the HTML5 color-picker (modern browsers). Otherwise enter color values in the text-box as a three or six digit hex value, the '#' is not necessary. Other valid entries are integer rgb(r,g,b) or an HTML color name (see bottom of page for list). PROBLEMS? Try a "Forced Reload" on your browser, and/or clear the cache. This is the APCA
【Mac】画面上のカラーコードを瞬時に確認する方法 – ワードプレステーマTCD
Web制作中にカラーコードが気になることってありますよね。 ラフデザインや参考サイトの一部のカラーコードを調べるために、Chromeの拡張機能やPhotoShopを使う必要はありません。Macユーザー向けですが、標準機能のみで画面上のカラーコードをすぐに抽出できます。 今回はその操作方法をご紹介いたします。 Mac内蔵アプリ「Digital Color Meter」を使う Macの標準機能で実装されている「Digital Color Meter」を使えば、簡単にカラーコードを抽出できます。 Spotlightやランチャーアプリ（command+スペースキー）を使って「color」と検索してください。 「Digital Color Meter」というアプリケーションがヒットしますので、起動します。 あとは、任意の箇所にカーソルを持っていけばOKです。 ▲開発者ブログがつくれるWordPres
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPTを使ってカラーパレットを生成、何故その色を選んだかの解説や、プレビューやアクセシビリティなどを確認も出来る・「HueHive」
Color Contrast Checker for WCAG & APCA. Analyse, preview and get color suggestions.
AI Color Palette Generator - Browse, Edit, Visualize and Generate Unique Palettes
APCAコントラスト日本語フォント検証
ColorMagic | AI Color Palette Generator
Material Design
