公立はこだて未来大学 2022 年度 システム情報科学実習
グループ報告書
Future University-Hakodate 2022 System Information Science PracticeGroup Report

プロジェクト名Interaction Elements - 『未来を形作る部品』を作ろう

Project Name
Interaction Elements - Creating Elements for Future

グループ名
グループ A,B,CGroup NameGroup A,B,C
プロジェクト番号/Project No.

10

プロジェクトリーダ/Project Leader
武藤颯汰

Sota Mutou

グループリーダ/Group Leader
日野真麻Maasa Hino

武藤颯汰

Sota Mutou

新保冴弥Saya Shinbo

グループメンバ/Group Member
武藤颯汰
峪裕也

Sota Mutou
Yuya Sako

新保冴弥

Saya Shinbo

飯田竜也

Ryuya Ida

森一朗

Ichiro Mori

桒原佐紀

Saki Kuwahara

傍士靖文

Yasuhumi Hoji

田原和真

Kazuma Tahara

日野真麻Maasa Hino

松岡美佑

Miyu Matsuoka

阿部伊緒莉
遠藤将

Iori Abe

Masato Endo

佐倉寧音

Nene Sakura

佐々木野愛

Noa Sasaki

佐藤涼香

Suzuka Sato

指導教員

安井重哉

塚田浩二

伊藤精英

吉田博則

Advisor
Shigeya Yasui Koji Tsukada Kiyohide Ito Hironori Yoshida

提出日/Date of Submission
2023 年 1 月 18 日/ January 18, 2023

-2-

目次
第1章

導入

3

1.1

プロジェクトの目標・目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

1.2

デザインプロセス

3

第2章

各 Element 制作

7

Element.01「moodoor」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

2.1.1

目標・目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

2.1.2

Element の制作手順・方法 . . . . . . . . . . . . . . . . . . . . . . . . .

8Element.02「SKY FLAP」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

2.2.1

目標・目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

2.2.2

Element の制作手順・方法 . . . . . . . . . . . . . . . . . . . . . . . . .

21

2.2.3

プログラムの解説 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

Element.03「うぇ〜ぶる」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

2.3.1

目標・目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

34

2.3.2

Element の制作手順・方法 . . . . . . . . . . . . . . . . . . . . . . . . .

35

2.3.3

プログラムの解説 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

2.1

2.2

2.3

第3章

3.1

3.2

3.3

3.4

3.5

第4章

4.1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

中間発表会

49

Element.01「moodoor」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

49

3.1.1

中間発表会に向けて . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

49

3.1.2

中間発表会でのフィードバックを受けて. . . . . . . . . . . . . . . . . .

49

Element.02「SKYFLAP」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

50

3.2.1

中間発表会に向けて . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

50

3.2.2

中間発表会でのフィードバックを受けて. . . . . . . . . . . . . . . . . .

51

Element.03「うぇ〜ぶる」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

52

3.3.1

中間発表会に向けて . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

52

3.3.2

中間発表会でのフィードバックを受けて. . . . . . . . . . . . . . . . . .

55

動画制作・Web サイト・ポスター制作 . . . . . . . . . . . . . . . . . . . . . . .

56

3.4.1

動画制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

3.4.2

Web 制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

3.4.3

ポスター制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

58

発表方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

59

3.5.1

プレゼンテーション用スライド資料 . . . . . . . . . . . . . . . . . . . . .

59

3.5.2

プレゼンテーション方法 . . . . . . . . . . . . . . . . . . . . . . . . . . .

61

成果発表会

62

Element.01「moodoor」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

62

成果発表会に向けて . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

62

4.1.1

-i-

4.2

4.3

4.4

4.5

第5章

5.1

成果発表会でのフィードバックを受けて. . . . . . . . . . . . . . . . . .

63

Element.02「SKYFLAP」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

64

4.2.1

成果発表会に向けて . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

64

4.2.2

成果発表会でのフィードバックを受けて. . . . . . . . . . . . . . . . . .

65

Element.03「うぇ〜ぶる」 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

68

4.3.1

成果発表会に向けて . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

68

4.3.2

成果発表会でのフィードバックを受けて. . . . . . . . . . . . . . . . . .

69

Web サイト・ポスター制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

70

4.4.1

Web サイト制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

71

4.4.2

ポスター制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

71

4.4.3

動画制作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

76

発表方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

78

4.5.1

プレゼンテーション用スライド資料 . . . . . . . . . . . . . . . . . . . . .

78

4.5.2

プレゼンテーション方法 . . . . . . . . . . . . . . . . . . . . . . . . . . .

80

4.5.3

成果発表会の全体フィードバック . . . . . . . . . . . . . . . . . . . . .

80

4.1.2

おわりに
グループのまとめ

82. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

82

5.1.1

Element.01「moodoor」 . . . . . . . . . . . . . . . . . . . . . . . . . .

82

5.1.2

Element.02「SKYFLAP」 . . . . . . . . . . . . . . . . . . . . . . . . .

85

5.1.3

Element.03「うぇ〜ぶる」 . . . . . . . . . . . . . . . . . . . . . . . . .

85

プロジェクトのまとめ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

86

付録 A

中間発表で使用した発表スライド

87

付録 B

中間発表に向けて制作した Web サイト

88

付録 C

成果発表で使用した発表スライド

90

付録 D

成果発表に向けて制作した Web サイト

91

5.2

参考文献

93

- ii -

Interaction Elements - Creating Elements for Future

概要
Interaction Elements とは、人が外界の環境（身の回りの実世界や、コンピュータの中の仮想世界など）と相互行為を行う際に用いる要素のことである。例えば、人が動かすことで電気がつく照明のスイッチや、人がクリックすることでコンピュータの中のボタンが押され通信するなどの行為を可能にするマウスなどの部品のことを指す。本プロジェクトは、今までにはな
かった、未来を形作る Interaction Elements を制作することを目的としている。今年度は、最終成果物として部屋の雰囲気を感じとれるドアノブ「moodoor」、夕焼けを絵画として保存する「SKY FLAP」、手をかざし波の体験とものを動かす体験ができる「うぇ〜ぶる」を制作した。1 チーム 5 名で構成される 3 チームで行い、相互交流を積極的に行いながら制作を行った。
（※文責: 新保冴弥）

Group Report of 2022 SISP

-1-Group Number 10

Interaction Elements - Creating Elements for Future

Abstract
Interaction Elements are elements that people use to interact with the external environment (the real world around them, the virtual world inside a computer, etc.). For
example, a light switch that turns on when a person moves it, or a mouse that enables
a person to click a button on a computer and communicate with it. This project aims
to create Interaction Elements that have never existed before and that will shape thefuture. This year, the ﬁnal products were ”moodoor,” a doorknob that allows users
to feel the atmosphere of a room, ”SKY FLAP,” which preserves sunsets as paintings,
and ”Wable,” which allows users to experience waves and move objects by holding theirhands over them. The three teams of ﬁve members per team actively interacted witheach other as they worked on their creations.
（※文責: 新保冴弥）

Group Report of 2022 SISP

-2-Group Number 10

Interaction Elements - Creating Elements for Future

第 1 章 導入
1.1

プロジェクトの目標・目的

本プロジェクトは、未来を形作る Interaction Elements を作ることを目的としている。Inter-action Elements とは、人が外界の環境（身の回りの実世界や、コンピュータの中の仮想世界など）を操作する際に用いる構成要素のことである。例えば、照明のスイッチが一例であり、様々なInteraction Elements が身近に存在する。本プロジェクトでは人間の五感を利用し、より直感的にインタラクションを行える、人間の身体や思考に基づいた未来を形作る Interaction Elements を制作する。（以下、本稿では制作物を「Element」と呼称する。）今年度は、部屋の雰囲気を感じとれるドアノブ「moodoor」、夕焼けを絵画として保存する「SKY FLAP」、手をかざし波の体験とものを動かす体験ができる「うぇ〜ぶる」を制作した。
（※文責: 新保冴弥）

1.2

デザインプロセス

組織
プロジェクト構成員は学生 15 名と教員 4 名である。意見を積極的に交換できる環境を構築する
ために、プロジェクト全体のリーダ・副リーダを設定した上で、プロジェクトマネージャー・グ
ループリーダ・デザイン統括・Web 制作統括などを設定した。
実際に Element 制作を 行うのは 3 グループであり、このグループは、プロジェクトメンバの全員がいずれか 1 つのグループに所属している。制作のグループとは別に、中間発表・成果発表で用いる Web サイト・ポスター・動画・発表資料などを制作・実演するグループに分かれ、所属し、役割を見つけ、役割を全うして行った。このグループについては、自身がやりたいと思えるグループへの所属を話し合いで決定した。
また、本プロジェクトメンバは、各々の得意スキルを持ったスペシャリストであるという教員の考えの下活動し、１チームのエンジニアが他チームの制作物に携わることや、フォトグラファーが全体の制作風景や、制作物の撮影を行うなど、それぞれのスキルを活かし、関わり合いながらプロ
ジェクトを遂行した。その手順について、以下に記述する。
（※文責: 新保冴弥）

手順 1 ついついやってしまうこと図鑑の作成（アイデア出しの練習）

Interaction Elements のアイデアの素を身の回りのものから探すことを目的として、ついついやってしまうこと図鑑を作成した。（以下、本稿ではついついやってしまうこと図鑑を「図鑑」と呼称する。
）図鑑には「物の名前」
「対象物」
「行為」
「五感」
「オノマトペ」を記載した。それをプロ
ジェクトメンバ全体に共有することにより、メンバそれぞれの価値観や視点を共有し、アイデアの幅を広げることを目指した。プロジェクトメンバがそれぞれが身の回りを観察し、1 人 10 個以上の図鑑として持ち寄り、最終的に合計 160 個の図鑑を作成した。

Group Report of 2022 SISP

-3-Group Number 10

Interaction Elements - Creating Elements for Future

図 1.1: ついついやってしまうこと図鑑の一部（※文責: 新保冴弥）

手順 2 具体的なアイデアの創出
手順１で作成した図鑑や、身の回りのもの、フィールドワークなどから得たアイデアを参考にし、1 人 10 個ずつ新たなアイデアを持ち寄り、合計 160 個のアイデアからなる「ネタ帳」を作成した。プロジェクトメンバにアイデアを共有する際はプレゼンテーション資料を作成し、共有を行なった。目的や、機能を説明すると共に、絵や図解を用いることによって一人一人が想像したアイ
デアをより解像度の高い形で共有した。

図 1.2: ネタ帳の一部（※文責: 新保冴弥）

Group Report of 2022 SISP

-4-Group Number 10

Interaction Elements - Creating Elements for Future

手順 3 アイデアの整理・グループ分け
模造紙とアイデアを書いた付箋を用いて、ネタ帳の 160 個のアイデアを KJ 法により整理した。
集めたアイデアに関連性の有無を考え、似ている要素を見つけ出し分類を行った。分類としては、行為的に似ていると感じるもの・音的に似ていると感じるもの・項目として似ていると感じるもの・体験の FB 的に似ていると感じるものに分類した。さらに、似ている要素同士からも五感を基に分類を行った。その結果、視覚・聴覚・触覚・味覚・嗅覚ごとに情報が整理することができた。
その中でも利便性に基づいている行為で、受動的に行われているのか、能動的に行われているのかなどで分析を進めた。アイデアを体系的にまとめることで、より多角的な視線から日常を捉え、新しいアイデアの着想の手助けとした。また、本プロジェクトのメンバ各自が取り組みたい分類を選び、そこで近しい分類を選んだ者同士を組み合わせることによって、プロジェクトメンバを３つのグループに分けた。

図 1.3: アイデアの整理後（※文責: 新保冴弥）

手順 4 グループごとに Element 制作
前期
毎週金曜日の 5 限目をプロジェクト全体で教員に進捗を報告する「定期進捗共有会」とし、その他の時間をグループごとの制作時間とした。共有会での発表ではグループが考えていることが伝わりやすくなるよう、スライドやプロトタイプを用いて発表した。全体での発表時間を確保することで、所属グループ以外の内容も把握しやすくし、多くの意見を取り入れながら制作を行える仕組みとした。
（※文責: 新保冴弥）

後期
前期に比べ、Element 制作への具体的なスケジュールが見えてきたこともあり、最終成果発表会に向けてスケジュールを確認しながら制作を行った。前期に行っていた「定期進捗共有会」も毎週
金曜５限に行いながら活動した。共有会では、教員への報告や教員からのアドバイスを受けるだけではなく、他グループの活動を知ることで、学生同士の知識の交換やアドバイスのきっかけとする
時間を取ることもできた。活動期間中に、活動場所の都合上、オープンスペースで活動を行うこと

Group Report of 2022 SISP

-5-Group Number 10

Interaction Elements - Creating Elements for Futureもあり、見に来てくださった方からのアドバイスや知見をいただきながらの開発もすることができた。
（※文責: 新保冴弥）

手順 5 中間発表資料の作成
中間発表に向けて、発表資料・Web サイト・ポスターを用意した。全体統括、デザイン担当、

Web サイトのコーディング担当と担当分けを行なった。発表資料は Microsoft Power Point を用いて制作した。Web サイトは Heroku を用いて公開した。ポスターは Adobe Illustrator を用いて制作した（詳細は 3.2 にて記述する）。プロジェクトの認知度を上げ、より多くの質問や、意見をもらうためにロゴ (図 1.4）の制作も行なった。

図 1.4: 中間発表時のロゴ（※文責: 新保冴弥）

手順 6 成果発表資料の作成
成果発表会に向けて、発表資料・Web サイト・ポスターを用意した。中間発表会の資料作成（手順 5）同様、全体統括、デザイン担当、Web サイトのコーディング担当と担当分けを行った。発表
資料は、Google スライドを用いて制作した。Web サイトは Render を用いて公開した。ポスター
は Adobe Illustrator を用いて制作した。また、評価シート用の QR コードと、制作した Web サ
イトへの QR コードを載せた、スタンドを制作し、発表ブースをより良いものとできるように工夫を行った。

図 1.5: 評価シート・web サイトへの QR コード（※文責: 新保冴弥）

Group Report of 2022 SISP

-6-Group Number 10

Interaction Elements - Creating Elements for Future

第 2 章 各 Element 制作
2.1

Element.01「moodoor」

2.1.1

目標・目的

本 Element の目的は、ドアノブに自律動作を与え、その視覚的な影響を検証することである。本
グループは、触覚に作用する Element に着目したメンバで構成されている。まず、グループメン
バ各々で触覚に基づいた Element を考案した。考案した Element として、「書き心地を自由に変えられるペン」、「与えた衝撃が時間差で返ってきて、起こしてくれるまくら」、「履く人によって靴底の反発力が変化する靴」、「部屋の雰囲気で重さが変わるドアノブ」などが挙げられた。その中から、ドアノブを基にした Element を制作することにした。ドアノブを選択した理由としては、ドアノ
ブは人と空間を繋ぐインターフェースの代表例でありながら、インタラクションに関する先行研究が少なく、制作する Element に新規性を持たせやすいと考えたからだ。また、ドアノブに着目する
ことで空間に新たな意味を持たせ、部屋に入る際の人の思考に影響を与えることができるのではな
いかと考えた。ドアノブに関する数少ない先行研究の 1 つとして、「誰かいる DOOR[2.1.1-1]」がある。誰かいる DOOR はドアノブに物理的なフィードバックを与える試みである。TECHTILE

toolkit を用いて、ドアノブを回したときの振動を記録・再生することで、ユーザがドアノブを掴んだ時に、逆からドアノブを回しているような感覚を再現している。これにより、「ドアノブを回したくない」といった感情をユーザに伝え、入室制限のある部屋等への物理的な注意喚起として利用される。ドアは建物や部屋と外界を繋ぐ境界面（インタフェース）であるが、室内の雰囲気をドアの外から感じ取ることは難しい。例えば、会議等で議論が盛り上がっている時に入室すると妨げになってしまう可能性がある。また、室内がシーンと静まり返っている時に勢いよくドアを開けて入室すると気まずくなることもある。先に挙げた誰かいる DOOR も、ドアノブに物理的に触れていなければ、ユーザの入室の判断に影響を与えることはできない。これらの課題に対して、本グルー
プでは室内の雰囲気をドアを通して事前に感じることができれば、入室時のタイミングやドアの開け方等を調整しやすいのではないかと考えた。先に挙げた誰かいる DOOR との相違点として、本Element ではドアノブに触れる前にその動きで室内の様子を感じ取れる点が挙げられる。これら
より、ドアノブを動物の尻尾のように物理的に動かすことで、部屋の中の雰囲気を表現するシステ
ム「moodoor」を制作することを目標とした。
方針の決定
本グループは、日常で扱うインタフェースの中でも、特に人の触覚を用いるインタフェースに着目した。その中でも、人と空間を繋ぐインタフェースの代表例であるドアに新たなインタラクショ
ンを持たせることで部屋に入る際の人の思考に影響を与えることができるのではないかと考えた。
さらにドアノブは、ドアを使用する際に必ず目にする・触るインタフェースであるにも関わらず、あまり着目されていない。ここに、新たなインタラクションを持たせることでドアの向こうにある部屋の様子が伝わってくる、新たな体験を生み出すことができるのではないかと考えた。さらに、部屋の中の空間自体に愛着が持てるようになる可能性も秘めていると考えた。

Group Report of 2022 SISP

-7-Group Number 10

Interaction Elements - Creating Elements for Future（※文責: 峪裕也）前期の活動方針
ドアノブを用いて表現できることには限りがあるが、その中でいかに面白い表現ができるかグループ内でアイデアを出し合った結果、ドアノブに人間のような性格を組み込む案が生まれた。ドアノブに性格を組み込むことによって、ドアの向こうの様子が伝わることに加えて、今までにない感覚を体験できると考えた。性格の例として、「せっかち」「おくびょう」「すなお」「ツンデレ」「クーデレ」などの性格がアイデアとして生まれ、それぞれの性格に対応したドアノブを制作することとした。
（※文責: 田原和真）

2.1.2

Element の制作手順・方法

プロトタイプ制作
まず、Element のイメージを掴むために、プロトタイプとして小型のドアノブを制作した。MDF
をレーザーカッターで加工し、ドアノブとそれを固定する小さな箱を制作した。ドアノブの軸にはサーボモータを取り付けて、角度を制御できるようにした。サーボモータの候補として SG90 とMG996R の 2 種類を検討した。どちらとも入手性がよく、安価なサーボモータであったが、SG90
ではドアノブを取り付けて動かすと常に振動してしまうことから、トルク不足と判断した。そのため、SG90 より重量は 5 倍になってしまうが、トルクが 6 倍ほど高い MG996R を使用することとした。そして、距離センサ (GP2Y0A21YK) が正面を向くように取り付けて、人間の手が近づく
様子を取得できるようにした。制御には Arduino Uno を使用し、ブレッドボード上で回路を組み立てた。初期段階のプロトタイプとしては、制作の負担を減らしつつもドアノブの動きのイメージが伝わるように、ドアの開放のための機能を排除し、ドアノブが人間の動作に応じて動くだけのプ
ロトタイプを制作した。

図 2.1: プロトタイプの構造図

このプロトタイプに持たせる性格は、主な構成が似ている「せっかち」と「おくびょう」とした。
「せっかち」では、人間の手との距離が閾値を超えると、急にドアノブが回る。この動作によって「せっかち」な様子を表現している。「おくびょう」では、人間の手が近づくとドアノブが震え始める。それに加えて、手を近づければ近づけるほど震えは大きくなることで、怯えている「おくびょう」な様子を表現している。

Group Report of 2022 SISP

-8-Group Number 10

Interaction Elements - Creating Elements for Future

図 2.2: 「せっかち」なドアノブのプロトタイプ

図 2.3: 「おくびょう」なドアノブのプロトタイプ（※文責: 田原和真）

ドア制作
プロトタイプ制作と並行して、通常サイズのドア制作にも取り組んだ。あくまでドアノブはドアに取り付けられるものであり、簡易的なドアではサイズ感や圧迫感などが伝わらない。そのため、一般的に使われるサイズのドアと、どこにでも設置できるようにドア枠を制作した。ドア枠には強度が必要なため 2x4 材と 2x2 材を使用した。ドア本体は、耐久性や運搬を考え、なるべく軽量になるようにするために、角材と合板を使用してフラッシュドア (骨組みの両面に合板を接着して作るドア) とした。しかし、実際に制作を進めた結果、ドアの重みによるドア枠の歪みや、ドア上下のゆとりの少なさ、加工の粗さなどにより、ドアの開閉時にドア下部が擦れることに加え、ドアのラッチ部分が上手く動作しない結果となった。ドア枠の歪みは補強を加えることによって少々改善したものの、依然としてドア下部が擦れる状態である上に、根本的な解決には至っていない。さらに、ドアの重みによるドア枠の歪みは、今後も増えていくことが予想されるため、ドアの改善が今後の課題となった。
（※文責: 田原和真）

後期の活動方針
中間発表での聴衆者からのフィードバックや私たちのグループ内での反省や気づきを経て、後期の活動方針を定めた。ドアノブの実装部分の課題としては、性格を増やすことを設定した。中間発表時に表現していた性格は「おくびょう」と「せっかち」である。それに加えて、次に表現しようとしていた性格は「クーデレ」であり、ドアノブの持ち手部分の温度を変化させたいと思い、この性格を実装することを目指した。「クーデレ」とは「クール」と「デレ（照れ）
」を合わせた造語でGroup Report of 2022 SISP

-9-Group Number 10

Interaction Elements - Creating Elements for Futureあり、そのギャップが良いとされ、漫画などでも「クーデレ」の性格を持ったキャラが親しまれている。私たちのグループはその「クーデレ」を実現したいと考えた。中間発表前に考えていた、その性格をドアノブで表現する方法としては、ペルチェ素子を用い、ドアノブの持ち手部分の温度を変化させるといったものである。ペルチェ素子とは、ペルチェ効果を用いた半導体熱電素子である。ペルチェ効果とは、異なる金属を接合して電流を流すと、熱の吸収・放出が起こる現象のことである。それにより、直流電流により冷却・加熱・温度制御を自由に行うことができる。このペルチェ素子を用いることで、通常は「クール」の状態で持ち手部分を冷たくし、撫でるなどの行為を行うと、「デレ（照れ）」の状態になり温かくなるといった動作を考えている。そのため、「クーデレ」では「おくびょう」と「せっかち」のようにドアノブに触れる前に部屋の状況がわかるといった表現とは違った、人がドアノブに手を触れることで新しい体験ができると考えた。また、その他にも性格を増やす予定であり、ドアノブで表現できる性格を検討していた。そして、ドア全体の課
題としては、本来のドアとしてのドアノブをひねるとドアが開くといった動作を実現させることである。現在はラッチ部分をドアの裏から直接引っ張らないとラッチのロックが外れず、ドアが開けられないため、本来のドアのようにドアノブをひねってドアが開くようになっていない。これを実現させるために、ドアノブをひねるとラッチ部分が引っ張られる機構を実装し、見かけ上、本来のドアのような動作ができるようにすることを考えた。また、中間発表時にはドア枠がゆがんでおり、ドアの下部がドア枠に引っかかってしまうため、このゆがみを直し、滑らかにドアの開閉ができるようにすること課題として設定した。具体的にどのようにゆがみを直すかは定めていなかった
ため、今後検討することとした。また、「DOOR NOVA」という Element 名は、ドアとラテン語
で「新しい」を意味する「nova」を合わせた造語であるが、「ドア」と「新しい」という要素だけでは、あまり Element の個性が生かされておらずわかりづらいといったフィードバックがあったた
め、よりよい Element 名を考案する必要がある。また、前期では第三者からのフィードバックの重要性を実感することができたため、作業や考えが行き詰った際には、第三者からのフィードバッ
クを求め、積極的に活用していきたい。それにより、グループ内では気がつかなかった課題を知ることができ、Element や活動内容を改善することができる。前期に達成できたものとして、様々なことが挙げられる。他のプロジェクトメンバや教員と積極的にコミュニケーションを取り、信頼関係を築き、より良い雰囲気かつ効率的な環境で取り組むことができ、メンバ同士で頼り頼られる関係づくりを大事にした。後期においても、引き続きそれを意識し、さらなる信頼関係を目指す。
また、活動を自発的に行い、技術や知識の習得、習得済みの知識や技術の向上に努めた。チームで一つの成果物や目標に向かって取り組むことで、プロジェクトの難しさや面白さを感じた。技術面に関しては、Arduino を利用して Element の機構を構成し、技術や知識を習得・応用することができた。また、次の活動までの目標や中間発表までの目標を明確にし、活動を行った。それによって、余裕を持って作業を行い、楽しくかつ効率的に取り組むことができた。発表に関しては、目線や声量、抑揚など様々な課題が明確になったため、最終発表までのグループ内での発表でそれらを意識し、発表技術の向上を図る。前期までに習得した知識や技術を活用し、より応用的な活動・作業をすることを目指す。また、メンバ間の関係性として、前期において最も重要な課題であると考えたのは役割分担である。前期の前半では、役割分担があまり上手くいっておらず、効果的ではな
かった。しかしながら、前期の後半でドア本体の制作とドアノブ部分のプロトタイプの制作を同時並行で行っていく際に、適切な役割分担ができ、効果的に活動することができた。私たちは、前期の役割分担において、成功と失敗の両方を経験しているため、役割分担の重要性を十分に理解している。この経験を活かし、後期ではより適切に役割分担をし、効率のよい活動にしていくことを目指す。これらの継続していくべき点や課題にもとに、今後の活動を行っていくにあたって、もっとGroup Report of 2022 SISP

- 10 -

Group Number 10

Interaction Elements - Creating Elements for Futureも重要であるのは、「本プロジェクトでは何を重要視しているか」であるため、このことを意識し、作業を進めていきたい。これにより、作業や話し合いにズレが生じなくなることに加えて、成果発表においても、どのメンバが発表してもズレが生じないと考えた。この重要視することを軸とし、より良い Element の制作を目指す。前期で良かった部分を引き続き意識し、良くなかった部分を改善することで、より良い Element を制作し、より有意義な活動にしていきたい。
（※文責: 森一朗）

印象調査
ドアノブの形状およびドアノブの動きを策定するため、予備的な印象調査の実施を計画した。前期に制作した本 Element のプロトタイプに対して、本プロジェクトの指導教員から「普通の見た目のドアが急に動き出したら、どんな動きでもユーザは恐怖してしまうのではないか」というフィードバックを得たため、ドアノブの形状については、親しみやすさや好感度が高い形状を調査することを目的とした。また、ドアノブの動きについては、ドアノブの動きにより、本 Element のユー
ザにどのような感情を想起させるかを調査することを目的とした。
本印象調査ではクラウドソーシングサイト Lancers を使用した。本印象調査でクラウドソーシ
ングサイト Lancers を使用した理由としては、弊学の情報デザインコースの 3 年次前期で開講される講義「ヒューマンインタフェース演習」（2023 年時点）にて、エクストリームユーザのためのUX/UI を考案するというテーマに基づき弊学情報デザインコースの学生が制作した Web サイト
やアプリケーションなどのデジタルプロダクトの UI について、評価実験を実施することが推奨されており、その時に使用したクラウドソーシングサイトが、Lancers であった。A グループの中には情報デザインコースに所属しているメンバが 3 名いることから、印象調査を行う際には、クラウドソーシングサイト Lancers を使用することが最も適していると考えた。また、本印象調査では Google Forms を使用して質問項目を作成し、アンケート形式で Lancers のユーザに回答してもらった。質問項目の作成、回答に Google Forms を使用した理由としては、先に挙げたクラウド
ソーシングサイト Lancers を使用した理由と同じで、過去にアンケートの作成や回答の経験がある
メンバが多く、扱いに慣れていると考えたからである。
次に、本印象調査で使用する質問のプロトタイプを Google Forms を使用して制作した。プロトタイプの段階で用意した質問は、以下の 3 つである。

• 親しみやすいドアノブの形状（自由記述形式）• 提示したドアノブのプロトタイプの形状に対して、どれが親しみを持ちやすいか（選択形式）• ドアノブの動きを示す動画に対して、どのような感情を想起させたか（選択形式）
まず、最初に挙げた質問では、本印象調査の目的である親しみやすさや好感度が高いドアノブの形
状をユーザの自由記述により特定することを狙った。次に挙げた質問でも最初に挙げた質問同様に、親しみやすさや好感度が高いドアノブを特定するため、3 つか 4 つ程の形状が異なるドアノブのプロトタイプを提示し、その中で最も親しみを持ちやすいと思ったものを回答してもらうという質問とした。回答者には、この質問を最初に挙げた質問の後に回答してもらうことで、最初に挙げた質問に回答する際に、回答者の思考のノイズとなるのを防ぐことができると考えた。例えば、質問の順番が反対であった場合、制作したプロトタイプの中で最も親しみやすいと感じたものを選択した後に、回答者が親しみやすいと感じるドアノブの形状を自由記述で回答しなければならないため、先の質問に影響を受け、新規性のある形状が生まれにくい可能性がある。最後に挙げた質問でGroup Report of 2022 SISP

- 11 -

Group Number 10

Interaction Elements - Creating Elements for Future
は、本印象調査の目的であるドアノブの動きにより、本 Element のユーザにどのような感情を想起させるかを特定することを狙った。
次に、本印象調査で使用するドアノブのプロトタイプについて記載する。本印象調査で使用するドアノブは、動物の尻尾を参考に 3 種類のプロトタイプを制作した。動物の尻尾を参考にしてプロトタイプを制作した理由としては、本 Element はドアノブの動きと室内の雰囲気が結びつく必要があり、「室内の雰囲気」が室内にいる人たちの感情が集まることによって形成されると捉えた
ときに、動きと感情がリンクしている動物の尻尾を参考にすることができるのではないかと考えたからである。また、動物の尻尾を参考に制作した 3 種類のプロトタイプに加え、一般的な形状のドアノブのプロトタイプ（図2.4 内 4 番を参照）を制作した。これは、動物の尻尾を参考にしたドアノブと一般的な形状のドアノブのどちらが親しみを持たれやすいかを調査するためである。

図 2.4: 印象調査で使用したドアノブのプロトタイプ

本印象調査で使用する質問のプロトタイプに対して、本プロジェクトの指導教員から、質問を制作する際の必須項目や注意点などに関してのフィードバックを得た。得られたフィードバックを以下に挙げる。

•「親しみやすいドアノブの形状」という最初の質問項目は、ドアノブに対して普段意識を向けていない回答者らにとっては、回答のハードルが高い導入なのではないか。

• ドアノブが動物の尻尾の形状になっていることに対して、事前知識なしで見せられた時によく分からなくなる恐れがあるのではないか。

• ドアの部分に犬のお尻があれば、ドアノブの形状が動物の尻尾のメタファーだとすぐに気づくことができる。形状を評価してもらいたいなら、質問者と回答者の本 Element に対する認識のギャップを埋めないといけないのではないか。

• 質問の提示の方法に工夫が必要である。質問の提示の方法によっては、回答者の質問に対す
る認識のノイズになってしまう可能性がある。例えば、ドアノブの動きを評価してもらう項
目で、ドア全体を映した動画を提示してしまうと、ドアノブ以外の余計な部分がノイズとなってしまう。

• 各要素に対応する動画を作るのには、手間がかかるのではないか。
Group Report of 2022 SISP

- 12 -

Group Number 10

Interaction Elements - Creating Elements for Future• どのような評価項目にするか工夫が必要である。それぞれの感情に対して ON/OFF で聞くのか 5 段階評価で聞くのかを入念に決めること。
これらのフィードバックを参考に、本印象調査で使用する質問のブラッシュアップを行った。まず、「親しみやすいドアノブの形状」を自由記述で回答してもらうという質問を「あなたがこれまで見たことのある珍しいドアノブの形を教えてください」に変更した。この変更により、前者より多くの回答を得られたり、そのあとの質問の回答に対する意欲低下を防ぐというポジティブな効果が期待できると考えた。次に、「ドアノブの動きを示す動画に対して、どのような感情を想起させたか」という質問内で使用する動画の制作と、評価項目の考案を行った。まず、動画の制作プロ
セスについて記述する。ドアノブの動きを示す動画を制作するにあたり、富川ら [2.2.2-1] の研究を参考にした。富川らはインタフェースへ感情表現を実装する目的のもと、小円図形の動きによって共通の感情を得ることが可能であるかを実験を通して検証した。富川らは実験課題として、12種類の繰り返し動画（上移動、下移動、左移動、右移動、上下移動、左右移動、回転、四角回転、
揺れ、拡大縮小、横回転、縦回転）を用いた。これら 12 種類の動画を 3 種類の速度に分け、合計

36 課題を提示した。課題の評定項目として、エクマン・フリーセンが提唱した基本 6 感情（怒り・嫌悪・恐怖・喜び・悲しみ・驚き）と感情の表出なしの 7 変数を用いた。実験の結果、下移動が悲
しみ、上下移動が喜びなど、被験者間で共通する感情を想起させる動きがあったことを報告している。まず、本 Element の動きのパラメーターとして、「ドアノブの形状」、「速さ」、「振れ幅」、「開始位置」の 4 項目を用意した。また、各パラメーターに対して、次に挙げるいくつかの要素を用意した。「ドアノブの形状」については、先に挙げた動物の尻尾を参考に制作したプロトタイプを 4種類使用した。
「速さ」については、遅い、普通、早いという 3 種類を用意した。
「振れ幅」については、30°、60°、90°の 3 種類を用意した。「開始位置」については、上、斜め上、横、斜め下、下の 5 種類を用意した。そのあと、これらの要素をそれぞれ iPhone のカメラを使用して撮影し、全ての組み合せ分の動画（合計 180 種類）を制作した。動画の制作にはモーショングラフィックソ
フトウェアの After Eﬀects を使用した。After Eﬀects を使用した理由としては、本プロジェクト
内に After eﬀects の使用に長けているメンバがいるからである。また、本プロジェクトは大学内で活動していることから、公立はこだて未来大学の iMac に自動でインストールされている After

Eﬀects を使用することが、他のソフトを使用するよりも効率が良いと考えた。尚、制作した動画
は動画共有サイト YouTube に限定公開でアップロードし、それを Google Forms に埋め込んだ。
次に、評価項目の考案プロセスについて記載する。評価項目を考案するにあたり、エクマン・フ
リーマンが提唱した基本 6 感情を用いた。質問では、ドアノブの動きを示す動画を視聴してもらった後に、この基本 6 感情について、「感じない・あまり感じない・どちらでもない・少し感じる・感
じる」の 5 段階評価で回答を得た。
結果として、本印象調査では性別年齢不問の 410 人の Lancers ユーザから回答を得ることができた。まず、「あなたがこれまで見たことのある珍しいドアノブの形を教えてください」という質問
からは、様々な形やインタラクションを持ったドアノブについての知見を得ることができた。しかし、動物の尻尾の形状、動きを参考にすることによる「ドアノブの動きと室内にいる人たちの感情をリンクさせることができる」というメリットを上回るアイデアがなかったため、本 Element は、動物の尻尾を参考に本制作を進めることに決定した。次に、「提示したドアノブのプロトタイプの形状に対して、どれが親しみを持ちやすいか」という質問では、動物の尻尾を参考にして制作した

3 種類のドアノブと一般的な形状のドアノブのプロトタイプのうち、波系のドアノブ（上図 3 番のドアノブ参照）が全回答のうち、42 ％（410 人中 173 人）から最も親しみやすいという評価を得る

Group Report of 2022 SISP

- 13 -

Group Number 10

Interaction Elements - Creating Elements for Future
ことができた。これは、提示した 4 種類のドアノブのプロトタイプのうち、最も評価が高いものであった。次に、ドアノブの動きについて得られた結果について述べる。エクマン・フリーセンが提唱した基本 6 感情のうち、喜びの感情については、開始位置を真上、振れ幅を 60°、速さを標準としたパラメーターが最も評価が高かった。また、悲しみの感情については、開始位置を斜め下、
振れ幅 30°、速さをゆっくりとしたパラメーターが最も評価が高かった。尚、その他の「怒り・嫌悪・恐怖・驚き」の感情については、今回の印象調査では明確な差が得られなかった。よって、調査結果に基づいて、本提案では、波型のドアノブの形状を利用することとして、開始位置を真上、振れ幅が 60°、速さが標準というパラメーターで喜びの感情（ポジティブな動作）を、開始位置を斜め下、振れ幅 30°、速さがゆっくりというパラメーターで悲しみの感情（ネガティブな動作）を表すこととした。尚、現段階では喜びの感情と悲しみの感情を同じドアノブの機構で動作させることが困難であるため、喜びの感情のみ実装した。
印象調査によって得られた喜び・悲しみの感情を想起させる動きは、室内の雰囲気を表現する際に使用することができる。例えば、喜びの感情を想起させる動きであれば、パーティーやクラブな
ど、ポジティブな室内の雰囲気をドアノブの動きにより表現できる。また、悲しみの感情を想起させる動きであれば、室内で話し合いや会議が行われている中、ネガティブな場面になったとき、その雰囲気をドアノブの動きにより表現できる。
（※文責: 峪悠也）人の検知方法の変更
前期に制作したプロトタイプでは、人が近づいたことを検知するために、赤外線を利用した測距センサ (GP2Y0A21YK) を使用していた。しかしこのセンサは、センサ前方の限られた角度でしか距離を測れないものであるため、人が近づいたことを検知するにはあまり適していなかった。実際、プロトタイプにおいては、センサに反応するように手を動かすためにはコツが必要で、ただ手をかざしただけでは反応させることができなかった。

この点を解消するために、サーボモータを用いて測距センサを回転させ、広い角度を検知できないか実験を行った。しかし、思い通りに人の検知をすることはできなかった。また、サーボモータの動作音が目立つ点や、最終的にドアの中の限られたスペースに配置する事を考えると場所をとる点なども考慮し、不採用となった。
その後、別のアプローチとして、焦電型赤外線センサ (SB612A) を用いることができないか実験を行った。このセンサは、検知角度が 115 度あり、ドアの正面だけでなく横側から来た人にも反応させることができたため、人の検知方法として焦電型赤外線センサを用いることにした。ただしこのセンサは、人までの距離を取得することはできず、人の有無のみ取得できる。そのため、感度の調節や取得した値をもとにしたプログラムを工夫する必要が生まれた。また、反応速度が速くない
ため、人を検知した瞬間に何らかの動作をする、といったことが難しくなった。これらの点が今後の課題となった。
（※文責: 田原和真）

使用するモータ
1 十分なトルクがあること、○
2 角度制御ができドアノブを回転させるために使うモータには、○
3 無負荷時でも外部から人の手で回転できること、の 3 つを満たしているものが必要だっ
ること、○
1 ○
2 は部屋の雰囲気を表すための動作を行うために必要で、○3 はドアノブとして動作させる
た。○

Group Report of 2022 SISP

- 14 -

Group Number 10

Interaction Elements - Creating Elements for Future
ために必要である。
ドアノブを回転させるモータは、前期のプロトタイプに引き続き MG996R とした。他に、近藤
化学のブラシレスサーボモータ B3M-SB-1040-A も検討した。このモータを担当教員からお借りすることができたため、実際に制御を試すことができた。制御の柔軟さや精度の高さなど、とても良いモータであったが、本体の価格や、このモータを駆動するために必要な周辺機器の価格が高く、予算の面からこのモータを使用することは断念した。また、このサーボモータは無負荷時の回転がとても重く、この点からも使用することを断念した。その結果、プロトタイプ制作において使用していた MG996R が、モータのトルクが十分なこと、無負荷時でも手動で回転できること、制御が容易であることなどから、この Element を制作するのに適していると判断したため、MG996R を候補の一つとした。
また、モータに関する別のアプローチとして、DC モータとモータドライバを使用して、柔軟な回転制御が行えないか実験した。この方法のメリットとして、電流を制御することによるトルク制御が可能になる。本物のドアノブは、回すにつれて元の位置に戻ろうとするトルクが発生する。これを角度制御のみで実現するには、感圧センサなどを用いてドアノブの軸にかかるトルクを検知し、それに応じた角度に制御するなどの制御が必要なため、困難である。しかし、モータドライバ
を用いて電流を制御することにより、プログラムの難易度は上がるが、本物のドアノブのような動きに近づけられないかと考え、実験をした。DC モータや現在の軸の角度を取得する可変抵抗、トルクを上げるためのギアなどの設計を一から行うと、時間がかかるため、既製品のサーボモータ(MG996R) を分解し、制御基板を取り除き、モータと可変抵抗の端子から直接線を伸ばして、外部からそれぞれを制御できるように改造した。その後は、。現在のドアノブの軸の角度に応じて、元の位置に戻るようなトルクをかけることで、本物のドアノブのような動きを再現するプログラムを作成した。続いて、部屋の雰囲気を表すための動作をするために、通常のサーボモータと同様な角度制御ができないか実験した。角度制御の方式として、PID 制御を用いた。しかし、PID 制御に用いるパラメータの調節があまり上手く進まず、思い通りにモータを動かすことができなかった。
ドアノブとしての動作と、部屋の雰囲気を表す動作では、後者のほうが優先すべきと考えたため、

DC モータとモータドライバを使用した方法を断念して、角度制御が容易な MG996R を採用することとなった。
（※文責: 田原和真）

マイク部屋の雰囲気を表す要素の一つの「にぎやかさ」は、部屋の音量を用いて判断することとした。
部屋の音量の取得には、秋月電子通商の高感度マイクアンプキットを使用した。マイクの出力値を、サンプリング周波数 8000Hz、量子化ビット数 10bit で AD 変換を行った。AD 変換には、マイコン内蔵 ADC 機能を用いている。AD 変換によって取得したデータをもとに 1 秒間隔で平均を取り、その直近 16 秒間のデータのうち最大値と最小値を除いた 14 サンプルの合計値によって、にぎやかさを 8 段階で判断した。
この方法を用いることで、マイクによるにぎやかさの取得は行えたのだが、モータなどのその他の要素と同時に制御を行おうとすると、マイクの出力値にとても大きなノイズが載ってしまい、正常な値を取得することができなくなった。また、モータだけでなく LED の点滅などの影響も受けていると思われる減少も発生した。この対策として、マイクアンプキットの電源ラインの近くにバ
イパスコンデンサを配置した。しかし、この方法ではあまり効果がなく、依然としてノイズが載っ

Group Report of 2022 SISP

- 15 -

Group Number 10

Interaction Elements - Creating Elements for Futureてしまった。別の方法として、比較的大きな電流を使うサーボモータにはコンデンサを、マイクの電源近くにはローパスフィルタを設置した。サーボモータへのコンデンサは、マイクのノイズ対策
だけでなく、瞬間的な大電流が流れることによる、マイコンへの供給電圧の低下によって引き起こされるリセットを防ぐ役割もある。実際に、前期のプロトタイプ制作の際、サーボモータへの瞬間
的な大電流による、マイコンのリセットと思われる現象が起きていたため、この対策は重要と考えている。マイクの電源へのローパスフィルタは、コイルとコンデンサによる簡易的なローパスフィ
ルタを設置した。これら 2 つの対策により、目立ったノイズは無くなり、正常に値を取得できるよ
うになった。また、電源を 2 系統用意するという案も候補には挙げていたが、最終的にドアノブに取り付けることを考慮すると、パーツ数を増やすべきではないと考えていたため、前述のノイズ対策で十分と判断した。
（※文責: 田原和真）

制御用のマイコン
上記のパーツの制御には PIC マイコン PIC18F26K22(以下 PIC18F) を使用した。前期のプロトタイプで用いた Arduino uno をそのまま使用することも考えたが、3 つの理由により PIC18Fを使用することとした。

1 つ目の理由は、サイズの問題である。Arduino uno は様々なパーツを組み合わせたマイコン
ボードであるため、マイコン単体と比較するとサイズが大きくなっている。最終的にドアノブに組み込むことを考えた時に、サイズはなるべく小さいほうが良いため、Arduino uno は適していないと考えた。また、最終的な制作物ではブレッドボード上での結線ではなく、ユニバーサル基盤を用
いて回路基盤を作ることを予定していたため、マイコン単体の方が自由度が高くなると考えた。他の案として、Arduino Uno の小型版である Arduino Nano も候補に入れたが、ユニバーサル基盤との相性を考え、採用しなかった。

2 つ目の理由は、プログラムの煩雑化である。今回の Element では、8000Hz でサンプリング
しているマイクと、50Hz の周期で信号を送るサーボモータを制御しながら、その他の処理を行わなければならない。そのため、delay 関数などを用いた時間制御ではなく、タイマ割り込みを用いた時間制御がほぼ必須となっていた。また、Arduino において AD 変換をする際に使用する関数

analogRead は、デフォルトの設定では 100 μ s 近くの時間を必要とし、これは 8000Hz のサンプ
リングの間隔 125 μ s にとても近く、AD 変換以外の処理を行うための時間が不足してしまうことが懸念された。もちろんレジスタを変更することによって、AD 変換に用いる時間は短縮できるのだが、この時点で Arduino の簡潔にプログラムを書けるというメリットが薄れてしまっているた
め、1 つ目の理由やプログラム担当者の慣れなども考慮した結果、Arduino Uno ではなく PIC18Fを用いるべきではないかと考えた。

3 つ目の理由は、静電容量測定モジュールの存在である。PIC18F には、CTMU(Charge Time
Measurement Unit) という、ピンに接続された静電容量を測定することができるモジュールが搭載されている。Arduino Uno でも静電容量を測ることはできるのだが、簡易的な測定しかできない。そこで、専用のユニットである CTMU に着目した。このユニットは、定電流源を内蔵していて、電流・充電時間を変化させることにより、高精度で静電容量を測定することができる。そもそも、なぜ静電容量測定が必要なのかというと、人間がドアノブに触ったか・近づいたかどうかを判定して、何らかの処理を行うという案が出ていたためである。そして、マイコンを選定する段階では拡張性があったほうがいいと判断したため、PIC18F を用いるべきではないかと考えた。しかGroup Report of 2022 SISP

- 16 -

Group Number 10

Interaction Elements - Creating Elements for Future
し、静電容量測定を用いた機能に関しては、具体的な案までは生まれず、最終的には採用されなかった。以上の理由により PIC18F を使用することとした。
また、より高性能なマイコンとして dsPIC33FJ64GP802(以下 dsPIC) も検討した。PIC18F と1 動作速度が速い、
2 高性能な AD 変換モジュール、
3
比較した際のメリットとして、○○○DMA(Direct
1 の動作速度に関しては、PIC18F の性Memory Access) 機能が搭載されている、の 3 点がある。○

能は最大 16MIPS 程度であるのに対し、dsPIC は最大 40MIPS で動作する。また、PIC18F は 8
ビットマイコンのため、1 命令で演算できるデータ量は 8 ビットであったが、dsPIC は 16 ビットマ
2 の高性能な AD 変換モジュール
イコンのため、1 命令で 16 ビットの演算が可能になっている。○

に関しては、PIC18F では 10 ビット 1ch の AD 変換であったのに対し、dsPIC では 10 ビット 4ch
もしくは 12 ビット 1ch の AD 変換が可能となっている。また、タイマと組み合わせて、充電を開
3 の DMA 機能に関しては、○2 の始するタイミングなどを自動で制御する機能が備わっている。○

高性能な AD 変換機能と組み合わせることで、マイクのサンプリング処理にかかる時間をさらに削
1 動作電圧が狭い、○
2 プログラミング難易度の減することができる。しかしデメリットもあり、○
3 の動作電圧に関しては、PIC18F では 1.8v〜5.5v と広い電源電圧範囲に上昇、の 2 点がある。○

対応しているのに対し、dsPIC の動作電圧は 3.0v〜3.6v と狭い電源電圧範囲となっている。今回使用しているサーボモータは 5v で動作するものであり、dsPIC で制御するには、レベル変換回路
2 のプログ
を用いてマイコンの信号を 5v に昇圧しなければならないため、パーツ数が増加する。○

ラミング難易度の上昇に関しては、高性能な AD 変換や DMA などの機能を用いる場合、PIC18Fと比較した際に手間が増加する。しかし、これらの高性能な機能を用いなくとも、PIC18F で十分な動作ができることや、電源電圧の問題も考慮した結果、PIC18F が最適だという結果となった。
（※文責: 田原和真）

プログラミング
制作では、統合開発環境 MPLAB X を使用し、コンパイラは XC8 を使用した。マイコンへのプログラム書き込みには PICkit3 を使用した。プログラムでは、タイマ割り込みを行うために、
タイマを 2 つ有効化した。1 つ目は、サーボモータの制御信号を作成するために使用した。今回使用しているサーボモータ MG996R は、サイクルが 20ms(50Hz) の PWM 信号のデューティー比を変更することによって、角度を指定することができる。具体的には、HIGH 状態の幅が 0.5ms
で-90 度、2.4ms で 90 度となるように動作する。使用したマイコンには、PWM 信号を生成する

ECCP モジュールという機能が搭載されていたが、PWM のサイクルを 20ms にするためには、マ
イコン自体の動作クロックを相当落とさなければならず、このモジュールを使用することを断念
し、タイマを使い PWM 信号を生成することにした。2 つ目は、AD 変換をサンプリング周波数

8000Hz で行うために使用した。また、割り込み時の処理時間を短縮するために、このタイマによる割り込みの中では、AD 変換の実行と、1 秒間の平均を計算するための合計への加算処理のみを行い、1 秒間の平均処理や直近 16 秒間のデータを用いたにぎやかさの判定処理などは、割り込みの外で記述している。そしてこの 2 つの割り込みは、サーボモータの制御信号を作成する割り込
みを高優先度とし、AD 変換用の割り込みを低優先度とした。これは、AD 変換のサンプリングのタイミングが多少遅れても、1 秒間の平均をとるため結果への影響は少ないと考えられるのに対して、PWM 信号のデューティー比が変わってしまうと、サーボモータが意図しない角度になってしまうため、このような優先度付けを行った。
プログラムを書くにあたり、8000Hz での AD 変換や、50Hz での PWM 信号作成、サーボモー

Group Report of 2022 SISP

- 17 -

Group Number 10

Interaction Elements - Creating Elements for Future
タの動きの波の生成など、様々な処理を素早く同時に動かす必要があるため、処理時間を削減できるように工夫した点がいくつか存在する。まず、AD 変換に関する部分では、充電時間やサンプリ
ング速度の設定を変更し、1 回のサンプリングにかかる秒数は 30 μ s 以下となるように設定した。
これにより、マイコン選定の項で述べた AD 変換以外の処理を行うための時間が不足してしまう問題も解決した。次に、サーボモータの動きの波の生成に関する部分も、処理時間を削減できるようなプログラムを作成した。サーボモータの動きには、正弦波を用いることとしていた。しかし、sin関数などを用いて正弦波を生成するとなると、比較的時間のかかる処理となってしまう。そのため、事前に正弦波を記録したサンプル数 256 の波形テーブルを作成し、そのテーブルから随時参照を行う方法にした。この方法により、sin 関数を用いる方法に比べて大幅な処理時間削減となった。
また、テストやデモ用に機能を追加している。マイクや人感センサといったセンサ類は、周囲の状況の影響を受けやすい。例えば発表会では、別の場所で発生した音をマイクが拾ってしまった
り、聴衆に人感センサが反応してしまい人が近づく前に動作を行ってしまったりすることが考えられる。そのため、これらのセンサを一時的に無効化する機能を搭載した。マイクに関する部分は、可変抵抗を用いて直接にぎやかさを設定できるようにした。人感センサに関する部分は、スイッチを用いて手動で人の感知の有無を直接設定できるようにした。これらの機能は容易に有効/無効を切り替えられるようにしてあるため、通常の動作が行えなくなった瞬間に切り替えることを可能にしている。
（※文責: 田原和真）

ドアの修正
前期で制作した通常サイズのドアは、ドアの重みによるドア枠の歪みや、設計上の問題、加工の粗さなどにより、ドア下部がこすれたりラッチ部分の動作が行えない状態となっていた。そして、後期に入りもう一度確認したところ、ドア枠の歪みがさらに酷くなっていた。ひとまずその対策として、蝶番の数を増やした。もともと 2 つしか取り付けていなく、上側の蝶番にかかる負担が多く、それによってドアを固定している側の 2x4 材への負担が偏ってしまい、歪みを増やす原因となっていた。そのため、蝶番の数を増やし負担の分散を図った。ただし、この対策はあくまで歪みを増やさないためのものであり、もともと発生していた歪みを治すことはできないため、根本的な解決が必要だった。また、ドア枠を構成する 2x4 材に何ヵ所か小さな割れが発生しており、ドア枠の作り直しが必要となった。しかし、この作業は他の作業と比較して長時間の作業となるため、他の作業との優先度を考慮することとなった。何を優先したいかを考えた際に、部屋の向こう側の雰
囲気をドアノブであらわすことを最優先としたため、ドアの修理を断念することになった。ただし現状のままでも、ドアの開閉に支障がある (=ドアの機能性に問題がある) だけで、ドアノブをドアに取り付けた際のサイズ感や圧迫感は伝わるため、作成したドアに Element を取り付けることに意義はあると考えている。
（※文責: 田原和真）

ドアノブの取手部分のデザイン
ドアノブの取っ手部分は、印象調査の前に４種類制作した。部屋の中の雰囲気を表現するために、ドアノブを部屋の尻尾にみたてることで直観的フィードバックを受けることができると考え、しっぽから着想を得た。特に犬の尻尾は感情表現をしている器官の代表例であるため、犬のしっぽ

Group Report of 2022 SISP

- 18 -

Group Number 10

Interaction Elements - Creating Elements for Futureに着目した。犬のしっぽは全部で１４種類に分類される。たれ尾、ラットテイル、ボブテイル、ホイップテイル、巻き尾、差し尾、立ち尾、鎌尾、スクリューテイル、キンクテイル、リングテイ

ル、リス尾、スナップテイル、飾り尾の１４種類である。それを独自に似た形に大きく分類すると、４種類に分類することができた。まずラットテイルのような５ｍｍ以下の短い毛でおおわれている
細長い尾、たれ尾のように２ cm 以上の長い毛におおわれた尾、巻き尾や差し尾のように尻尾が渦を巻いている尾、そして最後に、ボブテイルに該当する尻尾が生えていないものの４つである。巻
き尾や差しお尾に該当する渦を巻いた尻尾は、ドアノブにあてはめたときに握ることが不可能であるためデザインのモチーフとしては却下した。ボブテイル型もそもそもしっぽがないため却下した。以上により、残ったラットテイル型と巻き尾型をドアノブのデザインのモチーフとして使用した。ドアノブに布を巻き、リアルな尻尾に近づける案も出ていたが、あくまで尻尾を想起させる形であることにとどめ、MDF を使用し、それぞれデフォルメ化した形でデザインした。ラットテイ
ル型に関しては、細長くシンプルな形であり、拡張性があると考え、上に沿った形と波打った形の２種類用意した。そして巻き尾型で１種類、そして比較用に一般的なシンプルなドアノブの４種類を用意することとした。
（※文責: 松岡美佑）

ドアノブ周辺機構
ドアノブ周りのパーツはドアに取り付け、取り外し可能になっている。パーツとしては、ドア本体に取り付けるための外箱、外箱の蓋、手で回す取っ手部分、ドアノブの軸、サーボモータとドアノブの軸を繋げるジョイントパーツ、ドアノブの軸を覆う被覆パーツ、ラッチの７つから成り立っている。ドアノブ本体に取り付ける為の外箱とその蓋、取っ手部分は MDF で制作した。「MDF」とは、 中密度繊維板（Medium Density Fiberboard）の頭文字を取ったものである。木質繊維を原料とする「成型板（ファイバーボード）」の一種で、繊維状にした木材に合成樹脂接着剤を混ぜて成型熱圧した中密度繊維板のことを指す。本学の工房に常設されているレーザーカッターでの加工が可能で、入手が楽であることからプロトタイプ制作の素材として使用した。今回は入手が簡単
で比較的強度のある 5mm 厚の MDF を使用した。ドアノブ本体に取り付ける為の外箱のレーザー
カットのデータは、箱のカットデータを簡単に制作できる Web ソフト、「meker case」を使用した。外箱の内側、または外側の寸法と素材の厚さを入力すると、そのカットデータを自動生成してくれる。ドアノブの取っ手部分については、レーザーカッターを使用して、５ｍｍ厚の MDF を
ドアノブの形にカットした後、4 枚重ねて接着し、角をやすりで削り磨くことで制作した。サーボ
モータとドアノブの軸を繋げるジョイントパーツは blender で３ D モデリングを行い、本学の工房の３ D プリンターで印刷をし制作した。こちらのパーツもプロトタイピングの容易さから MDF
で制作にあたっていたが、強度が不十分であったため、３ D プリントに切り替えた。

Group Report of 2022 SISP

- 19 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 2.5: 制作したドアノブ周辺の機構（※文責: 松岡美佑）

最終発表会での展示物
最終発表会での展示に向けて様々な改良を行った。回路に関する変更点として、デバッグや確認用に 7 セグメント LED を追加した。Element の蓋を閉めることで見えなくなる位置に配置することで、Element の外観には影響しないように機能を追加した。実際の展示の際には、にぎやかさの
レベル (0〜7 の 8 段階) を表示していた。そして、この変更点を反映した回路を元に、ユニバーサ
ル基盤を用いて回路基板を作成した。ブレッドボード上での結線では、不意にジャンパー線が抜けるなどして、回路が正常に動かなくなるリスクがある。しかも今回の Element では、中の回路を見なくするようにしてあるため、ジャンパー線の不備の発見はより困難である。そのため、サイズ削減や安定性の向上をめざして、回路基板を作成した。基板上には、マイコン (PIC18F26K22)、
リセット用タクトスイッチ、7 セグメント LED、マイク用のローパスフィルタ (コンデンサ・コイル) 等の部品と、マイク・人感センサ・サーボモータ・マイコン用書き込み端子、計 4 つの接続用コネクタを配置した。マイコンは直接はんだ付けはせずに、IC ソケットを使用している。マイク・
人感センサは XH コネクタ (3P, 3P) で、サーボモータ・マイコン用書き込み端子は QI コネクタ

(3P, 5P) で接続できるようにした。
（※文責: 田原和真）Group Report of 2022 SISP

- 20 -

Group Number 10

Interaction Elements - Creating Elements for Future

2.2

Element.02「SKY FLAP」

2.2.1

目標・目的

本 Element の目的は、多彩な夕焼けの表情を反転フラップ式機構を用いて表現し、 人間の五感の視覚と聴覚の両方で夕焼けを楽しむことである。アナログで夕焼けを表現することで、自然の中に溶け込めるように物理的なフラップ機構で低い解像度にした。この Element を使用することで、自分が好きなタイミングで夕焼けの多様な色彩を、”記憶に残ったきれいな夕焼けの絵画”として表現し、フラップがパタパタとめくれることに、面白みを生み出すことを目指した。ここから、本Element の目標は、連続的に切り替わる微妙な色合いの変化や、フラップがめくれる際のパタパタという音を出すことで、ユーザが夕焼けを視覚的に楽しめることとした。
背景
本グループは、視覚に焦点を当てた Element の制作を希望するメンバで構成されている。まず、プロジェクト開始時に、人が視覚や聴覚を用いて身の回りの環境と相互作用できる制作物のアイデ
アを持ち寄った。アイデアとして、「アナログでデジタルの画面を表現するもの」や「時間帯や季節、気温などによって変化するブラインドカーテン」、「絶対音感を視覚化するようなもの」などが挙げられた。そして絶対音感が持つ、”目には見えないという特徴の派生として持ち寄られた共感覚を取り入れた結果、「足音の音階を各々が持つ共感覚の色で表現し、絶対音感と共感覚の両方を体験できるデバイス」が最初のアイデアとしてまとまった。しかし、共感覚は様々な研究などによって使い古されていることや、人からのインタラクションを行う際に、たくさんの行動を起こす
必要があることや、様々な要素を詰め込みすぎているという点から断念した。そこで、持ち寄られたアイデアを基に要素を改めて整理することで、「空の景色をアナログで表現するブラインドカー
テン」が新しくアイデアとして挙げられた。これにより本グループは、人と自然環境の相互作用を目標とするこのデバイスの制作を目指した。一般的に、反転フラップ式機構は、文字や数字を印字することで空港や駅などの案内掲示板として利用されることが多い。この反転フラップ式機構は、からくりのような視覚的な面白さと、フラップが回転する聴覚的な気持ちよさを持ち合わせており、案内を表示するためだけの機構にとどまらない魅力があると考えた。本 Element は、夕焼けのさまざまな表情に着目し、縦６・横７のマス目状に配置した反転フラップ式機構でドット絵のよ
うにそれを再現することを目指した。
本プロジェクトの目的は、未来を形作る部品、すなわち「Interaction Elements」を生み出すことである。本グループは、自分の記憶に残った夕焼けの色をアナログで表現した Element であり、本などのアナログ的なものは未来にも残り続けていくので、あえて本 Element をデジタルとアナログ掛け合わせて表現することとした。
（※文責: 佐倉寧音）

2.2.2

Element の制作手順・方法

方針の決定
本グループは、視覚や聴覚に焦点を当てた Element を制作したいメンバで構成されている。まず、人が視覚や聴覚を用いて身の回りの環境と相互作用できる制作物のアイデアを持ち寄った。アGroup Report of 2022 SISP

- 21 -

Group Number 10

Interaction Elements - Creating Elements for Future
イデアとして、「アナログでデジタルの画面を表現するもの」や「時間帯や季節、気温などによって変化するブラインドカーテン」、「絶対音感を視覚化するようなもの」などが挙げられた。そして絶対音感が持つ、目には見えないという特徴の派生として持ち寄られた共感覚を取り入れた結果、「足音の音階を各々が持つ共感覚の色で表現し、絶対音感と共感覚の両方を体験できるデバイス」が最初のアイデアとしてまとまった。しかし、共感覚自体が使い古されていることや、様々な要素を詰め込みすぎているという点から断念した。そこで、持ち寄られたアイデアを基に要素を改めて整理したところ、「アナログでデジタルの画面を表現するもの」のアナログでデジタルを表現するという要素は芸術の視点から見たときに視覚や聴覚で楽しみやすい、「時間帯や季節、気温などによって変化するブラインドカーテン」の時間帯や季節、気温などの自然環境はアナログで表現することに適しているなどと議論し、「空の景色をアナログで表現するブラインドカーテン」のElement を制作することに決定した。
（※文責: 傍士靖文）

機構の検討
最初に、デジタルをアナログで表現し、パネルのようにするためにはどのような機構を用いることができるかを調べた。調べたところ、「かくれ屏風」という機構（図 2.8-a）[2.2.2-1] と「反転フラップ式機構」という機構（図 2.8-b）[2.2.2-2] が活用できそうだと判断した。かくれ屏風とは、江戸時代からの古い歴史を持つ遊具である。機構としては、絵が張り付けられた 5 枚の厚紙を折りたたみ、開くとその絵が消えるというものである。享保 12 年 (1727) 刊の『目付絵』には「だん十郎のからくりびょうぶ」、嘉永 6 年 (1853) 刊の『守貞漫稿』には「京阪は黒厚紙五片を白紙を以て両端と央と交互に挟めり江戸制は杉板六片を繋げり」とあり、昔から親しまれてきた機構だということがわかる。板面に歌舞伎役者の家紋等が描かれていたため、「団十郎のからくり屏風」とも呼ばれていた。地方によっては「ペタクタ」「隠れ屏風」「カッタリカッタリ」と呼ばれていた。一方で、反転フラップ式機構は、鉄道駅や空港などにおいて、乗り物の行先や種別などを案内するために用いられている。ガソリンスタンドでも数字のみ使用されている場合もある。機構としては、

2 枚の同じ大きさの円盤で 10〜50 枚程度の同じ大きさの薄い板の端部を挟んで支持するというものである。1 枚のフラップには表面に文字・記号の下半分が、裏面に上半分が記載されており、フラップの一辺の延長上で円盤に支持され、2 枚の円盤が縦方向に同期して回転することでフラップを反転させる。装置の上部にフラップを留める爪が設けられており、静止した時にフラップの 1 枚が上部で裏面を向け、表面を向けた下の 1 枚と組み合わせて、一連の文字・記号を表示させる仕組みとなっている。そして、最終的に利用できる配色の数などを考慮した結果、かくれ屏風の方では最大 2 色、反転フラップ式機構の方ではフラップを挟める円盤の大きさによって、いくらでも配色を増やせるため、反転フラップ式機構を用いることに決定した。
次に、どのような機構を用いるか検討した後は、電子工作で使う部品を検討した。まずは、フラップを回転させるためのモータを検討した。フラップは、どの回転角度でどのフラップを表示するかということを細かく求める必要があったので、細かい角度調節ができるステッピングもーたを用いることを検討した。次に、そのモータを動かす処理として Arduino などのマイコンを使用しようと思ったが、配線の関係からマイコンを小さくしたいという理由や、マイコン同士の接続の関係、Bluetooth 通信といった関係から最も使いやすいと感じた ESP32 を用いることを検討した。
また、夕焼けを撮影する手段としては、初期の段階では OV2640 を使用した 200 万画素のカメラ
フレームバッファ付きの電子工作用のカメラを用いることを検討していたが、接続の安定性を考えGroup Report of 2022 SISP

- 22 -

Group Number 10

Interaction Elements - Creating Elements for Future
たときに、PC 内蔵のカメラを用いることが妥当だと考えた。

(a) かくれ屏風(b) 反転フラップ式機構

図 2.6: 活用できそうな機構の種類（※文責: 傍士靖文）

プロトタイプの制作
プロトタイプは 1 ユニットを 3 段階制作した。ここで定義している 1 ユニットとは、マス目状に配置したうちの、1 つのマス目分の機構のことを指す。まず 1 段階目として、反転フラップ式機構
がどんな機構なのかを理解するために段ボールと紙、竹串を用いて制作した。簡易的なものでも制作することで、グループメンバ間で共通の認識を確立し、軸やフラップの強度やどの部分が大切かといったことがよく分かった。
次に 2 段階目として、外枠の素材感やデザインの雰囲気を掴むために、直径 5mm のアクリル
棒を円盤の軸に、厚さ 5.5mm の MDF を外枠に使用した。フラップを挟む円盤は厚さ 2.5mm の

MDF を用いて制作した。竹串はフラップを回転させるためのパネルの軸に用いた。設計図に関しては、illustrator を用いて制作した。フラップが回転したときにフラップを上部で留めておけるよ
うに設計図を調整し、円盤の方はどれくらいの穴の大きさを空けるか、どれくらいの穴の数を空けるか、どの場所にどの間隔で穴を空けるかといった点に注意して設計した。正面の外枠の大きさに関しては縦 130mm ×横 95mm にし、縦 95mm ×横 75mm の大きさの穴を空けた。横面の外枠の大きさに関しては縦 130mm ×横 130mm の大きさにした。背面の外枠の大きさに関しては縦130mm ×横 95mm にした。円盤の大きさに関しては直径 50mm で、中心に円盤の軸のための直径 5mm の穴を空けた。そしてフラップの軸のための 3.5mm の穴を 24 個空けた。円盤の位置は外枠の位置を基準として、上部から 40mm、下部から 40mm、正面向きから 22.5mm、背面向きから 57.5mm に配置した。
そして 3 段階目として、モータの位置をどこにするかなどの内部の構造を決定するために、3mmの透明なアクリル板を用いて外枠を制作した。設計図に関しては、海外の人が反転フラップ式機構を用いて、時計を制作したときの設計図を GitHub にて公開していたので、その設計図を引用し、改良を加えて制作した。軸に関しては、2 段階目の時点ではアルミ棒を用いていたが、より頑丈にするために軸をパーツにして組み立て、より太い軸にした。そして、M4 サイズで 10mm のボルトとナットを用いて固定した。正面の外枠の大きさに関しては、縦 145.766 mm ×横 75.88 mmにし、縦 100.654 mm × 56.32 mm の大きさの穴を空けた。横面の外枠の大きさに関しては、縦145.766 mm ×横 43.695 mm にした。背面の外枠の大きさに関しては、縦 145.766 mm ×横 75.88
Group Report of 2022 SISP

- 23 -

Group Number 10

Interaction Elements - Creating Elements for Future
mm にした。円盤の大きさに関しては直径 48.27 mm で、中心に円盤の軸のための直径 5.219 mmの穴を空けた。そしてパネルの軸のための 2.204 mm の穴を 40 個空けた。モータの位置に関して
は、最終的に 1 ユニットずつ隣り合わせたとき横のユニットにあまり干渉せず、隣のパネルとの枠の幅を狭くするために背面に置き、モータに接続された歯車と軸に接続された歯車を噛み合わせるのか、それとも多少の干渉は許容して、隣のフラップとの枠の幅を広くしてでも安定した回転をさせるためにモータと軸を直接接続するのかということを議論し、フラップを 1 枚ずつ回転させるためにも、安定した回転を用いる必要があると考えたため、モータと軸を直接接続するようにした。
（※文責: 傍士靖文）

外枠の制作
外枠に関しては、プロトタイプを制作したことからわかった点である、モータの位置や、適度な穴の大きさを用いて制作した。素材に関しては光沢が少ない黒色のアクリルを用いた。この素材を選んだ理由としては、白と比較して夕焼けの色がきれいに見えるという点、外枠ではなくパネルを目立たせたいと考えたときに白色では光が反射して外枠が目立ちすぎるという点などが挙げられる。また、MDF といった木の質感があるようなものも考えたが、自然というコンセプトには合っていたものの、夕焼けというコンセプトには合わなかったため却下した。同様に、MDF に黒色のカラースプレーで染色する方法も考えたが、塗り斑などが生まれてしまうと思ったので、元から黒色の素材である黒アクリルを用いた。厚さに関しては、ユニットを隣り合わせたときのパネル間の枠の幅を少しでも減らすために、3mm のものを用いた。そして効率よく大量生産するために、パーツごとに新しく大量生産用の illustrator のデータを作成し、レーザーカッターを用いてパーツを生産した。
（※文責: 傍士靖文）

フラップの制作
機構の中の回転軸に差し込まれているフラップの数は 40 あり、全て異なる色である。色の選定
方法は、実際に公立はこだて未来大学からの夕焼けの写真を撮り、きれいだと感じた夕焼けの写真をグループメンバで 1 枚選んだ。その写真から明暗や露光量などを調整し、記憶に残ったきれいな夕焼けとして判断した。記憶に残った色、現在見ている夕焼けの色、頭で感じる夕焼けの色が違うことから、本グループは記憶に残ったきれいな夕焼けに焦点を当てて制作に取り掛かった。加工
した夕焼けの写真からグラデーションマップを作成し、制作したグラデーションマップから 39 色を選んだ。フラップは、色の印刷後、レーザーカッターで設計図通りに切った後に、二枚重ねにしモータの回転で生じる誤差を防ぐために、グラデーションになるような順番で軸にはめ込んだ。フ
ラップを 2 枚重ねて貼り合わせることで、自重により落下しやすいように工夫した。また、夕焼けの色のほかにカラーコード＃ 000000 の黒色を 1 枚入れることで、Element を使用していない時には全部のフラップが黒色の状態なので、視覚的な妨げにならないようにした。レーザーカッターでフラップを設計図通りに切る際には、用意したはがきサイズの上質紙のほかに A4 サイズを用いて切る箇所がずれないような工夫をした。印刷した紙は全部で 840 枚で、レーザーカッターで切った
フラップの枚数は 3360 枚である。これらのフラップをすべて裏と表で張り合わせる作業を誤差が比較的起こらないように丁寧に行うことで、プログラム処理での夕焼けの表現が可能となった。

Group Report of 2022 SISP

- 24 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 2.7: 最終的に決定したフラップの色と対応した色に並る様子

図 2.8: グラデーションマップから得た色と設計図（※文責: 佐倉寧音）

ESP32 の動作確認
まずは 1 つの ESP32 を Arduino Core for the ESP32 のシステムで制御して、PC と接続テストを行った。接続テストを行うときは、LED ライトを用いて行った。次に、ESP32 同士の 1 対

1 で接続ができることを確認した。まずはシリアル通信を行い、PC と 1 対多での接続テストを行った。
（※文責: 傍士靖文）

モータの動作確認
まずは Arduino を用いてモータを回転させるために、ユニポーラのステッピングモータとESP32 の ESP-WROOM-32、モータドライバを用いて接続テストを行った。ステッピングモータ
を用いた理由は、フラップを制御する際に 1 枚ずつ制御する必要があったため、より細かい角度制
御が必要だったため用いた。1 つだけで動作確認ができたら、そのモータを用いることができると判断し、50 個購入した.
（※文責: 傍士靖文）

電子基盤の制作

1 つの ESP32 と 7 つのモータの接続を円滑に行うために制作した。基板は片面ガラスコンポ
ジット・ユニバーサル基板を使用した。トランジスタアレイには TD62083APG、シフトレジス
タにはＵ 74 ＨＣ 595 ＡＧ-D16-T、IC ソケットは 16 ピンと 18 ピンを用いた。そして接続にはGroup Report of 2022 SISP

- 25 -

Group Number 10

Interaction Elements - Creating Elements for Future
XH コネクタ ベース付ポスト トップ型 3P B3B-XH-A(LF）(SN)、XH コネクタ ハウジング 3P
XHP-3 を用い、配線には 2m × 7 色で外径 1.22mm の耐熱電子ワイヤー 外径 1.22mm ＵＬ 3265
AWG24 を用いた。電源アダプターにはスイッチング AC アダプター 5V3A AD-D50P300 を、DC
ジャックには 2.1mmDC ジャック DIP 化キット（10A）を用いて制作した。プリント基盤の配線を考えるときには EAGLE を用いて回路図を作成した。回路図を作成する際には、配線同士があまり重ならないようにし、見栄えが綺麗になるように作成した。
次に回路図が完成した後は、はんだやはんだごて、はんだ吸い取り機、ニッパー、ペンチなどを活用して電子基板を作成した。はんだをする際には周りに人がいないことや、明るさ、必要である
電力のコンセントの有無などの環境で行うことを意識し、はんだをつけすぎないように、火傷をしないように気をつけてはんだ付けをした。
（※文責: 傍士靖文）

組み立て

1 つのユニットは 8 種類のパーツで構成されていて、M4 サイズで 10mm のボルトとナットは 9個用いられている。モータは 1 つのユニットにそれぞれ 1 個用いられている。組み立てる手順としては、最初に 2 つの円盤と軸を組み立ててからフラップをそれにはめ込んでいく。次に外枠の 1面にモータを取り付け、1 面にモータが付いた状態でモータと円盤と軸が組み立てられたパーツを組み立てる。そして最後に、残りの 3 面を組み立てるという手順になっている。
次に、ユニット同士の接続に関しては横の接続はパーツを用い、縦の接続は M4 サイズの 12mmのボルトとナットを用いて組み立てた。組み立てた後に気づいた問題点としては、予想以上に全体像が大きくなり、かなりバランスが悪かった。そのため、支えとして後ろ側に斜め 45 度の支柱を加えた。
（※文責: 傍士靖文）

プログラムの解説

2.2.3

本 Element では Arduino Core for the ESP32 と Python を使用して開発を進めた。ここでは、それらのプログラムについて解説をする。最終的なコードは末尾に付録として記載する。
（※文責: 武藤颯汰）

画像処理
ここでは、カメラから空の画像を取得しフラップに反映させるための情報を用意するまでの画像処理部分のコードについて解説する。以下のコードは使用するライブラリのインポート文である。
1

import bluetooth2

import cv2

3

import os

4from PIL import Image

Bluetooth ライブラリをインポートしているが、これはもともと画像処理の過程で Bluetooth 通信を行う設計だったが途中で設計を変更したため実際には使用していない。Cv2 は OpenCV を使用

Group Report of 2022 SISP

- 26 -

Group Number 10

Interaction Elements - Creating Elements for Future
するために必要なライブラリである。os は OS 依存の機能を利用するために必要なライブラリである。Pillow という画像を扱う際に必要なライブラリをインポートしている。また、os ライブラ
リを使用しカレントディレクトリを移動させている。
まずプログラム内で使用する変数や配列を宣言している。Hue という配列にはフラップに使用した 40 色の内黒色を除いた 39 色の H(色相) の値を格納している。該当部分は以下のコードである。
1

count = 02

hsv_count = 0

3

a = 0

4

b = 0

5

com = [0] * 39

6after = [0] * 42

7espA = [0] * 7

8espB = [0] * 79espC = [0] * 7

10espD = [0] * 7

11espE = [0] * 7

12espF = [0] * 7

13hue = []

14

hue =

[13,14,14,14,14,14,14,14,14,14,14,14,14,14,14,15,15,15,17,30,90,98
16 ,100,101,101,101,101,101,102,102,103,104,105,106,106,107,107,107,0]15

次に使用するカメラの設定を行っている。今回の例ではデバイス ID ０はノート PC の内側のカ
メラ、デバイス ID １はノート PC の外側のカメラ、デバイス ID ２以降は USB などで接続されたカメラとなっている。今回はデバイス ID ０、すなわちノート PC の内側のカメラを使用して空の画像を取得することとした。該当部分は以下のコードである。
1

cap = cv2.VideoCapture(0)次にカメラから実際に画像を取得している。画像の取得に成功したらコンソールに次のステップに進むために esc キーを押す必要があることを促すメッセージが表示される。また、取得した画像を PC 上で表示させている。取得した画像を pic camera.png という名前で保存し、画像の保存が成功したことを示すメッセージをコンソールに表示させる。該当部分は以下のコードである。
1

while True:2

count = (count + 1)

3

print(count)

4
5
6# カメラからの画像取得
ret, frame = cap.read()78

if count == 20:

9print("Successfully acquired image!")10

print(" ☆ The next step is trimming, Press Esc to proceed.")

11

break

12
13

while True:

Group Report of 2022 SISP

- 27 -

Group Number 10

Interaction Elements - Creating Elements for Future14

img = cv2.imshow(’camera’ , frame)

15

key = cv2.waitKey(10)16if key == 27:

17

break

18
19

cv2.imwrite(’pic_camera.png’, frame)

20

print("Successfully saved image!")

次に pic camera.png を開き、ファイルのオープンに成功したことを示すメッセージをコンソー
ルに表示させ、画像の切り出しを行っている。切り出した画像を pic trimmed.png という名前で保存し、画像の切り出しに成功したことを示すメッセージをコンソールに表示させている。また、同時に次のステップに進むために esc キーを押す必要があることを促すメッセージも表示させ、切り出した画像を PC 上で表示させている。該当部分は以下のコードである。
1

im = Image.open(’pic_camera.png’)2

print("Successfully loaded image!")34

im_crop = im.crop((140, 0, 560, 360))5

im_crop.save(’pic_trimmed.png’)

6

print("Successfully cropped image!")78

img = cv2.imread(’pic_trimmed.png’)9

print☆ ("The next step is to reduce the resolution, Press Esc to proceed.")1011

while True:

12

cv2.imshow(’pic_trimmed’, img)

13

key =cv2.waitKey(10)14

if key == 27:

15

break

次に pic camera.png を開き、画像の幅と高さを取得している。開いた画像の幅と高さをコンソールに表示させて画像を 7 × 6 のサイズにリサイズし、リサイズした画像を保存する。ここで画像のリサイズに成功したことを示すメッセージをコンソールに表示させている。同時に次のステップに進むために esc キーを押す必要があることを促すメッセージも表示させ、リサイズした画像をPC 上で表示させている。該当部分は以下のコードである。
1

img = Image.open("pic_trimmed.png")

2

width, height = img.size

3
4

print(’Current width:’, width)5

print(’Current height:’,height)

67

img_resize = img.resize((7, 6))8

img_resize.save(’pic_resize.png’)

910

print("Successfully resized image!")

11

Group Report of 2022 SISP

- 28 -

Group Number 10

Interaction Elements - Creating Elements for Future12

img = cv2.imread(’pic_resize.png’)

13
14

print(" ☆ The next step is to get HSV value, Press Esc to proceed.")15
16

while True:

17

cv2.imshow(’pic_resize’, img)18

key =cv2.waitKey(10)19if key == 27:

20

break

画像ファイルを読み込んだり、画像ファイルを RGB から HSV 色空間に変換したりしているが、これはコードを記述する際にサンプルとして使用したものであり実際の処理では使用していない。
該当部分は以下のコードである。
1

img = cv2.imread("mihon.png")2

img_box_hsv = cv2.cvtColor(img, cv2.COLOR_RGB2HSV)

3

img_box = img[0:7, 0:6]

4

hsv = img_box_hsv.T[0].flatten()5

print(hsv[5])次に pic resize.png という画像ファイルを読み込んでいる。読み込んだ画像ファイルを RGB から

HSV 色空間に変換して画像のピクセルごとの H(色相) の値を取得し、多次元のリスト（リストのリスト、ネストしたリスト）を一次元に平坦化している。また、一次元に平坦化したものをコンソールに表示している。該当部分は以下のコードである。
1

img = cv2.imread("pic_resize.png")2

img_box_hsv = cv2.cvtColor(img, cv2.COLOR_RGB2HSV)

3

img_box = img[0:7, 0:6]

4

hsv = img_box_hsv.T[0].flatten()5

print(hsv)

配列 hsv の値一つに対して配列 hue の各要素を引いていき、絶対値を計算し、その値を配列 comに格納している。これらの処理を終えたら配列 com の中で一番小さい絶対値の値が格納されている場所のインデックスを取得し、配列 after に格納する。該当部分は以下のコードである。
1

for num in range(42):2

for num in range(39):3iro = (hsv[a] - hue[b])4iro = abs(iro)5com[b] = iro

6

print(iro)7b = (b + 1)

8

if b > 38:
b = 0

9
10
11

after[a] = com.index(min(com))12

a = (a + 1)

配列 after をコンソールに表示し、end の文字をコンソールに表示している。該当部分は以下のコードである。

Group Report of 2022 SISP

- 29 -

Group Number 10

Interaction Elements - Creating Elements for Future1

print(after)2

print("end")

キャプチャデバイスを終了し、画像ウィンドウを閉じている。該当部分は以下のコードである。
1

cap.release()

2

cv2.destroyAllWindows()

配列 after new を初期化し、配列 after new に新しい要素を追加しながら配列の要素を並び替えている。該当部分は以下のコードである。
1

after_new = [] * 0

2for i in range(7):34

for j in range(42):if (j % 6 == i):after_new.append(after[j])5

配列 after new をコンソールに表示している。該当部分は以下のコードである。
1

print(after_new)

配列 after new の要素を 7 つごとに区切り、新たな配列 espA、espB、espC、espD、espE、espFに要素を格納している。該当部分は以下のコードである。
1

for i in range (0, 7):2espA[i] = after_new[i]3for i in range (7, 14):

4
5
6
7
8
9
10
11
12

espB[i-7*1] = after_new[i]for i in range (14, 21):espC[i-7*2] = after_new[i]for i in range (21, 28):
espD[i-7*3] = after_new[i]for i in range (28, 35):
espE[i-7*4] = after_new[i]for i in range (35, 42):
espF[i-7*5] = after_new[i]配列 espA、espB、espC、espD、espE、espF の値をコンソールに表示している。該当部分は以下のコードである。
1

print(espA)

2

print(espB)

3

print(espC)

4

print(espD)

5

print(espE)

6

print(espF)（※文責: 佐々木野愛）

Group Report of 2022 SISP

- 30 -

Group Number 10

Interaction Elements - Creating Elements for Future

画像処理部分解説
ここでは上記のプログラムの動作について解説する。画像処理部分ではカメラから空の画像を取得し、モータを制御するための esp32 にどのフラップを表示させるべきかというデータを送信するまでを処理している。最初にノート PC 背面にあるカメラから空の画像を取得する。次にこの画像を 420 × 360 の大きさでトリミングする。表示させるべきフラップの情報を用意するにあたってこのトリミングをする操作は本来必要のないものだが、PC の画面でこの次の操作がうま
くいっているかどうかを確認するために今回はこの処理を行っている。トリミングした後、7 × 6のサイズにリサイズする。この 42 ピクセルそれぞれが各フラップのユニットの位置と対応している。次に HSV の値を取得する。HSV とは色を「色相 (Hue)」「彩度 (Saturation)」「明度 (Value・

Brightness)」の 3 要素で表現する方式であり、今回は主に「色相 (Hue)」の値を利用する。42 ピ
クセルそれぞれの H の値を用意しておき、その値ともともと用意していたフラップに使われている黒を除いた 40 色の H の値と比較していく。比較する過程で H の値同士の差を計算し、絶対値を割り出して一番近いフラップの色を選び出した後、この情報を一旦配列に格納する。この配列には、42 ユニットそれぞれが何枚目のフラップを出せば空の画像の色合いに近づけることができるかという情報が格納されていることになる。これには 42 ユニットすべての情報が含まれているのだが、親の esp32 から子の 6 つの esp32 へデータを送信するという操作が必要なためこの情報を６分割する。6 分割した情報を６つの新たな配列に格納し、親の esp32 に送信して画像処理部分の機能は終了である。
（※文責: 佐々木野愛）

Arduino Core for the ESP32
本 Element に使用するマイコンである ESP32 を制御するためのシステムとして Arduino Corefor the ESP32 を採用した。ESP32 の開発環境には様々な方法がある、例えば先ほど述べた
Arduino Core for the ESP32 のほかに、Oﬃcial development framework for ESP32（公式開発
フレームワーク）だある ESP-IDF や、Python の文法を使用してマイコンや組み込み機器のプロ
グラミングができる言語処理系である MicroPython などがある。これらの中から、Arduino Corefor the ESP32 を採用した理由はこの開発環境が最もメジャーな方法であり、参考にできる資料が多いためである。

Arduino Core for the ESP32 を使用して作成されたプログラムは親機と子機のプログラムで 2つある。ここからはこの 2 つのプログラムについて解説する。
（※文責: 武藤颯汰）親機
ここでは親機側のプログラムについて解説する。本プログラムの処理の大まかな流れは以下の通りである。

1. Python から表示したいフラップの番号を 1 行ごとにカンマ区切りの文字列の配列として受信する
例）Group Report of 2022 SISP

- 31 -

Group Number 10

Interaction Elements - Creating Elements for Future{ 0, 0, 0, 0, 0, 0, 0 ,0, 0, 0, 0, 0, 0, 0 ,0, 0, 0, 0, 0, 0, 0 ,0, 0, 0, 0, 0, 0, 0 ,0, 0, 0, 0, 0, 0, 0 ,0, 0, 0, 0, 0, 0, 0 }2. 全てのフラップ分の文字列を受信したのち Bluetooth 通信で子機を探索する
3. 子機と接続完了後、対応した列の文字列をそれぞれの子機に送信する
最初に以下のコードで使用するライブラリのインポートを行った。
1#includeBluetoothSerial.

hBluetooth 通信で子機と接続するために子機のアドレスである uint8 t 型で 6 つの配列を用意する。しかし、ここでは 6 つの子機と接続したいため以下のような構造体と配列を使用した。
1

struct address {uint8_t address[6];

2
3

};

4

struct address addresses[6];このように宣言し子機のアドレスを配列で管理できるようにすることで、インデックスを使用してそれぞれの子機に接続可能にした。その後、シリアル通信で Python から送信される表示したい
フラップの番号を 1 行ごとにカンマ区切りの文字列にしたものを以下のコードで取得する。
1

input = Serial.readStringUntil(\ n);

表示したいフラップの番号を 1 行ごとにカンマ区切りの文字列にしたものとは以下のようなもの
で、この場合、1 行すべてが 0 枚目のフラップを表示したいことになる。

{ 0, 0, 0, 0, 0, 0, 0 }次に、以下のコードで受信した文字列が空でない場合に、受信した文字列を管理するための配列に格納する。
1

if (input !=) {numbers[cnt] = input;
cnt++;

2
3
4}

次に、先ほどの文字列が配列に 6 つ格納されたことを確認すると、それぞれの子機に for 文を使用してアクセスを始める。実際に子機に接続するのは以下のコードである。

( ESP32, true);
2 connected = SerialBT.connetct(addresses[i].address);
1

SerialBT.begin

ここで、インデックスを使用してそれぞれの行に対応する子機に、表示したいフラップの番号を

1 行ごとにカンマ区切りの文字列にしたものを以下のコードで送信する。
1

SerialBT.println(numbers[i]);親機の動作は以上の通りである。
（※文責: 武藤颯汰）

Group Report of 2022 SISP

- 32 -

Group Number 10

Interaction Elements - Creating Elements for Future

子機
ここでは子機側のプログラムについて解説する。本プログラムの処理の大まかな流れは以下の通りである。

1. 親機と接続できる状態にする
2. 親機と接続後、それぞれの子機に対応した、表示したいフラップの番号を 1 行ごとにカンマ
区切りの文字列にしたものを受信する。

3. 受信した文字列からステッピングモータの角度を計算する。
4. ステッピングモータを制御する。
5. EEPROM に現在表示しているフラップが何枚目のものかを保存する。
さらに詳しくそれぞれの動作を説明する。
最初に、以下のコードで使用するライブラリのインポートを行った。

#include BluetoothSerial. h
2 #include <EEPROM.h>1

まず、以下のコードで親機と Bluetooth 通信を可能な状態にする。
1

SerialBT.begin( ESP32);

その後、以下のコードでそれぞれの子機に対応した、表示したいフラップの番号を 1 行ごとにカンマ区切りの文字列にしたものを受信する。
1

input = serialBT.readString(\ n);

その後、受信した文字列が空でなければ文字列をカンマで区切り文字列の配列に格納する処理を以下のコードで行う。
1

int idx = split(input,,, tmp);

ここでは、idx が配列のサイズで tmp が実際に作られた配列である。また、split 関数は Arduino

Core for the ESP32 には存在しないのでユーザ関数を作成した。
その後、以下のコードで文字列の配列だったものを int 型にキャスとて int 型の配列に格納する。
1

for(int i = 0; i < idx; i++) {s_data[i] = tmp[i].toInt(i);23}

ここで、以下のコードで EEPROM に現在表示しているフラップが何枚目のものかを EEPROMに保存する準備をする。
1

color\_state.val[i] = s\_data[i];次に、以下のコードで現在表示しているフラップが何枚目のものかと、次に表示したフラップが何枚目のものかからステッピングモータの角度を計算し、行の配列に格納する。
1

int degree = 0;2

if (s_data[i] > color_state.val[i]) {3
45

degree = (s_data[i] - color_state.val[i]) * 51;} else {degree = ((40 - color_state.val[i]) + s_data[i]) * 51 + 8;

Group Report of 2022 SISP

- 33 -

Group Number 10

Interaction Elements - Creating Elements for Future
6}

7

degrees[i] = degree;

次に、以下のコードでステッピングモータを制御する。
1

step(degrees);

最後に、以下のコードで現在表示しているフラップが何枚目のものかをＥＥＰＲＯＭに保存する。
1

save_data();

子機の動作は以上の通りである。
（※文責: 武藤颯汰）

2.3

Element.03「うぇ〜ぶる」

2.3.1

目標・目的

本 Element の目的は、テーブルという静的な物体を波のような流動的な動きをさせることで視覚的なギャップを持たせ、そのギャップに楽しさや面白さを見出すことである。まず、Element の視覚を用いて人間に与えたい影響として、視覚から得られる心地よさに的を絞る。心地よさに注目した理由としては、生の Interaction Element 図鑑を作り、アイデアの整理をした際に心地よさに注目した案が多かったからである。そして私たちはその心地よさを持つ動きとして、波の動きに着目する。波の動きが持つ流動的な揺らぎに心地よさを得られる結果があるため、本 Element の動
きに波の動きを取り入れる。[2.3.1-1] 次に、本プロジェクトの二つ目の目的である直感的なインタラクションの実現として、手を動かして波を操作することを考える。私たちの日常に存在する家電製品などの Element を操作するときの多くはリモコンやスイッチなどを介して操作することがほ
とんどである。しかし、それらの操作機器を介すことでヒトとモノとに隔たりができてしまう。隔たりができてしまうことは私たちのプロジェクトの目的である直感的なインタラクションの実現に反してしまう。そのため、直感的なインタラクションの実現のためにリモコンやスイッチといった固定観念が既にある操作ではなく、実際に手を動かし、かざす、はらうといったより直感的な操作感を持てるような仕組みにする。波の動きと手で操作するという二つの要素を Element に落とし込む方法としてテーブルの形を提案する。日常生活に不可欠といっていいほどありふれたテーブ
ルという Element に波の動きを取り入れることで未来の生活に新たな体験を提供することができるのではないかと考える。また、普段静的で動かないテーブルという Element に波の流動的な動きを加えることで、そのギャップによる心地よさや面白さが生まれるのではないかと考える。しかし、先行研究として、テーブルに新しい機能を追加したインタラクティブなテーブルはいくつか作られている [2.3.1-2]。そのため、テーブル自体は Interaction Elements ではなく、そこにインタラ
クティブな機能を追加することによって Interaction Elements になるといえるため、そこに価値を加えることで、本プロジェクトの目的である未来の Interaction Elements を作ることになると考える。したがって、本 Element の目的は、手の動きで天板に波を起こして、その波を操作する

Element を作ることである。目標としては、波状でモノを動かせる天板のデザインを考えて、手の動きで天板操作する機構を作ることである。
（※文責: 遠藤将）

Group Report of 2022 SISP

- 34 -

Group Number 10

Interaction Elements - Creating Elements for Future

Element の制作手順・方法

2.3.2
材料

Element の外側の機構の制作に用いた材料を以下に示す。
• 中密度繊維板 (MDF) 厚さ３ mm• 中密度繊維板 (MDF) 厚さ 5.5mm• アクリル板 厚さ 5mm• 2 × 4 材 1m

4本

• スチレンボード 厚さ 5mm• 全ねじ M6 × 50mm
• ボルト M3

4本

• ナット M6

16 個

• ナット M34個

• ねじ M25本

4本• ねじ M3.8

8本• ねじ M4

16 本• Heechoo 製 ベルト駆動リニアガイド• 日本スライド工業 スライドレール• ソーホースブラケット

1200mm

S270

1台

2本

4 セット

• 糸鋸
• レンチ M10

2本

• 電動ドリル• 手回し式ドリル• ドリルビット M6• ドリルビット M3• プラスドライバー• マイナスドライバー• 精密やすり• 竹串 150 本• 3D Printer Filament PLA 1.75mm White RoHS 2-2006-2022 item・CREALITY CR-10
V3• 木工用ボンド
以下に各材料を使用した目的と理由を示す。MDF を採用した理由は、大学のレーザー加工機で切り出すことができるからである。ある程度強度があり、手作業で切り出すには細かい部分を作るのに、レーザー加工機が使えると手作業よりは精度よく作れるため、採用した。アクリル板は最終成
果物には採用しなかったが、タイミングベルトで同期をとるときに、歯車を使う予定があった。その歯車には、ボルトを締めるための穴をあける必要があり、既製品を購入することができず、自作する必要があった。ＭＤＦでは細かい歯を印刷するときに燃えてしまう危険性があったため、使用をせず、アクリル板使用することにした。また、大型の歯車をＭＤＦで印刷したときに MDF の強度では歯が折れてしまった。アクリル板で作った歯車に変えたところ折れずに動いたため、ＭＤ

Group Report of 2022 SISP

- 35 -

Group Number 10

Interaction Elements - Creating Elements for Future
Ｆが使えない部品を作る際に他のアクリル板を使用した。2 × 4 材は Element のテーブルの脚を作るときに用いた。ＭＤＦでは重たい部分を軽量化するために使用をし、最終成果物では波板に使用した。全ねじは棒のすべてにねじの溝が彫られているもので、両端からナットで止める目的があったため購入した。始めは 1 ｍを購入したが、使用する段階でたわんだため、500mm に切って再利用した。ボルトやナット、ねじは木材などを固定するために使用した。ベルト駆動リニアガ
イドは、今年度の Element を作る際に、昨年度の材料を再利用した。一軸アクチュエーターとして、 Heechoo 製のベルト駆動リニアガイドを使用した。ベルト駆動リニアガイドには、ステッピ
ングモータが付属している。タイミングベルトとステッピングモータを用いて制御を行う。最高速
度が 00mm/s、最大負荷が 300N まで耐えることができる。これを採用したときは、全ねじの長さ1m を購入していた。全ねじの長さを 1 ｍにした理由は、このベルト駆動リニアガイドが Element
からはみ出さないようにするためである。しかし、全ねじがたわんだため、長さを半分にして、たわみを予防したために、Element の長さが短くなり、収納部からベルト駆動リニアガイドが飛び出すような設計になってしまった。全長は、1200mm であり、今年度の Element のサイズよりは大きくなるが、予算節約のため短距離の物を購入せず、再利用することにした。糸鋸は、工房にある物を利用したが、高頻度で利用したかったため、プロジェクトで購入するべきだったことが反省点である。精密やすりは、ねじ穴などで広げる必要がある部分を拡張する際に使用した。竹串はス
チレンボードで作った波板の補強に使用した。3D Printer Filament PLA 1.75mm White RoHS

2-2006-2022 と CREALITY CR-10 V3 はプロジェクトですでに備え付けられているものである。
（※文責: 阿部伊緒莉）

下準備
下準備として、MDF とスチレンボードは 600 × 300mm に大学の工房にあるパネルソーで切り出しておく。今回は小さめのアクリル板だったが、600 × 300mm よりもアクリル板が大きい場合
は、アクリル板も切り出しておく。切り出す理由としては、大学の工房にあるレーザー加工機に入る板のサイズの上限が 600 × 300mm だからである。2 × 4 材は、600mm を 2 本、400mm を 8
本に切り分ける。パソコン内に Fusion360 と CREALITY Slicer のインストールをしておく。大学の工房のレーザー加工機の資格を取得していない場合は、取得する。レーザー加工機で印刷するために、Adobe Illustrator が必要になるので、インストールされている場合は作業が行いやすい
が、ない場合は工房のパソコンにインストールされている。
（※文責: 阿部伊緒莉）

全体図グループ C で作成した Element の「うぇ〜ぶる」の全体図を図 1（後で番号をそろえる）に示す。各部分の機能の解説にあたり、名称を次のように定める。図 2 の (1) を天板可動部、(2) を収納部、加えて、昇降機と回転機構部とする。

Group Report of 2022 SISP

- 36 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 2.9: 全体図

図 2.10: 上からの全体図（※文責: 阿部伊緒莉）

天板可動部
天板可動部は、使用者が実際に操作するときに動かすことができる部分である。この部分は、板の一辺を波状にカットしたものを垂直に立てて並べている。この板を作るにあたり、2 種類の板のデザインを考案した。図 3 の上図が旧型の設計案、下図が新式の設計案である。旧式の設計案は前期の活動の頃に使用した案であり、後期の活動では天板全体の軽量化に伴い余分な部分を取り除いた。また、取り除くことで、稼働時に他の動きに干渉する可能性を減らすことも目的に含まれている。新式において、上部を「天板部」、下部を「脚」と呼ぶ。新式の設計時の想定材料は MDF であったが、軽量化に伴いスチレンボードを利用することになった。スチレンボードに変更することGroup Report of 2022 SISP

- 37 -

Group Number 10

Interaction Elements - Creating Elements for Future
で、細い脚の動作における破損を予防するために、竹串で補強をした。竹串を脚の長さに切り、ス
チレンボードの辺にボンドを塗って固定した。

図 2.11: 波板の設計図（新旧比較）。板は大学の工房のレーザー加工機で加工し天板部の形は 4 種類、脚の位置は 2 種類ある（図 4）ている。板は 4 種類を順番に並べて、脚は 1 枚飛ばしで組み合わせになるように配置してある。左右を区別するために、左側の脚に切り欠きを入れた。脚の半分には、それぞれ穴が開いており、この穴には全ネジを通して連結している。この棒が回転することで、連結されているすべての板が動き、別の棒に連結されている板は動かないようにしている。板が回転することで、天板の上に載っているものが横に移動するような動きをさせる。また、板が下から上に山型で押し上げられて、その山が板に対して垂直に動くことで、天板に浮き上がった山が奥から手前にやってくる動きをする。全ねじは回転機構部にナットで固定されている。

図 2.12: 後期に使用した波板（※文責: 阿部伊緒莉）

回転機構部
回転機構部は３ D プリンターで作られており、モータのシャフトと全ネジを固定するための機能を持っている。モータに付属しているシャフトではなく、新しくシャフトを作った理由は、ナットとモータが衝突するのを防ぐためである。全ネジを回転機構部に固定するにあたってナットを使用するが、ナットの高さが約 1cm ある。付属のシャフトの高さが 1cm 以上ないため、回転時にナットがシャフトに衝突してしまうので、ナットがぶつからないようにシャフトの受けとフランジGroup Report of 2022 SISP

- 38 -

Group Number 10

Interaction Elements - Creating Elements for Future
部分を離した機構を作った。Autodesk の Fusion360 を用いてモデルを作り、プロジェクトスペー
スにある３ D プリンター CREALITY CR-10 V3 を用いて印刷した。使用した３ D プリンターの線は 3D Printer Filament PLA 1.75mm White RoHS 2-2006-2022 である。

図 2.13: 回転機構部（※文責: 阿部伊緒莉）

収納部
収納部は、天板可動部を動かすためのモータを仕舞っている部分であり、その他には、一軸アクチュエーターの固定、天板を動かすためのセンサを仕舞っている部分である。センサには Leap

Motion を使用した。始めに、収納部は 2 か所あり、それぞれ 9 種類の MDF と 5 本の２×４材を組み合わせて作られている。MDF で箱をつくり、その箱を２×４材を用いて作った脚の上に置いている。２×４材の脚はソーホースブラケットで固定している。ソーホースブラケットで固定した脚の上に一軸アクチュエーターをねじで固定している。そして、一軸アクチュエーターを覆うようにして箱を被せる。図６と図 7 に収納部に使用した MDF の図を示す。

Group Report of 2022 SISP

- 39 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 2.14: 5.5mm の MDF

図 2.15: 3mm の MDF（※文責: 阿部伊緒莉）

昇降機
天板可動部の板を上に押しだすための山型の機構である。間隔を置いた 4 枚の山型の板が、同時に天板可動部の板を上に押し上げる。滑らかに押し上げるために、スライドレールをねじ止めして、モータの先に歯車を付けて、溝にかみ合わせて、上下の操作をしている。始めは山型の板は 2枚の板だけだったが、押し上げたときに波板が傾いてあがってしまったため、さらに幅を広げて板を 2 枚拡張した。歯車は、MDF で作成していたが、山型を持ち上げる際に重みに耐えきれず折れてしまったため、アクリル板で歯車を作ることにした。
（※文責: 阿部伊緒莉）

制作手順
制作手順を以下に示す。

(1) Autodesk Fusion360 を用いて、設計図を書く。実際に全体を組み立ててから、一度分解をGroup Report of 2022 SISP

- 40 -

Group Number 10

Interaction Elements - Creating Elements for Future
して、それぞれの図面に仕上げていく。

(2) 図面を Adobe Illustrator を用いて、レーザー加工機に使用できるように整える。
(3) 下準備で切った、2 × 4 材をソーホースブラケットと M3.2 のねじを用いて組み立てる。これが、Element のテーブルの脚になる。

(4) ソーホースブラケットで組み立てた脚に、Heechoo 製ベルト駆動リニアガイド 1200mm の固定器具を M3.2 のねじを使用して固定しておく。この時、固定器具とベルト駆動リニア
ガイドの固定はしない。理由としては、組み立て時にサイズの調整をしやすくするためである。

(5) (3) と (4) と同時進行で、MDF とスチレンボードとアクリル板をレーザー加工機で印刷する。空き時間に３ D プリンター（CREALITY CR-10 V3）で回転機構部の印刷をする。工房にある３ D プリンターを利用する際には、他プロジェクトと被ると印刷できないので、素材にこだわらない場合は、プロジェクトスペースの 3D Printer Filament PLA 1.75mm

White RoHS 2-2006-2022 でも十分な印刷が可能だ。3D Printer Filament PLA 1.75mm
White RoHS 2-2006-2022 の特性としては、冷めた後に硬くなりやすく、柔軟性がないため強い力が掛かるときの耐久性があまりない。工房にある素材だと柔軟性と耐久性がとても高いので、素材を選ぶときは、工房のフィラメントと同じフィラメントをプロジェクトで購入する必要がある。今回は、予算の都合上プロジェクトで購入していた３ D プリンターとフィラメントを利用した。

(6) (4) で固定器具を固定した脚に、図 8 の板を固定する。ボンドで仮止めして、一晩放置した
後、M3.2 のねじで固定する。これは、収納部の土台部分にあたり、ベルト駆動リニアガイ
ドのモータと固定器具が重ならないように隙間が開けてある。

図 2.16: 足に固定する収納部の土台(7) 図 9 の板について、この板はモータを固定するための板であり、板に開いている長方形の部
分にモータをはめて、付属のねじで固定する。

図 2.17: モータ固定台(8) 7 でモータを固定したら、図 10 で示す赤枠の部分に板を差し込む。ぐらつくので、端材などで支えを作り、土台に垂直に立つように固定する。その際に、支えは、土台にボンドで仮止めしてから、ねじで固定をした。

Group Report of 2022 SISP

- 41 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 2.18: モータ固定台の差し込み位置(9) 作業の合間に、スチレンボードで作った波板に竹串で補強を行う。脚の長さに合わせて竹串を切り、ボンドで固定する。補強されていない状態の脚は、少しの刺激で折れてしまうた
め、扱いに注意する必要がある。竹串で補強した後は、多少手荒に扱っても壊れることはな
かった。

(10) 補強した波板を順番通りに並べ、波板の脚に開けた窓に全ねじを通しておく。
(11) 全ねじの両端にナットを 1 つはめる。その後、回転機構部を全ねじにはめ、動かないように
さらにナットをはめて、両方から硬く締める。この時、2 本のレンチで左右から抑えて締めるときつく締めることができる。今回使用したフィラメントが、3D Printer Filament PLA

1.75mm White RoHS 2-2006-2022 なので強くしめすぎると、削れてしまったので、調整が必要である。

(12) 図 11 に示す部分に図 12 を差し込む。この板もぐらつきが気になったが、モータ固定台ほど重要ではないので、今回は補強しなかった。この図 12 の板は波板が、収納部に侵入しない
ための抑えである。

図 2.19: 下図差し込み指示

図 2.20: 差し込む板(13) 昇降機を組み立てる。日本スライド工業スライドレール S270 をねじで取り付ける。この時、ねじの長さが、MDF を突き抜けてしまう問題があったので、糸鋸で短く切りそろえた。

(14) 昇降機をベルト駆動リニアガイドに取り付ける。このとき、ベルト駆動リニアガイドに付属しているボルトで取り付けた。

(15) モータ固定台に固定されているモータに回転機構部のシャフトを取り付ける。シャフト取り付け時は一人で取り付けできないため、4 人で支えながら取り付ける必要があった。慣
れてくると、3 人でも問題なく取り付けられるようになった。回転機構部は 3D PrinterFilament PLA 1.75mm White RoHS 2-2006-2022 を使用しているため、耐久性が低く、何度も使用しているうちにシャフト受けが滑っていくため、予備をいくつかこの段階で印刷しておく。

(16) 収納部の側面の板に、立てた板を支えるためのレールを端材で固定しておく。
Group Report of 2022 SISP

- 42 -

Group Number 10

Interaction Elements - Creating Elements for Future(17) センサなどを収納しておく天板の板をボンドで固定しておく。ボンドの隙間で浮いてしまうと厚みが変わってしまうため、接着した後は、重しを載せて固定しておいた。

(18) 図 13 に示す部分に図 14 を差し込む。この板もぐらつきが気になったが、モータ固定台ほど重要ではないので、今回は補強しなかった。この図 14 の板は、外側から内側の機構が見えないようにするための目隠しである。

図 2.21: 差し込み指示

図 2.22: 差し込む板(19) ベルト駆動リニアガイドと固定器具をボルトで固定をする。
(20) 収納部の側面の板をはめる。
(21) 収納部に天板をはめる。
（※文責: 阿部伊緒莉）

2.3.3

プログラムの解説

うぇ〜ぶるを制御するプログラムを記述するにあたって、成果発表会の撮影や、デモンストレー
ションの時に使用したセンサからの情報を arduino を送る processing のプログラムとステッピ
ングモータを動かしサーボモータにセンサからの情報をサーボモータを動かす arduino と送受信する arduino のプログラム、サーボモータを動かし、センサからの情報をステッピングモータ
を動かす arduino と送受信するプログラムの arduino の 3 つに分けて記述した。本 Element ではセンサとして Leapmotion を使用した。そのため、ノートパソコンと Leapmotion を接続し、processing のコードにて親機の arduino へと情報を送った。ここでは、Leapmotion for processingと leapmotion、processing のコード。親機の arduino のコードと子機の arduino のコードについて解説する。実際に使用したコードは末尾に付録として記載する。
（※文責: 飯田竜也）

Leapmotion for processing
本 Element では、手の動きを検知するセンサとして Leapmotion を採用した。Leapmotion は、

processing と unity の二つの IDE が存在したが、arduino との通信を行うプログラムを簡略化するために processing の環境を選択した。そして、Leapmotion を processing 環境でプログラムをGroup Report of 2022 SISP

- 43 -

Group Number 10

Interaction Elements - Creating Elements for Future
制作する際に、手の位置や加速度、向きや指の本数等を関数として呼び出すことの出来るライブラ
リの Leapmotion for processing を採用した。なお、Leapmotion を processing 環境で動作させる
場合には、Leapmotion for processing 単体では動作させることが出来ないため、Ultraleap 社がリリースしている Gemini というドライバも合わせてインストールする必要がある。
（※文責: 飯田竜也）

Leapmotion
本 Element の手の動きを検知するセンサとして使用した。Leapmotion は、Ultraleap 社によって開発された非接触ハンドトラッキングセンサで、テーブルの形を損なうことなく手の動きをト
ラッキングすることが可能であり、手の捻りや指の曲がり加減、センサ内にある手の数等といったデータを高い精度で取得できるため Leapmotion が採用された。
（※文責: 飯田竜也）

processing のコード
本 Element では、Leapmotion を採用したことによって arduino 単体での動作をさせることが出来なくなったため、processing にて Leapmotion のトラッキングの情報から上下左右のどちらに動かすのかを char 型のデータを前後左右をそれぞれ F 、 B 、 L 、 R として親機の arduino
へと送るプログラムとした。
まず初めにライブラリに入れた Leapmotion for processing と processing と arduino のシリアル通信をするためのライブラリをインポートした。
1

import de.voidplus.leapmotion.*;2

import processing.serial.*;Leapmotion はトラッキングで広い範囲の手の動きを検知しているため、前後左右の動作の判定
をする手の位置や条件を指定して、手を検知しても上下左右の判断を行わない手の位置と条件を設定する必要があった。そのため、まず最初に指の曲がり具合の度合いと指先同士の距離によって判断させるかどうかを設定した。指をまっすぐ伸ばして波を動かさせて戻すときに手の力を抜いたよ
うに指を曲げて元の位置に手を戻すのが自然ではないかと考えたためだ。プログラムとしては以下のようになる。
1

if (hand.getGrabStrength()<=0.90 || hand.getPinchStrength()<=0.90) {// 手の動きによる処理
3 }2

次に上下左右の判断方法だが、前後と左右で判断方法を変えている。左右の場合では、最初に手の位置が x 軸方向に設定した値を超えているかを判断し、次に手の位置が z 軸方向に設定した値の中で収まっているかどうかを判断する。これは、波を前後させる動きと波を左右に動かす動作を同時に行わないようにするため設定している。最後に手の加速度が、x 軸方向に設定した値を超える
加速度を超えているか、また、手の加速度が z 軸方向に設定した値に収まっているかを判断している。これは、加速度を用いることによって波の動きと手の速さを揃えることによってより波を自分の意思で動かしているという感覚を高める狙いがあったが、揃えることは出来ていなかった。これらの条件を設定することで手を大きく振ることで波が左右に動く動作を実現させている。一例としGroup Report of 2022 SISP

- 44 -

Group Number 10

Interaction Elements - Creating Elements for Futureて右に動かす際のプログラムは以下のようになる。

// hpx...handPosition.x 軸方向の手の位置を取得する x
2 // hpz...hanPosition.z 軸方向の手の位置を取得する z
3 // fvx...fingerVelocity.x 軸方向の指の加速度を取得する x
4 // fvz...fingerVelocity.z 軸方向の指の加速度を取得する z
5 void LeapLeft(float hpx, float hpz, float fvx, float fvz) {6 if (hpx<400) {7
if (hpz<50 && hpz>20) {8
if (fvz>=-10 && fvz<=190 && fvx>=350){
9text(" 左に送る", 10, 180);
10
sendServo(’L’);
11
}
12
}
13
}
14 }
1

前後の判断方法だが、手前側に波を動かす際に、最初に手の位置を x 軸が設定した値に収まっているかどうかを判断し、次に手の位置が z 軸方向に設定した値を超えているかを判断する。これは、左右の動作と同時に動くことが無いようにするためだ。最後に手の z 軸方向の加速度が設定した値を超えるかどうかを判断する。奥側に波を移動させる際には、まず、手首の y 軸方向への曲がり具合が設定した値を超えているか判断する。これは、手前側に波を動かす際の動作と奥側に動かす動作を明確に区別させるためであり、奥側に手を動かした際に左右の動作が意図せず動くことを防止するためだ。一例として奥側に動かす際のプログラムは以下のようになる。

// hpitch handPitch 軸方向での手首の回転角度 z
2 // fvx fingerVelocity.x 軸方向での指の加速度 x
3 // fvz fingerVelocity.z 軸方向での指の加速度 z
4 void LeapBack(float hp, float hpx, float fvz) {5
if (hp<-40) {6
if (300<hpx && hpx<500) {7
if (fvz<=10) {8text(" 奥に送る", 10, 180);
9
sendServo(’F’);
10
}
11
}
12
}
1

また、意図せず左右の動作が手を認識しなくなっても動作してしまった場合や、ステッピング
モータが意図しない動作を行ってしまった時のために停止させるために真ん中に手をかざすと全ての動作を止めるプログラムを用意した。
（※文責: 飯田竜也）

親機の arduino のコード
本 Element においてステッピングモータの L6470 との SPI 通信による制御と processing とのシリアル通信、子機の arduino とのアナログ通信を行っている。ステッピングモータの制御に SPI

Group Report of 2022 SISP

- 45 -

Group Number 10

Interaction Elements - Creating Elements for Future
通信を行うため、ライブラリよりインクルードした。また、繰り返し動作させるプログラムの時間を制御するために内蔵タイマーのインタフェイスである MsTimer2 をライブラリよりインクルー
ドした。波板を持ち上げる機構でサーボモータを使用しているため、ライブラリよりインクルード
した。

#include <SPI.h>
2 #include <MsTimer2.h>
3 #include <Servo.h>1

その後は、ピンの設定を行った。SPI 通信を行うにあたって、Arduino では指定されたピンを利用する必要がある。Arduino 側のデジタルピン 10 番が SS、デジタルピン 11 番が MOSI(Master

Out Slave In)、デジタルピン 12 番が MISO(Master In Slave Out)、デジタルピン 13 番がSCK(Serial Clock) に割り当てられたピンでモータに制御信号を送信する。SPI 対応デバイス側からの送信がなければ、MISO は未接続でも動作する。また、それぞれのピンの役割は、MISO
がスレーブからマスターへの送信、MOSI がマスターからレーブへの送信、SCK がマスターとスレーブを同期させるためのクロック信号になる。この 3 本の信号線には複数の SPI 対応デバイスを接続でき、どのデバイスと通信するかを SS により決定する。SS は HIGH/LOW の極性だけなので、デバイスごとに 1 本必要となる。また、同時に 2 つ以上のデバイスを選択することはできない。ステッピングモータの制御では、processing とのシリアル通信が成功した場合に、波板を持ち上げるためのサーボモータの値を初期化させて、その後ステッピングモータのキャリブレー
ションを行うようにした。キャリブレーションの動作は、まず、1000ms の delay を行い、手前側にステッピングモータを動かし、手前側スイッチが動作した場合にその地点を下限としてステッピ
ングモータを奥側へと動かし奥側のスイッチが動作した場合にその地点を上限とした後、波板を持ち上げる機構を上限と下限の中間に動かしてキャリブレーションの完了とする。この時、前後左右の信号が送られてきてもキャリブレーションが終わるまでは動作しないようにした。キャリブ
レーションの終了後 100ms の delay を行う。その後、ステッピングモータとの SPI 通信を行う際にダミーデータを送ることで SPI 通信が正常に行われているかを判断する割り込み処理を行った。

processing より送られてくる前後左右に動かすためのデータは 10ms ごとに読み込みを行い、前後に動かす信号が来た場合には、先に波板を持ち上げるサーボモータを動作させて最大まで持ちあがったらステッピングモータが作動するようにした。これは、サーボモータとステッピングモータ
が同時に動くことで机の奥側や手前側にある物を動かすことが出来なくなることを防ぐ目的がある。そのため、ステッピングモータはサーボモータが動き始めてから 50ms 経過するまで動作しないようにしている。ステッピングモータが上限または下限まで動作した場合は、割り込み処理を用いることでステッピングモータを停止させ、サーボモータを初期位置まで下げる処理を行うようにした。commands タブにモータの動作関数がまとめてあるが、長いのでここでの説明を割愛する。
細かい動作に関してはコメントアウトにも説明があるのでそちらを参照する。
（※文責: 飯田竜也）

子機の arduino のコード
本 Element でのサーボモータの制御と、親機の arduino とのアナログ通信を行っている。子機の arduino では 8 つのフィードバック付きの 360 度サーボモータの FB5311m を制御するためのプログラムを記述した。まず、最初に使用するライブラリのインポートを行った。SPI 通信を行うための SPI ライブラリ、サーボモータを制御する Servo ライブラリをインポートした。

Group Report of 2022 SISP

- 46 -

Group Number 10

Interaction Elements - Creating Elements for Future
次に arduino で使用するピンの設定を行った。4 行目と 5 行目では、テスト用と Leapmotion
が正常に動作しなくなった場合に成果発表会で動きの説明をするためのアナログボタンに使用した。8 行目と 9 行目では親機の arduino とのデジタル通信のために使用した。ARD 1 を親機のarduino から左に波を動かす信号を取得するための信号を取得するためのピン、ARD 2 を親機のarduino から右に波を動かす信号を取得するためのピンとして使用した。11 行目では、FB5311 ｍ
からのフィードバックからの数値が誤差によって大きくなってしまった時のためにフィードバックの上限を設定している。

17 行目からは FB5311 ｍに対して信号を送るピンをそれぞれに割り当てをした。27 行目からはFB5311 ｍからのフィードバック信号を取得し、数値を格納する変数を宣言した。38 行目からは 4
つのサーボモータを 1 つのグループとしてまとめ、1 つのサーボモータをメインとしてそれぞれのフィードバックとメインのサーボモータのフィードバックとの差分を取得して格納する変数を宣言した。51 行目からはサーボモータをそれぞれ宣言している。61 行目ではサーボモータが回転する
向きを格納するための配列をしている。この時格納される値が 1 のとき波を右に動かし、− 1 のとき波を左に動かすようにサーボモータが回転するようにしている。64 行目では SPI 通信を行うための通信を設定している。

setup 関数では、それぞれのサーボモータに対してピンの割り当てを行い、pinMode でアナロ
グスイッチと親機とのアナログ通信を行うピンの割り当てを行っている。次に、シリアル通信の有効化を行った。ビット転送速度は processing と SPI 通信を行う親機の arduino に合わせて

9600bit/s としている。その後、サーボモータからのフィードバック信号を取得したデジタルデー
タをアナログデータとして変換を行うメソッドを実行する。その後、各サーボモータのメインのサーボモータとのフィードバックの差分を取得するメソッドを実行する。

121 行目からは、左と右それぞれの信号が送られてきた時の処理を記述している。ARD 1 が LOW になった場合、波を左に動かすためのメソッドを実行する。また、ARD 2 が LOW となった場合は、波を右に動かすためのメソッドを実行するようにした。それぞれの処理が終了した後、10ms の delay をするようにした。次に、ARD 1 と ARD 2 がどちらも HIGH となっている場合にサーボモータの同期を止めてサーボモータの動きを停止させるための処理について記述した。これは、サーボモータが止まった際に鉄の棒と波板を支える際にサーボモータに力がかかり、常に同期をしようとしてサーボモータが常に駆動して大きな音が出るのを防ぐために記述した。そのため、波を左右に動かすためのメソッドを用いずに、全てのサーボモータを止める処理を記述している。161 行目では、デバッ
グ用としてサーボモータそれぞれの差分を表示させるメソッドを実行している。

168 行目からはサーボモータの初期位置を補正するためのプログラムを記述している。168 行目
から 172 行目にかけて、サーボモータの初期位置を取得し、sv fb init[i] という関数にそれぞれ書き込んでいる。175 行目からはメインのサーボモータとグループとなっている他の 3 つのサーボモータとのフィードバックの差分を求めるためのメソッドを記述している。183 行目から 187 行目
にて波を左に動かすための回転を行っている場合、現在のサーボモータからのフィードバックの値とサーボモータの初期位置を引いた値が 0 より小さい値となった時にその値にフィードバックの最大値を足す。そうでない場合はフィードバックの最大値から現在のフィードバックの値を引いた
後、サーボモータの初期位置のフィードバックの値を引いた値を求める。この時、その値がフィードバックの最大値よりも大きくなった場合、フィードバックの最大値をさらに引くと言った処理を行う。最後に計算によって出てきた値を calibFB[i] にそれぞれ格納していった。この処理を行うことによって、波板を動かすために向かい合っているサーボモータでも正しく同期させることが可能となっている。

Group Report of 2022 SISP

- 47 -

Group Number 10

Interaction Elements - Creating Elements for Future
200 行目から 208 行目にかけては、波板を動かすための 4 つで 1 つのグループを A 相としてサーボモータを同時に動かすための処理を記述している。A 相のサーボモータのメインとなる 1 つのサーボモータの補正された初期値と残りの 3 つのサーボモータの補正された初期値の差の値を求め、その値が 400 よりも大きかった場合、差の値にフィードバックの最大値を引く。その他の条件
として、差の値が− 400 よりも小さかった場合、差の値にフィードバックの最大値を足すといった処理を行わせた。その後、sv diﬀ[i] に差の値を格納させる。これらの処理は、フィードバックの値が最大値に到達した後に 0 になり、それによってサーボモータの同期が大きくずれることを回避するために用いた。もう 1 つのグループの B 相に対しても、同様の処理を行っているため、解説は割愛する。

226 行目からはサーボからのフィードバック信号をデジタルデータからアナログデータへと変換するための処理を記述している。

257 行目からは、サーボモータの回転の向きをリセットするメソッドを記述している。このメ
ソッドは、引数に入れられた値をそれぞれ配列に格納している。正方向での回転が右回りであることを基準として sv dir[] に格納される値が 1 のときは右回り、− 1 のときは左回りとしている。

270 行目から 272 行目にかけては、モータのスピードを指定して回転させるためのメソッドを記述している。このメソッドは、引数に動かしたいサーボモータのピンの値と回転させたい速度を用いる。指定したピンのサーボモータに、90 と指定したピンのサーボモータの向きを示す、1 か−

1 の値に回転させたい速度をかけた値を足すという処理を行っている。FB5311m は 360 度サーボ
モータであるため、停止させるための値を 90、正回転をさせたい場合は 91 以上、180 以下の数字を指定し、逆回転をさせたい場合は、89 以下、0 以上の値を入力する必要があり、本来のサーボ
モータとの扱い方が異なっていたため、このメソッドを用いることで従来のサーボモータのように扱うことを可能としている。

275 行目から 280 行目にかけては、A 相のサーボモータを一斉に回転させるためのメソッドを記述している。このメソッドは引数に回転させたい速度を用いる。A 相の各サーボモータに、サーボ
モータのピンの値と回転させたい速度を用いる。指定したピンのサーボモータに、90 と指定した
ピンのサーボモータの向きを示す、1 か− 1 の値に回転させたい速度をかけた値を足すという処理を行っている。そして、メイン以外のサーボモータに対しては、上記の処理をした値に− 10 から

10 の間で 0.05 に各サーボモータのメインのサーボモータのフィードバックとの差分とサーボモー
タの回転の向きをかけた値を足すという処理を行っている。これによって、メインのサーボモータとの同期を行うことが可能となっている。282 行目から 287 行目にかけての B 相での処理も同様であるため、解説を割愛する。

290 行目から 300 行目にかけては、デバッグ用としてサーボモータのフィードバックの値を出力するためのメソッドを記述している。この記述方法を行うことによってシリアルプロッタにも出力することが可能となっており、デバッグが行いやすくなっている。

303 行目から 313 行目にかけては、デバッグ用としてメインのサーボモータと他のサーボモータのフィードバックの差分を出力するためのメソッドを記述している。このメソッドも上記のフィー
ドバックの出力用のメソッドと同様にシリアルプロッタにも出力することが可能となっている。
（※文責: 飯田竜也）

Group Report of 2022 SISP

- 48 -

Group Number 10

Interaction Elements - Creating Elements for Future

第 3 章 中間発表会
3.1

Element.01「moodoor」

3.1.1

中間発表会に向けて

中間発表会に向けて、ドアのプロトタイプ作成、ドアの制作、プロモーション動画作成、発表資料作成を行った。中間発表の時点では、想定している性格の一部である「おくびょう」、「せっかち」
をプロトタイプとして制作した。制作では、ドアノブ部分を Arduino を使用して挙動の設定を行
い、人が部屋に入ろうと近づいてきたことを取得する距離センサ、ドアノブを実際に動かすサーボ
モータによって構成した。また、実際に動く様子が伝わるよう手を近づけるとドアノブが動く様子を映像として撮影し Adobe Premire Pro と Adobe After Eﬀects を用いて制作した。撮影場所は未来大学のアトリエを使用した。
（※文責: 日野真麻）

3.1.2

中間発表会でのフィードバックを受けて中間発表会時点の予定は、課題と目標がそれぞれ 1 つずつあった。課題は、ドアノブに手を近づけると、ドアノブが動くようにすると、実際にドアノブを握って部屋に入るときの弊害になる可能性がある点である。どこまで手を近づけると通常のドアノブのように挙動をやめ、本来のドアを開けるという機能に戻るかを策定する必要があった。そして目標は、これまでのプロトタイプでのドアノブの動きが「おくびょう」「せっかち」のみであったため、新たな感情の動きを追加することである。
中間発表会でのフィードバック及び質問でいくつかの課題点が挙げられた。以下は、フィード
バックで寄せられた意見である。

F : この Element は視覚と触覚に基づいたプロダクトであると説明があったが、視覚がメインに作られてることは感じたがドアノブに触る前にドアノブが動いていることから触覚にはあまり影響があるようには思えなかった。

F : 「せっかち」という挙動は人が触る前に勝手にドアノブが回るという挙動を設定していたが、せっかちな人はむしろ煩わしさを感じたりするのではないだろうかと感じた。

F : 動画について。BGM 付きの動画と解説を同時に行うのは集中しにくかったため、動画内で解説をするか、BGM をつけずに解説を行うかしたほうがいいと思った。

F : 「やってみたこと」の報告になっているように感じた。本 Element の技術的, 学術的な意義について、また、メタ的なレベルから自分たちの活動の意義について語ってほしかった。

Group Report of 2022 SISP

- 49 -

Group Number 10

Interaction Elements - Creating Elements for Future
F : ユーザはどんな感情を持つのか、その結果どのような行動をするのか、その情感・行動はユーザにとって望ましいものなのかどうか、次回の体験にどう影響があるのか、も考慮し全体をデザインできるとよいと思った。

F : 「おくびょう」「せっかち」の両方でドアノブが勝手に動くことで人間の手が驚いたように離れていったが、それだとドアをすぐ開けられないので短期的に見るとユーザの行動を阻害することになるが、設計者的にはそれでよいのか。
また、以下は中間発表会での質問とそれに対する回答である。

Q : ドアを使ってどういう体験ができるというのは考えているのか？ どういう感情になってほしいのか、などあるか。

A : 重い空気の漂う会議を行っている部屋に入室する際、「おくびょう」なドアノブがふるふるすることで入る人が部屋の先の様子を察知し一呼吸おけるというような、ドアの先を予測できる体
験を提供できるのではと考えている。

Q : 感情はランダムなのか、部屋によって変わるのか。
A : 部屋によって変わることを想定している。
これらのフィードバック及び質問により、本 Element の方針転換を行った。まず、グループ内
でドアノブが表現する感情の整理やその感情を表現する理由の理論が確立しておらず、再考する必要がでてきた。そして、質問にもあった「ドアノブが動いている様子をみて使用者にどのような感情になってほしいのか」について明確な回答をすることができなかったため、今一度ドアノブの動きに対する人間の感情を深掘りする必要がでてきた。また、ドアノブが感情を持ったような挙動をすることによって得られるものが、我々の「ドアノブで直感的に部屋の様子を感じてほしい」という目標とずれていると判断したため、ドアノブが感情を持って動くのではなく、部屋の雰囲気をドアノブが見える形で伝えるというコンセプトに変更となった。それによって、ドアノブ単体の感情である「おくびょう」や「せっかち」という動きをドアを設置する場所ごとに変更するのではなく、すべての部屋で部屋全体が「喜び」「悲しみ」という雰囲気に包まれていることを表すような動きを再考することとなった。また、「DOOR NOVA」という Element 名ではどのような Element か
わかりにくいという問題点が浮上したため、新たな Element 名を考えることとなった。
（※文責: 日野真麻）

3.2

Element.02「SKYFLAP」

3.2.1

中間発表会に向けて

中間発表会の時点では、本体サイズ 60mm × 77mm で、１ユニットが 70mm × 80mm の機構のプロトタイプを制作した。最終的には実際に制作する Element に今回制作したプロトタイプの機構を導入する予定であったが、モータ設置との兼ね合いもあり、Element の奥行きのサイズは未定であった。中間発表では、どのように動くのかを聴者が想像しやすいように、反転フラップ式機構を再現したプロトタイプに加え、完成後のイメージを動画、インフォグラフィックスを制作し再Group Report of 2022 SISP

- 50 -

Group Number 10

Interaction Elements - Creating Elements for Future現した。

図 3.1: 完成後のイメージ（左）と機構のプロトタイプ（右）（※文責: 佐藤涼香）

3.2.2

中間発表会でのフィードバックを受けて以下は中間発表会での質問とそれに対する回答である。

Q ： 夕焼けの画像は事前に撮影した画像ですか？ それともライブの景色ですか？
A ： 自分たち（機会がリアルタイム）が撮った、その日の夕焼け画像です。
Q ： どんな空でも対応していますか？
A ： 夕焼けにフォーカスして制作しているので、昼の空の表現は不可能となっています。
Q ： SKY FLAP は人からの働きかけがないので Interaction Element といえないのではないですか？

A ：確かにそうかもしれません。Interaction Element の定義を今一度考え直して、Element がその意に沿ったものになっているか検討する必要があると思います。

Q ： 未来の部品を作る中であえて解像度を落とす意図を教えてください。
A ： 解像度を落とすことで色の抽出ができるためです。また、アナログで空の色を表現するという Element であるため、解像度を落としました。

Q ： この Element はリアルタイムで動きますか？
A ： 画像の取り出しの時間は決められています。決められた時間になると、その日の夕焼けの画像を表現する色になるまでフラップが一斉に回転します。
アドバイス ： 人が通った時にぱらぱらって変わったら面白いのではないかと思いました。たとえば地下鉄などに設置するのはどうでしょうか。
→とても面白いアイデアではありますが、画像を数枚撮影して読み込む必要があるので難しいです。
これらの質問やアドバイスを受けて、Element 作成のフィードバックを行った。

Group Report of 2022 SISP

- 51 -

Group Number 10

Interaction Elements - Creating Elements for Future
一番大きな課題として、夕焼けの色を何色使い、またそれらの色はどこからどのようにして抽出するか、であった。１つのユニットに含むことができるフラップ紙の量が限られているなかで、如
何に夕焼けのグラデーションを美しく見せられるかよく討論した。また、夕焼けの色については、目で直接見たときの夕焼けの色と、記憶に残っている美しいと感じる夕焼けの色は全く違う後者のほうが色が濃く鮮明であるため、未来大から撮影した夕焼けの写真の彩度を上げることで、より美
しいグラデーションが完成するという意見でまとまった。
また、「SKY FLAP は人からの働きかけがないので Interaction Element といえないのではないですか？」という問いかけがあったが、発表会当時はうまく受け答えができなかった。それは、この質問に対して納得してしまった部分があったからである。しかしフィードバックを通して、 絵画として鑑賞できる Element をコンセプトとして制作するので、自然と人とのインタラクションの仲介の役割をもち、それは Interaction Element である、と位置づけて良いという結論に至った。
（※文責: 佐藤涼香）

3.3

Element.03「うぇ〜ぶる」

3.3.1

中間発表会に向けて

本グループは視覚的な効果を利用して、他者に影響を与えることのできる Element を制作したいメンバが集まったため、視覚に注目して作品テーマを考えた。これは、メンバが制作した生の Interaction Elements 図鑑を参考にしたり、メンバそれぞれがどんなものが作りたいか、どんなことができるのかについて話し合いながら考えた。そして、メンバの一人が生の Interaction

Elements 図鑑に波の動きを取り入れた作品を考えていたことから、波の動きが持つ心地よさに注目し、話し合いを進めた。波の動きについてより詳細に話し合ったり、既存の研究と似たような作品にならないようにインターネットで先行研究を調べたりしていくうちに、波で物が流れ着く要素が作品に活かせそうだと考え、机上が波のように変形しその上に乗っている物体が動く机のElement を制作することにした。次に、どのようなユーザのアクションで波の動きの反応が欲しいかを検討した。これには、縦 1m 横 2m ほどの布を空中で広げて持つ人が三人、布の下で待機する
人を一人用意し、その布の前でユーザが手を動かすと、布の下にいる人が手を入れ、布に盛り上がりを作り布の上にある物体を、ユーザの近くに寄せるという、簡易的な波の動きによる物体の移動の体験も行った。この簡易的な作品の体験から、物体を自分に寄せるような手の動きで、机上に波の動きができ、物体が自分側に寄ってくると心地良いのではないかと考え、手の前後左右の動きで天板が波のように変形し、その上にある物体が波の動きによって、自分の近くまで寄ってくるという面白い体験ができる机、うぇ〜ぶるを制作することに決定した。ここで、うぇ〜ぶるという作品
名は机上が波のように変形する机ということから、Wave（波）と机（Table）という単語を組み合わせて考えたものである。
理想の動きの実装方法として、まず天板が変形するようにしたかったため、MDF という木材を曲げる方法を考え、特殊な切れ込みを入れることで曲がる MDF のプロトタイプを制作することにした。この特殊な切れ込みについてインターネットで調べたり、工房管理者の人と相談したりしながら、Adobe Illustrator で MDF の厚さや特殊な切れ込みの形が違う、数種類のパーツデータを制作した。そして、そのデータを元に MDF をレーザーカッターで加工した。結果、厚い MDF（５. ５ mm）よりも薄い MDF（３ mm）の方が曲げることが可能だったが、一方向にしか曲がらない物が多く、変形度合いも小さかった。加えて、MDF が薄いと天板としての頑丈さに欠けた。

Group Report of 2022 SISP

- 52 -

Group Number 10

Interaction Elements - Creating Elements for Future
そのため別の実装方法を考えることにした。次に、伸縮性のあるシートに正三角形の MDF（５.
５ mm）を隙間を開けて貼り付けることで、３方向に変形する方法を考え、プロトタイプを制作することにした。伸縮性のあるシートは、ホームセンターで購入し、正三角形の MDF のパーツはAdobe Illustrator でデータを制作、そのデータを元に５. ５ mm の MDF をレーザーカッターで加工し制作した。結果、天板自体は良く曲がり、３方向に変形するが、MDF が厚く重いため伸縮性のあるシートが大きくたわんでしまい、机として機能できない状態になってしまった。加えて、下からこのシートを持ち上げておく機構を考えることができなかった。そのため別の実装方法を考えることにした。次にカムの機構を利用する方法や、モータで天板を細かく制御する方法を考えたが、これらの方法を使った類似するプロジェクト [3.3.1-1] が存在したため却下になった。次に平行リンク機構を使用し波の形のパーツが交互に動く方法を考え、プロトタイプを制作した。波の形をしたパーツがこのような動きをすることで、天板の凹凸箇所が変化し、その変化した凹凸箇所の動きに合わせて天板にある物体が動かされる仕組みである。波の形をしたパーツは凹凸箇所を作るた
め、波の形が異なる二種類のデータを Adobe Illustrator で制作、そのデータを元にレーザーカッ
ターで加工し制作した。素材は平行リンク機構がこのパーツを支えられるように、スチレンボードという軽く耐久が強い素材で制作した。平行リンク機構は、この機構についてインターネットで調べ、機構の構造を観察、Adobe Illustrator でパーツデータを制作し、そのデータを元に３ mm の

MDF をレーザーカッターで加工して制作した。結果、天板である波の形をしたパーツが回転の動きのみで波のように交互に動き、滑らかに上にある物体が左右２方向に動いた。しかし、前後の動きが実装できなかったため別の実装方法を考えることにした。次に、波の形をしたパーツをサーボ
モータによって回転運動で交互に動かす方法を考えた。波の形をしたパーツは、平衡リンク機構の時と同じく波の形が異なる二種類を使用する。CG モデリングでこの動きをシュミレーションをす
ると、天板の上にある物体が左右の動きだけでなく、前後の動きも可能であったため、この方法を中間発表での作品の実装方法とすることにした。
中間発表会に向けて、波の形をしたパーツをサーボモータによって回転運動で交互に動かす方法を使用した作品のプロトタイプや、CG モデリングのシュミレーション動画、ポスター、発表資料、プロモーション動画を制作した。まず、プロトタイプについては中間発表会の成果物として見せられるように大きめのプロトタイプを制作することにした。そのため波の形をしたパーツは、Adobe

Illustrator で新たにサイズが大きめの二種類のパーツデータを制作し、そのデータを元にスチレンボードをレーザーカッターで加工した。ここでスチレンボードは天板下の機構が天板を支えられる
よう、軽く耐久が強い素材にした。加えて机に見えるよう、木材をのこぎりやねじを使用して加工し、机のような足が付いた箱の形の枠組みを制作した。しかし、サーボモータは中間発表会までに発注が間に合わなかったため、このプロトタイプは作品の大きさや見た目が分かるプロトタイプとして展示することにし、サーボモータの動きは CG モデリングのシュミレーションを動画として見せることで伝えることにした。ポスター、発表資料、プロモーション動画はその作業が得意な人
や、作業量を考えグループメンバで作業を分担した。まずグループＣが担当した範囲のポスターについては、昨年の Interaction Elements のポスターを参考に、Interaction Elements としてトーン＆マナー（フォント、フォントの大きさ、基調の色合い）や、載せる情報を決定していたため、その規定に従い制作した。具体的に用意したものは、作品を端的に表す一言、作品の写真、どのような作品なのかがわかる文章、機構の説明、機構のインフォグラフィックスである。どのような作品なのかと機構説明はレイアウトを整えるために決められた文字数で制作した。加えて英語バージョンも制作した。作品の写真はプロトタイプの写真を Adobe Photoshop で加工し、作品を完成系に近づけることで、作品を大きく見せるものにした。インフォグラフィックスは Adobe Illustrator

Group Report of 2022 SISP

- 53 -

Group Number 10

Interaction Elements - Creating Elements for Future
で制作し、メインの動きである波の形をしたパーツの動きの機構について伝えるものにした。インフォグラフィクスはトーン＆マナーが合うように色合いを基本灰色、ポイントカラーとして青色とオレンジ色を使用し、他のグループと統一感が出るようにした。次にグループＣが担当した範囲の発表資料については、昨年の Interaction Elements の発表資料を参考に、Interaction Elements
としてトーン＆マナー（フォント、フォントの大きさ、基調の色合い）や、載せる情報を決定していたため、その規定に従い制作した。１ページ目は Element 名やグループ名、グループメンバが載った、表紙のページになるようにした。２ページ目では、うぇ〜ぶるとは机と波を組み合わせた

Element であると、作品について端的に紹介した。机上が波のように変形するという最大の特徴も口頭で紹介した。３ページ、４ページ目では、なぜ波と机に注目したのかについて紹介した。まず波については、波が持つ流動性のある動きに面白さを感じ、製品としてあまりない動きから意外性が生まれるのではないかと考えたことや、机上が波のように変形しその動きによって机上の物体が動くことで、今までのテーブルの使い方にはなかった発見や体験をすることができるのではないかと考えたことを伝えた。次に机については、普段静的なテーブルが動的に動くというギャップ

が新規性に繋がると感じたことや、これまでテーブル全体が動くものはほとんどなく、Interaction

Elements が目的とする 未来の部品 が生まれるのではないかと考えたことを伝えた。５ページ
目では、ポスターに載せるために制作したインフォグラフィックスを載せ、それを見せながら波が上下左右にスライドすることによって天板上にある対象物が動く機構について説明できるようにした。機構の説明に加えて、この動きはきちんと物体を動かせるようにすることや、本物の波のよ
うに美しく動作するような機構にしたいと考えていることも伝えた。次にプロモーション動画は、
昨年の Interaction Elements のプロモーション動画を参考に、Interaction Elements としてトーン＆マナー（フォント、フォントの大きさ、基調の色合い）や、おおまかな動画の尺、ＢＧＭを決定していたため、その規定に従い制作した。グループ C は機構を伝えることを目的としたプロモーション動画を制作することにし、CG モデリングで制作された、うぇ〜ぶるの動作についての動画をメインで伝えるものにした。機構制作は CG モデリングだけでなく、MDF やスチレンボー
ドを使用したプロトタイプも制作してきたことを伝えるため、一番初めのカットや最後のカットには、プロトタイプの写真や動画を使用した。このようにプロトタイプの制作風景も載せることで、作品を大きく見せることを狙っている。これらの中間発表会に向けての作業は水曜の４，５限、金曜の４，５限というプロジェクトで割り当てられた時間以外も、メンバそれぞれで作業を行った。

図 3.2: 制作風景

Group Report of 2022 SISP

- 54 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 3.3: 中間発表時の機構 インフォグラフィックス

図 3.4: CG モデリング画像（※文責: 桒原佐紀）3.3.2

中間発表会でのフィードバックを受けてグループ C のうぇ〜ぶるに関連する内容で得られたコメントは「アイデアが面白く、それぞれのグループの作品が個性的で良かった。」「実際のものがあって分かりやすかった。」「単にやってみたことの報告になっているように感じた。このプロジェクトの技術的、社会的、あるいは学術的な意義についても、知りたかった。メタ的なレベルから、自分たちの活動の意義について語ってほしかった。 一方、未来を形作るというゴール設定は抽象度が高すぎて、そのために具体的に何をやるべきなのか、それによって何を目指しているのか、どうなったらそれらが達成されたと言えるのかがよく分らなかった。みなさんの取り組みによって人や社会がどう変わっていくのかが、よく分からなかった。 あと、どのあたりが技術的な挑戦、新規性なのか、もう少し詳しい説明があるとよかった。」「目的、どのように楽しめるのかがあまりよく分からなかった。」「 ユーザがどうなって欲しいのかを発表内容に盛り込んでもらえるとイメージがつきやすくなると感じた。」「グルー
プ C ほぼ絶対的に静的である机に動的な要素を足す発想はとても面白いと思ったが、目的がものを運ぶだけだともったいないと考えた。実際にものを運ぶ机は前例があったりするため、もっと静的なものを動的にするというところに着目すると良いと思った。 」「各作品によってユーザはどんな情感を持つのか、その結果どのような行動をするのか、その情感・行動はユーザにとって望ましいものなのかどうか、次回の体験にどう影響があるのか、も考慮し全体をデザインできるとよいと思った。うぇ〜ぶるはとても面白い機構だと思いますが、いつ・どのように使う想定なのか分からなかった。 どんな場所・場面で活きる体験なのかを整理できると、魅力的な Element になると考える。」「今のサーボモータによって波のような形をしたパーツを制御する方法は一つ一つ制御する

Group Report of 2022 SISP

- 55 -

Group Number 10

Interaction Elements - Creating Elements for Future
先行研究と似ていると思う。」などがあった。アイデアの面白さについては、「身近な心地よいこと図鑑」「ネタ帳」さらにネタ帳の作りこみ、そしてグループＣではそれを元にした議論を行ったた
め、面白い発想にいたることができた。グループＣの作品については机の Element であることか
ら、中間発表用のプロトタイプは小さめの机ほどの大きさで制作したことで、理想とする Element
へのイメージがしやすいプロトタイプになった。自分たちの活動の意義については、メタ的なレベルから考える努力が不足していた。加えて、ゴール設定や技術的な新規性についての理由が具体性に欠けていた。そのため今後は、論理的、学術的な視点でプロジェクトを進める目を今よりも強く持ち、講究を行うことにした。例えば、グループ C では技術的な新規性の意味を深めるために、先行研究をより深く調べ、先行研究とうぇ〜ぶるの違いをよく研究し、先行研究と異なる点を伸ばすような作品制作を目指した。うぇ〜ぶるの目的や楽しさについては、グループＣでは Element の特徴や機構の説明に重きを置きすぎ、これの目的や楽しさについての言及が、おろそかになってしまっていた。そのため期末発表会では Element の魅力である、ユーザのアクションで机上が波のような動き、その上にある物体が動くという体験がより伝わるような構成にしようと考えた。ユー
ザにどうなって欲しいかについては深く考えれていなかったため、グループ C では、様々な人にプ
ロトタイプを体験してもらうことで、ユーザへの影響を具体的に考えることにした。Element の目
的について、グループ C では自分のアクションによって上にある物体が近くに寄ってくるという利便性が重要なのか、自分のアクションによって机上が波のように変形し、上にある物体に影響するという体験が重要なのかについて改めて議論した。結果、うぇ〜ぶるでユーザに楽しさを感させるような影響を与えたいことがメンバ全体での総意だったため、自分のアクションによって物体が運ばれるという利便性よりも、自分のアクションによって机上が変形して上にある物体に影響があるという視覚的な楽しさを目的とすることに決定した。Element のいつ・だれが・どこで使うかについては、使われるときの状況分析に欠けていたため、グループ C では、新たに考えた Elementの目的から、楽しい体験をしたいユーザが、机を使用しているとき、室内でなど、細かく使われる
ときの状況を考えた。機構について、今の波のような形をしたパーツをサーボモータによって制御する機構は、先行研究と細かく制御するという点で似ているため機構について考え直した。そして、丸と四角の穴を開けた波の形をしたパーツと棒を組み合わせた新たな機構を考えた。これは四角のすきまに棒を差し込み、丸い穴の範囲を棒が自由に動けることで、複数の波の形のパーツを同時に回転運動させる機構である。中間発表会で実装した方法よりは一つのサーボモータで複数の波のような形のパーツを制御できることが、先行研究との違いだと考えた。この機構は天板上の物体
を左右に動かすことを可能にするだけでなく、下からパーツを持ち上げる機構と合わせることで天板が上下に動き、物体を前後に動かすことも可能になる。これらによって物体を４方向に動かすことも可能となり、夏休み前のプロジェクト最終活動日では、この機構を最終機構とし制作を進める
方向に決定した。
（※文責: 桒原佐紀）3.4

動画制作・Web サイト・ポスター制作

デザインコンセプト

Web・ポスターのデザインは、統一感を出すため、白を基調としたモノトーンな色使いを意識した。意図としては、Interaction Elements という未来の部品を制作するプロジェクトとして、色褪
せないシンプルなデザインを取り入れた。

Group Report of 2022 SISP

- 56 -

Group Number 10

Interaction Elements - Creating Elements for Future（※文責: 新保冴弥）

3.4.1

動画制作

動画制作では各グループのイメージ映像の制作を行った。撮影は全て未来大学の学内にあるアトリエでホワイトバックを使用して行った。それぞれの素材を編集して各グループ 1 つ合計 3 つの動画を制作した。映像の編集と BGM の追加には Adobe の Premiere Pro、モーショングラフィッ
クスの作成は After Eﬀects、特殊な図形素材の制作には Illustrator を用いて制作した。また、本プロジェクトの雰囲気を明確にするため、3 つの制作物全ての動画でフォント、モーション、BGMといったトーン&マナーを揃えてそれぞれのグループの動画担当が制作にあたり、全ての動画を制作物の概要、機構、実際に動く様子の流れで制作し、統一感をもたせた。
（※文責: 日野真麻）

3.4.2

Web 制作

デザイン工程Web 制作の流れは、まずどんな情報を入れるか、どこでなにを見せたいかを決定した。Figmaを用いて Web のプロトタイプを制作した。まずホーム画面では、ロゴと本プロジェクトのテーマを入れることで何のプロジェクトのホームページで、何を目的としているかがすぐにわかるようにした。そして、下にスクロールできることを促すために、円形を 3 つ用いたユニークなデザインを用いた。次に下にスクロールしていくことで、より具体的なプロジェクトのテーマ説明を表示させた。そしてその下には、それぞれのグループが制作した Elements のタイトルと簡単な説明、そして正方形の画像を並べた。さらにその下にメンバや先生の名前を全員分紹介した。ホーム画面で特にこだわった点としては、ヘッダーに載せる情報と、トップへ戻ることを促すボタンを配置したことである。ヘッダーに関しては、ホームに戻るボタンの「Home」、それぞれのグループに遷移するためのボタン「Group A」、「Group B」、「Group C」を配置した。トップに戻るボタンに関しては、「TOP」という表記と共に、あえて矢印を使わない円形を 3 つ用いたデザインにした。次に、それぞれのグループに関するページについて説明していく。まずユーザが見やすいように、どのグループも情報の構成は変えずに、デザインした。構成としては、まずトップにその画像を大きく配置し、インパクトのあるデザインを目指した。次に、その Element の Prototype（試作した段階のもの）を画像付きで説明した。そしてその下で Mechanism（機構）をインフォグラフィック
スで説明し、加えてその下で Process（作業の工程）を画像付きで説明した。まだ用意できていな
い映像や写真・図解・文章はダミーを配置して、素材を挿入するだけの状態にしておいた。そこから、必要な映像作成と画像や図解、文章作成の依頼を各グループの担当に指示し、制作を進めた。
また、プロトタイプを作成することによって、早い段階でコーディング担当に、大まかなイメージの共有と実装を任せることができた。
（※文責: 傍士靖文）

Group Report of 2022 SISP

- 57 -

Group Number 10

Interaction Elements - Creating Elements for Future

コーディング工程
コーディングは Visual Studio Code の環境にて、HTML/CSS/JavaScript を用いて行った。文
字や写真、横幅などの大きさは、Figma で決めたレイアウトに沿って指定した。スマートフォン等の小型画面に対応できるように、レスポンシブ化をするのが今後の課題である。制作期間はおよそ1 週間を要した。
（※文責: 傍士靖文）

サーバー
プロジェクトの Web サイトの公開には Heroku を用いた。はじめ、GitHub Pages を使用する案もあったが、こちらではなく Heroku を用いることで、Web ページに JavaScript の使用を可能にし、ページに動きを取り入れた。
（※文責: 傍士靖文）

3.4.3

ポスター制作

ポスターは Adobe Illustrator で制作した。タイトルや文章のフォントを Web サイトと合わせることにより、デザインのコンセプトをプロジェクト内で統一した。また、Interaction Elementsのロゴをタイトルの左隣に大きく配置することで強調させ、プロジェクトのイメージ付けがされる
ように意識した。また、Element の紹介部分では、概要文と、仕組みについての詳細を説明している文を分けることで、Element の概要が簡潔に伝わるような工夫をした。仕組みの説明の文の上にはそれを説明するインフォグラフィックスを入れ、構造についての理解が深まるよう目指した。各Element のインフォグラフィックスは各グループのデザイン担当に大まかなパスデータを作成してもらい、アートディレクターが最終調整を行った。ここでは、インフォグラフィックのカラーをElement の写真の色味に合わせて調節することで、全体として統一感のあるポスターに仕上げた。
しかし、インフォグラフィックの線や塗り方のトンマナが揃っていないという改善点があった。トンマナとは、トーン（tone）＆マナー（manner）の略称で、デザインにおいてコンセプトや雰囲
気に一貫性をもたせ、ユーザに与える印象を統一させるためのルールである。トンマナを更に細かく設定し、全体の統一感を向上させていきたい。さらに、使用している写真では、Element の全体像が分からない、もしくは写真に対して Element が小さいなどの改善点も見受けられた。最終発表で使用するポスターでは、これらのことに気を付けて改善していきたい。
（※文責: 松岡美佑）

Group Report of 2022 SISP

- 58 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 3.5: 中間発表時のポスター

3.5

発表方法

3.5.1

プレゼンテーション用スライド資料

プレゼンテーション資料は、オンライン上でプロジェクトメンバが相互に編集しやすい環境を構築するために Microsoft PowerPoint の共有機能を用いて作成した。デザイン統括担当のメンバからフォントの種類や、大きさ、色調などのデザインルールを共有してもらい、それに沿って作成した。白を基調としたモノトーンな色使いを意識し、色褪せないシンプルなデザインを取り入れて作成した。Web サイト・ポスターと共通のデザインルールの元、スライドを作成したため、発表会のブースでも浮かない統一されたスライド資料となった。また、右下にロゴをいれたレイアウトとし、スライド全体の印象を強めた。
（※文責: 新保冴弥）

Group Report of 2022 SISP

- 59 -

Group Number 10

Interaction Elements - Creating Elements for Future

スライドの構成もくじ
約 10 分間のプレゼンテーションのため、全体の概要を示すもくじを作成した。もくじでは、当日説明する内容について大きく触れ、順を追って説明していくことを伝えるページとした。
（※文責: 新保冴弥）

メンバ
プロジェクトメンバが学生 15 名、担当教員 4 名という大所帯のプロジェクトのため、個人の詳細なプロフィールではなく、学生と教員という見出しの元、氏名を列挙し、プロジェクト風景の写真を掲載した。
（※文責: 新保冴弥）

Interaction Elements とは作成した Element の紹介に入る前に、まず Interaction Elements とは何かを伝えるページ作成
した。身近でわかりやすいドアノブ・電気のスイッチ・点字ブロックを例に挙げた。また、説明的な文章として、１文程度で Interaction Elements の概要を説明した。
（※文責: 新保冴弥）

制作プロセス -図鑑の作成実際に Element の作成に入る前に、オノマトペを使った「生の Interaction Elements 図鑑」と称した図鑑の紹介を行った。ただ、図鑑を載せるだけではなく、この図鑑の作成が身体表現や五感を言語化し、制作につなげるための訓練であることを中心としたページとした。
（※文責: 新保冴弥）

制作プロセス -マッピング作成した図鑑から、マッピングをおこなって、アイデア出ししたことを紹介するページを作成した。ディスカッションにつなげていったプロセスを説明することのできるページとして作成し、順をおった説明とした。
（※文責: 新保冴弥）

制作プロセス-アイデア出しマッピングから続けて、アイデア出しのプロセスをさらに掘り下げて段階的に紹介するページとし、具体的な構成を伝えられるページとした。
（※文責: 新保冴弥）

Group Report of 2022 SISP

- 60 -

Group Number 10

Interaction Elements - Creating Elements for Future

提案プロダクト
各 Element が前述した図鑑→マッピング→アイデア出しというプロセスから着想したものであることを説明するために、特に大切にした五感を強調し、各 Element の紹介をした。
（※文責: 新保冴弥）

グループによる Element の紹介
全グループで構成を統一し、Element の概要→コンセプト→機構→映像という構成で行った。各グループが中間報告時までに完成している Element の写真や資料を組み込むことで、これからの展望を見せる Element の紹介とした。
（※文責: 新保冴弥）

今後の日程
中間発表後から成果発表会へ向けての制作スケジュールを大まかに掲載した。初めは各グループ内に掲載することを検討していたが、冗長かつ似た部分が多かったため全グループ紹介後に日程のページを設けた。
（※文責: 新保冴弥）

Web・ポスター
Web ページは机上においた QR コードから見ることができたが、大まかな紹介のために１ペー
ジ目のスクリーンショットを掲載した。ポスターも同様に、発表ブースに展示していたが、制作したことの紹介のためにページを設けた。
（※文責: 新保冴弥）

3.5.2

プレゼンテーション方法

プロジェクト学習の発表会はオープンスペースで行われることから、他のプロジェクトに発表内
容をかき消されたり、ぼやけてしまわないための自分達らしい発表会を意識したプレゼンテーショ
ンを心がけて行った。声量面ではマイクなどの用意はできなかったため、発表者 1 人 1 人が、発表
ブース全体に届くような声量、滑舌を意識することで聞き取りやすく感じられる発表とした。
（※文責: 新保冴弥）

Group Report of 2022 SISP

- 61 -

Group Number 10

Interaction Elements - Creating Elements for Future

第4章

成果発表会

4.1

Element.01「moodoor」

4.1.1

成果発表会に向けて

私たちは成果発表会に向けて Element 制作のほかに、ロゴ制作、プロモーション動画作成、インフォグラフィックスの作成、発表資料の作成を行った。Element 制作では、これまで直方体の角ばった形をとっていたドアノブから一転し、全体的に丸みを帯びた親しみやすいフォルムのドアノ
ブを MDF を重ねることによって制作した。なお、形状は印象調査の結果から決定した。また、中間発表会から大きく変更したのがドアノブの挙動についてである。中間発表会の時点では、部屋に入ろうと人が近づいて来るとドアノブが感情を持ったように動くことを想定していたが、成果発表
会ではドア周辺に人がいないときに部屋の雰囲気を遠目からでも判断できるようにドアノブが動き、部屋に入ろうと人が近づいてきたときに動きをやめて本来のドアノブの位置に戻るという挙動に変更を加えた。これによって中間発表会のときに発生していた「どの時点で挙動をやめ、本来のドアを開けるというドアノブの機能に戻るか」を解決することができた。そして、中間発表会の時
点で制作したプロトタイプでは部屋に入ろうと人が近づいてきたことを取得するために距離センサを使用していたが、正面の一定の方向と角度からでしか反応しにくいことを受け、使用するセンサ
を人感センサに変更した。これによって斜めから人が近づいてきてもドアノブが反応して元の位置に戻るような挙動を実現した。また、中間発表会の時点で制作したプロトタイプには部屋の中の雰
囲気を判断するための機構が取り付けられていなかったため、新たに部屋の向こう側にマイクを設置することで部屋の音量を取得し、それによって部屋の賑やかさを判定できるようにした。ロゴ制
作では中間発表での Element 名「DOOR NOVA」からコンセプトの再設定によって「moodoor」に変更となったため、新たにロゴを制作した。ロゴは画像検索サイト Pinterest で資料を集め他のフォントを用いずに Adobe Illustrator で作成した。また、動画に使用する映像の撮影会では、ホワイトバックと照明を用いて、かつ Element を撮影する角度にもこだわり、見栄えが良くなる努力をした。撮影内容は、「喜び」と「悲しみ」のそれぞれの動きの撮影、また人が近づいたときに人感センサが反応し動きが止まる様子の撮影を行った。また、Web サイトや発表資料に使用するため、ドアノブをアップした写真、Element の全体写真も撮影した。これらの撮影は未来大学のアトリエで行った。撮影した映像から Adobe Premire Pro と Adobe After Eﬀects を用いて編集し、部屋の雰囲気によってドアノブが動く様子と人が近づくことによってドアノブが元の位置に戻る様子をモーションとイラストを用いてプロモーション動画を作成した。インフォグラフィックス
は中間発表からコンセプトや機構を変更したため、新たに制作した。部屋の雰囲気をマイクによって音量をもとに取得し、ドアノブに反映する様子と部屋の外から人が部屋に入ろうとドアに近づくと、人感センサが反応しドアノブが元の位置に戻る様子がわかるものを Adobe Illustrator を用いて作成した。これらのインフォグラフィックスは発表に使用する動画や発表資料、ポスター、Web
サイトに利用した。発表資料では、Figma を用いてスライド資料を作成した。Element のコンセ
プト、メカニズム、印象調査の概要、調査の結果及び調査から決定したドアノブの形状と動きという構成で制作し、発表時間が 5 分程度となるように調整した。

Group Report of 2022 SISP

- 62 -

Group Number 10

Interaction Elements - Creating Elements for Future（※文責: 日野真麻）

4.1.2

成果発表会でのフィードバックを受けて成果発表会での質問及びフィードバックを受けて、今後の改善点が明確になった。まず、フィードバックでは、以下の内容が挙げられた。

F : 存在感や面白さは十分に伝わったし、良く開発されていて興味深かったが、もっと社会実用の可能性などを徹底的に考え詰めてみてほしいと感じた。

F : ドアノブが実用的で面白いと思った。ただ、サーボモータの音が若干うるさいと感じたため、より静かな音で動作できるとよりよい Element になると感じた。

F : 喜びと悲しみによってドアノブが揺れるのは良かったがそれ以外の感情でも揺れると良かった。

F : 想定している利用シーンとかを一緒に説明してもらえると、分かりやすかったと感じた。
また、以下は成果発表会での質問とそれに対する回答である。

Q : ドアの向こうの雰囲気を表現するならディスプレイでも良いのではないだろうか？
A : 本 Element は「未来を形作る部品」の作成を目標としている。それは今あるものに様々な機構を取り付けることで、新たな機能や意味を持たせたり、課題解決につながるような Elementを作成することである。そして本プロジェクトの題にある「Interaction Elements」は人と外界の相互作用をより直感的に伝わるような Element の提案をすることを目標としている。そのなかで、
ディスプレイによる雰囲気の表示とドアノブによる雰囲気の提示ではドアノブのほうがより直感的に伝わりやすいと判断した。よって、「ドアノブ」に「ディスプレイ」という全く異なる製品を取り付けるのではなく、「ドアノブ」単体で直感的に雰囲気が伝わるような、新たな可能性を提示するようにした。

Q : 雰囲気読むのになぜ音量なのか
A : 現状では雰囲気を「部屋の賑やかさ」の差異だと判断している。部屋の賑やかさとは会話量の違いによって変わるものだと考え、部屋のなかの音量をマイクによってとることで現在どれほど部屋が賑わっているのかを判断し、雰囲気に反映することとした。また、マイクは継続的に取得した音のデータを 1 秒間隔で平均を取り、その直近 16 秒間のデータのうち最大値と最小値を除いた

14 サンプルの合計値によって賑やかさを算出しているため、突発的に発生した大きな音によって雰囲気を誤判断することがないように対策を施した。

Q : 作っている上で困ったことを説明してほしい。
A : 印象調査によってドアノブの動きからどのような印象を受けるかを調査したが、検証する項
目を「形状」を 4 項目、「振れ幅」を 3 段階、「速度」を 3 段階、「基準角の位置」を 5 段階と多くしてしまったため、集めたデータで変数が乱立することとなってしまい分析することに難航した。

Group Report of 2022 SISP

- 63 -

Group Number 10

Interaction Elements - Creating Elements for Future
これらによって、今後の改善点及び展望として以下の点が挙げられる。まず、フィードバックにもあったように現状「喜び」と「悲しみ」しか表現できる雰囲気がなく、これだけで部屋の雰囲気を余すことなく伝えることは難しいため、「喜び」と「悲しみ」以外にも雰囲気のバリエーションを増やす必要がある。また、これまでは部屋の雰囲気を取得するためにマイクを使用し音量の大小をデータとして取得していたが、新たに部屋の雰囲気を感じ取る要素として、部屋の中の人の表情、声のトーンなどを利用することでより解像度の高い「雰囲気」を感じ取れるようにすることが挙げられる。また、どの時点でドアノブがドアを開けるという元々のドアノブの機能に戻るかという問
題は解決したが、モータで動かしているドアノブを人の手で回してドアのラッチを開けるという挙動がモータの都合上難しいためさらにドアノブを動かす内部構造を改良する必要がある。成果発表
会でのフィードバックを受けて、本 Element はまだ多くの改良余地が残っていること、それに伴う対応できるものの増加や拡張性の広がりがあることがわかった。この Element が様々な現場でどう使用されてどう応用していくべきなのか、活用例が出てくることを望む。
（※文責: 日野真麻）

4.2

Element.02「SKYFLAP」

4.2.1

成果発表会に向けて

私たちは成果発表会に向けた制作のほかに、制作物の撮影やインフォグラフィックス、発表会のスライドの制作にもこだわった。成果発表会では、Element の内側の機構を見せるために透明なアクリルを使用し、機構の動きやからくりを発表を聞いている人達が容易に理解できるような説明をする努力をした。中間発表時に全体をＭＤＦで制作する案が出ていたが、成果発表に向けて、黒ア
クリルを使用した制作に変更した。その理由として、加工のしやすさと耐久性を兼ね備えており、
本 Element を見た時に機構の中にある他のフラップの色に対して干渉することなく夕焼けの色を表現できると考えたからである。また、フラップ部分の紙を頑丈で光が反射しにくい上質紙を使用することで、フラップ自体の耐久性に考慮した。撮影会では背景や照明にこだわることで、制作物の見せ方についても試行を繰り返した。これらの撮影は、公立はこだて未来大学のアトリエや１階の円卓で行った。撮影した動画から Adobe After Eﬀects を用いて編集したプロモーションムー
ビーの内容として、コンセプトと機構の紹介をする 30 秒の動画を 1 つ制作した。プロモーション
動画は中間発表時に使用した編集ファイルを改善し、使用している雰囲気がわかるような動画を心がけた。
インフォグラフィックスの制作は中間発表会に向けて制作したものから改善を重ね、使用したマ
イクロコントローラとの通信やパソコン上での処理を説明するインフォグラフィックスも併せて制作した。中間発表の時点では、歯車とベルトを使用することでひとつひとつの機構がコンパクトになる設計のインフォグラフィックスを制作した。その後、GitHub に掲載されていたオープンソー
スを使用し、設計図の改良を重ねたところ、フラップの回転軸に直接モータを設置できる機構が制作する面で効率的だとわかった。なので、中間発表の機構の歯車やベルトを説明するインフォグラ
フィックスから、成果発表会に向けてのインフォグラフィックスの内容を大きく変更した。これらのインフォグラフィックスは Web サイトや発表会用のポスター、学会に提出したポスター等に利用した。
（※文責: 佐倉寧音）

Group Report of 2022 SISP

- 64 -

Group Number 10

Interaction Elements - Creating Elements for Future

4.2.2

成果発表会でのフィードバックを受けて学習フィードバックのまとめ
出席については、全員無断欠席がなかった。また、インターンや体調不良などのやむを得ない事
情を除いて、全員が毎週しっかりと出席していた。
週報に関しては、不備や誤字脱字もなくすべて提出し、様式・体裁が整っていて、しっかりと期
限を守り、グループの週報も提出したメンバがいた一方で、大部分は毎週期限を守って提出することができたが、期限に間に合わなかった週があったメンバもいた。グループ報告書は、指示された体裁に沿っており、内容の濃い適切な報告書を書くことができた。
発表会については、わかりやすいポスターを使い、適切な説明を行い 聴講者に理解してもらうことができた。また、 聴者を納得させられるための工夫を追究していた。しかし、スライド資料はわかりやすく適切であったと思うが、多少説明不足なところがあったのではという意見もあった。
外部評価については、中間発表でいただいたアンケート結果を最終発表では考慮・検討・改善をして Element に反映することができ、最終発表のアンケートでも良いフィードバックを得られたが、最終発表会では、Element の最終完成形や動く様子を見せることができなかった。積極性・協調性については、協力して積極的に課題を設定し、解決策を考案した。全員がプロジェクト学習に積極的に参加し意見を述べていた。自分の役割を見つけて、作業に積極的に参加できた。しかし、ひとりの負担が大きいタスクなどもあって、分担が難しかった点があった。プロジェクト学習に積極的に参加したり報連相を大切にできたが、作業が終わらず進捗報告会には積極的に参加できなかった
メンバもいた。発表会については、わかりやすいポスターを使い、適切な説明を行い 聴講者に理解してもらうことができた。また、聴者を納得させられるための工夫を追究していた。しかし、ス
ライド資料はわかりやすく適切であったと思うが、多少説明不足なところがあったのではという意見もあった。
計画性に関しては、作業の進捗度合いに応じて各々に作業を割り振ることができ、当初のスケ
ジュール通りに進められ、比較的効率よく作業を進めることができたという意見がある一方、作業の前に綿密な計画を立てて行うことがあまりできず、作業を開始してからその日行うことの目安を決めてしまっていた点や、作業分担に関しては大まかな分担はしていたものの、より詳細な分担はできていなかったため、作業の進捗速度が遅かった点、最終発表会に向けた資料作りや発表直前まで大変な作業が残ってしまった点、最後まで完成させることができなかった部分があった点もあげられた。学会発表までには最終的な完成ができるように、計画を練っていきたいと考える。
成果に関しては、プロジェクト遂行に必要な知識をつけ、十 分に貢献し納得する成果を得られたり、積極的にプロジェクトへの貢献ができていたと感じていたり、プロジェクトを通してさまざ
まなスキルを身につけられたと感じたという意見がある一方で、ある程度プロジェクトに貢献することができたと考えているが、納得できる成果が出せなかったという意見や、形として完成はしたが、Element の動作があやしいところがあったという意見もあった。3 月の学会までには成果物を完成できるようにする。
作業分担の反省
まず最初に、どのような Element にするのかということと、コンセプトの考案を行った。アイ
デア出しに関しては、メンバ全員が積極的に意見を出すことで、議論を円滑に進めることができた。リーダは周りを引っ張って積極的に行動していくことで、メンバの積極的な行動を引き出してGroup Report of 2022 SISP

- 65 -

Group Number 10

Interaction Elements - Creating Elements for Future
いた。制作する Element が決定した後は、空の写真を撮影したり、イラストレーターを使用してフラップの色彩設計を行った。
フラップ紙の制作をメインに行ったメンバは、夕焼けのグラデーションになる４０色を印刷した
はがきを、レーザーカッターでフラップの形に切り、フラップが回りやすく頑丈にするために、フラップ同士を糊付けして２枚分の厚さにした。合計で 40 色× 42 ユニット＝ 1680 枚のフラップ紙を制作していた。レーザーカッターを用いたアクリル部品の量産をして組み立ての基礎となるものを作り、すべてのユニットを組み合わせて、ユニットの大量生産を可能にした。最後に配線を整える作業を行った。
電子工作をメインに行ったメンバは、画像処理部分を作るために Python でのコードの記述を行ったり、配線、基盤部分や電子部品のはんだ付けを行った。そのほか 「SKY FLAP」のロゴデ
ザインを行ったり、発表資料関係ではスライドのデザインや動画の制作を行った。そして、メンバ同士で報連相を心がけたことで、仕事の重複がなくスムーズにプロジェクトを進めることができていた。これにより、グループ全体で Element 制作を進めていくことができ個々のメンバにもそれぞれの役割を充てることができていた。
プロジェクト目標達成のために行ったこと
プロジェクトを進めるうえで、グループでの役割分担をしっかりと設定し、意思疎通をとりやす
くかつ作業を楽しく行うために、前期と比較してチーム内での交流を多くとってコミュニティを深めていった。メンバと積極的に会話をしたり、時にはみんなで遊びに行ったりするほど仲良くなったことで長時間の作業も楽しく、効率的に行うことができた。プロジェクトメンバとは、グループの垣根を越えて意見をもらうことでグループ内部だけのクローズドなコミュニケーションではなくプロジェクト全体としてのオープンなコミュニケーションを図った。
昨年度のプロジェクトの進め方を参考にすることが重要であり、その予定を参考にしながら進めることができた。そしてプロジェクト内で出た意見を取り入れることで今年のプロジェクトメン
バに合った進め方ができた。グループで定めた目標の逆算をすることで、いつまでにどこまで達成
し、この期間に何をすべきか、なるべく細かく計画を立てて実行していた。それぞれの役割分担では仕事を明確にし、どの仕事を行えばいいかわからない状態を無くした。
後期は前期よりも提出期日などスケジュールに気を配る必要があったため、グループメンバ間の連絡とコミュニケーションを積極的に行うことを意識した。プロジェクト全体でのスケジュール調
整を怠らず、もし遅れているグループがあれば率先してサポートするなど、全体で協力していくことができた。
複数のメンバで行う共同作業や学生同士でのコミュニケーション、作業を効率よく行う方法では、自分が今行っているタスクの報告や相談をメンバ間で共有するなど、行っているタスクの重複が無いように心がけた。Slack などのコミュニケーションツールを駆使して、報連相を大切に活動することができた。また、教員とも意見がすれ違うことがあったが拒絶することなく、どうすれば上手く自分たちの意見を通す説得力を持たせられるかを模索することをやめないようにした。
技術・知識の習得方法や技術・知識の応用方法では、ポスターや発表資料制作などプロジェクト
内 で挙がった仕事をできる限り進んで引き受け、自分が持っている知識の応用をしようと積極的にプロジェクトに関わる努力をした。発表の方法を学ぶために、何度も発表を練習し、発表資料の校閲を繰り返してよりよい発表 資料を目指した。技術の知識習得方法について学ぶことにおいては、分からない部分があったら専門的な領域を持っている人にすぐ聞きに行くという方法を取ることができていた。

Group Report of 2022 SISP

- 66 -

Group Number 10

Interaction Elements - Creating Elements for Future

目標に対する反省点・改善点

Element のコンセプトを決定したり制作過程のなかで、さまざまな課題が存在した。例えば「デジタルが普及している現代で、何故あえてアナログによる表現にこだわるのか？」「カメラから取って識別した色を、どのように分割するか？」など、中間報告会ではさまざまなご意見をいただき、これらの課題を解決すべく最終日まで取り組んできた。しかし、明確かつ根拠のある答えを生み出すことに難しさを感じた。よって、課題の解決方法については曖昧な解決に至った部分がある。また、前述したように教員とも意見がすれ違うことがあったが拒絶することなく、どうすれば上手な落としどころがあるかを模索することをやめないようにしたが、どうしても意見の本質や意図をくみ取ることが難しかったり、逆にうまく自分たちの意見を伝えられないこともあった。また、教員とは slack などでの会話もあまり積極的に行わなかった。このような反省から、教員とのコミュニ
ケーションは上手くいかなかった点も少々あった。
毎週金曜日に行われていた教員への報告会には、工房のレーザーカッターやプリンターを使用できる時間が限られていたため、全ての報告会に参加することができなかったメンバもいた。また、課題の設定方法では本プロジェクトの目標である「ミライ」という言葉があるのにも関わらずあえて「アナログ」表現のフラップ機構にした理由としての課題をあいまいに進めていた点も反省点であった。
役割分担の時点で応用的にスキルを活かせる場がなく、技術・知識の応用方法について学べなかったメンバもいた。制作した Element が同じユニットを多く制作するということが多かったので、同じものを作り続けた結果応用的なスキルの熟達というよりも、すでに持っている技術の熟達が優先されてしまっていた。
卒業研究や今後の成長にむけて約１年を通して行う卒業研究は、プロジェクトとは違ってほぼ個人の研究になるので、自分自身によるスケジュール管理や、先を見通して率先して取り組む姿勢が大切である。研究をどこに着地させるかを決めることも大事だと思うので、課題の設定方法を習得することも必要である。
また、本格的な論文執筆は初めてであるメンバがほとんどであるが、これまで学んできた文章の書き方を生かして、執筆方法を習得していきたい。国際会議や外部に自分の作品と一緒に論文を提出する際など、論文執筆方法の習得は間違いなく今後の役に立つと考える。
同様に、学部の集大成として、これまで学んできた技術や知識を駆使して、自分が最後まで納得できる研究成果を残したいと考えている。そのために、課題をとことんまで突き詰め、解決まで導くことが何より大切であると考える。
また、作業を効率的に行う方法や知識の応用方法は卒業研究に限定しなくても仕事やちょっとしたグループワークで役に立つ。複数のメンバで行う共同作業は多人数と円滑にコミュニケーションを行う上で その経験を活かせる。学生同士でのコミュニケーション、教員とのコミュニケーショ
ンは就職してから、例えば初対面の同期と理解を深めたり上司と意見を交わしたりするときにも役に立つと考える。
また、自分たちの研究内容についての共有会を、教員を交えて学生同士で行うので、学生同士・
教員とのコミュニケーションが大事であると感じた。研究を進めていく上で、研究の路線がこのまま進めていいのかわからない場合に、教員に聞く必要もあると考えたので、そのような能力が必要である。
どのような研究であっても作業を楽しく行うことでそこに有意性が生まれることで効率よく行う

Group Report of 2022 SISP

- 67 -

Group Number 10

Interaction Elements - Creating Elements for Future
こともできることが今回のプロジェクトを通して実感したので、作業を楽しく効率よく行う方法も大事であると実感した。
（※文責: 佐藤涼香）
以下は成果発表会での質問とそれに対する回答である。

Q：雲があったら表現できるのか
A：現状はできない
Q：どうして夕焼けを選んだのか
A：一日の中で空が一番美しい時間だと思ったから
Q：写真の形はどのような形でも大丈夫か（縦横関係あるのか）
A：元の写真があってそれを切り抜いてから画像処理を行っているので、写真の形は問わない
Q：どのように色を抽出したのか
A：画像を 7 × 6 のサイズにリサイズして、RGB から HSV 色空間に変換し、H(色相) の値を取り出している

Q：紙の素材にこだわりがあったか
A：一般的に使用されている紙よりも耐久性があり、光の反射を抑えられる上質紙をしようした（※文責: 佐倉寧音）

4.3

Element.03「うぇ〜ぶる」

4.3.1

成果発表会に向けて

私たちは成果発表会に向けて、私たちは Element の制作のほかに、制作物の撮影やインフォグ
ラフィックスの制作にもこだわった。私たちの Element は文字だけでは動きを想像するのが難し
く、成果発表会に向けてわかりやすい映像やインフォグラフィックスを制作する必要があった。映像については製品の動作を実現する前にコマ撮りで予め実現したい動きを手動で撮影することで自分たちが目指している動きをはっきりさせ、制作の目標を作るだけでなくモチベーションアップにも貢献することができた。製品のコンセプトムービーを撮る際にも、コマ撮りの際に想定していた動きをそのまま実機でも撮影することを目指した。しかしながら、その際に天板を回転させるモー
タとその回転を伝えるギアとの接触が安定せず、撮影は難航した。本 Element は机の脚部分にあたるソーホースブラケットや天板を支える長ねじ等を完全に固定しておらず、そのおかげでメンテ
ナンス性の高い構造が実現できていた。ある程度はナットや外枠などで固定はされていたが、ナッ
トの緩みや製品自体の動きによって部品が外れてしまう事態が頻発した。加えて、撮影の度にモータを動かし、部品を付け直すという繰り返しの中でモータとその動きを伝えるギアとの摩擦からギ
ア内部が擦り減り、モータの回転運動を上手く伝えることができない状況に陥った。そこで新たにギアの構造をよりシンプルな形に変更し、予めギアが擦り減ってもいいように予備のギアを用意した。その結果、部品が外れる問題についてはミリ単位でのねじの調整や新品のギアを用いることで一時的に問題を解決させることができ、無事私たちが想定していた動画を撮影することができGroup Report of 2022 SISP

- 68 -

Group Number 10

Interaction Elements - Creating Elements for Future
た。また、インフォグラフィックスについては Adobe Illustration で Element の構造が分かるものを制作したり、Adobe After Eﬀects を用いて外側からは見えない内部の動きをモーショングラ
フィックスで表現した。中間発表会ではインフォグラフィックスによる機構の仕組みが分かりにくいという意見もあったため成果発表会に向けてはより分かりやすいインフォグラフィックスの制作を目指した。今回制作したインフォグラフィックスは Web サイトや発表会用のポスター、説明用の動画などに利用した。
（※文責: 遠藤将）

4.3.2

成果発表会でのフィードバックを受けて成果発表会までの制作とフィードバックを受けて、私たちには大きく分けて２つの課題が存在した。
第一にプロダクトとしての完成度である。あらかじめ制作段階から Element の動作に安定性がなく、構造については不安要素があった。そしてそれは成果発表会でもろに動作不良という形で起
こってしまった。前々から問題であったモータとギアの結合部分が外れてしまい、波のような動作ができなくなってしまうことだ。この問題は以前から挙げられていた問題だったため、ギアの改良
やナットの調節によって多少は改善させた。しかしながら問題が解決したというわけではなく、あくまで外れにくくなっただけであり、実際に成果発表会では多くの場面でそれが外れてしまっていた。確実なモータとギアとの接着方法やギア本体の素材については再度検討する必要がある。また、今回はプロトタイプとして制作したため、本体の外装については MDF や Arduino の基盤、配線等がむき出しになってしまっている。波がもつ心地よさが見た目にも大きくかかわるものであれ
ば、本体の外装をより波の心地よさを阻害しない見た目にする必要がある。
第二にプロダクトの動きが十分に実現できなかったことである。私たちが想定していた使い方の一つに天板上にあるものを動かすことが挙げられていた。しかしながら実際に本 Element では球体のような比較的運びやすいものを動かすことはできても、箱のような物体を満足に動かすことができなかった。本 Element を制作する段階で行ったシミュレーションでは実現できた動きだった
ため、実現不可能な動きではないことは理解している。この問題については天板の設置面にかかる
摩擦や波の高さの調節で改善できるのではないかと考える。また、天板の動きとしてもう一つ問題がある。それは天板が持ち上げられたまま下がらなくなってしまうことについてである。これは天板を構成する波板が重なることによって生まれる摩擦で天板の一部が浮き上がった状態になってしまうことにより、本来隣同士の波板は同じ動きをしないはずが、連なって動いてしまうのである。
これによって、天板上にあるものを動かすことができなくなり、天板の動き自体も波とは言えないものとなってしまう。そのため、波板が摩擦で上がってしまわないように素材をより重くすることが解決策として挙げられた。しかし、仮に天板すべてを MDF などに変えてしまってはモータが重さに耐えきれず、壊れてしまうことが考えられるため、一部を MDF に置き換える設計で改善を進めている。また、他にも改善策として波板が触れ合う面に摩擦を軽減させるスプレーなどを塗布させたり、波板全てにゴム紐を通すことで下方向へ戻る力を与えたりすることでその問題を解決できるのではないかと考えている。
また、以下は成果発表会での質問とそれに対する回答である。

Q: うぇ〜ぶるを使用してどのような体験ができるのか？ また、どのような感情になってほしいのか？

Group Report of 2022 SISP

- 69 -

Group Number 10

Interaction Elements - Creating Elements for Future
A: 手を動かして物を動かすことができるようになります。それもただ手でものをもって動かすような体験ではなく、例えば魔法のような、海の波が自分の思い通りに動かせるような体験を目指しています。そしてその体験によって楽しさや面白さを特にも感じてほしいです。

Q: 波を取り入れた理由は？
A: 波のもつ心地よさに面白さを感じ、その動きを直感的な動きで操作することができれば楽しさを感じることができると考えたからです。

Q: なぜ天板の板を波の形にしたのか？
A: 波の形にすることで、動いていない状態でも波がもつ ゆれる 、 ゆらぐ といったイメージを連想させやすくするためです。

Q: テーブルとしても使えるのか？
A: テーブルとしても使える、というよりあくまでテーブルの形をしている Element であるというだけです。私たちが提供したいことは波が動く体験です。

Q: どのような使われ方を想定しているか？
A: 幅広い場面で使われることが嬉しいですが、現在の体験という部分をさらに実用的な面で未来の Interaction Elements として使われることを想定しています。例えば本 Element は手の届かないものをとることができるため、コロナ禍における非接触で物のやり取りができるというメリッ
トがあり、そのようなメリットを活かした利用方法を想定しています。

Q: なぜ手の動きで動かそうと思ったのか？
A: 波は触って発生させることができるけれど、ものに触らずに波を発生させることはできません。私たちはその点に新規性があると感じたため手の動きで動かそうと思いました。

Q: 先行研究で同じく遠隔で机のような台の上にあるものを動かすことがされているがそれとの違いはなにか？

A: 私たちは波の持つ動きに楽しさや面白さがあると感じて本 Element を制作しました。ものを動かすという点では先行研究の仕組みで十分ですが、私たちはユーザが感じる体験というものを重視して作品制作を行っています。そのため波が持つ心地よさに注目することで、先行研究にはなかった体験を提供できるのではないかと思い、今回このような Element を制作しました。
（※文責: 遠藤将）

4.4

Web サイト・ポスター制作

デザインコンセプト

Web サイト・ポスターのデザインは、見出しのフォントは Interaction Elements のメインロゴで使用した Futura を適用した。本文については、メインロゴのサブタイトルでも使用しており、電子でも紙面でも視認性が高い Noto sans を適用した。この Noto sans については、macOS 、

windows のどちらにも入っていることから、全体で共有して資料を制作する際にも滞りなく作業
Group Report of 2022 SISP

- 70 -

Group Number 10

Interaction Elements - Creating Elements for Futureをする事ができるという点も考慮した。 色については、ロゴで使用しているカラーを適用した。
基本的に英語と日本語のどちらも表記するようにし、より多くの人に伝わるようにした。また、後期にかけて制作物のクオリティ向上に伴い、より洗練されたデザインを目指して、改善を進めた。
（※文責: 松岡美佑）

4.4.1

Web サイト制作

コーディング工程
コーディングは 中間発表会での HTML/CSS/JavaScript のデータを引き継ぎ、ﬁgma での変更
点を書き換える形となった。変更した点はまず、Prototype セクションが Product セクションに変
わり、画像だったものが動画になった。さらに、Mechanism セクションのインフォグラフィック
スを新しいモノに変更した。加えて、中間発表時に Future Work セクションだったものが、成果発表時には Process セクションに置き換わった。作業工程に関しては、Element.01、Element.02、

Element.03 ページのコードの大部分を使いまわしていて書き換える部分がページごとに多くないため容易だった。
（※文責: 武藤颯汰）

4.4.2

ポスター制作

ポスターは Adobe Illustrator で制作した。最終発表のポスターは、中間発表時で使用したポス
ターをベースに制作を進めた。中間と同じく、タイトルや文章のフォントを Web サイトと合わせることにより、デザインのトンマナをプロジェクト内で統一した。また、Interaction Elements のロゴをタイトルの左隣に配置することで強調させ、プロジェクトのイメージ付けがされるように意識した。Interaction Elements のロゴについては、ポスターの左上にロゴの左上部分、ポスターの右下にロゴの右下部分をあしらい、ポスターの内容を囲むように配置した。これによって、プロジェクト全体として、すべての成果物を生み出していることを表現している。使用しているフォントとしては、全体で取り決めたトンマナの通り、見出しには Futura を使用し、本文には Notosans を使用している。本文については、すべての部分で日本語と英語で表記することで、より多くの人に伝わるように心がけた。中間発表のポスターでは、各見出しも日本語と英語で表記していたが、見出しは英語だけでも伝わる点や、見出しよりも本文に視線が集中する点を考慮し、見出
しは英語表記のみとした。ポスターに掲載する内容としては、Overview、Process、Mechanism、

Future Work の４つとした。中間発表のポスターでは、Overview と Mechanism の２つだけで、
Element の説明しかしていなかったが、Element 制作における制作プロセスや、今後の展望も発信していきたいと考え、追加することにした。さらに、各 Element の行に制作メンバを追加した。
誰がどの Element の制作に携わったのかを明らかにすることで、プロジェクトの構成も伝えられるようにした。以下にポスターの制作工程について記述する。

Group Report of 2022 SISP

- 71 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 4.1: 成果発表会のポスター（※文責: 松岡美佑）

デザイン工程基本的に、アートディレクターがプロジェクトのデザインコンセプトを基に、各チームの制作物のディレクションを行っていった。その方向性に合わせてデザイン班と協力しながら制作を進めていった。
（※文責: 松岡美佑）

インフォグラフィックスのデザイン

Adobe Illustrator を用いて、インフォグラフィックスの制作を行った。全体的に意識した点は、文章のみでは理解しにくい部分や、実際に Element を見る際に見えない部分を重点的に制作した点である。それぞれのグループのデザイン担当にインフォグラフィックスのテンプレ―トを配布し、制作に取り掛かってもらった。このテンプレートも Adobe Illustrator を用いて制作した。こGroup Report of 2022 SISP

- 72 -

Group Number 10

Interaction Elements - Creating Elements for Futureのテンプレートでは、レイアウトや使用するカラー、線の太さ、使用するフォントとフォントサ
イズを指定している。インフォグラフィックスは、全体のデザインコンセプトに合わせて、ベースカラーは白と黒とした。必要に応じて各 Element の色をそれぞれ使用してもらうようにした。

Element.01 の moodoor では、距離センサ、マイク、サーボモータを用いて、部屋の中のにぎやかさを検知しドアノブの動きで表現する原理、にぎやかさに対する動き方の具体例、動きを止めるときの動作をインフォグラフィックスとして制作した。（図 4.2）Element.02 の SKY FLAP では、
カメラで夕焼けを撮影し、HSB の色の値を取得する原理、それに対応してフラップの色を変化させる原理をインフォグラフィックスとして制作した。（図 4.3）Element.03 のうぇ〜ぶるでは、leapmotion を用いて、手の動きを検知する原理、サーボモータによって、机に波をおこす原理をインフォグラフィックスとして制作した。（図 4.4）3 つのグループのインフォグラフィックスを集め、全体の統一感を高めるために最終調節を行った。

図 4.2: Element01: インフォグラフィックス

Group Report of 2022 SISP

- 73 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 4.3: Element02: インフォグラフィックス

Group Report of 2022 SISP

- 74 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 4.4: Element03: インフォグラフィックス（※文責: 松岡美佑）

Element.01「moodoor」のロゴのデザイン「moodoor」のロゴを制作するにあたり、まずは Element に関連するキーワードを抽出した。抽出したキーワードの中でも特に、「雰囲気」に着目してロゴを制作することとした。次に、写真共有サービスの Pinterest やソーシャルネットワーキングプラットフォーム Dribble を使用して、参考にするロゴの素材を集めた。雰囲気というキーワードからは、柔らかい印象を受けるからか、多くのロゴが丸みを帯びたデザインであり、本 Element のロゴにもこれを採用した。また、隣り合うテキストを滑らかに組み合わせるデザインを参考にし、本 Element 名 moodoor の mood の中の「oo」にて取り入れた。滑らかに組み合わせた o の形は、室内で絶えず変化する雰囲気を想起させる。最終的に、ロゴは Adobe Illustrator で書き起こした。基本的に、本 Element のロゴは、長方形と円を用いて制作している。尚、全てのコーナーには角丸を適用している。本 Element のロゴは、moodoor の中の「d」をドアノブを真横から見たものと捉えている。d より左に並ぶ 2 つの o を滑らかに組み合わせ、d より右にある o を通常のテキストとして完全に分離させることで、d（ドアノブ）を通して部屋の雰囲気を具体化できるという本 Element の機能を表している。本Element のロゴは、ロゴタイプ段階から設計しているため既存のフォントをベースとしていない、本 Element のためのオリジナルのロゴとなっている。尚、テキストのカーニングのみ、フォント

Group Report of 2022 SISP

- 75 -

Group Number 10

Interaction Elements - Creating Elements for Future「Futura」を参考に調整した。Futura とはラテン語で「未来」を表す語であり、ジオメトリック・
サンセリフに分類される欧文書体である。テキストのカーニング調整に Futura を用いた理由としては、Futura のフォントがユーザに与える、近未来的であり洗練された印象は、本 Element のロゴに採用できると考えたからである。ロゴの色に関しては、次に挙げる 2 つの理由からグレーを採用した。まず、1 つ目として、グレーはポジティブとネガティブの双方と捉えることができるからだ。本 Element を通して、ユーザは部屋の雰囲気を感じ取ることができる。部屋の雰囲気というのは、ポジティブな時もあればネガティブな時もある。本ロゴにおいてもこの可変性を表現したいと考えた。その結果、グレーが適していると考えた。2 つ目として、無彩色は本プロジェクトのトーンに合っているからだ。本プロジェクト全体のロゴは、昨年度から引き続き、無彩色を用いて制作されている。このことから、本 Element のロゴの色に無彩色を採用することは、プロジェク
ト全体でのトーンを合わせることができるのではないかと考えた。
（※文責: 峪悠也）Element.02「SKY FLAP」のロゴのデザイン「SKY FLAP」のフォントは、Optima を使用した。「SKY FLAP」の１ユニットが、パラパラとめくれる様子を表したロゴとなっている。実際のプロダクトはグラデーションになっているが「Element」であるから、あえてモノトーンの配色にした。シンプルかつどのようなプロダクトなのかが一目でわかりやすいデザインにした。
（※文責: 佐藤涼香）

Element.03「うぇ〜ぶる」のロゴのデザイン「うぇ〜ぶる」のロゴ制作では、アートディレクターが波をモチーフにしたロゴ案を 30 パター
ン程考案し、グループ３のメンバに提案した。そこから、うぇ〜ぶるの雰囲気に合い、可読性が高く、Interaction Elements のシンプルで洗練されたデザインコンセプトに合っている案に決定した。「うぇ〜ぶる」の文字が波うっている様子を表わしており、本プロダクトによって、手で波を起こす楽しさを表現している。また、色からも波のイメージが想起できるようにするため、黒では無く、藍色を適用した。その後、うぇ〜ぶるの文字の微調整などを行い、完成した。
（※文責: 松岡美佑）

4.4.3

動画制作

撮影
動画の制作にあたり、各 Element のコンセプト動画を制作するため、撮影を行った。撮影場所はグループごとに異なるが、撮影機材は iphone13、一眼レフカメラ、Godox SL 60 の照明、UTEBITの背景スタンドとホワイトバックを使用し、各 Element を撮影した。プロジェクトの白を基調としたイメージに合わせ、Moodoor とうぇ〜ぶるは背景としてホワイトバックを使用し、SKY

FLAP は１階アトリエ前の円卓横の白い壁を使用して撮影を行った。撮影時には、動画に映りこむ
影をなるべく消すために Element の配置やライトの照らし方を試行錯誤した。コンセプト動画は、Element の詳細な機構などの動きを見せることのほかに、使用感が想像しやすい動画を目的とし、Group Report of 2022 SISP

- 76 -

Group Number 10

Interaction Elements - Creating Elements for Future
制作を行った。また、撮影する前に動画の構成を考え、必要な素材を検討してから撮影を行ったので、編集に必要な素材を効率的に手に入れることができた。
編集
上記の方法で撮影した動画素材を整理し、グループごとにコンセプト動画を制作した。編集ソフ
トはアニメーションを制作するため、すべて Adobe Afeter Eﬀects を使用し制作した。
まず初めに、各 Element のイメージに適した BGM を選定し、おおよその動画の長さを各グ
ループで統一した。プロジェクトの各グループのタイトルがスライドアニメーションをしつつ、同様にサブタイトルが浮き出るようにした。次に、機構の説明ではアニメーションを用いたモーショ
ングラフィックスを制作し、Element の全体像のイメージをつかみやすくなるように見せ方を工夫した。二種類のイージーイーズを使用し素材の動きを試行錯誤しながら制作した。イージーイーズ
を使用すると、素材の動きに緩急がつく。ゆるやかな加速からはじまり、中間地点で一気にスピードが上がった後、緩やかに減速していく。使用したイージーイーズの速度グラフを以下に示す（図4.5）。撮影した動画素材が違和感なくつながるように動画の長さを調節し BGM のテンポに合わせて場面が切り替わるようにしたことと、After Eﬀect の Lumetri カラーという標準エフェクトを使用し、動画全体の色合いを統一させた。Lumetri カラーとは素材の色を調整するツールであり、主にカラーコレクションやカラーグレーディングを行う際に必要な機能である。主に以下の 6 つのカテゴリーに分かれ、それぞれを組み合わせながら作業をする。

• 基本補正• クリエイティブ• カーブ• カラーホイールとカラーマッチ• HSL セカンダリ• ビネット基本補正では、色温度、色被り、明るさ、再度など主にカラーコレクションを行う際の変数がまとめられている。カーブでは、RGB カーブを使用することで、基本補正やクリエイティブだけでは調整しきれなかった明るさやコントラストの調整が可能になり、さらに RGB を個別に調整できる。カラーホイールとカラーマッチは３つのホイールとスライダーで構成され、各映像の暗い部
分、中間部分や明るい部分に対応している。ホイールは色の方向と了、スライダーは明るさを調整できる。この中の、基本補正とカラーホイールの機能を駆使し、素材の動きを検討しながら動画を制作した。各グループで動画が出来上がった後に、それぞれの動画の統一感を確認し、完成とした。

図 4.5: ２種類のイージーイーズ

Group Report of 2022 SISP

- 77 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 4.6: 動画のスクリーンショット（※文責: 佐倉寧音）

4.5

発表方法

4.5.1

プレゼンテーション用スライド資料

中間発表時同様、デザイン統括担当のメンバからフォントの種類や、大きさ、色調などのデザイ
ンルールを共有してもらい、それに沿って作成した。しかし、中間発表時に Microsoft PowerPointを利用して作成したが、編集時に若干動作が重たくなったり、フォントがうまく反映されないなど
いくつか不便が生じていたため、より相互に編集しやすい環境を構築するために Google スライドを利用して行うことで、中間発表時の問題点の改善を行った。また、中間発表時より、プレゼン
テーションの構成を変更し、プロジェクトについての簡単な説明→プロセスの紹介→ Element 紹介→グループ別に分かれて紹介するといった構成とした。
（※文責: 新保冴弥）

スライドの構成
評価用 Google フォームの QR コード、作成した Web ページのスライド１枚目として発表開始前に表示しておくことによって、卓上の QR コードが見えない場合への配慮とした。
（※文責: 新保冴弥）

もくじ
約 10 分間のプレゼンテーションのため、全体の概要を示すもくじを作成した。中間発表と全体的な構成を練り直したため、それに伴ったページ構成とした。
（※文責: 新保冴弥）

Interaction Elements とは
中間発表時に作成した Interaction Elements とは何かを伝えるページ作成した。中間発表時に用いたInteraction という行為の説明を「インタラクションを行う」という表現を「相互作用を行う」と表現を組み換え、より説明として伝わりやすくなるように改善した。
（※文責: 新保冴弥）

Group Report of 2022 SISP

- 78 -

Group Number 10

Interaction Elements - Creating Elements for Future

制作プロセス -図鑑の作成実際に Element の作成に入る前に、オノマトペを使った「生の Interaction Elements 図鑑」と称した図鑑の紹介を行った。ただ、図鑑を載せるだけではなく、この図鑑の作成が身体表現や五感を言語化し、制作につなげるための訓練であることを中心としたページとした。
（※文責: 新保冴弥）

本プロジェクトの目標
自分達が作成している制作物（Element）はなにかということを伝えるページを作成した。
（※文責: 新保冴弥）

制作プロセス -ついついやってしまうこと図鑑の作成中間発表時では「生の Interaction Elements 図鑑」と称していた図鑑の名称を「ついついやってしまうこと図鑑」と表現を変更した。内容自体は変わらないが、より初めて聞いた人にも伝わりやすい表現となるように名称を変更して掲載した。
（※文責: 新保冴弥）

制作プロセス-アイデア出し中間発表時では、「マッピング」→「アイデア出し」とページを分けて掲載していたが、成果発表会ではそれに関する詳細な説明は省略していい部分もあると考え、省略することとした。
（※文責: 新保冴弥）

プロダクト (1)
前述した項目を踏まえて、各 Element のタイトル、写真を載せ、簡単な説明を添えるページとした。
（※文責: 新保冴弥）

グループによる Element の簡略化した紹介
中間発表時同様、全グループで構成を統一し、Element の概要→コンセプト→機構→映像という構成で行った。中間発表時では、各グループが 3 分程度の紹介とし詳細に説明を行ったが、成果発表会では、各グループ 1 分程度の紹介とすることで、グループ別に分かれた後に、詳細な説明や、質問をしてもらえる時間を設けられるようにした。
（※文責: 新保冴弥）

Group Report of 2022 SISP

- 79 -

Group Number 10

Interaction Elements - Creating Elements for Future

プロダクト (2)
まとめとして、全グループの Element を再度表示（プロダクト (1) のスライドを再度表示）することで、あらためて興味のある Element はなにかの問いかけをすることで、全 Element に対しての知識を最低限のラインで得てもらえることを狙いとした。
（※文責: 新保冴弥）

4.5.2

プレゼンテーション方法

プロジェクト学習の成果発表会は、中間発表会同様にオープンスペースで行われることから、他のプロジェクトに発表内容をかき消されることや、ぼやけてしまうことを防ぐためにの自分達らしい発表会を意識したプレゼンテーションを心がけ、おこなった。また、隣のブースが本プロジェ
クトよりも大きな規模のプロジェクトがあり、発表時の雰囲気を隣の雰囲気に飲まれないような工夫として、声量以外にもポスターの配置や、観客が、来やすい・見やすいような展示ブースの設営を行った。
（※文責: 新保冴弥）

4.5.3

成果発表会の全体フィードバック

各グループの成果発表会でのフィードバックは前述しているため、4.5.3 では全体へのフィードバックを受けた反省点・改善点・評価を記述する。

発表技術について「声がハキハキと、かつイントネーションも区別されており強調したいところが分かりやすかった」「何もわからない状況からでもとてもわかりやすく、自分の作ってる Element をよく理解し、とてもこちら側が理解できる発表だった。」「全体の発表の仕方が上手でした。声量も大きく、聞きやすかったです。」「聞き取りやすく大きな声の発表だったので話が頭に入ってきやすかった。」「動機や仮説とその検証，実演と明確でわかりやすい」などのアンケート結果を全体としてもらうことができた。これによって課題としていた、自分達らしい発表会を意識したプレゼンテーショ
ンを行うことができていたと考えられる。特に「強調したいところが伝わっていた」「理解しやす
かった」「プロジェクト活動につい理解できた」というフィードバックの抜粋から、伝わりやすいプ
レゼンテーションができていたことが考えられる。数値的にも、8,9,10 の評価の合計が 94.3 パー
セントと高い評価をもらうことができた。
（※文責: 新保冴弥）

発表内容について「中間発表で説明されていた目的が達成されていて素晴らしかったです。」「プロセスから

Element 作成に至った経緯、その Element の特徴など、とてもよく伝わってきて面白かった。難しい動きなども実装できていてそこも一年を通してとても結果が伝わってきた。」「プロセスからGroup Report of 2022 SISP

- 80 -

Group Number 10

Interaction Elements - Creating Elements for Future
Element 作成に至った経緯、その Element の特徴など、とてもよく伝わってきて面白かった。難しい動きなども実装できていてそこも一年を通してとても結果が伝わってきた。」「内容自体伝わり
やすく、伝えたいポイントを詰め込めていてよかった」など、発表内容についても技術を除いた部
分で十分な評価を得られていると考えられるアンケート結果をもらうことができた。これは、全体の発表を各グループの説明はおおまかに、詳細な説明については各グループのブースに移動してもらうという形式をとったことで、必要な説明を選出して説明することができたと言える。対照に、実際に稼動しなかった Element があり、それについて不十分に感じられたというようなアンケー
ト結果もいくつかあり、全体としての発表としては十分だとは感じられたが、各グループの結果としては、もう少し粘れた部分が存在するのではないかと考えられる。
（※文責: 新保冴弥）

Group Report of 2022 SISP

- 81 -

Group Number 10

Interaction Elements - Creating Elements for Future

第5章

おわりに

5.1

グループのまとめ

5.1.1

Element.01「moodoor」

本グループは、触覚に着目した Element の制作を希望するメンバで構成された。そこから私た
ちは、「書き心地が変わるペン」や「寝る前に殴った力と同じ力で殴られて起こされる枕」など様々な触覚に着目した Element を考案してきた。これらの他にも、様々な Element を考案し、膨大なElement のアイデアが挙げられ、良い意味で悩むことができた。そこから私たちはアイデアを出し、他者に意見をもらうことに加え、とにかく意見を出してみることの重要性を実感した。その後、それらのアイデアの中で部屋に入る際に新しく面白い体験ができる Element を制作しようという結論に至り、部屋を移動する際に必ず触れる部分であるドアノブに着目した。この結論に至るまで何度も話し合いを重ねてきたが、いつも触れるものであるが普段あまり意識しないドアノブの部分に関する Element を制作するというアイデアに対してはグループのメンバ全員が同意し、意見が合致した。
初めは部屋の中の空気の重さに着目し、部屋の中の空気の重さによってドアノブの重さが変化する、すなわち、部屋の空気が重くなるほどドアノブの抵抗力も大きくなる Element を考案した。そこから、先生方からの「他にも様々な種類のドアノブに着目した Element を考案してみると良い」というフィードバックをもとに様々な種類のドアノブを利用した Element のアイデアを考案した。
他のドアノブを利用した Element の例として、部屋の中の空気の重さによって持ち手部分の温度が変化し、空気が重いほど冷たくなるドアノブのアイデアが挙げられた。その他に、部屋に入るときだけではなく、部屋から出るときの体験にも着目し、天気によってドアノブの重さが変化するドアノブのアイデアも例として挙げられた。これらのようなドアノブに触れたときの触覚やドアを開けるときの体験に着目した様々なアイデアを考案した。このように先生方からのフィードバックをきっかけに選択肢を増やすことができたとともに、初めの段階で選択肢を絞りすぎないことの重要性を学んだ。初めから選択肢が少ないと、もし Element の制作途中に問題が発生し、制作が実現できなくなってしまうと、プロジェクトが振り出しに戻ってしまうのである。逆に選択肢が多ければ、Element の制作途中に問題が発生したとしても、他の選択肢にあるアイデアにシフトチェンジ
することができる。それに加え、作業が行き詰った時には、他の選択肢にあるアイデアからヒントを得ることも可能である。そのため、選択肢を絞りすぎないことはリスク回避の観点から非常に重要であると言える。また、そこから私たちはグループ外の第三者からのフィードバックが非常に重要であることに気付いた。私たちのグループ内では気が付かないこともフィードバックによって明確になり、より良い Element の制作へとつなげることができた。そして、これらのアイデアを考案したことをきっかけに、ドアノブによって部屋の中の雰囲気を伝えることで、ユーザが部屋に入りたくなるような体験を与えるのか、ユーザが部屋に入るかどうかの判断を促すのか、ユーザが部屋に入ることを前提にどのように部屋に入るべきかの意思決定を促すのかといった、どれを重要視すべきかを明確にしなければならないということに気付くことができた。こういった、何を重要視するかということは本プロジェクトに限らず、どのプロジェクトでも言えることである。それをプ
ロジェクト内のメンバで共通意識として持っておくことで、プロジェクトが円滑に進むことや、作Group Report of 2022 SISP

- 82 -

Group Number 10

Interaction Elements - Creating Elements for Future
業や考えが行き詰った時にその状況を打開することにつながる。
そして、これらのアイデアから、どのようなときにドアの奥の状況を知りたいか、どのように部屋の状況を伝えると面白味があるかを考察した。その後、これらのドアノブを利用した Elementのアイデアだけで考えるのではなく、ドアノブがユーザにどのような体験を与えるか、どのように表現したらユーザが部屋の中の状況を感じ取りやすいか、どのように部屋の状況を検出するかなど
様々な観点からどのような Element を制作していくかを話し合った。ドアノブがユーザにどのような体験を与えるかに関する意見としては、部屋に入ることに対して抵抗感を感じているユーザや緊張しているユーザに対して、背中を押すような体験を与えるというアイデアや、部屋の中の雰
囲気を知ることでどのような態度やテンションで部屋に入れば良いかが事前にわかるというアイ
デアなどが挙げられた。ここでは、ユーザにドアノブを通じてポジティブな影響を与えたいのか、
ネガティブな影響を与えたいのか、もしくは、ポジティブと取るかネガティブと取るかはユーザに委ねるのか、これらのことを軸に考察した。どのように表現したらユーザが部屋の中の状況を感じ取りやすいかについては、ドアノブに触れる前に視覚的にまたは、聴覚的にといった他の五感でも何か他の情報を与えることでより、部屋の中の状況が伝わりやすいというアイデアなどが挙げられた。ここから私たちは、触覚に着目した Element の制作を希望するメンバで構成されているが、あくまで主に触覚に着目し、視覚や聴覚にも着目することにした。それは、視覚や聴覚は触覚に影響を与えると考えたからである。それは単に情報量が多くなるだけではなく、触覚に着目していてもユーザに触れてもらえなければ意味がないため、Element に触れてもらうためにも他の五感にも着目することが重要であると考えた。どのように部屋の状況を検出するかということに関しては、
部屋の中の二酸化炭素の濃度を検出することで、部屋の中の状況を汲み取るアイデア、カメラで部
屋の中の人の動きを検出し、雰囲気を汲み取るアイデアなどが挙げられた。ここでは、まず、雰囲
気とは何かというテーマについて考えた。そこから、人数、人の動き多さ、人の声の大きさなどが挙げられた。さらにそこから私たちは、雰囲気とは何かというテーマで挙げられたアイデアの中から、どのアイデアが雰囲気により近いか、検知しやすいかを考察した。しかしながら、そこから話が進まず多大な時間を要した。この原因としては、ユーザが部屋に入りたくなるような体験を与えるのか、ユーザが部屋に入るかどうかの判断を促すのか、ユーザが部屋に入ることを前提にどのように部屋に入るべきかの意思決定を促すのかといった、ユーザにどのような体験をしてほしいかということを考えていたことに加えて、ドアノブを利用してどのように部屋の中の雰囲気をユーザに伝えるかを同時に考えていたからであった。ここから私たちは、一度に複数の課題解決を目指すのではなく、一つずつ確実に解決していくことが重要であるということに気付くことができた。そして、この状況を、私たちで打開することが難しいと判断したため、先生方に相談した。その結果として、何がもっとも重要であるかを明確にするべきであることに加え、考えすぎずに手を動かすことが重要であるというアドバイスを得ることができた。そこで私たちは本プロジェクトにおいて何が重要であるかを明確にするため大学内にあるドアを観察し、どのような表現ができるか考察した。その結果「より直感的に部屋の中の状態を汲み取ることができる」ということが重要であるという結論に至った。その観点から、私たちはドアノブの抵抗力で部屋の中の雰囲気を直感的に伝えることは難しいと判断した。その理由としては、ドアノブによって抵抗力は様々であるため、初めてそのドアノブを使うユーザにとっては部屋の中の雰囲気をドアノブの抵抗力で表現していることは理解できず、ただ開けづらいドアだと判断をしてしまうと考えたからである。そこから、ドアノ
ブが動くことによって部屋に性格を持たせ、部屋の中の雰囲気を直感的に伝えられるのではないかと考えた。このことから、様々な性格の例を挙げ、その中から実装できそうなものを選別し、プロトタイプを制作した。ここでは、挙げた例に対して、すぐに評価するのではなく、一度可能な限り

Group Report of 2022 SISP

- 83 -

Group Number 10

Interaction Elements - Creating Elements for Future
多くの例を挙げ、その後それらを評価し、選定することを意識し、話し合いを進めた。実際に実装した性格は「せっかち」と「おくびょう」である。また、プロトタイプの制作と並行して、ドア自体の制作も進めた。この時に、役割分担が適切にできていたため、作業を効率的に進めることができ、役割分担の重要性が実感できた。私たちのグループではリーダなどの役職に縛られず、作業内容に応じて、中心となるメンバが変わる体制を取っており、それぞれのメンバが得意な分野で活躍することができ、チームワークが向上することを重要視していた。そのため、今回のような、複数の作業を同時に進める際に非常に大きな効果があったと感じている。それに加え、それぞれのメン
バが活躍できるため、プロジェクトでの充実感ややりがいを感じることができ、自分の活動や能力に自信を持つことができた。このことは、今回のプロジェクト学習に限らず、グループワークや、就職後にプロジェクトを行う際にも意識していくことで今回のプロジェクトでの経験を最大限に活かすことができると考えた。このようなことを意識し作業を進めていたが、先生方を中心とした第三者からのフィードバックをもとに「せっかち」と「おくびょう」の性格を表現したドアノブの動
きでは、部屋の中の雰囲気が伝わりづらいということがわかった。このことから、ドアノブがどのような動きをすれば、部屋の中の雰囲気が伝わりやすいか検討した。この際に、以前の経験を活かし、考えすぎるのではなく、とにかく手を動かすことを意識した。実際には、作成したプロトタイ
プで様々な動きを試し、それぞれの動きでどのようなことが感じられるかを考えた。そして、メンバ間での話し合いや先生方との相談を経て、ドアノブを動物の尻尾のように動かし、部屋の中の雰
囲気を性格として表現することでユーザが直感的に理解できるのではないかと考えた。また、ドアノブの形状によってユーザに与える印象に違いが出ると考えたため、複数のドアノブの形状を制作した。ここから、今までの活動で第三者からのフィードバックが重要であることがわかっていたので、クラウドソーシングサイト Lancers を利用し、印象調査を行った。またこの印象調査に向けて、ドアノブの形状だけでなく、動き方においても与える印象に違いが出ると考えたため、ドアノ
ブの形状に加え、「速さ」、「振れ幅」、「開始位置」が異なる動画を制作した。この動画の制作にあたって、ドアノブの形状と動きによって与える印象を調査したかったため、ドアノブ以外のドア部
分や背景によってノイズが生じないように工夫した。そして、この印象調査の結果として、予想通
りドアノブの形状と動きによって与える印象が変わることがわかった。このことから、第三者からのフィードバックの重要性だけでなく、裏付けの重要性も実感することができた。この印象調査の結果をもとに、喜びの感情（ポジティブな動作）と悲しみの感情（ネガティブな動作）を実装した。
また、部屋の中の雰囲気を汲み取る方法として「にぎやかさ」に着目し、部屋の中の音量を用いて雰囲気を判断するとした。一方で、ドアノブの内部の構造上、本来のドアのように、ドアノブをひねってドアを開けることは実現できなかった。しかしながら、本プロジェクトでは「部屋の中の雰
囲気を直感的に伝える」ということを最も重要視していたため、致命的な問題と判断せず、今後の課題として設定した。その後、成果発表に向けて発表資料などの作成を進めた。発表スライドは、制作の過程や Element の構造をわかりやすく伝えることを意識し、作成した。そのために、プロモーションビデオやインフォグラフィックス作成にも力を入れた。成果発表会では、今までの作業をするにあたって、Element の価値や何を重要視するかを明確にしており、メンバ全員が共通意識として持っていたため、発表にブレがなく、効果的な発表をすることができた。また、この印象調査を実施したことで、成果発表会においてドアノブの動きを選定した理由が説明でき、聴衆者を説得できた。それに加え、根拠があるため、自信を持って発表することができた。
本プロジェクトでは、Element の制作を進めるとともに、Element 制作に関するプロセスを学ぶことができ、メンバ間での信頼関係の構築をすることができた。上記でも述べた通り、私たちのグループではリーダなどの役職に縛られず、それぞれのメンバが得意な分野で中心となって作業しGroup Report of 2022 SISP

- 84 -

Group Number 10

Interaction Elements - Creating Elements for Futureていたため、頼り頼られる高度な信頼関係が構築できた。これらの経験は大きな価値があった。本
プロジェクトでの経験や獲得した技術には大きな価値があり、今後の様々な活動に活かしていくことができるだろうと考えている。
（※文責: 森一朗）

5.1.2

Element.02「SKYFLAP」

本グループは、コンセプト決定の段階から非常に作業が難航し、何度もグループメンバと議論を重ねてきた。作業を進めていく上で自分たちが目指すものがどのようなものなのか、どのようなElement を作るべきなのかわからなくなることもあったが、完成形が見えてきたり形になっていくのを全員で見届けながら少しずつ着実に作業を進めていったことで SKY FLAP はある程度形になり、グループメンバ間のやり取りも上手になっていった。成果発表会ではすべてのユニットを同時に動かすことはできなかったものの、動いているユニットの視覚的、聴覚的な楽しさは見ている人たちに十分に伝わっただろう。これを伝えられただけでも、私たちが SKY FLAP を制作した意味はあったと考えている。制作時も作業としては単調なものも多く、一人ではなかなか進まないこともグループメンバ間で励ましあうことで無事に作業を終えることができた。このような良いチーム
開発の経験はなかなかできるものではないため、非常に貴重なものを得ることができたといえる。
今回のプロジェクトでやってきたことすべてが、グループメンバそれぞれの今後で活きることだろう。
（※文責: 佐々木野愛）

5.1.3

Element.03「うぇ〜ぶる」

本グループは、コンセプト決定や作品制作、発表準備など様々な活動を行った。グループ C では
特に作品制作の、波のような動きの機構や、手の動きをとる機構の実装が難航した。波のような動きの機構は、MDF を曲げる方法から始まり、ギアを使う方法、サーボモータを使う方法など様々な実装方法を考え、プロトタイプを制作するための機構設計や Adobe Illustrator でのデータ制作、レーザーカッターでの加工の作業などを繰り返してきた。加えて、Interaction Elements の教員やグループのメンバと何度も議論し、より良い実装方法を考えた。様々な機構制作の中には今まで制作したパーツをほとんどすべて見直す必要があるような状況もあったが、くじけずうぇ〜ぶるをより良い作品にするために、新たなパーツ制作作業を行った。手の動きをとる機構は Leap Motionという手の動きをとることができる電子機器を使用した。しかし、Leap Motion は制御が難しく、他のグループの電子機器が得意なメンバの力も借りながら最終発表会直前までプログラミング作業を行った。これらの作業は水曜の４，５限と金曜の４，５限というプロジェクトとして与えられた
時間外にも行い、中間発表会のときも最終発表会のときも、発表会の直前まで作業を行った。このように作品制作に力を入れたことで、ユーザーの手の動きで机上が波のように変形し、上にある物
体が動くという理想の動きを実装したうぇ〜ぶるを制作することができた。この何度も挫折を繰り返しながら、メンバで協力し大きな作品を作り上げた経験は、プロジェクト以外の様々な場面で自分の力として活きると考えている。
（※文責: 桒原佐紀）Group Report of 2022 SISP

- 85 -

Group Number 10

Interaction Elements - Creating Elements for Future

5.2

プロジェクトのまとめ

本プロジェクトでは、全体でアイデアの創出を行い、それ以降は 1 グループあたり 5 人で構成
される 3 つのグループに分かれて作業を行った。それぞれのグループで、部屋に入らずともドアノブの動きによって、部屋の中の不に気を感じ取ることができるドアノブである「moodoor」、記憶に残った夕焼けを、自分が好きなタイミングで保存することができる絵画である「SKY FLAP」、
手が届かない物を取ろうとする手の動きから、机上が波のように動き、物が運ばれてくるという新感覚の体験ができる「うぇ〜ぶる」を最終成果物として制作した。多種多様な役職を配置し、メン
バ同士の意見交換を大事にプロジェクト全体で一体感を持って活動を行った。達成度はグループ
によって違うが、本プロジェクトの目的である、今までにはなかった、未来を形作る Interaction

Elements のコンセプトを提示することができたと考える。
（※文責: 武藤颯汰）

Group Report of 2022 SISP

- 86 -

Group Number 10

Interaction Elements - Creating Elements for Future

付録 A

中間発表で使用した発表スライド

中間発表で制作した発表スライド例を掲載する。
スライド全体は以下の URL を参照。

https://hakodate-my.sharepoint.com/:p:/g/personal/b1020138_fun_ac_jp/
EYro7hFagA5MqLBB79Jc1GwB-hwYFn906fqstpXWNLhlhg?e=5Bgg1s

図 A.1: 中間発表に使用した発表スライドの一部

Group Report of 2022 SISP

- 87 -

Group Number 10

Interaction Elements - Creating Elements for Future

付録 B
イト

中間発表に向けて制作した Web サ

中間発表で制作した Web サイトを掲載する。

Web サイト全体は以下の URL を参照。
https://interaction-elements2022.herokuapp.com/
次ページに、中間発表で制作した Web サイトの一部画像を掲載する。

Group Report of 2022 SISP

- 88 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 B.1: 中間発表に使用した Web サイトの一部

Group Report of 2022 SISP

- 89 -

Group Number 10

Interaction Elements - Creating Elements for Future

付録 C

成果発表で使用した発表スライド

成果発表で制作した発表スライド例を掲載する。
スライド全体は以下の URL を参照。

https://docs.google.com/presentation/d/1FdrqOu8tkUN4UeSnT-1CLGKahSC6KB1B/
edit?usp=sharing&ouid=109654187863370996561&rtpof=true&sd=true

図 C.1: 中間発表に使用した発表スライドの一部

Group Report of 2022 SISP

- 90 -

Group Number 10

Interaction Elements - Creating Elements for Future

付録 D
イト

成果発表に向けて制作した Web サ

成果発表で制作した Web サイトを掲載する。

Web サイト全体は以下の URL を参照。
https://interaction-elements2022-ﬁnal.onrender.com/
次ページに、成果発表で制作した Web サイトの一部画像を掲載する。

Group Report of 2022 SISP

- 91 -

Group Number 10

Interaction Elements - Creating Elements for Future

図 D.1: 中間発表に使用した Web サイトの一部

Group Report of 2022 SISP

- 92 -

Group Number 10

Interaction Elements - Creating Elements for Future

参考文献[2.1.1-1] 川尻智幸，浮ケ谷敦生，小西由香里，柳原一也，夏目真規子，誰かいる DOOR，ショッカソン（Shock-a-thon）2015. 2015 年.https://www.touch100.org/contents/15/index.html(アクセス日:2022 年 10 月 15 日)[2.2.2-1] 日本玩具博物館:「東南アジアのセパタクロー」. 2018 年 9 月.
https://japan-toy-museum.org/archives/monthly/9(アクセス日:2022 年 7 月 20 日)[2.2.2-2] Wikipedia, 反転フラップ式案内表示機,
https://ja.wikipedia.org/wiki/%E5%8F%8D%E8%BB%A2%E3%83%95%E3%83%A9%E3%83%
83%E3%83%97%E5%BC%8F%E6%A1%88%E5%86%85%E8%A1%A8%E7%A4%BA%E6%A9%9F（アクセス日:2022 年 7 月 20 日）[2.3.1-1] 朝野房世，高江州義英，山本徳子: 「癒しの風景」イメージに関する研究，人間・植物関係学会雑誌 5(2), pp.25-30, 2006 http://www.jsppr.jp/academic_journal/pdf/Vol.5_

No.2_P25-30.pdf[2.3.1-2] HASEGAWA YASUHISA: 「 い ろ い ろ あ る イ ン タ ラ ク テ ィ ブ・テ ー ブ ル 」.
Yasuhisa Hasegawa. 2009 年 5 月 28 日. https://yasuhisa.com/could/article/
interactive-table/（アクセス日:2022 年 7 月 20 日）[3.3.1-1] inFORM(2013):Dynamic Physical Aﬀordances and Constraints through Shape andObject Actuation. Sean Follmer, Daniel Leithinger, Alex Olwal, Akimitsu Hogge, andHiroshi Ishii. 2013 年. http://www.leithinger.com/inFORM-2013(アクセス日:2022 年 7 月 20 日)

Group Report of 2022 SISP

- 93 -

Group Number 10