サトヤ仙台#5でしゃべってきた

1. 蜜葉流 デザインプロセスの基礎
−サトヤくじらが生まれるまで−
蜜葉 優

2. • H.N. :蜜葉 優 [@mitsuba_tan]
• UX Designer / Interaction Developer
• Keynoteの表紙はいつも自分で撮影
• 今回は京都アートクラフト展のクジラ
• 最近のお仕事はWPFとUWP
• Microsoft MVP for Windows Development
• http://c-mitsuba.hatenablog.com
profile

4. 「ちょっとロゴ作れよ！」

5. 「あっ、ハイ」

6. できあがったものがこちら

9. 「ちょっと喋れよ！」

10. 「あっ、ハイ」

11. • ■サトヤくじらがうまれるまでの紆余曲折
• ■手法と考え方
• ■制作プロセス
• ■他のロゴ
• ■まとめ
agenda

12. サトヤクジラがうまれるまで

13. ぼんぷろ「サトヤのロゴつくって！」
みつば「いいで！」
オーダー

14. み「サトヤってなんなん」
ぼ「サティアナデラの
サトヤやで」
ヒアリング

15. ヒアリング
みつば.o0
(つかえない(ーー； )

16. ヒアリング
み「どんな勉強会にするん」
ぼ「Microsoft系の開発をメインにしたい、
クライアントでもアジュールでも
なんでもおっけー
初心者も取り入れたいー」

17. ヒアリング
み「仙台以外でもやる？」
ぼ「ゆくゆくは、、
でもとりあえず仙台がメインですねー。」

18. ヒアリング
み「ほかになんか気に入ってるアイコン
とかある？」
ぼ「うーん、いまいちぱっと
思いつかないです。。」

19. ヒアリング
みつば.o0
(つかえない(ーー； )

20. ヒアリング
み「ふむふむ、テーマカラーとかある？」
ぼ「やっぱりVSカラーの紫ですかねー」

21. ヒアリング
まとめ：紫主体で、仙台っぽくて
ちょっと技術もほしい

22. • 仙台に行ったことない状態でオーダーを受け
たので、
• まずは「仙台とは」を調べる。
調査

23. • 伊達政宗、宮城峡ういすきー、牛タン、う
に、かき、温泉、万華鏡美術館、杜の都、日
本酒、ずんだもち、笹かまぼこ、萩の月、
くじらもなか、地形
• 仙台 + [グルメ、観光、おみやげ]などなど
仙台らしいもの、仙台じゃないと手に入らな
い物を集めていく。
調査

24. • Aiにプリミティブな画像を並べていく。
• まる、さんかく、しかく、かどまるさんかく、
かどまるしかく、星、五角形、六角形ぐら
い。
• 丸め度合いをかえたり、線を引っ張ったりい
ろいろあそぶ
制作

26. • 調査で出した項目から、イラスト
にしてわかりやすそうなものをピッ
クアップする。
制作

27. • 例えば、仙台のめっちゃおいしい
ラーメン -> イラスト化 ->
制作

28. • 例えば、仙台のめっちゃおいしい
ラーメン -> イラスト化 ->
どこにでもあるラーメン -> ボツ
制作

29. • 牛タン -> イラスト化 ->
制作

30. • 牛タン -> イラスト化 ->
なんか茶色い四角いやつ -> ボツ
制作

31. • 萩の月 -> イラスト化 ->
制作

32. • 萩の月 -> イラスト化 ->
なんか黄色い丸いのん
-> ボツ
制作

33. • ずんだ餅 -> イラスト化 ->
制作

34. • ずんだ餅 -> イラスト化 ->
なんか緑のまるいのん -> ボツ
制作

35. • 伊達政宗 -> イラスト化 ->
制作

36. • 伊達政宗 -> イラスト化 ->
いまいちうまくかけない ->
制作

37. • 伊達政宗 -> イラスト化 ->
いまいちうまくかけない ->
でも三日月はつかえそう ->
候補に加える
制作

38. • くじらもなか -> イラスト化
制作

39. • くじらもなか -> イラスト化
-> クジラ -> キャラ立ちしそう->
なんかつかえそう
制作

40. • くじらもなか -> イラスト化
-> クジラ -> キャラ立ちしそう->
なんかつかえそう
制作

41. • 時々他のロゴとかみてみる
• さんぽする
• おふろはいる
制作

42. ここで一旦 中まとめ

45. VS

46. VS
いまここ

49. サ ト
ヤ
勉強会

50. サトヤ勉強会

51. サ ト
ヤ
勉強会
サトヤ勉強会
#とは

52. サ ト
ヤ
勉強会
サトヤ勉強会
仙台の武将「伊達政宗」から
三日月のモチーフのロゴを作りました！

53. お、おう・・・

54. たしかに三日月->伊達政宗->仙台は
わかりやすい
でもこれだけだと
勉強会のロゴとして説明不十分

55. 三日月は図形として
プリミティブな形にちかい
図形として完成してて、
図を変更すると三日月じゃなくなる
(モチーフを追加することはできるけど)
サトヤ勉強会

56. サトヤ勉強会

57. なんか気に入らない
コレジャナイ感

58. なにがいいたいかっていうと

59. 仙台でやるMicrosoft系技術の
勉強会っていう意味付けが弱い

60. 納得しない。腑に落ちない。

61. VS

62. くじらロゴを作る前に
ちょっと脱線して

63. ロゴを作るときに
よくつかう
手法と考え方

64. 見立て

65. • 見立て（みたて）とは、
• 見て、選び定めること[1]。
• 選定、鑑定[1]
• 診断[1]
• なぞらえること。
• （芸術の技法）対象を、他のものになぞらえて表現すること[1]。
• 丸谷才一は山崎正和との対談『半日の客 一夜の友』は「日本人の見立
て好き」を論じている。文化人類学者・川田順造は見立ては「対象を
別の物になぞらえ、実在しないものをあるように思い描く」といい、
日本文化の奥行きを深めた。
見立て

66. •意味を見出して代替する
見立て

67. 色

68. 情熱的

69. 落ち着いた

70. イタリア

71. イタリア

73. Visual Studio

74. 色１つにも意味がある

75. 人は色から何かを
連想したり
意味付けしたり
関連付けたりしてる

76. なんでも良かった色に、
意味を持って他の色に代替する

77. VS

84. そろそろクジラって
言い張れるように
なってきた？

85. ここからサトヤの
思いに合わせて
見立てていく

86. ここからサトヤの思いに合わせて
見立てていく

87. ここからサトヤの思いに合わせて
見立てていく

88. くじらもなか -> 仙台は弱い。
もう少し仙台感だしたい
とはいえ、
これ以上モチーフ入れると
ごちゃごちゃしそう

89. • 伊達政宗、宮城峡ういすきー、牛タン、う
に、かき、温泉、万華鏡美術館、杜の都、日
本酒、ずんだもち、笹かまぼこ、萩の月、
くじらもなか、地形
• 仙台 + [グルメ、観光、おみやげ]などなど
仙台らしいもの、仙台じゃないと手に入らな
い物を集めていく。
調査

90. 宮城の特徴はリアス式海岸かな？
三陸産の牡蠣はうまいっていうし。
うにもおいしいし！
地図をトレース
してみた

91. で、仙台のとこにピンを立てて
目の代わりにしよう。
ちなみにオレンジは
なんパターンか出して、
ぼんぷろせんせーが
決めたはず

92. いい感じにまとまったので、
最後に文字を入れる

93. これまでの見立てから、
ロゴの生まれをまとめると、、、

95. 他のロゴ

97. - All about guide for Surface, Office, Windows -
for Windows, Surface, Office
All about Guide

98. 98
in starry night

99. まとめ

100. まとめ
• 今回はデザインの技術やセンスを必要としな
い、見立てを使った、プリミティブな図形か
らロゴを作成するプロセスについて
お話しました。
• 見立て = 意味を見出して代替する
• 連想ゲームみたいなもの

101. まとめ
• 色の意味や組み合わせ方は
本での知識やWebサービスで学べます。
• Adobe Kularとか
Colorホイールの使い方を学ぶといいかも
• Aiの使い方は、ちょっと練習が必要かも。
• でもベクターツールが使えるとアプリ開発
が捗る。

102. まとめ
• 前回の「UXは投げ捨てろ」に引き続いて、
制作したデザインを説明できるようになりま
しょう。
• 意味のあるデザインをしましょう。
• 意味のあるデザイン = 説明して納得してもら
えるように、デザインに意味をつけながら
制作する癖をつけましょう。

103. one more secret thing

104. み「サトヤってなんなん」
ぼ「サティアナデラのサトヤやで」
み.o0(つかえない(ーー； )
ヒアリング

105. み「ほかになんか気に入ってるアイコンとかある？」
ぼ「うーん、いまいちぱっと思いつかないです。。」
み.o0(つかえない(ーー； )
• 意味のあるデザイン = 説明して納得してもらえるように、
デザインに意味をつけてながら制作する癖をつけましょう。
• そのために日頃どんなデザインに魅力を感じるか自覚して、
話せるようにしましょう。

106. アプリもライブラリも勉強会も
ロゴもデザインも、名前で決まる
と言っても過言ではない
ちなみにその次は色。
名前と色はオーナーに絶対に決めてもらう。
ていうかそれが決めれないオーナーなら、
さっさと意思決定の座から降りるべき（

107. まんまがダメとは言わないけど、もうちょっと
ロゴとかデザインのことも考えて
名前考えましょう
トータルデザインのためのポイント