DESIGNED BY: TUZZY＆FUKUZY
CATEGOLY
目覚まし時計
手順 1：アイデア出し、デザイン検討
ハンドベルをモチーフにデザインした
目覚まし時計をプロトタイプ
目覚まし時計をデザイン。
①アラームを鳴らす時刻を表示（７セグ）して、本体を振ってアラー
ム音を設定する。優しく振ると優しい、激しく振ると激しい（加
in
R
速度センサ）アラーム音が設定される。
②縦置きにすると端部が光り（フルカラー LED）、アラームがセッ
トされた状態に。
gR
ing
ハンドベルをモチーフに振る動作にあわせアラーム音が変化する
g Ring Rin
③設定した時刻になるとアラーム音が鳴る。本体を持ち上げる、
または横置きにすると（照度センサ）アラーム音が止まる。
以上の動作を実際に検証するため、HOTMOCK を使ってモック
アップを作成した。
使用キット
レガシー KIT
デシタル KIT
アナログ KIT
T
エクステンション
使用デバイス
7 セグ・加速度センサ・照度センサ・フルカラー LED
外部デバイス
スピーカー
新しい目覚まし時計のアイデアを企画、検討。出てきたアイデアの中から、ハンドベルをモチーフに、
振る動作の強弱で翌朝の自分の起こし方を変える案を採用し、デザインを進める。
プログラム
HOTMOCK Setting・HOTMOCK Builder
ペットボトル・縄跳び・外部スピーカー・スタイロフォーム・
モックアップの材料
スチレンボード・セロテープ
手順 2：モックアップの構想、材料集め
モックアップの中身は、①時刻を表示する７セグ、②振る動作の強弱をとる加速度センサ、③アラームの ON/OFF を
示すフルカラー LED、④アラームを解除するトリガーに照度センサ、⑤アラーム音を出すスピーカー。
外側は、⑥ベルの部分をペットボトル、⑦もち手の部分を縄跳びのグリップを流用して全体を形作る。
DESIGNED BY: TUZZY＆FUKUZY
手順 3：モックアップを製作
手順 5：動作確認、操作感の検証
スタイロフォームやスチレンボードなど加工しやすい材料を用いて、基盤やセンサ類を中に収めていく。
強く振っても耐えれるよう補強もしておく。
動作フローを作成しながら実際に動かして、各センサ類の動作確認を行う。
確認が取れたら、操作感や使用感の検証を行っていく。
検証結果をフィードバックして、アラームの音量や、加速度センサの閾値など細かい調整を加える。
手順 4：動作フローを作成
デザイン的な気づきなども別途メモしておく。
作成のコツ
モックアップの作成：
まずは、身近で手に入れやすく加工しやすい材料を使い、手を動かして形にしてみる。
配線の取り回しなどはトライアンドエラーが多く、何度も開けたり閉めたりするので
仮止めで作業を進め、接着や封入は最後に行うようにする。
評価と反省
動作フローの作成では、閾値の設定など細かい調整に少し手間取ったが、
全体としては短い時間で作成することができた。
身近にある材料をうまく活用でき、イメージした形状に近づけることが出来、
実際の操作感やサイズ感を得ることが出来た。
動作フローの作成：
一気に全体を組み上げてからだと不具合があった際に大きく後退することになるので、
ある程度作業が進むごとに、こまめに動作確認を行うようにする。
HOTMOCK Builder を使用して動作フローを作成。
本体を振る動作の強弱は、加速度センサで取る値を弱・中・強の３段階に分けて設定。
プロトタイプ作成時間
初期画面から大きく３つに分岐するフローを作成する。
・モックアップの作成：約 2 時間
・動作フローの作成：約 2 時間
DESIGNED BY: MATZ
CATEGOLY
TV リモコン
１.TV リモコン操作のアイデア
単純操作を実現するため、リモコンを「振る」
「回す」の２動作のみでのテレビ操作を検討する。
操作の割り当てとして下記２タイプのシミュレーションを行い検証する。
テンキーが無い！
デジタルテレビ用のリモコン！
A リモコンを「振ってチャンネル操作」/ リモコンを「回して EPG 操作」
CH1
手元を見なくても操作可能なリモコン。
EPG
学習不要で単純操作を目指したリモコンのプロトタイピング。
機能それぞれに操作を割り当て
B
リモコンを「振って機能切り替え」/ リモコンを「回して操作」
CH1
EPG
機能切替えと操作とを分ける
使用キット
レガシー KIT デシタル KIT アナログ KIT
使用デバイス
ロータリーエンコーダ、内蔵加速度センサ
外部デバイス
液晶モニタ
エクステンション
２. 振る操作を試してみる（加速度センサ）
Setting で加速度センサの動作を確認。
プログラム
モックアップの材料
HOTMOCK Setting 、HOTMOCK Builder
紙管（アルミホイルの芯）、アルミホイル、テープ
リモコン操作で想定される、左右に振る動作を行い、
数値変化を確認する。
Y 軸の加速度値をトリガーとして利用することにする。
ココの値に注目
Builder で簡単なシミュレーションを実行
TV 映像に見立てた画像（jpg など）を用意する。
シーケンスに並べ、遷移トリガーとして加速度センサを
設定し、シミュレーションを実行する。
HOTMOCK Setting で確認した値に設定
DESIGNED BY: MATZ
３. 回す操作を試してみる（ロータリーエンコーダ）
５. 加速度センサとロータリーエンコーダを組み合わせたシミュレーションを作成し実行
Setting でエンコーダの動作を確認。
CH 切替え操作、EPG カーソル操作の
シーケンスを構築し、シミュレーション
を実行する。
エンコーダを操作し、変化量を確認
「変化量を使用」を選択
トリガーを変更することで、
動作と機能の割当てを変更した
複数の操作シミュレーションを
比較的容易に試すことが可能。
まず A タイプを作成 / 保存し、
A タイプのトリガー部分を編集して
B タイプを作成 / 保存した。
値を確認
Builder で簡単なシミュレーションを実行
チャンネル切替えのシーケンス
EPG のシーケンス
TV 映像に見立てた画像（jpg など）を用意し、
シーケンスに並べる。
遷移トリガーとしてロータリエンコーダを設定。
A タイプ
・リモコンを振ってチャンネル操作
・リモコンを回して EPG 操作
（機能それぞれに操作を割り当てる）
B タイプ
・リモコンを振って機能切替え
・リモコンを回して操作
（機能切替えと操作とを分ける）
回転方向 [+]/[-] 両方をトリガーとして設定
[+] 値で次の画像に進み、
[-] 値で前の画像に戻る（ジャンプ）
４. モックアップ制作
作成のコツ
紙管（アルミホイルの芯）を利用して
モックアップを作成。
中身の固定にはアルミホイルも使用。
加速度センサ内蔵のコアユニットは
入らないため、外部に付けた状態で
検証する。
・動画ファイル (.flv) は一回再生後停止するため、ループ再生には「タイマー」を使用。
動画再生時間を後に同じシーンへジャンプさせる。
・２種類の操作で２機能に絞ってシミュレーションを行ったが、さらに機能を増やした
シミュレーション拡張も可能。
・加速度センサ利用で、
「リモコンを持上げると TV 電源オン」や、LED 点灯による
フィードバックなどのシミュレーションも簡単に実現できる。
評価と反省点
・チャンネル数３、EPG 選択数 3 と実際の TV 機能より少ない規模のシミュレーションだが
操作 / 機能は十分体験可能。
・機能が増えた場合には、B タイプの方が操作し易いと思われる。
DESIGNED BY: GEN＆IKUTA
CATEGOLY
ダンシングシューズ
＜手順 1＞ ダンスとシューズの動きを想定する
「Processing」と電装シューズで
ダンスする？をプロトタイプ
1.
2.
3.
いつも履いているスニーカを電装スニーカに変身させると
どんなことができるのか？ ホットモックのセンサーを駆使してプロジェクションされた
映像と組み合わせることで電装スニーカの可能性をプロトタ
イピングしてみた。
またオープンソースソフトウェア「Processing」と連動さ
せることでプログラムの知識で自由度の高い表現を試みよう
1. シューズの織りネームを押すと電源 ON LED 点灯
と思う。
2. 距離センサーで両足が近接すると ACTION ！
3. 圧力センサーで足を踏み込むと ACTION !
＜手順 2＞ ダンスシューズにセンサを配置し動作を確認する
使用キット
レガシー KIT デシタル KIT アナログ KIT
T
使用デバイス
圧力センサ ×2 距離センサ ×1 シール LED×1 シールスイッチ ×1
外部デバイス
LED プロジェクタ
プログラム
モックアップの材料
エクステンション
1.
オープンソースソフトウェア「Processing」
延長コード 3 芯 ×6M インソールのあるランニングシューズ
1. 距離センサを側面、圧力センサをインソールのヒールに配置してみる
2. HOTMOCKsetting でインソールのヒールに圧力センサ位置を確認
＜手順 3＞
Processing サンプルコードと HOTMOCKsetting で動作を確認
1.
2.
HOTMOCKSetting をサーバとして Processing を稼働させる
サンプルコード配布 http://www.hotmock.com/tech 1. HOTMOCK を PC 繋ぎ HOTMOCKsetting と Processing サンプルコードをつなげる
2. シュミレーションモードにしてプログラムが正常に動くか確認
3.Processing プログラムを走らせ、HOTMOCK スイッチを押下し接続の有無を確認
DESIGNED BY: GEN＆IKUTA
＜手順 6＞
細かい動きを HOTMOCKSetting で微調整する ＜手順 4＞
Processing のプログラムで生成されたビジュアルをコントロール
プログラムで生成された色の違う二本のラインアートダンシング・ジオメトリー（仮命名、略：ダンジオ）を
感圧・距離センサとつなぎ挙動を制御する
圧力センサの感度を調整する際、HOTMOCKSetting でセンサの感度を変更し反応を微調整する
●2 本のラインの長さ：距離センサ
// 距離センサによる長さのコントロール
void controlLength(int num) {
1.
lHeight = (num*10); }
2.
●2 本のラインの動きの速さ：圧力センサ
1. コネクタ位置の感圧センサをクリック
// 圧力センサによる左足でスピードをコントロール
2. 圧力センサの感度の幅を変えることで
void controlSpeedLeft(int num) {
反応の速度を変えた
lSpeedLeft = num; }
// 圧力センサによる右足でスピードをコントロール
void controlSpeedRight(int num) {
左右の動きを別々に生成
lSpeedRight = num; }
1.
＜手順 5＞
シューズのセンサと Processing で作成された映像を繋ぐ
/**
* シリアルイベント インプット 監視
**/
void serialEvent_input() {
boolean bflag = true;
Line = "";
// 信号を受信し続ける
while (bflag) {
2.
// タクトスイッチの信号が「押された /PRESS」であ
る（信号：1）
if(removeDollar[0].equals("1")) {
// プログラムが起動していないなら
if(gflag == 0) {
// プログラムを起動する
gflag = 1;
// 信号を文字列に変換
if (myClient.available() > 0) {
Signal = myClient.read();
// LED ライトを点灯
myClient.write("OUTPUT,"+conn5+",1&");
println("on");
} else { // プログラムが起動しているなら
Line += char(Signal);
} else {
bflag = false;
}
}
// 受信した信号を元に動作しているディバイスを判定
する
if (Line.length() != 0) {
String lineArr[] = split(Line, ',');
println(lineArr[0]);
String removeDollar[] = split(lineArr[1], '&');
// 信号内にタクトスイッチの ID があるか
if (lineArr[0].equals(conn4)) {
＜手順 7＞
Let’s Dancing
曲は Processing 内に MP.3 を直接読み込んだ。80 年代ユーロビートを取り込み華麗にステップ
// プログラムを停止
gflag = 0;
1. HOTMOCK のセンサケーブルを延長し動きやすい場所を確保しプロジェクターで
// 線の動きを停止する
controlSpeedLeft(0);
controlSpeedRight(0);
2. プロジェクションを自分に向けて映像と同化する
ダンジオを再生。ステップを踏んで映像を動かす
// LED ライトを消灯
myClient.write("OUTPUT,"+conn5+",0&");
println("off");
}
}
抜粋
ここで失敗！プログラムを走らせるとアナログ信号の処理が重すぎて
センサー 3 種を処理しきれずダウン！
対処項目
1. 距離センサを取りやめて両足の圧力センサのみの反応とした
2. 送られてくる信号の速度を変更 (100ms→200ms に変更）
作成のコツ
シューズに関して：センサーが薄く小さいので踏みつけ圧力位置の調整はこまめに行い反応の良い場所を選ん
で貼り付ける。左右にセンサを入れることでダンスの動きがおもしろくなる。
プログラムに関して：リッチな画像を操作するより、シンプルで大胆な動きをするプログラムがおもしろい。
HOTMOCKSetting でセンサの反応感度を確かめながらプログラムを書いていくことがオススメ。
評価と反省点
このプロトタイピングでは汎用的なプログラム使用したので反応や処理速度を読みきれない部分があり結果的
にセンサを減らしてしまった。初期段階で処理の負荷を確認しながら進めるべきだった。しかし人間の動作
（フィジカル）とプログラムアートの繋がりを比較的簡単に表現する事ができた。
踏みつけの力などの感度を簡単に変えられるのでリハビリなど個人の症状に合わせたシューズの開発などに
応用が可能かと考えられる。
DESIGNED BY: TAKU
CATEGOLY
洗濯機
子どもでも大人顔負けに
洗濯機の機能を使いこなせる
操作パネルの検証
子どもがやりやすい家庭のお手伝いのひとつには「洗濯」がある。し
かし、実際に子どもが洗濯機を操作すると、洗剤の量や入れる場所が
わからない、汚れのひどいものとそうでないものとで、すすぎの回数
を分けることができないなど、大人のように機能を使いこなすことが
できなかった。そこで、タイトルコンセプトのような対話型操作パネ
ルを作成してみた。
使用キット
レガシー KIT デシタル KIT
アナログ KIT
使用デバイス
シールスイッチ , ロータリボリューム
外部デバイス
USB 液晶ディスプレイ
エクステンション
タスクを決めると書き出しやすい
手順１
「体操着を 30 分で洗濯してね」というタスクを設定し、現状の洗濯機の操作方法を
小学生向けに書き出した
工夫点
・洗濯に必要な設定を対話方式で指定できる
プログラム
モックアップの材料
・洗濯物の種類から洗い方 ( 手洗いなど ) を設定できる
・きれいにしたいレベルですすぎ回数などを設定できる
スチレンボード
・洗剤の入れる場所などを図などでわかりやすくする
手順２
今回は、洗濯方法の設定をきれいにしたいレベルで設定できることが、有効であるか
を確認することをメインに操作画面をつくってみた
洗濯物の種類を洗濯機に教えて
きれいにしたいレベルを洗濯機
あげることで、水量や洗濯方法
に教えてあげることで、洗い時
( 手洗いなど ) を設定できるよう
間、すすぎ回数、脱水時間を設
にする
定できるようにする
DESIGNED BY: TAKU
手順７
ボタンの配置に
試行錯誤
もう一度「体操着を 30 分で洗濯してね」とお願いし
て画面を操作してもらったら…
操作の過程がひと目で分かる
Evaluation
・アイコン案はわかりやすい、30 分と書いてあるのは
とてもいいけど、服のきれいさ加減がわかりにくい
・ロータリーが逆にも回るので、回しすぎて最初に戻っ
てきてしまう。なんで４つしかないのに両側に回るの
か（怒）
・これってタッチパネル？
手順３
改善後は洗濯開始までの
所要時間が減少
HOTMOCK Builder と Setting を使って操
手順８
作ボタンで操作画面が遷移するようなデモを
怒られてしまった意見をもとに、改善策を考えてみる
つくって実際に使ってもらえるようにした
今の洗濯機は時間から指定
できないことがわかった
できあがった時に
感動がある
手順４
小学生に「体操着を 30 分で洗濯してね」とお願
いして画面を操作してもらったら…
共感！
新しい気づき
・文字だけだと洗濯時間を選びづらい
選択項目が少ないとき、ぐるぐ 「きれいさ」の見せ方がわかり
・「30 分で洗濯」を選ぶまでに時間がかかっている
るすると選択しづらい
にくい
面だと勘違いされた
→ロータリー選択を回しすぎて
→きれいさをもっと象徴的な見
→スイッチやロータリーと操作
も最左や最右で止まるように機
せ方に変更
画面の連動性の見せ方を再検討
能を変更
→「きれいさ」という文言を再
→タッチパネルっぽくない見せ
→一覧での見せ方を変更
検討 ( 汚れ具合など )
方に変更
手順５
意見をもとに画面を再度つくってみた
意外！
手順６
タッチパネル操作できる操作画
HOTMOCK Builder でデモをつくり直す
デモの更新は最初に作成したデモの画像を
入れ替えるだけで完了！
作成のコツ
考えた改善案を手書きレベルでもよいので簡単に実装して、使ってみることが大切である。実際に
動くものを使った上で、改善案を確かめてみると、その良し悪しの判断がつけやすい。また、次の
改善案のアイデアを発想することにもつながる。
きれいレベルが文字だけだとわかりにくい
評価と反省点
→きれいレベルをイラスト化
多様で複雑な洗濯機の設定方法を、きれいにしたいレベルという簡単な設定にまとめることは有効
きれいにしたいレベルと洗濯時間の関係が
わかりづらい
→洗濯に必要な時間を併記
であると考える。しかし、小学生の使用者にも分かりやすい「きれいさ」の文言やイラストの見せ
更新はサクッと
方が課題と考える。
DESIGNED BY: SOW
CATEGOLY
IH クッキングヒーター
＜手順１＞ コンセプト決定。イメージを膨らませる
料理をもっとお手軽に！
はかり付 IH クッキングヒーターを
プロトタイプ
ユーザーが製品を使用している状況をイメージして、
どんな機能があれば目的にあった製品になるかアイディアを出しました。
「重量センサー付き IH クッキングヒーター」というアイディアをプロ
IH
トタイピングして、どんな操作体験が生まれるのか検証しました。IH
次は…
製品自体が鍋をセンシング出来れば「お料理ナビ付き IH」といったクッ
キング用品の知能化も考えられます。
もしかすると、ナビ機能を付けたらかえって操作が難しくなるかもし
IH で重量の変化がわかったら…？
れない。
ナビしてくれる賢い IH コンロに
なるかも !?
手書きでアイディアを出してみよう！
今回はプロトタイプ後に被験者にお願いして実際に操作のログを解析
してみました。
＜手順２＞ 模型を製作。サイズ感や使い勝手を確かめる
サイズ感・使い勝手を確認するためプロトタイプを製作。手早く作る為、加工も楽な
使用キット
レガシー KIT デシタル KIT アナログ KIT
T
エクステンション
使用デバイス
感圧センサ、シールスイッチ、シール LED、ロータリーボリューム
外部デバイス
小型の液晶ディスプレイ
スチレンボードを使用しました。
PowerPoint HOTMOCKSetting HOTMOCKBuilder プログラム
モックアップの材料
HOTMOCKSimulator HOTMOCKEvaluation
スチレンボード スタイロフォーム 鍋 プラ板
液晶ディスプレイ、HOTMOCK を模型に
貼り付けます
手書きの画面イメージとボタンの位置を
確かめながら製作します
＜手順 3＞ PowerPoint で筐体デザイン 今回は他の人にも操作を試してもらう為、イメージしやすいように絵を貼り付けて
見た目を本物っぽく演出しました。
PowerPoint の図形ツールで描いた絵をプリントして
模型に貼り付けました
グラデーションをかけると金属の様な雰囲気が出ます
シールスイッチは薄いので上からプリントを
貼り付けることが出来ます
DESIGNED BY: SOW
＜手順 4＞ 操作フローの設計 ＜手順 6＞ プロトタイプで操作感の検証。HOTMOCK Evaluation で操作ログの評価
フローチャートを作成して操作の流れを設計します。他の画面との繋がり、関係を整理しました。
模型、画面、そして操作のシミュレーションが完成しました。
実際に試してみて目的の操作体験が得られるか検証します。
電源ボタン ON
おまかせレシピ フロー
ソフトキーで選択
「レシピメニュー」
「メインメニュー」
※各ステップで食材投入時に
「レシピナビ」
点火ボタン
「加熱制御」
「重量測定」
※各ステップで加熱調理時に
メニューは画面近くのソフトキーで操作します。
※ロータリーボリュームで火加減制御
＜手順 5＞ PowerPoint で画面デザイン、HOTMOCK Builder でシミュレーション
水を入れていくと画面の重量ゲージが上がっていきます。
作成したフローチャートから画面の絵を用意します。
画面内に必要なボタン、説明が盛り込まれているかを意識して作成しました。
PowerPoint で作成したイメージの抜粋。紙芝居のように１つの画面を１つのスライドで作成しました。
点火スイッチと火力ボリュームは
２つのコンロそれぞれに用意しました。
操作ログから操作に戸惑う部分が
あることが分かりました。
作成のコツ
感圧センサの様なアナログ変化量を測るセンサは、取り付け位置や付ける素材の硬さによってセンシングする値が変わって
しまいます。ユーザー体験に関わる要素なので気持ちの良い操作感が得られるまで改良すると良いです。今回は感圧センサ
の取り付け面を硬いプラ板にして重量の変化をしっかり量れるようにしました。
評価と反省点
予想していたより感圧センサでの重量変化センシングが上手くできました。
一方、視点の移動が少なくて良いと考え、ほとんどの情報を液晶表示にしたのですが、実際には鍋に水を入れる際に鍋と液
PowerPoint で作成後、
各スライドを画像ファイルで書き出します。
HOTMOCK Builder のライブラリ先に
書き出すと作業が楽です。
晶のどちらも見る必要がありました。 改良点として鍋の近くの IH の天板に LED を埋め込み、光で状態を知ら
せる等、他の方法で重量の状態を知らせる方法もあると思います。
DESIGNED BY: MATZ & TOCK
CATEGOLY
ナビ画面付きハンドル
１. 基本アイデアの検討
ハンドルの中に
ナビ表示画面を入れてみたら
どうなる？
ナビ画面表示として以下を検討する。
・ズーム表示
・ズーム表示
・チルト表示
・チルト表示
・オプション表示
・オプション表示
・ハンドル回転による、画面回転表示
・ハンドル回転による、画面回転表示
ハンドルを握った手に近い箇所での操作性や、
ハンドル回転時のナビ画面表示をシミュレーション。
各操作をハンドル内の操作し易い位置を大まかに検討し、
各表示操作に合うデバイスを検討する。
ディスプレイにスマートフォンを活用。
簡易モックアップによる検証から３D モックアップ制作へ。
使用キット
レガシー KIT
デシタル KIT
アナログ KIT
エクステンション
使用デバイス
シールスイッチ、ロータリーエンコーダ、内蔵加速度センサ、感圧センサ
※ハンドルは中古品を購入
外部デバイス
Android スマートフォン
HOTMOCK Setting / HOTMOCK Builder /
プログラム
モックアップの材料
iDisplay（スマートフォンサブディスプレイ化アプリ）
自動車ハンドル、スチレンボード、樹脂（光造形）
Android スマートフォン
PC
USB
HOTMOCK
ナビ画面表示用に Android スマートフォンを使用する。
サブディスプレイ化アプリ「iDisplay」Android 版で
は USB 接続による出力をサポートしているため※
Wi-Fi 環境なくても使用可能。
※2014 年 11 月現在
PC 用「iDisplay」アプリケーション及び、
Android ドライバのインストールが必要です。
２. デバイス動作の確認
各デバイスの動作を Setting で確認する。
ハンドルにホットモックコアユニットを取り付けて
回してみる。
ハンドル回転の検知には、加速度センサの
角度値を使用する。
ココの値に注目
DESIGNED BY: MATZ & TOCK
３. シミュレーションの作成
ナビ操作の基本表示をシミュレーションとして作成する。
・感圧センサによるズーム表示
・エンコーダ操作でチルト表示
・4 方向キーによるオプション表示
・ハンドル回転による、画面回転表示
５. 3D モックアップ制作
簡易モックアップでの検証を元に３D モックを光造形で作成
実際に HOTMOCK を組込みシミュレーションを実行する。
画面回転用に一定角度毎の回転画像を用意
各表示の画像を用意し Builder でシーケンス構築する。
各表示用の画像を用意して配置
サブシーケンスを使用。
サブシーケンスに対してトリガー設定するこ
とでシーン毎にトリガー設定なく表示切替え
可能な状態に
４. 簡易モックアップでシミュレーション実行とデバイス配置の検討
スチレンボードでモックアップを作成し、
シミュレーションを実行。
ディスプレイやボタンの配置を検討する。
全面に面ファスナを貼り付けて、ボタン
配置を変更して試す。
ナビ画面の各動作には静止画で３コマ程度の動きを再現した。
Builder では FLV 形式の動画ファイルも読み込めるので、
動画ファイルを使用することで、よりリアリティのあるリッチな
シミュレーションも作成可能となる。
.FLV
作成のコツ
・簡易モックアップによる検証を行うことで３D モックアップ作成へスムーズに進めることが可能。
・デバイス位置なども検証済なので３D モック作成後に使用変更などの戻りがないので安心できる。
評価と反省
・ハンドル回転動作時のハンドル内 GUI 表示との連動は実体験でないと想像が難しい。
HOTMOCK ではシミュレーション作成が容易なため直ぐに体験することが出来る。
想像と実体験では大きく印象がことなる場合が多いので簡易モックアップでの検証を繰り返し
行うことが望ましいことを実感できた。
・通常のスイッチ類に比べて、ハンドルの回転の角度を試すのに少し苦労した。
DESIGNED BY: de:VISION
電動ドリル
CATEGOLY
＜手順 1＞ 構想！こんな電動ドリル
見えにくい場所に穴を開ける
カメラ付き電動ドリル
外部モニタ
ドリルの先が見えなくて先端を覗きこんで孔が斜めになっちゃた！！
TARGET
だったらドリルの先にカメラを付けちゃおう！ついでに液晶も付けて
リッチなコンテンツを持った電動ドリルをプロトタイピング。
カメラ
穴あけ作業がどう変わるのか？ HOTMOCK×ActionScript を使っ
てありそうでなかったすこし複雑なプロトタイピングを試みます
TARGET に近づくと「水平値」と「回転トルク」が画面表示され正確に適切な穴あけ加工が可能な今までとあま
り形状が変わらず少しだけ機能アップした電動ドリルをイメージする。
外部モニタは取り外しができてドリル先端とターゲットを映し出し TARGET を直視しなくてもモニターを通し
てドリルを使用することができる。またハンドルレバーに感圧のセンサを設置し、使用者の力の入れ具合に合わせ
使用キット
レガシー KIT
使用デバイス
シール LED 感圧センサ シールスイッチ 外部デバイス
USB カメラ スマートフォン（外部モニタとして）
プログラム
モックアップの材料
デシタル KIT
アナログ KIT
エクステンション
トルクが変わる事をイメージした。
＜手順 2＞ プロトタイピングの用意
1.
2.
3.
ActionScript
光造形されたモックアップ
4.
5.
1. 簡単なスケッチで雰囲気をつかむ
2. 近接でも対応可能な USB カメラを購入しサイズを図る 3. 今回はスマートフォンを外部モニタとして使用する
（機種 F05D 外部モニタとして使用するアプリ iDisplay）
4. 寸法を考慮しながら 3D データを作成
5. 出来上がったモデルに必要なセンサ・デバイスを組み込む
プログラム製作 有限会社ホロンディビジョン http://www.hol-on.com/devision/
モデル作成 株式会社トライワーク http://www.trywork.jp/ DESIGNED BY: de:VISION
＜手順 3＞
HOTMOCK Setting と USB カメラを ActionScript で繋ぐ
＜手順 5＞
電動ドリルと TARGET の関係を調整して改良
今回は、HOTMOCK Builder を使わずに Flash で ActionScript プログラムを書いていく。
TARGET を「穴あけ位置のマーク」と「AR マーカー」のデザインに、また、ドリルの先端がカメラに写り込むよ
まずは、サンプルコードを参考に SocketConnector 関連の組み込みとカメラ画像の取得までやってみる。
うにモデルを調整。マーカーの距離と角度と傾きの情報を使って、電動ドリルが接地しているか、垂直になってい
ついでに、毎回 HOTMOCK Setting とつながなくとも反応できるようキーボード割り当てをする。
るかを判断するようにした。
import src.hotmock.socket.SocketConnector;
画面にガイドを表示
穴あけ位置
var power:Boolean = false;
カメラにドリル先端が写り込む
// 電源オンオフ
// ソケット接続
ドリル
socket = new SocketConnector();
socket.addListener(”DI01”, SocketEvent.PRESS, pressHandler);
// スイッチ入力
socket.addListener(”AI01”, SocketEvent.RECEIVE, receiveHandler );
// 感圧センサー
socket.connect(8888,“localhost”);
// 通信開始
カメラ
// カメラ接続
camera = Camera.getCamera();
TARGET
// キーボード
stage.addEventListener(KeyboardEvent.KEY_DOWN, keydownHandler);
function pressHandler(conn, event) // スイッチ入力をキーボードイベントに変換
角度と傾きを示す十字線
var key = KeyboardEvent.KEY_DOWN;
var code = Keyboard.SPACE;
stage.dispatchEvent(new KeyboardEvent(key, true, false, 0, code));
＜手順 6＞
体験してみよう！
function keydownHandler(e) // キーボードイベントの処理の中に HOTMOCK 受信時の動作を書く
if(e.keyCode = Keyboard.SPACE) power = !power;
これで HOTMOCK を繋いでも動くし、繋がなくてもキーボードで動作確認できるようになりました。
＜手順 4＞
TARGET を AR マーカーにする
電動ドリルを HOTMOCK に繋ぎ、 スイッチを押すと電源オン。
マーカー、外部モニタを準備する。 少し慣れれば画面を見ながらでも
穴あけの TARGET を AR マーカーにして、カメラでマーカーを捉えたらドリル回転「OK」
と判断する仕組みで検討。
TARGET に当てられる。
「ＯＫ」になると画面にリングが出る。
ハンドルレバーを握るとリングが回転。
圧力の強弱で回転速度が変わる。
(AR( 拡張現実 ) は「マーカー」と呼ばれる図形を認識して 3D モデル等を表示したりするのに使われる技術。)
今回はマーカー認識のみを利用します。
参考：FLARToolKit http://www.libspark.org/wiki/saqoosha/FLARToolKit
1.
マーカーをデザイン
2.
カメラ + ドライバで簡易に確認
作成のコツ
モデル：握る行為はとても難しいので発泡材で握り具合を確かめながら形を決めていくことを薦めます。トリ
ガーを握ったりボタンを押す行為も出てくるとなると力を入れるバランスが変わってきて画面がブレる事が
あった。実際にモニターに画像を映しながらモデルを作るとモニター設置の場所や手で持った時のバランスな
どがわかり現実に近い形が体験できる。
プログラム：ActionScript が書ける人なら、外部の USB デバイスと HOTMOCK で様々な事ができると思い
ます。キーボードに割り当てるテクのように、自分なりのアプローチを試してみて下さい。
3.
マーカーが認識されたら線で囲う
ドリルの先端や指先がマーカーに被って一部が欠けてカメラに写ると認識できない問題点があるとわかった。
また、ドリルの状態がわからないと画面だけ見て操作するのは難しいようだ。
評価と反省
ハイスペックな PC で作業を行ったのと同時に外部モニタの解像度が高すぎて処理が遅れ体感に合わなくなっ
てしまった。また行為自体も「操作と目視」なので操作感がよりバラバラに感じられた。解決方法としては処
理を早くするためにフレームレートをさげプロトタイプする環境に合わせて作成し直すことにした。
今回は AR マーカーを使用したが、傾きなら HOTMOCK の内蔵加速度センサーでも得られる。外部モニタに
繋いだスマートフォンでタッチ操作を使用するのも面白くなると思います。
DESIGNED BY: TOCK
CATEGOLY
愛玩ロボット
手順 1：アイデアだし
人がロボットと接するときの
体験をプロトタイピング
アイデアスケッチ【図１】をそこそこに
HOTMOCK をいじりながら HOTMOCK 自体
でスケッチをするように進めました。
接するひとが温かい気持ちになったり、おかしくなったりする、いわ
ゆる愛玩ロボットを HOTMOCK で作ってみました。
ひとがロボットへ接するときの感情と動作をロボットが受け、どう反
応を返し、またそれを受けたひとがどう感じるかを見るためのプロト
タイピングです。
【図１】：アイデアスケッチ
ミニ液晶ディスプレイを顔と見立て、ロボット
使用キット
レガシー KIT
デシタル KIT
アナログ KIT
T
エクステンション
の情報（感情）を表示させることにします。
ディスプレイの上半分に手袋をかぶせ【図 2】
、
加速度センサ、ロータリーボリューム（×3）
、シングルスイッチ、
照度センサ、距離センサ、感圧センサ、シールスイッチ大、
使用デバイス
シール LED R、面ファスナ ( オス・メス )
外部デバイス
4.3 インチワイド USB モニタ
可愛らしいウサギ風ロボットを目指します。
【図 2】
：LCD に手袋をかぶせてみる
手順２：ディバイスの設定
HOTMOCKSetting、HOTMOCKBuilder、
プログラム
HOTMOCKSimulator
各種ディバイスやセンサーを目や耳や腕に仕込むことで、そこを入力デバイスと
して機能させます。【図 3】面ファスナーによって簡単に仕込む箇所が変えられる
ので色々な場所で試すことができました。
第一次試作：スタイロフォーム、ボリュームノブ、手袋、など
モックアップの材料
第二次試作：樹脂（光造形）、ボリュームノブ、フェルト、塩ビ板、など
右みみ：
【シングルスイッチ】軽くつまむとニコニコするが強くつまむと怒る
おでこ：
【照度センサ】気持ち悪がる
左みみ：
【感圧センサ】軽くつまむとニコニコするが強くつまむと怒る
め：【シール LED R】タイミングによって光ったり消えたりする
はな：
【シールスイッチ小】押すとニコニコ不思議そうにする
うで：
【ボリュームエンコーダ】いっぱいまで回すと痛がる
おなか：
【シールスイッチ丸】くすぐったかのように笑う
おへそ：
【距離センサ】手を近づけると照れる
しっぽ：
【ボリュームエンコーダ】ディスプレイの顔が入れ替わる
からだ：
【加速度センサ】寝た状態から体を起こすと目を覚ます
【図 3】：各箇所：（各種デバイス、センサ）へのインタラクションの割付け
DESIGNED BY: TOCK
手順３：第一次試作（ラフモデル）
手順６：組み込み、調整
ディスプレイ、デバイスやセンサがうまく収
光造形のモデルを発注し、各種デバイスを
まるように体をスタイロフォーム（建築で使
組み込み【図 7】
、組み上げます【図 8】。
われる断熱材・保温材。ホームセンターなど
で入手できます）で形作っていきます。顔に
は各種ディバイス、センサからの反応を表現
した表情を用意します。
【図 7】：組み込み前（左上）と組み込み中
【図 8】：第二次試作完成
第一次試作の問題などを解消するために、デバイスやセンサの配置換えなどを経て、ウサ
【図 4】：第一次試作
【図 5】
：用意した「表情」画像
ギロボットが完成しました。
手順４：第一次試作の評価
ロボットの全体像【図 4】が形になり、HOTMOCKBuilder でインタラクションを与
え【図 5】、動作を試します。手を伸ばしたときにおへそのセンサーが誤作動しやすい
問題などが目立ちました。
また、音声があると、より良くなりそうだったので、音声を取り入れることにしました。
サンプルは赤ちゃんの声です。こうしたところロボットが何を訴えているのが伝わり
やすくなりました。
強くつねらないで！
腕を逆に回すと痛いよ！
おへそは弱いの・・・
へへへ。なでてくれるの？
【図 9】：インタラクションの様子
手順５：第二次試作（樹脂モデル）
作成のコツ
３D ソフトで光造形のための３D データ
構想段階のスケッチである程度アイデアが出たら、とにかく HOTMOCK をいじって練った方が、具体
的にアイデアがまとまると思います。また、既製品を積極的に活用することでラピッドなプロトタイピ
を作っていきます。
ングができたかと思います。
肩の関節には既製品のノブを使い、そこ
に腕のパーツを嵌め込むことで、確実に
評価と反省点
ロータリーボリュームが機能することを
第一次試作で顔半分を手袋で作ったことで、ラビットのロボットをラピッドにプロトタイピングができ
たこともありますが、それによって、このロボットに特徴を与えられたのも良かったかと思います。また、
考慮しました【図 6】
。
音声ファイルを使用することで、感情の表現の伝え方が広がりました【図 9】。ただ、第二次試作まで、
それを踏襲し、目の光が透けるような構造にしましたが、液晶モニタを目の表情の表現と
【図 6】
：3D ソフトによるモデリング
して積極的に使う考えもあったかな・・・と。
DESIGNED BY: IKUTA&MATZ
CATEGOLY
トイレリモコン
＜手順 1＞ 静電容量センサを理解する
トイレのリモコンを
コントロールする
人・動物
液体
金属
泡
検知対象
公共のトイレ やっぱりいろんな所を触りたくない。
ボタンに触れずに機器をコントロールするには？
どんなユーザインターフェイスが必要か？本当に使用できるのか？
電気力線
今回は新製品アップサイド株式会社のハイブリット近接＆タッチセ
ンサ「タッチレスイッチ」を HOTMOCK に繋げ、新しいユーザイ
遮蔽物
ンターフェイスの可能性を探る。
センシング電極
アップサイド株式会社
センシング電極
www.appside.jp
「タッチレスイッチ」はセンシング電極をフィルムなどの様々なもの組み込むことが
可能で遮蔽物があっても電気力線が対象物を検知しスイッチングできます。今回は静
電フィルムを使用し自由な形に切ってスイッチを作成しました
使用キット
レガシー KIT
使用デバイス
静電容量センサ−モジュール 外部デバイス
LED プロジェクタ
プログラム
モックアップの材料
デシタル KIT
アナログ KIT
ア
T
エクステンション
＜手順 2＞ 構想！ こんな操作を実現？
簡単なコントロールパネルのフローを作成し近接センサを使用した場合の人間側の反応を探ってみる。ここでは
実際にスイッチングする前の「近づいてきた−−GUI」の動きをイメージし作成した。
以下はコントローラ本体と手の接近度と GUI の関係図を示す。
HOTMOCKBuilder 静電フィルム 2 枚 ガラス板
1. アイコンへ手をかざすとメニューが出現
2. アイコンを選び手を近づけると対象のアイコンが大きく変化
3. 大きくなったアイコンの上で手を止めるとメニューが出現
DESIGNED BY: IKUTA&MATZ
＜手順 3＞
HOTMOCK と「タッチレスイッチ」を繋ぐ
＜手順 5＞
トイレのコントローラの雰囲気をプロトタイピング
ガラスウォールの背面から GUI を投影し何もない壁を操作するイメージを作成した。トイレコントローラ（ハー
ドモック）に直接「タッチレスイッチ」を添付した検証も考えられるが近接した際の GUI 検証を念頭に置いてい
たので背面からプロシェクターで投影することにした。
（tablet でも実現可能）
3.
1.
プロジェクター
GUI 投影
2.
＊写真は開発中のモジュールです
ガラスウォール
1. モジュールから出ているアナログのケーブルを HOTMOCK につなぐ、またこのモジュールは
実際に触るとデジタル信号を ON にすることもできるのでデシタルのケーブルも同時につなぐ。
2. 静電フィルムを自由な形に切り取り電極をつなぐ。
3. センサをガラスに取り付けガラス越しに稼働するかチェック。
＜手順 6＞
操作体験！
＜手順 4＞
HOTMOCKBuilder でフローを実現
触れるとデジタル入力信号（DI）
近づくとアナログ入力信号（AI）
作成のコツ
Builder でなめらかな動きを実現するには 1 シーンでも良いので中間の動きのシーンを用意するとリッチな GUI に
見える。また中間のシーンが操作の示唆を予感させるので、ただ画面が切り替わるのではなくわかりやすい表現に見
える。今回はガラス面に投影したが、ハードモックでのプロトタイプも実現可能である。近接の近づいてきた感を出
すには音や光といった別のフィードバックを用意するとよりわかりやすい。
評価と反省点
1. Setting で DI 信号と AI 信号を設定しておき。実際に触れても反応する様に設定する
2.「近づいてきた−−GUI」を実現するために細かく画像を作成し滑らかなシミュレーションを作成
近接センサだけで GUI が成り立つかプロトタイプしたがある矩形を表示すると最終的にはどうしても触ってしまう。
いままでにない行為なのでアフォーダンスがなく最後は触れる行為で解決できるのではないかと思う人が多かった。
最終的には触れるを目的として GUI を作成するか？はたまたボタンという矩形を出さずに操作を行わせるナチュラ
ル UI を活用するのか？ などプロトタイプされる機器の特性によって近接センサを使用するべきだと考える。トイ
レコントローラの場合は触れずに操作したい思いを近接センサで実現できそうだと考える。
DESIGNED BY: TETZ
CATEGOLY
LED 照明 1. タッチパネルの信号を直接 HOTMOCK へ送る
外部電源を使用しモータで
パン・チルト LED 照明をプロトタイプ
「EXTENSION BOARD（拡張ボード）」は I/O 接続形態が 2.54ｍｍピッチのスルーホール形状になっているので、
コネクターやユニバーサルボードに乗せて利用することが容易な構造となっています。通常の HOTMOCK の使い
方は USB シリアル通信ポートをパソコンと接続し、入出力アイテムを対応するコネクターに接続するという使い
方ですが。今回はユニバーサルボードに乗せ、必要な信号を配線し外部電源を供給します。手元に有った SHARP
製「4.3 型タッチパネル LCD 付きグラフィック表示モジュール LR0G945」をメイン制御ユニットとして利用し
ます。この「LR0G945」と HOTMOCK は「EXTENSION BOARD」経由でシリアル通信接続します。パソコン
の代わりに働かせます。LED の首振り機構には HOTMOCK のアナログポート出力から電圧信号を PWM 変換し、
RC サーボに送り込めば 1 軸の回転運動が得られます、これを 2 軸分構成し、パン・チルト動作をさせます。
折角なので LED も消灯・弱・強の明るさ３段階に変えてみます。LED の方向操作は、LCD 上に景色画像を表示し、
任意の点をタッチする事で LED 照明を目的の方向へ向ける、監視照明モデルです。
HOTMOCK は、プロダクトデザイナ向けツールとして組込み技術の専
門技術的知識を必要とせずに開発が行える画期的なギアです。
しかしシステムエンジニアから見た場合、電気的要素や通信・ソフト
制御要素まで技術者の認識下で動作させたいと思う事も有ります。
その様な時この「EXTENSION BOARD（拡張ボード）」を使う事で問
題が解消されます。今回は、LED 照明を照らしたい方向に向ける事が
出来る照明システムを例に挙げ、説明を行います。
使用キット
レガシー KIT
デシタル KIT
アナログ KIT
エクステンション
SHARP 製
LR0G945
デジタル
出力
シリアル通信
LED 照度
制御回路
LED
4.3 型タッチパネル
使用デバイス
アナログ
なし
出力
電圧→PWM
変換回路
SHARP 製「4.3 型タッチパネル LCD 付きグラフィック表示モジュール LR0G945」
RC サーボ ( ブラケットセット ) ver2.1×2
レンズホルダー：パワーＬＥＤ用レンズ・ホルダーセットＯＳＨＨ２０４５Ｍ
外部デバイス
レンズ：パワーＬＥＤ用レンズＯＳＯＬＲＡ２０１５Ｍ
RC サーボ
PAN
5V 3A
AC アダプタ
5V 3A AC アダプタ
LED 照明：ＯＳＷ４ＸＭＥ１Ｃ１Ｓ−１００
RC サーボ
TILT
「電源は AC アダプターより 5V を供給します。
LCD ユニットとハイパワー LED や RC サーボの駆動を考えると 3A 以上の容量が必要です。
今回の LED 照明は最大で 3.3V400mA 駆動が可能なアルミベース型のパワー LED ですが、発熱の問題が有るの
で 5V 電源に 33Ω抵抗を入れて、100mA 程度の駆動としました。
プログラム
2. 各入出力信号の規格
モックアップの材料
合成木版、回路基板
●入力端子 IN１∼ IN32
●出力端子 OUT1 ∼ OUT19
High レベル電圧 2.0V ∼ 5.3V
Low レベル電圧 -0.3V ∼ 0.8V
ダーリントン シンク ドライバ
ON 時ドライブ信号 電圧 5.0V、電流 300mA
●アナログ入力端子 AI1 ∼ AI6
●アナログ出力端子 AO1 ∼ AO2
A/D 1024 階調 0 ∼ 5V 入力
変換時間 5.4μS ／ CH
D/A 256 階調 0 ∼ 5V 出力
変換時間 10μS ／ CH
●シリアル通信端子 TX0 ∼ TX1 RX0 ∼ RX1
信号レベル TTL5V
USB シリアル通信時に利用される TX1 と RX1 は、使用禁止なので、併用することはできませんが今回パソコ
ンと接続を行わないため、上位制御部「表示モジュール LR0G945」と接続します。今回「LR0G945」側信号
レベルが 3.3V なため変換回路が必要となります。通常同じ信号レベルの場合は必要ありません。
●電源端子 +5V と GND
外部より、
AC アダプター等で供給してください。この時の +5V と GND 間は、最大でも 5.2V までとして下さい。
USB ポートの 5V とは別系統になっています。電流は使い方で変わりますが、今回は３A 以上必要です。
DESIGNED BY: TETZ
回路図
3.HOTMOCK の通信仕様
●通信規定
通信速度：38400BPS
データービット長：8Bit
ストップビット：1Bit
パリティビット：無
フロー制御：無（調歩同期）
4.RC サーボの制御
RC サーボの制御は通常 PWM で行います。よって HOTMOCK のアナログ出力信号を利用し、電圧によってパル
スの幅を変化させるための回路を、弊社の岸部氏に作成して頂きました。サーボ位置とアナログ出力・パルス幅の
関係は次の通りです。
サーボ位置
アナログ出力 AO1
PWM 出力幅
最下端
中央
最上端
0V
2.5V
5V
1.0ms
1.5ms
2.0ms
6. 動作確認
上の関係より、電源オン時はアナログ出力 1・2 共 2.5V にします。その後は LCD ユニットのタッチ場所により
0~5V へ変化させます。
PAN サーボ
TILT サーボ
LED ライト
5.LCD ユニットの機能
LCD ユニットは電源オン時に HOTMOCK へアナログ出
力１・２ポートへ 2.5V を出力する様に通信電文を送り、
デジタル出力１・２ポートへ OFF となる通信電文を送
作成のコツ
ります。同様にその後のタッチ操作に従って、
LED の「点
RC サーボは意外と電力を消費します、当初手持ちの AC アダプター（5V1A）で駆動してみましたが
PAN・TILT サーボが両方動くと CPU ボードが落ちました。電解コンデンサー 470uF を 4 個入れて
5V2A の AC アダプターに変えました。
灯 LOW」をタッチされたときに「デジタル出力１」だ
けを ON にした電文を送信し、「点灯 HI」をタッチされ
たときは「デジタル出力２」を ON にした電文を送信し
ます。これで LED の ON ／ OFF が可能になりました。
続いて、タッチエリアの上下方向をタッチした時は、そ
の部分に応じた電圧出力を「アナログ出力２」へ電文送
信します。同様に左右方向をタッチされた時は、その部
分に応じた電圧出力を「アナログ出力１」へ電文を送信
します。
評価と反省
HOTMOCK とのインターフェースがシリアル通信なので、位置決め動作のアナログ電圧出力指示後
次の電文通信までの間サーボ動作が止まり、カクカクした動きになってしまいました。
LED の様な軽重量負荷の場合は良いのですが、カメラの様な重量負荷の場合は、アナログ出力に
大きなｺﾝﾃﾞﾝｻｰを入れる等、出力変異速度を滑らかに変化させるような回路が必要でしょう。
今回は、約 30 秒操作をせずに放っておくと自動で首振り動作を続けるようにしました
照明 LED＋ネットカメラを取り付けてプライベート監視などもできそうですね。
© Copyright 2024 ExpyDoc
