ウェブデザインの場合はCSSで再現するのが大変なこともあるので、使い所には要注意。




すぴかあやか(角田綾佳)@キテレツ
@spicagraph

わたしの好きな「色が濁りにくいグラデーション」の作り方を書きました。コーポレートカラーなど、色の制約があるグラデーションを作る場合、1色挟むととても表情が豊かになります。
ウェブデザインの場合はCSSで再現するのが大変なこともあるので、使い所には要注意。

わたしの好きな「色が濁りにくいグラデーション」の作り方を書きました わたしの好きな「色が濁りにくいグラデーション」の作り方を書きました わたしの好きな「色が濁りにくいグラデーション」の作り方を書きました

18:14 – 2020年08月14日




ツイートに対するネットの反応

日々、僕。( 藤木 )
@hibi_boku

うたさん@ゲーム人生チャンネル開設
@180megane

えみぽん@スイミー
@emif1215

おんちゃーん / WEBディレクター
@on_chaan

知らなかったー!!自分のサイト、グラデーション2色で作ってた(>’A`)>
さっそく明日試してみよう!!

02:25 – 2020年08月15日

新谷貴司(パゴちゃん応援中)
@localnavi

“すぴかあやか(角田綾佳)@キテレツ on Twitter: “わたしの好きな「色が濁りにくいグラデーション」の作り方を書きました。コーポレートカラーなど、色の制約があるグラデーションを作る場合、1色挟むととても表情が豊かになります。 ウェブデザインの場合はCSSで再現す…”

01:51 – 2020年08月15日

🍋lina🍋_サムネ制作𓀀
@meltdot________

これ最近自身で制作する上でも気付いたことだ…!同じ様な色相のグラデーションでも間に一色挟んだほうが鮮やかになるの…!

無意識が意識的に変わるだけで吸収率あがるから、感謝です🙇‍♀✨

01:25 – 2020年08月15日

マーク
@Merc109

最近のデザインでよくみるやつ

01:00 – 2020年08月15日

しごたの/大橋 悦夫
@shigotano

✍️グラデーションは3色で。
おだやか→鮮やか→渋め

00:32 – 2020年08月15日




melo’n mIx 🍈DTMブログリニューアル🎶
@melo_n_mIx

muraken@デザイン漫画
@muraken43111407

みんなー!
俺が言いたかったのはこれー!

グラデーションは濁るから、間の色の明度と彩度を調整するんだー!

鮮やかなグラデーションにしたかったら、一手間加えてー!

00:24 – 2020年08月15日

オリタケイ@8/10画集通販開始
@Oritakeikou

めちゃめちゃ学び深すぎてうおおおおなるほど!!!?ってなった………これは素晴らしすぎる………🙏

00:17 – 2020年08月15日

ちー(´⊙_⊙`)
@pearl_jewel_30

Shinji Oyama
@shinji_928

中間に1色入れるだけでもだいぶ印象が違う!

00:02 – 2020年08月15日

常盤クニオ@モクモクギルド運営/イラストレーター✏️
@illustrator920

このひと手間がクオリティを底上げするんですね~!

23:53 – 2020年08月14日

あるうらら
@aruurara

これって個人的な感覚でいうと光の色の遷移ってこんな感じじゃない?って思ってる。

23:34 – 2020年08月14日




ちよ🍣8/23欠席
@chiyo_j

うめち@koga_volunteer
@umechi_koga

お勉強になります!
すぐ実践しよ☺️

23:05 – 2020年08月14日

うみすみ
@kai10_aya5

グラデーションの色選びは案外難しい…
あとシャドウの色も。

23:03 – 2020年08月14日

歌を歌うか、ベース弾く人
@OTOOTOBASS

ずっと悩んでたやつ!!!
なにこれお金払いたい

23:00 – 2020年08月14日

如月けろりん
@KISARGI_KERORIN

め、メディバンくん…多色グラデーション機能を……実装…してください…

22:56 – 2020年08月14日

ゼヌー@蘭モカとwowaka様を全力で信仰する百合豚
@nasu163

タナカノブ@VYOND動画編集者
@NobuTana7

サムネ作りにめっちゃ役立つ。

確かにグラデーションの鮮やかさが全然違う!
使ってみよ!

22:50 – 2020年08月14日




ムッチー/村上矛智
@hell_z_syouji

