Follow

逆引きツールについてデザイン有識者の諸兄に意見いただきたいのだが 

ボタンのUI変えてるとこなんだけど、この画面レイアウトでONの時に見やすい、わかりやすい色ってなんやろ?カラーコードで候補貰えると超助かる。
そらさん色彩センスゼロなのでおしえておにいちゃん!

· · Web · 4 · 2 · 2

逆引きツールについてデザイン有識者の諸兄に意見いただきたいのだが 

@kousaka_mil
ワイも色彩感覚0なので機械に聞いてみた
colorbaseで検索したら出てくるっぽい

@suikou_RO 情報あざます。こんなんあるんやねぇメモメモ。試しに組み込むとこんなカンジですね。

@kousaka_mil うーん、なんか違うね???
白抜き文字だと明るい色は文字見づらくなるかと思って暗くしたけどだいぶボテっとするなぁ

逆引きツールについてデザイン有識者の諸兄に意見いただきたいのだが 

@kousaka_mil

ゲームもそうですがUIって説明なしで分かって・使って貰わないといけないの大変ですよね

今の水色のボタンはそのまま活かして

・offの方を表面の色をもう少し暗め
・文字の色も濃い目

にするとパッと見で一目でわかると思います。言い換えると

「offやdisableの方のトーンを落とす・RGBの色味を出さない」

「onやenableは色味を明るくする・RGBの色味があって良い」

の2点を踏襲されていれば大抵の人に理解してもらえるんじゃないかと思います。やっつけですがこんな感じ↓は如何でしょうか

offボタンの表面:(今は
colorate.azurewebsites.net/ja/

offボタンの文字:(今は
colorate.azurewebsites.net/ja/

狩り中に適当に出した案なのでお気を使っていただかなくて(没でもなんでも)大丈夫です☆

@rostodon あざます!
ボタン暗めにした方がいいというのは同感なので弄ってみました。左がaaaaaa(ccccccから雑に2段階オフ)、右が8c8c8cにしたやつですね
ボタンのOffの文字をいじるというのは盲点だったのでちょっとCSS追加してみます。

@rostodon OFF文字をグレー目にするとこんなカンジですね。コレはアリと思います。
ON水色まんまだと明るすぎるので明度落としてかつ境界がはっきりする程度のラインを探るカンジかなぁ…

@kousaka_mil 文字のトーンを下げたことで、よりオン・オフを直感的に把握しやすくなったと思います。

心理として「トーン落とし気味・RGBの色味がない」ものがオン・オフのどちらかを尋ねると殆どの人がオフであると直感するのでこの考え方は基本として踏襲しておいて損はないと思います。
稀にオフにも色味を付けたUIや絵を描く人がいますが、あれは不幸をばらまくUIです(笑
オフ状態のボタン:緑色
オン状態のボタン:赤色

逆引きツールについてデザイン有識者の諸兄に意見いただきたいのだが 

@kousaka_mil 文字とのコントラスト比を確保すると
思い切った青系統の色にするのも一案です。

@marginata ご意見あざます!
試しに組み込んでみました。コントラスト的に統一感はありますね。ベースが暗めなのもあって境界が埋もれて見えるのが若干気になる気はしますね。
候補として比較検討させてもらいますね。

@kousaka_mil @marginata 有識者でもなんでもないですが、この配色とても眼にやさしい....(ドライアイ)
いつも逆引きツールお世話になってます!楽しみです。

@signio @marginata ご意見あざます!
これの明度を多少上げる方向で調整してみますかねぇ…

@kousaka_mil @signio なるほど、明るめの色を希望されるのであれば、下のテーブルの色を参考にして00a8fcとかでしょうか!

@marginata @kousaka_mil 最近のwebのことはよく知らない年寄りなんですが、どんな環境からでも同じように見える (今もそうなのかな)ようにするならセーフカラー?
colordic.org/s
そらさんの配色は男前系なので楽しみですねー。

@marginata @signio あざます!それで作ってみたのがワリといいカンジだったのでちょっと候補絞ってアンケで聞いてみました。

逆引きツールについてデザイン有識者の諸兄に意見いただきたいのだが 

@kousaka_mil 若干彩度を落す&濃くするとか?
背景の黒と同化しそうになるならもうパキッとブラックの100%とか暗めの赤系統とかありかと

それか全くレイアウト変わっちゃいますけど、「拡張期のON」のところにある□枠にチェックマークがつくようにするとか…?
プログラムのことなにもわからないのでおかしなこと言ってたらすみません(´・ω・)

@momotaka 回答ありがとうございます!
明るくする方向で考えてたけど、この色合いだとボタンの色はっきりわかるのに境界も滲んでなくていいきはしますね。ちょっと色抽出して組みこんで試してみます。ブラック100%も試してみようφ(.. )メモメモ
おっきいチェックマークはどっかで見た気もするのでできるか試してみます。(割と無理くり組み込んでるのでむずかしそうですが…)

Sign in to participate in the conversation
RO丼 - RO Mastodon

ラグナロクオンラインユーザ向けのMastodonインスタンス。