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

ぼっけもんデザイナーへの道 / 　Hidetaro7 HTML5 Conference 2015 鹿児島

Hidetaro7HTML5 Conference 2015 in 鹿児島

まずは、おめでとうございます！

http://hayatoproject.com/

http://hayatoproject.com/


100種類以上のサカナ達をスマホで飼える、新感覚・位置ゲーム+知育図鑑系スマホアプリ「サカナタッチ」

http://www.sakanatouch.com/

http://www.sakanatouch.com/


本当に目が悪い人のためのメガネ試着シミュレーター「MEGANATOR（メガネーター）」

http://meganator.tuqulore.com/

http://meganator.tuqulore.com/


1. やさしさへの配慮

2. アプリケーションの本質と向き合い方

3. IoT、Webにつながるモノづくり

Hidetaro7HTML5 Conference 2015 in 鹿児島

Index…


ちょっとした気づかいがユーザーからの親近感につながるのでは？

やさしさへの配慮



情報を視覚化する



「今」を見える化する


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 治療終了


クリーニング


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 治療終了


クリーニング


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

治療履歴


今、どんな状況で使われているのか？緊急性などを考慮し、その人の身になって

情報を整理していこう



フラットとは「対等性」ではないだろうか？


製品の特徴

クリックで拡大

軽量スーツケース7600シリーズ

送料・お届け・返品・交換について

製品仕様

ó

ó ó ó

これ、いいのかしら…

フラットデザインを単なる外観と思うと何かと間違える


【CHRISTIAN PEAU（クリスチャンポー）】2Way カウレザーバッグ : http://www.lamina-‐market.jp/SHOP/BD-‐001M.html

バッグという商品を売る、そのためにするべきこととは？

http://www.lamina-market.jp/SHOP/BD-001M.html


フラットな関係性をユーザーと築く、それを「フラットデザイン」と考えるべきでは？


デザイナーの強い味方（武器）？グラフィックアプリケーション

アプリケーションの本質と付き合い方


これ、どう書く？


本来、アプリケーションはユーザーにスキルを要求しない

悪いが… （ビギナーに向けた仕様変更くらいで）

ベテランユーザーが四の五の言うべきではない


2000年現在


(digidesign ProTools / DAW)

数百万～数千万円 10数万円

2000年現在


https://www.dirigent.jp/product/brand/bitwig/bitwig-‐studio.html

https://www.dirigent.jp/product/brand/bitwig/bitwig-studio.html


https://github.com/bitwig

https://github.com/bitwig


3. IoT、Webにつながるモノづくり僕らにとってのWebデザインとは？


https://tessel.io/

https://tessel.io/


デザイン、奥深い


猫に破壊される

縦長のエサやり機はダメかも？作ってみないと気づかないことがある


リベンジ


https://mlkcca.com/

簡単につくってみる

https://mlkcca.com/


http://blog.mlkcca.com/iot/milkcocoa-‐for-‐tessel/

http://blog.mlkcca.com/iot/milkcocoa-for-tessel/


ċƽ ƽ

index.html cat.js

milkcocoaというサービスをつかってリアルタイム通信を簡単に試してみる


/* 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”という文字を送るだけ


/* 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秒後に元にもどす


画面の外にも目を向けよう人がいる、モノがある（動物もいる）


BlueTooth Low Energy（上記2,000円弱）写真：@ymoriさん提供


http://www.meishodo.com/parts/a-‐1.html

http://www.meishodo.com/parts/a-1.html


今日のまとめ

•やさしさへの配慮はサービスの長続きのために重要 •ユーザーにおかれた緊急性、状況を考察する •フラットデザインを外観から考えない •ハードウェアとWebが連携する、これもデザインのひとつ •何かとつくりやすく、挑戦しやすい時代だということ


秋葉秀樹（あきば・ひでき）株式会社ツクロア（tuqulore）代表取締役・デザイナー

筑波大学非常勤講師、HTML5 experts.jp DTP・グラフィックデザイン・ Webフロントエンド・Flash・3DCG・サービスデザイン

Hidetaro7

Thank you!

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

Design

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