これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

[nishik-t]

テキストのところ、サンプルは英語だけど日本語だとこうは行かないんだよなあ・・・。海外サイトの単純な日本語翻訳版をみるとよく分かる。

[nice_and_easy]

AdSense自動広告のせいなんだろうけど、文中の意味的なまとまりを無視して無秩序にでっかい広告が入ってきてめっちゃ読みにくい

[satotaka99]

最後のリストは納得いかないなぁ…

[I_L_S]

なお日本語では… ホワイトスペースと画面のアクセントは重要。文書があるなら読みやすさも。アニメーション多用してるサイト見るとFlash全盛期に何を学んだ…え、Flash知らない！？

[fishma]

ダメ出しされてる方のデザインがそんなに悪いか？一秒でも早く表示されるとか、気色悪いアニメーションなしにすぐ操作に反応してくれるとか、そっちの方がよほど重要だな、俺にとっては

[vndn]

色空間の話は深淵。手間でないならHSBでなくせめてCIE L*a*b*を使うべきだと思う。計算が面倒で動的生成には向かないだろうが / リストのビュレットはDon’t派だなあ。ネストに対応できるし、平文とリストの断絶は当然。

[hoshinasia]

なるほど…（このサイト、フォントサイズ小さいな…）

[hiduki001]

一番目のテキストはあんまり同意できない。ボディテキストのカラー薄くて可読性低い。最近増えてて悲しい

[style_blue]

何か迷った時はこれを見たらいいのかもしれない。

[simomm]

　カラーの調整の仕方

[excite88]

少しのテクニックの積み重ねで大きく素人と違うサイトが出来てしまうのがプロの方。わかっていても素人にはなかなか超えられない壁です

[bluegoat511545]

背景に文字を乗せると同化してしまうので、透明タブから"乗算"を使用してます。そのおかげで同化せず文字が見やすくなります☆

[teracy_junk]

『カラーを理解するためには数学が大切』

[taky1973]

色の項が今までにない説明でとても参考になった

[tadashi_shimizu]

beforeとafterでまとめられている為、分かりやすい。そして、実際にafterの例を見ることで、効果を知ることができるのが良い。

[Wender]

なるほど。本文のところをグレーに。字の大きさだけでなく明度彩度を使って序列

[tuhan321]

フォントのサイズ、ウェイト、カラーを組み合わせる

[boko716]

メモ

[stilo]

参考になった。

[ippatsu2009]

資料づくりにも。

[sulgraphica]

色彩 計算

[qq3]

いいー、参考にするぞ

[hiroomi]

”「コントラストとは = サイズ+ウェイト+カラー」”

[tzk2106]

多少意見の合わないところもあるけど良い記事。それはそうと、前にも書いたけど、ここまで踏み込んだデザイン仕様を提案してくる制作会社ってどこにあるの？ほんと教えて。

[isano]

日本語になるとまた難しいんやろな〜

[kyokosohonne]

勉強になる…！

[Nyoho]

割と良かった

[sbyamedeo]

配色のところとか、具体的で分かりやすいので参考にしたい。

[ttkazuma]

"3. カラーを理解するためには数学が大切" "良いコントラストを作るために彩度と明度を反比例に調整" これは使える

[luonggfonka]

こういうのあるんですね。

[nuttville8]

“これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ”