グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
【最新】目的別おすすめカラーパレット13選！選び方のコツも紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ WebクリエイタースクールデジタルハリウッドSTUDIO by LIGの運営担当の天（@10TEN10TAN10）です！ 未経験からデザインを学ぶ中で受講生さんから時折いただくのが「おしゃれな配色ってなんですか？」ということ。 デザインのトレンドは日々変化していきますし、人それぞれ「おしゃれ」の定義って異なりますよね。今日の記事では『配色』を知るためのおすすめツールを紹介をします！ デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。デジLIGでは、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ぜひ一度詳細をチェックしてみてください 👉「デジタルハリウッドSTUDIO by LIG」詳細へ 👉スクールの概要が詳しく分かる資料の
しっかりマスター！美しいグラデーション作成徹底ガイド【Illustratorグルーバルカラー編】
この記事では、Illustratorで美しいグラデーション作成する基本ガイドとして、数回のシリーズに分けて具体的なデザイン方法や便利なテクニックを紹介しています。 今回は、グラデーションデザインに重要な「配色」の選択、設定を行っていきます。 ベースとなる色を決め、補色や類似色などの配色ルールを活用することで、グラデーションに必要な鮮やかなカラーグループを簡単に選ぶことができるテクニック。 Illustratorの配色に関する便利な機能を活用するので、配色が苦手なひともこの記事の終わりには、自分だけの美しいカラーパレットを簡単に作成できるようになります。 コンテンツ目次 1. Illustrator推奨ドキュメント設定 2. カラーガイドパネル 3. 補色によるカラーグループの作成 4. ペンタードカラーによるカラーグループの作成 5. 類似色によるカラーグループの作成 6. 鮮やかなカスタ
配色えらびに超便利！カラーパレットやグラデーションなど色ツールが揃ったCoolors
美しいカラーパレットを生成できるツールはたくさんありますが、配色を探しているときに役立つ便利なオンラインツールCoolorsをご紹介します。 人気トレンドのおしゃれな配色カラーパレットを確認、編集できたり、写真から色を抽出したコラージュの作成、色覚障がい診断ツールの他に、配色の明るさや彩度、色温度なども調整できるなど、配色に必要なあらゆるツールが揃っています。 Coolorsとは Coolorsは、Spaceキーを押すたびに配色をランダムで作成、編集できるオンラインツール。配色に自信がなくても、数千を超える美しい配色カラーパレットからインスピレーションを見つけることもできます。 失敗しない配色えらびに役立つさまざまなツールが同時に公開されている点もポイントです。では、Coolorsの使い方を詳しくみていきましょう。 Coolorsの使い方 Coolorsの使い方は、基本的な2通りとなります
デザイナーじゃなくても知っておきたい色と配色の基本 | knowledge / baigie
色は私たちの身近に存在する視覚要素であり、日々の生活や行動に多大な影響を与えています。しかし、美術やデザインの専門教育を受けない限り、これほど身近な色を体系的に学ぶ機会はほとんどありません。 近年、ビジネスの現場でもデザインの重要性がよく語られます。ビジネスレイヤーで語られるデザインは課題解決を意味する広義のデザインであることも多いですが、その概念がプロダクトに落ちる段階では、ビジュアルデザインのような狭義のデザインも考えていかなくてはなりません。自分自身がデザイナーではなくとも、デザインを評価・判断すべき立場になることも、当然あるでしょう。 デザイナーでなくても、仕事の中で色を扱うシーンは他にもあります。PowerPoint等を使ってビジネス文書を作成をするとき、誰もが色を用いるでしょう。色の知識があれば、より効果的なドキュメント作成が可能になります。 このように考えると、色はデザイナー
コロナでどうなる？2021年に注目したい配色カラーの人気トレンド8個まとめ
この記事では、2021年に注目されている配色の動向やトレンドを、8個のポイントに分けて詳しく紹介しています。 2019年、次に人気となる配色は、未来的なデザインで、明るく大胆な色使いだと考えていました。 しかし、2020年に入り、新型コロナウイルスの世界的大流行が起こります。そして、すべてが変わりました。 2021年に注目されている配色の動向としては、落ち着いたリラックスした気持ちにさせる色がほとんどでしょう。ネオンや派手な色の代わりに、よりソフトで、人間らしさを感じる色が選ばれています。 調和のとれた配色を考えてみましょう。これこそが、2021年のカラートレンドです。 たとえば、単色デザインや淡いパステルカラー、自然を題材にしたアースカラー、他の色の混ぜやすいカラーパレットなどがその代表です。 では、2021年に要注目の配色、カラーパレットの人気トレンドを詳しく見ていきましょう。 コンテ
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
パワポっぽさを脱却する〈色彩編〉｜PowerPoint+
■パワポの色はダサいどうも今回は脱パワポっぽさ！ということで、色をテーマにまとめていきたいと思います！ みなさん、パワポでスライドを作る際、色をどのように決めていますか？ 図形を挿入した時のデフォルトの色を使っていますか？ 図形の塗りつぶしから色を選んでいますか？ もちろん、もともとパワポに設定されているカラーでも問題はありませんが、どうしても普段から目にすることが多いので、パワポっぽさを感じる配色になってしまいます。 今回のテーマ「パワポっぽさを脱却する」ということですから、私がいつもやっている方法を紹介したいと思います！ ■色を決めるのはめちゃくちゃ難しいということを自覚する実際に私がおすすめする方法を紹介する前に、色を決めることの難しさについて話したいと思います。 フランスの国旗（イタリアでもルーマニアでもドイツでもチャドでもポーランドでもいいですが笑）で考えてみたいと思います。もし
映画「AKIRA」は緑色が特徴的に用いられている
カリフォルニア大学サンディエゴ校で数学と文学を学んでいるというnibnalinさんが、映画を色情報で視覚化した上で分析した論文を公開しています。その中で、題材となった「AKIRA」では、3つの原色である赤・緑・青のうち、特に緑色が特徴的に用いられていることが指摘されています。 SHADOWS OF STAINEDGLASS (PDFファイル)https://nibnalin.me/assets/stained-glass.pdf Shadows of Stained Glass - dust-nib https://nibnalin.me/dust-nib/shadows-of-stained-glass.html 映画を視覚化する試みとしては、フレームごとに支配的な色を抽出して一列に並べ、バーコードのようにした「movie barcode」があります。 映画のコマを圧縮してバーコード化し
Webサイト配色のお悩み解決！制作で便利なHTML/CSSカラースニペット21個まとめ
配色はデザインにおいて欠かせない重要な要素です。しかし、配色がなかなか決まらずに悩んでしまったという経験は、誰しも一度はあるのではないでしょうか。 今回は、Webデザイン制作で便利な配色カラーパレットに関するHTML/CSSスニペットをまとめてご紹介します。 美しいグラデーションやクリックするだけで配色をコピーできたり、配色が苦手なひとでもボタンひとつで作成できる自動生成ツールなど、色に困ったときに使いたい便利なHTMLスニペットが揃います。 よ手軽な配色ツールをお探しのひとは、以下の記事も参考にしてみてはいかがでしょう。2020年の最新ツールも追加アップデートしています。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ Webデザイン配色は怖くない！制作で便利なHTML/CSSカラースニペットまとめ Gradients Collection Pr
「女の子向けだからピンク」に批判的だが、ピンクや薄紫、水色にしないと訴求しないという現実がある「なるほど！」「環境に起因するのでは？」
思想犯 @matildax 世間って「女の子向けだからピンク」デザインにやたらと噛みつくけどさ デザイナーなら解ると思うけど実績としてピンク、薄紫、黄色、（水色）をベースにしないと女児が食いつかないし売れない 明確に数字に出ちゃってるから、広く女児に訴求するためにはまずピンクから始めないと意味ないことも知って 2020-02-20 11:20:52 思想犯 @matildax 「自分は昔ピンクが嫌だった！」「自分は何色が好きだった！」とかは正直関係ない 私もどどめ色が好きだったので（）別にピンク興味なかったし でもピンクが推されるのは単純に「一番多くの女児が興味を持ってくれる色だから」であって、ジェンダー的押し付けでもなんでもなく単なる需要の問題 2020-02-20 11:24:06 思想犯 @matildax 女玩やってると本当に指定される色は固定に近いです 子供が一番手に取りやすい、
「目の見えない人に『色』をどう説明しますか？」赤・青・緑を言葉で表現 : らばQ
「目の見えない人に『色』をどう説明しますか？」赤・青・緑を言葉で表現 生まれつき目が不自由な人に色を伝えたいときに、なんと説明しますか？ そう疑問に思った人が、「赤、青、緑を言葉で説明されたことのある人」の例をネットで見つけ、感銘を受けたそうです。 Saw this and thought, "Damn, that's interesting." So I figured I'd share. from r/Damnthatsinteresting 赤： 太陽の下に私を立たせ、その感じている熱は赤だと言われた。 熱から燃える感じ、恥ずかしい感じ、そしてまた怒りも赤であると説明された。 青： 私の手をプールにつけて、泳ぐときのセンセーション、そして常に感じる涼しさが青であると説明された。青はリラクゼーションのように感じると。 緑： やわらかい葉っぱや濡れた芝生を手にした。緑は生を感じるものと
2020年の流行色・トレンドカラーは宵の空を連想させる「クラシックブルー」HTMLのコードは「#0f4c81」
2020年の流行色・トレンドカラーがPantoneから発表されました。 2020年のトレンドカラーは、宵の空を連想させる「クラシックブルー」、落ち着き、自信、つながりをもたらす安心感を与えるカラーです。 Pantone Color of the Year 2020 PANTONE 19-4052 Classic Blue 2020年に使用したいカラーの組み合わせ方 スウォッチ素材のダウンロード PANTONE 19-4052 Classic Blue 2018年のトレンドカラーは「Ultra Violet」で寒色系、2019年のトレンドカラーは「Living Coral」で暖色系でした。 PANTONE 19-4052 Classic Blueは人々の心に安らぎを与えるカラーで、集中力を高め、明快さをもたらします。また、こういった古典的なブルーは信頼、落ち着き、自信といった感情を具現化でき
サンフランシスコの夕日をモチーフ、美しい配色カラーパレット10選
デザインで頭を悩ますことの多い配色ですが、インスピレーションの参考にできるものは、わたしたちの周りにあふれています。今回は、サンフランシコの夕日をモチーフにした、美しい配色カラーパレット10個をまとめた 10 San Francisco Sunset Color Themes をご紹介します。 2020年の流行カラー「クラシック・ブルー（英: Classic Blue）」を活用したカラーパレットが中心となっているので、色の組み合わせとして検討してみてはいかがでしょう。 2020年の色が決定！夕暮れ空のような「クラシック・ブルー Classic Blue」パントンから発表 サンフランシスコの夕日をモチーフにした美しいカラーパレット さまざまな色に染まるサンフランシスコの夕日から発想を得たこのカラーライブラリは、Adobe Creative Cloudと連携させることで、Photoshopはも
2020年の色が決定！夕暮れ空のような「クラシック・ブルー Classic Blue」パントンから発表
今年の色「クラシック・ブルー」の具体的な使い方は？ デザイン業界だけでなく、ファッションやインテリアなどさまざまな業界で、実際にどのように2020年の色「クラシック・ブルー」を利用できるのか、より詳しくみていきましょう。 ファッションやアクセサリー分野 「クラシック・ブルー」は、シンプルでエレガント、落ち着いていて自信を感じる青色の色合い。性別を問わない配色は、あらゆる色との組み合わせを可能にしながら、独自の強力なメッセージ性を全面に出します。トラディショナル、伝統的な印象を与えると同時に、モダンな雰囲気も表現できるのが特長で、メタリックな光沢感のあるハイテク素材から、ハンドメイドの手作りスタイルまで、テクスチャを組み合わせることで、よりオリジナル製の高い見た目に。 美容、コスメティック分野 個性を表現する「クラシック・ブルー」は、キラキラした光沢感から、埃っぽいマットな質感まで、目や爪、
これ便利！Web、UIデザインの配色カラーパレットツール7個まとめ
ウェブには数多くの素晴らしい配色カラーツールがありますが、この記事では、UIデザインに便利なカラーツール7つをご紹介します。 ユーザーインターフェースの色を選択するには、グラフィックデザイン向けプロジェクトとは異なる用意が必要となることに注意しましょう。UIデザインには、さまざまなバリエーションと色を持つ包括的な配色セットが必要なだけでなく、色がユーザークエスペリエンスにどのように影響するのかも検討する必要があります。 デザインにおいてもっとも重要な要素のひとつである「配色」を、見栄えを良くするだけでなく、効果的に選ぶことができるカラーツールをまとめています。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ UIデザインで重宝する配色カラーツール7個まとめ 1. Accessible color palette builder プロダクトデザインに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: [デザイン技法図鑑]ひと目でわかる配色デザインの基本。: 柘植ヒロポン (監修), MdN編集部 (編集): 本
プロダクトの「色」と向き合う「デザインとエンジニアリング」 - MdN Design Interactive
色の名前、日本語と英語での色の名前、世界各国の伝統色の名前が分かるサイトのまとめ
Colorsinspo - All in one resource for finding everything about colors
