美しいUIを作るために デザイナーが意識している ちょっとした考え方

Transcript

1. 美 しい U I を作 る た め に デ ザ イナ ー が 意 識 して い る ちょっと し た 考 え 方 な んで 少 し だ け ず れて る の ・ ・ ・ ？ 原 佑 一
2. ゆーいち｜デザイナー yuichi_hara7 原 佑一 Y U I C H I H A R A #UIデザイン #ブランディング #ミニクーパー #LeicaQ
3. ゆーいち｜デザイナー yuichi_hara7 意図があるかもしれないけど、 ここのマージンちょっとだけ違うな・・・ 揃えたいな・・・
4. ゆーいち｜デザイナー yuichi_hara7 デザイナーを代表して 謝罪しようと思います
5. 1 上下のマージンがちがう 2 色が微妙に違う 3 数字じゃなくて重心でデザインしてる
6. 1 上下のマージンがちがう 2 色が微妙に違う 3 数字じゃなくて重心でデザインしてる
7. 1 上下のマージンがちがう ゆーいち｜デザイナー yuichi_hara7 Amebaブログ 20周年サイト
8. 1 上下のマージンがちがう ゆーいち｜デザイナー yuichi_hara7 Amebaブログ 20周年サイト なんでちょっとだけ 違うねん・・・ 317px 295px 317px 295px E
9. 1 上下のマージンがちがう ゆーいち｜デザイナー yuichi_hara7 Amebaブログ 20周年サイト 調整前 調整後
10. 1 上下のマージンがちがう ゆーいち｜デザイナー yuichi_hara7 上方距離過大の錯視 上下中央に配置すると 下がって見える 数値での中央 視覚的な中央 上が少し 大きく見える
11. 1 上下のマージンがちがう ゆーいち｜デザイナー yuichi_hara7 活用事例 出展：Goodpatch グッドパッチ｜デザインの力を証明する. UIにも必要な錯視への考慮、デザイナーが行う視覚調整, https://goodpatch.com/blog/visual-adjustiment. 出展：タイポグラフィーと錯視調整の話 | 東京工業大学デジタル創作同好会traP. タイポグラフィーと錯視調整の話, https://trap.jp/post/1396/.
12. 1 上下のマージンがちがう 2 色が微妙に違う 3 数字じゃなくて重心でデザインしてる
13. 2 色が微妙に違う ゆーいち｜デザイナー yuichi_hara7 Ameba オンラインレッスン ホーム オンラインレッスン詳細 オンラインレッスン オンラインレッスン詳細 テーマ整理でブログも美人に♡テーマタイ トルもプレゼント！ 本日開催 5月29日 (水) 19:30-21:00 ¥ 1,000(税込) このレッスンを購入する ビジネスプランなら、すべてのオンライ ンレッスンが見放題！ 無料でのオンラインレッスン参加のほかにも、たくさ んの特典をご利用いただけます。 全てのオンラインレッスンが無料 ブログの見た目をカスタマイズ
14. 2 色が微妙に違う ゆーいち｜デザイナー yuichi_hara7 本日開催 5月29日 (水) 19:30-21:00
15. 2 色が微妙に違う ゆーいち｜デザイナー yuichi_hara7 本日開催 5月29日 (水) 19:30-21:00 #237B31 #298737 なんでちょっとだけ 違うねん・・・ E
16. 2 色が微妙に違う ゆーいち｜デザイナー yuichi_hara7 色の面積効果 面積によって 見え方が変わる 面積が大きい方が明るい色はより明るく 暗い色はより暗く見える ※ちなみに背景とテキストの色を変えるのは 　アクセシビリティの観点もあります
17. 1 上下のマージンがちがう 2 色が微妙に違う 3 数字じゃなくて重心でデザインしてる
18. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 左に寄って 見えますか？？
19. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 193px 193px 数値的には 中央です
20. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 数値での中央 視覚的な中央
21. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 左側の方が 重い
22. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 Ameba ブランドサイト わ た し の ふ か わ り ょ う タ レン ト い ってくる 場 所 。 か えってくる 場 所 。 今 年 、 芸 歴 3 0 年 を 迎 える タ レン ト の ふ か わ り ょ う さ ん 。 テ レ ビ ・ ラ ジ オ の ほ か 、 D J 、 執 筆 とそ の 活 動 は 多 岐 に わ た り 「 頭 の 中 で 常 に い ろ ん な ア プ リ が 起 動 して い る か の よ う 」 な 状 態 だ と い う 。 そ ん な 多 忙 な 生 活 の 中 で、 毎 日 の よ う に 訪 れて い る 「 f e t e c a f e （ フ ェ テ カ フ ェ ） 」 は 、 心 休 ま る 場
23. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 Ameba ブランドサイト わ た し の ふ か わ り ょ う タ レン ト い ってくる 場 所 。 か えってくる 場 所 。 今 年 、 芸 歴 3 0 年 を 迎 える タ レン ト の ふ か わ り ょ う さ ん 。 テ レ ビ ・ ラ ジ オ の ほ か 、 D J 、 執 筆 とそ の 活 動 は 多 岐 に わ た り 「 頭 の 中 で 常 に い ろ ん な ア プ リ が 起 動 して い る か の よ う 」 な 状 態 だ と い う 。 そ ん な 多 忙 な 生 活 の 中 で、 毎 日 の よ う に 訪 れて い る 「 f e t e c a f e （ フ ェ テ カ フ ェ ） 」 は 、 心 休 ま る 場 なんでマージンちょっとだけ 違うねん・・・ E
24. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 Ameba ブランドサイト わ た し の ふ か わ り ょ う タ レン ト い ってくる 場 所 。 か えってくる 場 所 。 今 年 、 芸 歴 3 0 年 を 迎 える タ レン ト の ふ か わ り ょ う さ ん 。 テ レ ビ ・ ラ ジ オ の ほ か 、 D J 、 執 筆 とそ の 活 動 は 多 岐 に わ た り 「 頭 の 中 で 常 に い ろ ん な ア プ リ が 起 動 して い る か の よ う 」 な 状 態 だ と い う 。 そ ん な 多 忙 な 生 活 の 中 で、 毎 日 の よ う に 訪 れ て い る 「 f e t e c a f e （ フ ェ テ カ フ ェ ） 」 は 、 心 休 ま る 場 所 。 テ イク ア ウ ト で 利 用 し た 際 に ラ ン チ 写真より 文字を敷き詰めたほうが 重心が外になる 密度が 高い 密度が 低い
25. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 Ameba ブランドサイト わ た し の ふ か わ り ょ う タ レン ト い ってくる 場 所 。 か えってくる 場 所 。 今 年 、 芸 歴 3 0 年 を 迎 える タ レン ト の ふ か わ り ょ う さ ん 。 テ レ ビ ・ ラ ジ オ の ほ か 、 D J 、 執 筆 とそ の 活 動 は 多 岐 に わ た り 「 頭 の 中 で 常 に い ろ ん な ア プ リ が 起 動 して い る か の よ う 」 な 状 態 だ と い う 。 そ ん な 多 忙 な 生 活 の 中 で、 毎 日 の よ う に 訪 れて い る 「 f e t e c a f e （ フ ェ テ カ フ ェ ） 」 は 、 心 休 ま る 場
26. 3 数字じゃなくて重心でデザインしてる ゆーいち｜デザイナー yuichi_hara7 活用事例 出展：Medium: Read and write stories.. 11 Optical Illusions Found in Visual Design11 Optical Illusions Found in Visual Design, https://blog.prototypr.io/11-optical-illusions-found-in-visual-design-295e7ae211b9.
27. ゆーいち｜デザイナー yuichi_hara7 ちょっとだけ 寄り添い合えたら幸いです
28. ゆーいち｜デザイナー yuichi_hara7 l タイポグラフィーと錯視調整の話 | 東京工業大学デジタル創作同好会traP. タイポグラフィーと錯視調整の 話, https://trap.jp/post/1396/— l Goodpatch グッドパッチ｜デザインの力を証明する. UIにも必要な錯視への考慮、デザイナーが行う視覚 調整, https://goodpatch.com/blog/visual-adjustiment— l Medium: Read and write stories.. 11 Optical Illusions Found in Visual Design11 Optical Illusions Found in Visual Design, https://blog.prototypr.io/11-optical- illusions-found-in-visual-design-295e7ae211b9— l chot Inc. デザイナーユニット. Webデザインで意識したい3つの錯視効果, https://note.com/ chot_designer/n/n3128ae2086a7 参考
29. ゆーいち｜デザイナー yuichi_hara7