Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ぼっけもんデザイナーへの道

1,608 views

Published on

Published in: Design
  • Be the first to comment

ぼっけもんデザイナーへの道

  1. 1. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 Hidetaro7 HTML5 Conference 2015 in 鹿児島
  2. 2. まずは、おめでとうございます! http://hayatoproject.com/
  3. 3. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 100種類以上のサカナ達をスマホで飼える、 新感覚・位置ゲーム+知育図鑑系スマホアプリ「サカナタッチ」 http://www.sakanatouch.com/
  4. 4. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 本当に目が悪い人のためのメガネ試着シミュレーター 「MEGANATOR(メガネーター)」 http://meganator.tuqulore.com/
  5. 5. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  6. 6. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 1. やさしさへの配慮 2. アプリケーションの本質と向き合い方 3. IoT、Webにつながるモノづくり Hidetaro7 HTML5 Conference 2015 in 鹿児島 Index…
  7. 7. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 ちょっとした気づかいがユーザーからの親近感につながるのでは? やさしさへの配慮
  8. 8. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 やさしさへの配慮 情報を視覚化する
  9. 9. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  10. 10. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  11. 11. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  12. 12. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 やさしさへの配慮 「今」を見える化する
  13. 13. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 B7 金歯差込 B7 仮歯 B3 治療終了 B3 虫歯治療、型取り クリーニング 初回カウンセリング 2014/05/16 17:30 2014/05/09 16:00 2014/03/28 18:30 2014/03/25 18:30 2013/11/15 17:30 2013/11/12 18:30 6 5 4 3 2 1 治療履歴 B7 金歯差込 B7 仮歯 B3 治療終了 B3 虫歯治療、型取り クリーニング 初回カウンセリング 2014/05/16 17:30 2014/05/09 16:00 2014/03/28 18:30 2014/03/25 18:30 2013/11/15 17:30 2013/11/12 18:30 今日| 7 日前| 2 ヶ月前| 2 ヶ月前| 6 ヶ月前| 6 ヶ月前| 6 5 4 3 2 1 治療履歴 B7 金歯差込 B7 仮歯 B3 治療終了 B3 虫歯治療、型取り クリーニング 初回カウンセリング 2014/05/16(金)17:30 2014/05/09(金)16:00 2014/03/28(金)18:30 2014/03/25(火)18:30 2013 /11/15(金)17:30 2013/11/12(火)18:30 今日| 7 日前| 2 ヶ月前| 2 ヶ月前| 6 ヶ月前| 6 ヶ月前| 6 5 4 3 2 1 治療履歴
  14. 14. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 今、どんな状況で使われているのか? 緊急性などを考慮し、その人の身になって 情報を整理していこう
  15. 15. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 やさしさへの配慮 フラットとは「対等性」では ないだろうか?
  16. 16. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  17. 17. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 製品の特徴 クリックで拡大 軽量スーツケース 7600 シリーズ 送料・お届け・返品・交換について 製品仕様 こ れ 、 い い の か し ら … フラットデザインを 単なる外観と思うと 何かと間違える
  18. 18. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 【CHRISTIAN  PEAU(クリスチャンポー)】2Way  カウレザーバッグ  :  http://www.lamina-­‐market.jp/SHOP/BD-­‐001M.html バッグという商品を売る、そのためにするべきこととは?
  19. 19. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 フラットな関係性をユーザーと築く、 それを「フラットデザイン」と考えるべきでは?
  20. 20. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 デザイナーの強い味方(武器)?グラフィックアプリケーション アプリケーションの本質と付き合い方
  21. 21. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 これ、どう書く?
  22. 22. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 本来、アプリケーションは ユーザーにスキルを要求しない 悪いが… (ビギナーに向けた仕様変更くらいで) ベテランユーザーが四の五の言うべきではない
  23. 23. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 2000年 現在
  24. 24. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 (digidesign  ProTools  /  DAW) 数百万∼数千万円 10数万円 2000年 現在
  25. 25. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 https://www.dirigent.jp/product/brand/bitwig/bitwig-­‐studio.html
  26. 26. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 https://github.com/bitwig
  27. 27. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  28. 28. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 3. IoT、Webにつながるモノづくり 僕らにとってのWebデザインとは?
  29. 29. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  30. 30. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  31. 31. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 https://tessel.io/
  32. 32. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  33. 33. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  34. 34. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 デザイン、奥深い
  35. 35. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 猫に破壊される 縦長のエサやり機はダメかも? 作ってみないと気づかないことがある
  36. 36. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 リベンジ
  37. 37. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  38. 38. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 https://mlkcca.com/ 簡単につくってみる
  39. 39. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 http://blog.mlkcca.com/iot/milkcocoa-­‐for-­‐tessel/
  40. 40. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 index.html cat.js milkcocoaというサービスをつかって リアルタイム通信を簡単に試してみる
  41. 41. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 /*  index.html  */   <!DOCTYPE  html>   <html  lang="ja">   <head>      <meta  charset="UTF-­‐8">      <title>Tesselにサーボを回す命令をする</title>      <script  src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>   </head>   <body>      <button  id="servoRange1">servo  1</button>      <script>   //  {your-­‐app-­‐id}の部分は、先ほどと同じものを使います。   var  milkcocoa  =  new  MilkCocoa("{your-­‐app-­‐id}");   var  dataStore  =  milkcocoa.dataStore("tessel");   window.onload  =  function  ()  {      var  btn  =  document.getElementById("servoRange1");      btn.addEventListener("click",  moveServo,  false);      function  moveServo  ()  {          dataStore.push({              content  :  "move"          });      }   }   </script>   </body>   </html>   <button>が押されたら milkcocoaに move という文字を送るだけ
  42. 42. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 /*  cat.js  */   var  tessel  =  require('tessel');   var  MilkCocoa  =  require('milkcocoa-­‐tessel');   var  servolib  =  require('servo-­‐pca9685');   var  servo  =  servolib.use(tessel.port['A']);   var  servoReady  =  false;   //  {your-­‐app-­‐id}の部分は、Milkcocoaに(無料)登録して   アプリを作成した際に生成されるアプリ固有の文字列です。   var  milkcocoa  =  new  MilkCocoa("{your-­‐app-­‐id}",  {useSSL:false});   var  chatDataStore  =  milkcocoa.dataStore("tessel");   chatDataStore.on("push",  function(e)  {  //通知がきたら…      if(servoReady)  {         servo.move(1,  1);  //  サーボの位置を1(全開)まで回す         setTimeout(function  ()  {                  servo.move(1,  0);  //  2秒後、サーボの位置をゼロに戻す          },2000)      }   });   servo.on('ready',  function  ()  {  //  サーボが準備できたら…      servoReady  =  true;      servo.configure(1,  0.05,  0.12,  function  ()  {          servo.move(1,  0);  //  サーボの位置をゼロに戻す     })   }); milkcocoaからメッセージが来たら サーボを回転させ、2秒後に元にもどす
  43. 43. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  44. 44. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 画面の外にも目を向けよう 人がいる、モノがある(動物もいる)
  45. 45. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  46. 46. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  47. 47. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  48. 48. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 BlueTooth Low Energy(上記2,000円弱) 写真:@ymoriさん提供
  49. 49. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 http://www.meishodo.com/parts/a-­‐1.html
  50. 50. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  51. 51. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  52. 52. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島
  53. 53. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 今日のまとめ • やさしさへの配慮はサービスの長続きのために重要 • ユーザーにおかれた緊急性、状況を考察する • フラットデザインを外観から考えない • ハードウェアとWebが連携する、これもデザインのひとつ • 何かとつくりやすく、挑戦しやすい時代だということ
  54. 54. ぼっけもんデザイナーへの道 /  Hidetaro7 HTML5 Conference 2015 鹿児島 秋葉秀樹(あきば・ひでき) 株式会社ツクロア(tuqulore) 代表取締役・デザイナー 筑波大学非常勤講師、HTML5 experts.jp DTP・グラフィックデザイン・ Webフロントエンド・Flash・3DCG・ サービスデザイン Hidetaro7 Thank you!

×