interact 2019でセッションしてきました

1. Designer’s
Design Talk
- Azure / Windows Development ２人のMVPの場合 -
#msinteract19 #LT01 @nori790822 / @mitsuba_yu

2. • デザインの基礎 > のりじ
• そもそもデザインって。
• 色、形、意味、目的
• ロゴデザインと、そのプロセス。 > 蜜葉
• tanzanite : App
• HoloMagicians : Community
• パネルディスカッション
Agenda
• silkyfeel : Web

3. ロ
ゴ
デ
ザ
イ
ン
と
、
そ
の
プ
ロ
セ
ス
と
。
蜜葉 優
#msinteract19 #LT01

4. • H.N. :蜜葉 優 [@mitsuba yu]
• Microsoft MVP for Windows Development
• Designer / Developer / Photographer
• 基本的な仕事は UWP, WPF
• Keynoteの表紙はいつも自分で撮影
• HoloMagicians 名誉会長???
• de:codeでKipmanに認められたのがハイライト
• http://c-mitsuba.hatenablog.com
profile

5. • 小学校の授業でPCを触り、中学で自腹購入
• Webが楽しくて、HTMLを独学で学ぶ
• 情報処理科高校でFlash Gimp Inkscapeを学ぶ
• 文科省ICTスクールでムサビの先生から3Dを学ぶ
• 大学入学後、WPF/EをスクールOB同士で学んだ後、Silverlightの
勉強会を運営
• 京都の株式会社ソフトディバイスでデザイン基礎を学びながら、
Webプログラマーをする。インタフェースデザインの走りの会社
• 卒業後諸々あって、フリーランス silkyfeel と ホロラボに所属
Career

6. あとはFluentとか…

7. デザインがなにで構成されてるか

8. デザイナーがどう考えて
作ってるか

9. 大きなプロセス

10. AppDev

11. LogoDesign
色形
名前
らしさ
雰囲気
調査
コンセプト
ストーリー
思考
試行

12. LogoDesign
色形
名前
らしさ
雰囲気
調査
コンセプト
ストーリー
引
き
出
し
適
用
J
表
現
知
識
量P
ロゴ
できた
思考
試行

13. ロゴ

14. for Windows, Surface, Office
All about Guide

18. • 日頃デザインする上で、Adobeだけじゃ手の届かないことがある
• 今回はインストールされてるフォントを、任意の文字列に当てて
見え方を確認したい
• こういうデザインツールを作ることは、今後もありそう
• シリーズ化したい
• 変更しやすいけど、統一性のあるロゴにしよう
• 例えば。。。
tanzanite

23. • 法人登記したときに作った社名とロゴ
• インタフェースデザインとプロトタイピングをウリにした
• 使いやすいインタフェースを、滑らかな絹に見立てた
• ロゴは、白背景でも黒背景でもベタ塗りでも使いやすく
• フォントをメインにして、極力シンプル（ロゴタイプ）
• アクセントカラーを１つ決めた。（コーポレートカラー）
• 品良く、柔らかく ＝ 細めの書体で、曲線美のある
silkyfeel

24. twitter : mitsuba_yu
facebook : mitsubayu
blog : http://c-mitsuba.hatenablog.com
Microsoft MVP for Windows Development
interaction designer and developer
designer | chief executive officer
UI Prototyping and Development Studio
Osaka, Japan | http://silkyfeel.jp
UI Design, Prorotyping, Development, Seminor
XAML, C#, WPF, Universal Windows Apps
Windows Mixed Reality, HoloLens, Xamarin.Forms
Arduino, Processing, Web, JavaScript, NodeJS
http://silkyfeel.jp/

27. • 世界最速レイヤーでHoloLensを手に入れた
• 日本中回ってデモをして、HoloLensのコミュニティを作った
• HoloLensをDeveloperだけのものにしたくなかった
Developer / Designer / Creator 集団と表記してる
• いわゆるJ[hoge]UGにしたくなかった
HoloMagicians

28. • ありふれすぎ。
• JAZUG = じゃずゆーじー = じゃず = キャラ立ち、
”じゃず”の語感もいい
• JXUG = じぇいざぐ = ざまりんのざ
• これをHoloLensにすると…
J[hoge]UG

29. JHUG

30. ハグってなんやねん

31. “ほ”ろれんず で、
”は”ぐ って、、、

32. 絶対に嫌

33. • HoloLensに似た製品が、過去ほとんどなかった
• ほとんどの人間が体験したことない感覚
• 日本中回って、使った人の誰もが、えっ？おお！？やばい！！！
• まるで魔法にあったみたいな反応
• 自分たちが魔法使いみたいになる
• 自分たちの作ったアプリを、まるで魔法のように思わせたいし、
魔法のように思えるほど高品質なコンテンツを作りたい
• 十分に発達した科学技術は、魔法と見分けがつかない。
HoloMagicians

35. 「Hello HoloMagicians!」

36. まとめ

37. じゃあ最初から
こういうのができてたのか

38. デザインはセンスなのか

39. そうじゃない

40. デザインスキル
=
知識量・観察力・再現力

41. 知識量
＝
良い設計を知らなければ
良い設計はできない

42. 知識量
＝
デザインの原則を知らなければ
まともなデザインはできない

43. 観察力
＝
コードを読み解く力をつける

44. コードを読み解く力
＝
コードの書き方を把握して
何がしたいのか理解する

45. 観察力
＝
デザインを読み解く力をつける

46. デザインを読み解く力
＝
世の中にある全てのデザインに
どういう原則でできてるか

47. 再現力
＝
写経・同じものがつくれるか

48. デザインスキル
=
知識量・観察力・再現力

49. デザイン/エンジニア スキル
=
知識量・観察力・再現力

50. 知識量・観察力・再現力
＝
説明責任能力

51. 説明責任能力
＝
作った人が作ったものを
説明できる/人
-> 信用に値するか評価できる

52. • どういう作業をしているのか実例
• https://www.slideshare.net/mitsuba/ss-60047052
実務として