アナログでも応用できそうなので覚えておこう。最後の赤から青の5色とか外人がミニチュアペイントでやってるような色合いに似てる。

22:48 – 2020年08月14日

神崎こっけ⛅
@kanzakikokke

さるとりいぬい
@testman_ufo

涼香|Webエンジニア・Webライター・ブロガー
@succhi104

こんなにも差が出るものなんですね…!✨

22:36 – 2020年08月14日

ハルタ★動画編集屋
@haruta_vloglabo

サムネマンは要チェックな情報。

グラデーションを使うときは、原色系と白を組み合わせることが多かったけど、原色系+原色系でも鮮やかなグラデーションが実現できそうですね🐧

22:36 – 2020年08月14日

およねさん
@yuukikun31

しかた@まずは1年頑張る
@shikata_72

グラデーションって奥が深くて難しいですよね(現在進行形で悪戦苦闘中)。すごく参考になります

22:18 – 2020年08月14日

ながい めぐみ giddy design
@nagai_megumi

ねこじたうどん🚬🍑✨
@nekojitanX

わかる。グラデーションは2色で明度だけのグラデーションにするとグレーが入って濁るから、グラデーション作るときは同系色と見せかけて何色も間に挟んで作ってる。

21:57 – 2020年08月14日

グレート=ジャスティス=クウガ🦹‍♀️
@himitsu_qooga

ママケ
@_m_a_m_a_k_e_

洗練されるとは、まさにこのひと手間✨

気付かないとくすんだ印象になりますね
(紙だとなおさら)

21:53 – 2020年08月14日

もみじ
@momiji8201

抹本ハヂメ
@matsudi

このやり方、良くやってたなぁ〜

21:43 – 2020年08月14日

すゑひろ ゆうき
@uribo_jp

これは万歩計のアプリ作ったときにけんさんに言われてすんごい勉強になりました🖋爽やかさが違った

21:23 – 2020年08月14日

スナメリちゃん
@sunameri_chan

あ〜、たまになんとなく収まり良い気がしてやってたやつ、ちゃんと理由があったんだと目からウロコ落ちまくってる。

21:20 – 2020年08月14日

恐怖。@7月7日はポニーテールの日
@kyouhu_

壊れた穀潰し
@59224

14
@araixiv

fuqunaga
@fuqunaga

二色間のグラデ中間の彩度が低くなる問題。一般化すると「RGBでなくHSVで補間する」みたいな感じで行けそうな気がする

20:56 – 2020年08月14日

裕-しもん沼&火曜は夜あそび警報-
@hiro4s217

あーこれ勉強になる。前から、やたらグラデーションの真ん中がぼやけるからどうにかならないかなーって思ってたから凄く助かる知識…!ありがたい(*´∀`*)

20:51 – 2020年08月14日

メイ層
@a2272325

うにしゅ
@jeVATeCcG81P7cL

studio9/写真のことが全部わかる本 発売中!
@photostudio9

うぃ
@3_ikeno

これ、条件付き書式だと普通テクよね?

20:27 – 2020年08月14日

kinaco🛫進化するWebデザイナー
@kinaco0202

グラデーションイマイチうまく出来ない人だったので…!

20:22 – 2020年08月14日

有馬 夢乃
@ArimaYumeno_0w0

色挟むだけで全然違う!綺麗!!😳

20:16 – 2020年08月14日

Taka Tachibana
@taka_tachibana

オクイ
@comeonOkui

僕もグラデーション
多用するのでとても有益!!

19:55 – 2020年08月14日

しみ
@shimi023

DAIKING@ガジェットYouTuber
@DaikiUehara3

サムネのデザインに使おw。グラデーションは奥が深い。。

19:37 – 2020年08月14日

小平 義則
@kohira_innocord

かんろ✨aicocco
@kanrame

中間色って大事!この間グラデーション作るのに色々試行錯誤してたから、とてもよく分かる!中間色によって色の印象ガラッと変わってくるよね☺️✨

19:33 – 2020年08月14日

Sui🐤管理栄養士
@Suiku_

とてもわかりやすい!!
仕事でコラム作ってるのでデザインも勉強中〜

19:33 – 2020年08月14日

晶紀@7
@SmallPaddy1

古の便箋の鮮やかさはこれだったのか!Σ(・ω・ノ)ノ

19:32 – 2020年08月14日