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

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

まずは、おめでとうございます！
http://hayatoproject.com/

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

本当に目が悪い人のためのメガネ試着シミュレーター
「MEGANATOR（メガネーター）」
http://meganator.tuqulore.com/

1. やさしさへの配慮
2. アプリケーションの本質と向き合い方
3. IoT、Webにつながるモノづくり
Hidetaro7
HTML5 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
バッグという商品を売る、そのためにするべきこととは？

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

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

これ、どう書く？

本来、アプリケーションは
ユーザーにスキルを要求しない
悪いが…
（ビギナーに向けた仕様変更くらいで）
ベテランユーザーが四の五の言うべきではない

2000年
現在

(digidesign
ProTools
/
DAW)
数百万∼数千万円 10数万円
2000年現在

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

https://github.com/bitwig

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

https://tessel.io/

デザイン、奥深い

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

リベンジ

https://mlkcca.com/
簡単につくってみる

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

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

秋葉秀樹（あきば・ひでき）
株式会社ツクロア（tuqulore）
代表取締役・デザイナー
筑波大学非常勤講師、HTML5 experts.jp
DTP・グラフィックデザイン・
Webフロントエンド・Flash・3DCG・
サービスデザイン
Hidetaro7
Thank you!

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

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

Ähnlich wie ぼっけもんデザイナーへの道 (20)

Mehr von Hideki Akiba

Mehr von Hideki Akiba (11)

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