配色はセンスじゃない、UIデザインで色をかんたんにキメるメソッド｜Taiki IKEDA｜note

今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオワ、オワリです。さっそくこのPolipoliベッチュー、タタキケンサキエディションに色をつけていきます。 1. メインカラーを選ぼうまずはじめにメインとなるカラーを決めます。Polipoliのテーマカラーはピンクなのでブラウザの検索欄に「pink flat ui design」と打ち込みます。イメージに近い色が出てきたらスポイトで吸い取りましょう。著作権にはくれぐれも注意してください責任は負いません。 Polipoliに関しては最初からメインカラー

[kabakiyo]

なぜその色を選んだのか説明できないのならかんたんとは言えないのでは？

[ans42]

最適なもの選ぶ必要があるので配色はやっぱりセンスだと言える。

[i5s4y]

普通に色彩検定のテキスト読んだ方が早いと思う。1日で理解できるし、こんな風にランダムに選ぶ必要もない。ランダムの中から選んでる時点で色に意味を持たせないチープなWebサイトになっちゃう。その配色の意味は?

[takhino]

いや配色は、ダイアード、トライアド、スプリットコンプリメンタリーといった「色相環でn°ずらした色を使うといい」って色彩理論がちゃんとあるから…。あと割合はベース7:メイン2:アクセント1が基本。

[PrivateIntMain]

見たことあると思ったら見たことあったけど再投稿した？

[superpuma]

つ https://color.adobe.com/ja/create/color-wheel/

[ot2sy39]

まあ機械的に決められるなら色彩デザイナーなんて要らないわけだが、基本理論はあって、それを知りながらあえて逸脱して評価されるのがセンスだわな。

[tienoti]

言っている通りだがしかし、ジャッジポイントで最適解を示すメゾットを持ちだせる蓄積経験を、その場の短時間で発揮できることをセンスだと思っている。情報量と場数を踏めばセンスは磨ける、とはいえね。

[sirocco]

あぁ・・・、UIデザインと言えば、スマートフォンなんですよね。

[mutinomuti]

主のセンスで決めたルールでやってやんよ(´･_･`)だからセンスでは？センスでないなら統計か科学ぐらい駆使しないと

[syukit]

つかう！

[Nyoho]

手順をわかりやすくしまくるの

[rd050201]

わかりやすい

[cartman0]

プロダクトを抽象化してそこのイメージからか，ターゲット層が好む色でprimaryとsecondaryを決めておけばいいんだけど，まあこれがムズイよね

[takeox]

ポチポチ押すのと何回も試す、って時点で簡単ではない

[securecat]

色をスポイトする瞬間に、著作権にはくれぐれも気をつけてください責任は取りません、の意味がわからない。スポイトするの違法なの？どうやって気をつける？？

[otihateten3510]

あれ、前読んだぞ？

[gxg]

センスいい！って褒められるより、センスいいよオレ。ってなる方が気持ちいい。デザインの醍醐味は物語があるかないかだし。あと客に突っ込まれてからの巻き返し。そこでの「センスいいね」は気持ちいい。

[Hamukoro]

結局こういうtipsみたいな教師データを頭に蓄えてセンス磨いてくしかない気がす

[sd-craft]

まあセンスは知識や経験で磨く物だから…説明出来るようにならないとそれはデザインではないよね

[ksaito54]

こういうのを自然とできる人とそうでない人がいるように思います。間違いなく後者なのでありがたい。

[shozzy]

超絶役立つ。／ブコメでは案外不評だった。

[aienstein]

この手の「簡単に出来る系デザイン記事」で頻出する「センス」という言葉は憎悪や嘲笑や畏怖の対象になりがちで、言葉の解釈も曖昧なケースが多い。「よくわからないもの」だからそうなる。わからないけどいらないと

[hiduki001]

自分のやり方を書いてるだけで一般化できてないやつだった。普通に色理論勉強したほうが早い

[buhoho]

タイトルあれだけど読んでみたらいい記事だった

[aceraceae]

こういうデザインはアートではないので一定のセオリーどおりにやることが重要だよね。

[rickt]

理論のある人なら、https://color.adobe.com/ja/create/color-wheel/　見たほうが得たい色を見れると思う。あとこういう可視化ツールがあればセンスなにそれおいしいの？な顧客と色味を決められる利点はある

[bunchon]

“Polipoli”

[benridane111]

はいテストに出マース。ダークアルファ%：87(テキスト、タイトル),54(サブテキスト),26(押せない),12(ボーダー)、白アルファ%：100,70,30,12,　altoアルファ%: 20(ボディカラー),10(セクション背景)

[lucifsaygo]

“今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でも

[katsura8]

センス＝感性じゃない、センス＝知識だからね

[side_tana]

“Coolors.co”便利だな...

[miho-satoh-satomi]

UI 配色

[underd]

あとでよむ

[qq3]

タイトルセンスで叩かれててワロタ

[punkgame]

他のコメントでもあるけど、色彩検定とか何かまず色について軽くでも勉強したら良いと思う。あとはそれを利用するターゲットが好む色とか、サービスに合う色とかって考えていくと使える色は案外少ない。

[at5u]

ちゃんとやり直した方がいいかもしれんな自分。

[ultimate-ez]

“コメントの吹き出しの背景と、スクリーンの背景が若干濃い気がしますね。”⇦センス発動！

[salon_hiyake]

ユーザー層と、それぞれの色がどのくらいの面積を占めるかが、決まらないとやり直しになることも多い