UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
これはすごい！形やカラーをアニメーションで変えられる、コードによって作成されたフリーフォント -Leon Sans
フォントでいろいろなデザイン、表現をしたい人にぴったりなLeon Sansを紹介します。フォントを書くアニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激されると思います。 Leon Sansは商用でも無料で利用できます。通常のフォントファイルとは異なり、Webページやスマホアプリに特化されたCanvasベースのフォントです。 Leon Sans Leon Sans -GitHub Leon Sansとは Leon Sansのデモ Leon Sansの使い方 Leon Sansとは Leon Sansは美しいサンセリフ体で、フォントの太さを動的に変更し、HTML5のCanvas要素でアニメーション、エフェクト、シェイプを自由に作成できます。 生まれたばかりの赤ちゃんレオン君を祝うためにフォントをリリースしたそうです。 サイトでは
テキストやボーダーや背景に使うグレーを効果的に、ニュートラルなカラーを使いこなすためのテクニック
Webデザインで大切なカラーはベースカラーやアクセントカラー、そしてブランドのカラーがありますが、テキストやボーダーや背景などのコンポーネントに使うニュートラルなカラーも非常に重要です。 明るいニュートラルなカラー、暗いニュートラルなカラーをWebデザインで使いこなすためのテクニックを紹介します。 Light & Dark Color Systems 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 明るいカラーと暗いカラーを使用する準備 明るいカラーと暗いカラーを理解する 明るいカラーと暗いカラーをカラーパレットで使う時の注意点 明るいカラーと暗いカラーを使用する準備 コンポーネントで使用するニュートラルカラー カラーを選ぶ前に大切なのは、すでに使用しているニュートラルなカラーを調べることです。実際に一部のライブラリでは、すでに
色のイメージを使いこなすツール / カラーイメージスケール | 仕事でつかえる色彩学 | artience
十人十色という言葉は、よくご存知のように、考え・好み・性質などが人によってそれぞれ違うことを示しています。まさに色の好みは様々で、好きな色を10色選んでもらうワークショップを行なうと、全く同じパターンはないように見えます。そのため「色に対する評価は主観的なものだ」と結論付ける方も多く見受けます。 ところが、一見、色の好き好きはバラバラに見えても、整理してみると、明るい色好みであったり、あざやかな色好みというように、嗜好でも共通項があるという側面を見出すことができます。また、色を見た時に感じる印象効果は、多くの人が同じような観点で捉えていることも分かっています。見たり触ったり、手に取ったりという五感での経験や学習を積み重ねた結果として、色を見た時に、同じような印象を感じる部分があるということでしょう。 そんな色の持つ基本的なイメージを知って、色を使いこなしましょう。 一つ一つの色が持つ意味（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
