【アイコンを200こ描いた振り返り!】アイコンから知るデザインのヒント

11,247 views

Published on

2013.09.21 [大阪] プログラマー向けデザイン勉強会 #PmD01 で使用したスライドです。
Twitterなどで使っているアイコンをたくさん描いた経験則から得た見せ方のポイントから、デザインについて考えてみました。
※本編でことば足らずだった部分があったので、少しの修正と、追加を少し入れています。

[大阪] プログラマー向けデザイン勉強会
http://connpass.com/event/3086/

---
[合わせて読みたい]

KSSで作るパターンライブラリ by machida
https://speakerdeck.com/machida/kssdezuo-rupatanraiburari

ズルいデザインテクニック2013 + セミフラット version by ken_c_lo / TAEKO AKATSUKA
https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version

ビジュアルデザインまでのデザインワーク by yokotak0527
http://www.slideshare.net/YokotaKenji/ss-26460108

Published in: Design
2 Comments
46 Likes
Statistics
Notes
No Downloads
Views
Total views
11,247
On SlideShare
0
From Embeds
0
Number of Embeds
3,571
Actions
Shares
0
Downloads
0
Comments
2
Likes
46
Embeds 0
No embeds

No notes for slide

【アイコンを200こ描いた振り返り!】アイコンから知るデザインのヒント

  1. 1. 職業 : ゆるい自営業主婦 業務 : HTMLコーダー パッケージ CMS実装 デザイン少々&イラスト 装備 : MBP 15” Bamboo Touch 赤ジャージ iPhone 5s アドビ: イラレ こんにちは あわゆきです (´ω`U)こんにちは あわゆきです (´ω`U)
  2. 2. せっかくだから 得意分野を切り口に デザイン的なことをお話しますね 今日はデザイン勉強会ということなので今日はデザイン勉強会ということなので
  3. 3. アワユキコン アーカイブス http://awayuki.net/con/ アワユキコン アーカイブス http://awayuki.net/con/ Twitterのじぶん用アイコン 200こ描いたった! 「アイコン」を 描き散らかして 早4年…「アイコン」を 描き散らかして 早4年…「アイコン」を 描き散らかして 早4年…
  4. 4. 自分の分身となるビジュアル 流れるタイムラインの中で 自分のことを瞬時に判別してもらう記号 アイコン(ていうか、アバター)アイコン(ていうか、アバター)アイコン(ていうか、アバター)
  5. 5. ん、俺こんな人フォローしてたっけ…? アイコン変えたらフォロワー減った… (´ω`;U) (´д`) Twitterとかで、こんなこと、ありませんか?Twitterとかで、こんなこと、ありませんか?Twitterとかで、こんなこと、ありませんか? アイコンの変化で意外と混乱させられる /させる
  6. 6. ずっと子猫のキャラクターだと思っていた あと、こんなことも、ありませんか?あと、こんなことも、ありませんか?あと、こんなことも、ありませんか?
  7. 7. ずっと子猫のキャラクターだと思っていたけど、 拡大して見てみたらカコイイお獅子だった あと、こんなことも、ありませんか?あと、こんなことも、ありませんか?あと、こんなことも、ありませんか?
  8. 8. 表示されるのはたかが数十px四方のくせに…! 「誰?」の判断はかなりアイコン頼り 脳みそによる「何?」の判断が意外と適当 適当なくせに意外と変化に敏感 一瞬で、目で見て脳みそが判断する一瞬で、目で見て脳みそが判断する一瞬で、目で見て脳みそが判断する
  9. 9. 違和感なく受け入れてもらえる 小さなサイズでも、きちんと分かる ちょっと楽しんでもらえる いくつかのコツをピックアップしてみました たかが数十ピクセルを諦めない…!たかが数十ピクセルを諦めない…!たかが数十ピクセルを諦めない…!
  10. 10. 1. 違和感を感じさせないコツ 2. 小さなサイズで、見やすくするコツ 3. 変化を出して、たのしくするコツ そのままコツアジェンダですそのままコツアジェンダですそのままコツアジェンダです
  11. 11. 1. 違和感を感じさせないコツ1. 違和感を感じさせないコツ1. 違和感を感じさせないコツ
  12. 12. 同じキャラがベース、というだけではなく… 基本の骨格を保つこと基本の骨格を保つこと基本の骨格を保つこと
  13. 13. 輪郭の色、基本の太さを揃える 基本の骨格を保つこと基本の骨格を保つこと基本の骨格を保つこと
  14. 14. コアになる顔の形状、配置はほぼ完全に同じ 基本の骨格を保つこと基本の骨格を保つこと基本の骨格を保つこと
  15. 15. 完全に同じ色(面積比も意識)すると、 意外と大丈夫 w 色を揃えること色を揃えること色を揃えること
  16. 16. 基本の骨格を保つこと カラーを揃えること 両方、またはどちらか一方を押さえると 統一された感じが出るのです。 1.違和感を感じさせないコツ:まとめ1.違和感を感じさせないコツ:まとめ1.違和感を感じさせないコツ:まとめ
  17. 17. 2.小さなサイズで、見やすくするコツ2.小さなサイズで、見やすくするコツ2.小さなサイズで、見やすくするコツ
  18. 18. 多少誇張するぐらいの気分で、盛るところは盛る多少誇張するぐらいの気分で、盛るところは盛る多少誇張するぐらいの気分で、盛るところは盛る 少数精鋭で強調する少数精鋭で強調する少数精鋭で強調する
  19. 19. 細かい線/パーツを省く細かい線/パーツを省く細かい線/パーツを省く 強調する裏で、省く強調する裏で、省く強調する裏で、省く
  20. 20. 空間的なメリハリがないと、全体像が捉えにくい ⇒強い輪郭線の使いどころを留める  色の強弱も考える 空間的なメリハリがないと、全体像が捉えにくい ⇒強い輪郭線の使いどころを留める  色の強弱も考える 空間的なメリハリがないと、全体像が捉えにくい ⇒強い輪郭線の使いどころを留める  色の強弱も考える 塊を意識する/余白を持つ塊を意識する/余白を持つ塊を意識する/余白を持つ
  21. 21. 少数精鋭で強調する 強調する裏で、省く 塊を意識する/余白を持つ 少数精鋭で強調する 強調する裏で、省く 塊を意識する/余白を持つ 少数精鋭で強調する 強調する裏で、省く 塊を意識する/余白を持つ アイコンは小さな空間なので いっそう強調と省略はだいじです。 2.小さなサイズで、見やすくするコツ2.小さなサイズで、見やすくするコツ2.小さなサイズで、見やすくするコツ
  22. 22. 3.変化を出して、たのしくするコツ3.変化を出して、たのしくするコツ3.変化を出して、たのしくするコツ
  23. 23. なんかいつもと違うと思ったら…!なんかいつもと違うと思ったら…!なんかいつもと違うと思ったら…! 部分的に変えてみる部分的に変えてみる部分的に変えてみる
  24. 24. 次いつ変わるんだろ…?次いつ変わるんだろ…?次いつ変わるんだろ…? 文脈を持たせる文脈を持たせる文脈を持たせる
  25. 25. 文脈を持たせすぎた…文脈を持たせすぎた…文脈を持たせすぎた…
  26. 26. もはや目口しか残っていないけど意外と分かるもはや目口しか残っていないけど意外と分かるもはや目口しか残っていないけど意外と分かる ときどき、思い切りすぎるときどき、思い切りすぎるときどき、思い切りすぎる
  27. 27. 基本形から、部分的に変えてみる 部分的な変化を重ねて文脈を作る ときどきやり過ぎる 基本形から、部分的に変えてみる 部分的な変化を重ねて文脈を作る ときどきやり過ぎる 基本形から、部分的に変えてみる 部分的な変化を重ねて文脈を作る ときどきやり過ぎる 最初の基本をふまえて 型を安定させることができたら、 あとはけっこう遊べます。 3.変化を出して、たのしくするコツ3.変化を出して、たのしくするコツ3.変化を出して、たのしくするコツ
  28. 28. といったところでといったところでといったところで
  29. 29. アイコンのお話でしたが、 Webサイトの制作のときの視点を踏まえた ポイントをピックアップしました。 アイコンのお話でしたが、 Webサイトの制作のときの視点を踏まえた ポイントをピックアップしました。 以上、現場からあわゆきがお伝えしました以上、現場からあわゆきがお伝えしました以上、現場からあわゆきがお伝えしました
  30. 30. 今回お話した見た目の Tipsは アイコン以外の場面でも意外と当てはまるので、 ときどき思い出して、お役立てください。 今回お話した見た目の Tipsは アイコン以外の場面でも意外と当てはまるので、 ときどき思い出して、お役立てください。 で、ここからどう発展するっていうんだよで、ここからどう発展するっていうんだよで、ここからどう発展するっていうんだよ
  31. 31. 基本の骨格/色を合わせる基本の骨格/色を合わせる基本の骨格/色を合わせる Webサイトやアプリの UIの 基本レイアウトや色味を揃えて、 ストレスなくスムーズな操作/使用感を与える Webサイトやアプリの UIの 基本レイアウトや色味を揃えて、 ストレスなくスムーズな操作/使用感を与える Webサイトやアプリの UIの 基本レイアウトや色味を揃えて、 ストレスなくスムーズな操作/使用感を与える 例えばこういうこと例えばこういうこと例えばこういうこと
  32. 32. 強調する/省く強調する/省く強調する/省く より強く伝えたい情報をきちんと強調する あれもこれもと主張せず、 ポイントを絞って強調したいものを際立たせる より強く伝えたい情報をきちんと強調する あれもこれもと主張せず、 ポイントを絞って強調したいものを際立たせる より強く伝えたい情報をきちんと強調する あれもこれもと主張せず、 ポイントを絞って強調したいものを際立たせる 例えばこういうこと例えばこういうこと例えばこういうこと
  33. 33. 情報のグルーピングが ぱっと見て分かるようにして、 より見やすく/読みやすくする 情報のグルーピングが ぱっと見て分かるようにして、 より見やすく/読みやすくする 情報のグルーピングが ぱっと見て分かるようにして、 より見やすく/読みやすくする 塊/余白を意識する塊/余白を意識する塊/余白を意識する 例えばこういうこと例えばこういうこと例えばこういうこと
  34. 34. ビジュアルよりは情報の設計に関わるかも。 コンテンツの構成や配置を整えて、 最終目的地まで誘導する ビジュアルよりは情報の設計に関わるかも。 コンテンツの構成や配置を整えて、 最終目的地まで誘導する ビジュアルよりは情報の設計に関わるかも。 コンテンツの構成や配置を整えて、 最終目的地まで誘導する 文脈を作る文脈を作る文脈を作る 例えばこういうこと例えばこういうこと例えばこういうこと
  35. 35. ちょっとした楽しさを提供して、 よりファンになってもらう 見ること/使うこと自体を楽しんでもらう ちょっとした楽しさを提供して、 よりファンになってもらう 見ること/使うこと自体を楽しんでもらう ちょっとした楽しさを提供して、 よりファンになってもらう 見ること/使うこと自体を楽しんでもらう 変化を出してたのしくする変化を出してたのしくする変化を出してたのしくする 例えばこういうこと例えばこういうこと例えばこういうこと
  36. 36. ノンデザイナーズ・デザインブック いわずと知れたロングセラー 基本の基本はゆるぎない、 ということでもありますね。 いわずと知れたロングセラー 基本の基本はゆるぎない、 ということでもありますね。 もうすこし、きちんと軽く学びたい方にはもうすこし、きちんと軽く学びたい方にはもうすこし、きちんと軽く学びたい方には
  37. 37. 「デザインに壁を感じる」 近づいて見ると思ったよりは低い壁かも 実感するとまた変わってきます 「デザインに壁を感じる」 近づいて見ると思ったよりは低い壁かも 実感するとまた変わってきます ほんとは、ちょっとやってみるのもおすすめるほんとは、ちょっとやってみるのもおすすめるほんとは、ちょっとやってみるのもおすすめる
  38. 38. へー、 イラレもくもくもくようびっていう ゆるくてちょうどよさそうな 集いがあるのかー 3,4人くらいでも集まるならやるよ! ホトショのいじり方でも多少は聞くよ! さわりたくなったらさわりたくなったらさわりたくなったら
  39. 39. ありがとうございました!ありがとうございました! 今日はここまで今日はここまで今日はここまで

×