情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-32
2020/3/9

FanMaker：応援団扇のデザインおよび制作支援システム
中島萌子†

五十嵐悠紀†

概要：本稿ではデザイン面と制作面の両方から団扇作りを支援するシステム FanMaker を提案する．テンプレート・文字・スタンプ・削除・配色の 5 つの機能で団扇のデザイン支援を行い，デザインしたものを画像保存や PDF 化することで制作支援まで行う．これらの機能は応援団扇に関する事前アンケート調査の結果に基づき，必要な機能を洗い出した．デザインや工作の得意・苦手に関わらず団扇制作がより簡単にできるようになることを目指す．

1. はじめに能が備わっている．画面左側に提示された完成イメージを見ながらデザインや配色を試すことで，実際に画用紙を切アイドルのライブでは，お気に入りのメンバーの名前やり貼りする前に思考錯誤することができる．デザインが完

ファンサービスでして欲しいことが書かれた手作りの団扇成したら PDF 化して指定された倍率で画用紙に印刷する．

を持っている人が多くいる．手作りの応援団扇を持つこと画用紙に直接印刷することで下絵と画用紙のズレが起こらで，ライブ中，アイドルに自分の存在をアピールすることず，綺麗に切り取ることが可能になる．手作り団扇を作りができる．1 年に数回しか会えないアイドルに少しでも存たい人が，今よりも簡単に時間をかけずに団扇を作成する

在を知ってもらいたい，構ってもらいたい，という理由かことができるようになることを目標とする．

ら気合いを入れて団扇を作る人も多い．会場にはたくさんのファンがいる．その中で公演中にメンバーに構ってもらえるファンはごく一部である．そのため，他のファンが持っている団扇より少しでも目立つような内容やデザイン・配色にすることがとても重要である．
団扇作りにはいくつかの作成方法がある．一例として，画用紙を切り取る手法の制作過程を図 1 に示す．このように団扇作りは作業工程が多く，細かい作業もあるため，手間と時間がとてもかかる．初めて作る人の中には，そもそもどのように作っていけば良いのか分からない人がいる．
ライブ会場は暗く，ステージ上からは文字が見えにくいた
め，目立つ色の組み合わせを知らなければ，せっかく作った団扇に何が書いてあるのかが見えない場合がある．図 1の制作方法で最も大変なことは，画用紙を文字の形で切り取って自分で縁を作っていく作業である．手先が不器用な人は，カッターやハサミで画用紙をまっすぐに切り取ることができず形がいびつになることがあり，手先が器用な人であっても画数が多い漢字は切り取ることが難しい．また，カッターやハサミを長時間使用することになるため，手や肩が痛くなってしまうことがよくある．
本稿ではデザイン面と制作面から団扇作りを支援するシステム「FanMaker」を提案する．図 1 に示した画用紙を切り取る手法での団扇作りを対象とした．提案システムを設計するにあたって 370 人にアンケートを取り，その結果から団扇作りを支援するためのシステム要件を洗い出した．
提案システムには，制作経験がない人・デザインが苦手な人・時間がない人向けのテンプレート機能，制作経験がある人・自由にデザインしたい人向けの文字やスタンプを自由に配置できる機能，目立つ配色を提案してくれる配色機

図 1

団扇の制作過程の一例† 明治大学 総合数理学部 先端メディアサイエンス学科© 2020 Information Processing Society of Japan308

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

2. 関連研究

1B-32
2020/3/9

表1

回答者全員にした質問一覧

これまでに工作をシステムで設計・制作を支援する研究は多々されている．折り紙で作りたい形をシステムに入力すると類似した形をデータベースから検索して折り方を提示する幼児向け折り紙作品の創作支援システム[1]や，ユーザが自由に図柄をデザインするとシステムによってステンシル型版がインタラクティブに生成されるステンシルデザインのためのドローエディタ[2]が提案されている．
既存ツールの PowerPoint や Illustrator を使用して団扇の下絵を作成することは可能だが，ツールの知識がある人や使用するための環境がある人しかできない．そのため，これらのツールを使用できない人はネットで下絵となる画像を質問項目と回答
Q1-1 好きなアイドルのライブ・イベントに行った経験の有無
はい…354人

いいえ…16人

Q1-2 手作りの団扇を自分で制作した経験の有無
はい…331人

いいえ…39人

Q1-3 ライブ・イベントで持つ団扇の種類（複数回答法）
図2に示す
Q1-4 団扇作りを支援してくれるシステムがあったら利用したいか
はい…330人

いいえ…40人

Q1-5 支援システムにどのような機能が欲しいか（複数回答法）
図3に示す

探すが，作りたいデザインと同じ画像があるとは限らず，自由な団扇のデザインができない場合がある．従って，ポップアップカードのデザインを支援するシステム[3]にある平面デザインのようなデザイン支援機能が必要である．
また，配色決定の支援をする研究として，色彩調和論による配色デザイン支援システム[4]が提案されている．色相環による配色支援は，色に関する知識がないユーザであっても調和する配色を決められることが示されている．

3. アンケート調査
本システムを設計する前に，応援団扇に関するアンケー

図2

Q1-3 のアンケート結果

図3

Q1-5 のアンケート結果

ト調査を行った．回答者は 13～53 歳(未回答 2 名)までのア
イドルファン 370 名(男性 1 名，女性 369 名)．以下に具体的な質問内容とアンケート結果を記す．
3.1 回答者全員（370 人）
回答者全員にした質問と回答を表 1，図 2，図 3 に示す．
Q1-3 のその他には，「カンペ団扇」「自作イラスト団扇」「グループのオリジナル衣装をモチーフにした団扇」「ネームボード」という回答，Q1-5 のその他には，「Word 等の既存ツールにあるフォント以外のフォントを使える」「ハングルに対応している」「文字を毎回検索しているため，フォントの種類を簡単に選べる機能が欲しい」「自分で持っている写真やイラストの透過機能」「団扇に対する文字のサイズを比率

3.2 団扇の制作経験あり（331 人）などで大まかに設定でき，その後調整もできる機能」とい団扇の制作経験がある回答者にした質問と回答を表 2，う意見があった．Q1-2 から回答者の約 9 割が団扇の制作経図 4 に示す．制作経験がある回答者は 370 人中 331 人だっ験があること，Q1-3 からはライブやイベント中に手作りのた．Q2-1 から，制作経験がある人でも団扇作りに苦手意識

団扇が公式に販売されている団扇と同じ程度使われているを持っている人がいることが分かる．Q2-2 において，画用ことが分かった．Q1-4 で約 9 割の回答者が団扇作りの支援

紙を綺麗に切れないと回答した人が多かった．カーブの部システムがあったら利用したいと回答している．このこと

分や，画数が多い漢字，急な折り返しがある文字だとハサから団扇作りの支援システムに需要があることが分かった．

ミやカッターで切りにくく難しいということであった．思っているよりも時間がかかることと，長時間ハサミやカッターを使うことで手に痛みを感じる場合もあり，多くの人が大変だと回答していた．また，目立つ配色が分からないという意見もあった．

© 2020 Information Processing Society of Japan309

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

表2

団扇の制作経験がある回答者にした質問一覧
質問項目と回答

Q2-1 団扇作りは得意か苦手か（5段階評定法）（苦手1，得意5）

1B-32
2020/3/9

3.4 その他
その他，システム設計時の参考にするためにした質問がある．質問内容を表 4 に示す．Q4-1～Q4-4 は回答者全員に，
Q4-5～Q4-17 は団扇作成経験者に回答してもらった．表 4

図4に示す
Q2-2 団扇作りで大変だったこと・難しかったこと（自由回答法）の質問に対する回答を参考にして提案システムのテンプレート・文字・スタンプ機能で使用する色やフォント，スタ主な回答
画用紙を綺麗に切れないンプ等を決定した．

時間がかかる
手が疲れて痛くなる

表4

システム設計時の参考にするために聞いた質問一覧

Q4-1

テンプレート機能で欲しいファンサ内容

Q4-2

テンプレート機能で欲しいメッセージ内容

Q4-3

欲しい飾り(スタンプ)は何か

Q4-4

欲しいフォントのフォント名

Q4-5

作成経験の有無(名前団扇)

Q4-6

縁の数(名前団扇)

Q4-7

よく使うフォント(名前団扇)

Q4-8

作成経験の有無(ファンサービス団扇)

Q4-9

縁の数

(ファンサービス団扇)

目立つ配色が分からない
印刷時に団扇の大きさにサイズを合わせること団扇に画用紙を貼る時に曲がる

図4

Q2-1 のアンケート結果

3.3 団扇の制作経験なし（39 人）

質問項目

Q4-10 よく使うフォント(ファンサービス団扇)

Q4-11 作成経験の有無(メッセージ団扇)

Q4-12 縁の数

(メッセージ団扇)

Q4-13 よく使うフォント(メッセージ団扇)

団扇の制作経験がない回答者にした質問と回答を表 3，

Q4-14 団扇を作る手順

図 5 に示す．制作経験がない回答者は 370 人中 39 人だっQ4-15 よく選ぶ団扇の色た．Q3-1 で“はい”と回答した人が，Q3-2 で「団扇作りのQ4-16 よく選ぶ選ぶ文字の色ような作業が苦手」「作り方が分からない」「団扇を制作すQ4-17 よく使用するスタンプる時間が無かった」と回答しており，団扇制作の機会が失われている人が存在することが分かった．また，Q3-3 から団扇の制作経験がない人の約 7 割が今後団扇を自分で作りたいと思っていることが分かった．
表3

3.5 システム要件
これまでのアンケートの結果，支援システムに必要な機能を表 5 に示した 5 つに絞り，実装を行うことにした．
表5

団扇の制作経験がない人にした質問と回答一覧

支援システムに必要な機能

質問項目と回答
Q3-1 友人や業者に団扇を作ってもらったことはあるか
はい…8人

いいえ…31人

Q3-2 自分で団扇を作らなかった理由（複数回答法）

デザイン決定の簡略化，制作時間の短縮，初心者の支援(2) 文 字 機 能

図5に示す
Q3-3 今後自分で団扇を作りたいと思うか
はい…27人提案機能と支援内容(1) テ ン プ レ ー ト 機 能

いいえ…12人

自由な団扇デザイン，制作経験者の支援(3) ス タ ン プ
自由な団扇デザイン，制作経験者の支援(4) 配 色
目立つ配色の提案(5) 出 力 機 能 （ 印 刷 機 能 ）制作時間の短縮，画用紙を切り貼りする作業が苦手な人の支援

図5

Q3-2 のアンケート結果© 2020 Information Processing Society of Japan310

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

図61B-32
2020/3/9

提案システム FanMaker を用いたデザインの流れ

4. 提案システム「FanMaker」の概要
図 6 に提案システムの一連の流れを示す．画面右側のタブで機能を切り替えながら団扇のデザインをする．画面の字が表示される．画面 2（図 8（b））で文字のサイズ・位置・傾きを調整できる．追加ボタンをクリックすると画面左側に固定され，別機能の画面に移っても消えないようになる．

左側には団扇の完成イメージが表示される．団扇の色は画面上部のうちわパレットで変更できる．デザインが完成したら，画面左上にある PDF ボタンで PDF 化して画用紙に印刷する．指定された印刷設定で印刷することで団扇のサイズに合わせて出力される．PDF には，画用紙にカラーで印刷されるパターンと縁のみが印刷されるパターンの 2 種類がある．また，JPG をクリックすると画像としてデザインが保存される．提案システムは Processing3.3.7 を用いて実装した．各機能の詳しい説明をデザイン支援，保存・印刷，制作支援の 3 段階に分けて以下に述べる．
4.1 デザイン支援

図84.1.1 テンプレート機能
フォントと色，ファンサービス・メッセージ内容を選ぶと自動的に文字を配置してくれる機能．ファンサービス・メッセージ内容を 27 種類，フォントを 4 種類，色の組み合わせは 7 種類用意した．色数は 2 色または 3 色を選択でき，文字と縁の色を入れ替えられるようしたため，デザインパターンは全部で 3,024 種類となっている．

文字機能画面

4.1.3 スタンプ機能
画面 1（図 9（a））でスタンプ本体・縁の 2 つの色をカラーパレットからそれぞれ選びスタンプを選択すると，選んだ色で画面左側にスタンプが表示される．画面 2（図 9（b））
でスタンプのサイズ・位置・傾きを調整できる．スタンプ機能では，スタンプを反転させることとドラッグ＆ドロップで直接移動させることが可能となっている．追加ボタン
で画面左側に固定され，別機能の画面に移っても消えないようになる．

図7

テンプレート機能画面

4.1.2 文字機能
画面 1（図 8（a））でカラーパレットから文字本体・縁 1・縁 2 の色とフォントを 16 種類から選び，サブウィンドウに文字を入力すると，選んだ色とフォントで画面左側に文© 2020 Information Processing Society of Japan

図9

スタンプ機能画面

311

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

4.1.4 削除機能

1B-32
2020/3/9

4.2.2 印刷設定

4.1.2 節の文字機能と 4.1.3 節のスタンプ機能で追加した

カラーのまま PDF 化されたものはカラー印刷，縁のみが文字とスタンプの削除ができる機能．追加された文字とス

PDF 化されたものは白黒印刷を行う．推奨する用紙サイズ

タンプが画面に表示されている．青くなっている削除ボタ

を B4，ブラウザを Google Chrome とする．用紙サイズと指ンをクリックするとその文字またはスタンプが削除される．

定された倍率を設定して印刷することで，団扇のサイズに合わせた大きさで画用紙に出力することができる．A4 サイズの画用紙を使用する場合は団扇のサイズよりも一回り小さく出力されるが，特に問題はない．推奨倍率は A4 がカスタム 84％，B4 がカスタム 103％である．
4.3 制作支援
4.3.1 カラー印刷をした場合
ユーザは図 12 の青い部分を切って制作する．一番外側

図 10

削除機能画面を切るだけであるため，急なカーブが少なくハサミでも切りやすい．縁が 2 つあれば 3 回繰り返す作業を 1 回で終わ

4.1.5 配色らせることが可能になり，制作時間の短縮化に繋がる．カ色相環の中から使いたい色にカーソルを合わせると，その色を使ったオススメの配色が表示される．団扇の配色はラー印刷にすることで白画用紙があれば制作可能で材料を買い揃える手間が省かれる．

目立つようにすることが前提である．そのため，アメリカの色彩学者ジャッドが唱えた色彩調和論の秩序の原理[5]を用いた配色方法の中から，ダイアード，スプリットコン
プリメンタリー，トライアドを元に配色を決定する．また
HSB 色相環の明度を 2 種類選べるようにした．画面下には，文字とスタンプの選択した色を使った配色案が表示される．
図 12

カラー印刷の切り取り箇所

4.3.2 縁のみを白黒印刷した場合
ユーザは画用紙に印刷された黒線に沿って切り取る．本体・縁 1・縁 2 を全て切り取ったら図 13 のように貼り合わせていく．縁 1・縁 2 には貼る位置のガイドを印刷することで貼り合わせるときに発生するズレを防ぐ．
図 11

配色機能画面

4.2 保存・印刷
JPG ボタンで団扇のデザインが JPG 画像として保存され，PDF ボタンで PDF が作成される．
4.2.1 PDF 生成
PDF の生成方法には 2 種類ある．1 つ目はカラーのまま
PDF に出力する方法．テンプレート機能と文字機能で生成

図 13

縁のみを印刷した場合の貼り合わせ方される．テンプレート機能ではデザインをそのままの配置で，文字機能では文字を左上に寄せて挿入した文字ごとにPDF を作成する．2 つ目は，図 13 に示すように文字やスタンプの本体と縁の輪郭のみを色別に PDF に出力する方法．
文字機能とスタンプ機能で生成される．

5. ユーザアンケート
提案システムを 7 人のユーザに使用してもらいアンケートに回答してもらった．デザイン支援で良かった点として多く挙げられたのがテンプレート機能と配色提示についてであった．初めて作る人やデザインが苦手な人であっても© 2020 Information Processing Society of Japan312

情報処理学会 インタラクション 2020
IPSJ Interaction 2020

1B-32
2020/3/9

テンプレート機能のデザインアイデアを参考にすることができ，手軽にかつカスタマイズ性が高いデザインができる
ところが高評価であった．本稿の目的の 1 つであるデザインの得意・苦手に関わらず，より簡単に団扇のデザインをするための支援ができていると考えられる．また，配色提案があるため色彩に関する知識が無くても作りやすいという意見や，デザインが左側に提示されていることで完成形がイメージしやすく作っていて楽しいというコメントもあった．
一方，改善点として「文字の移動もスタンプのように直接移動させたい」「追加ボタンの押し忘れが起こるため何かアクションが欲しい」「追加した文字とスタンプを削除するだけでなく位置の変更等もできたら尚良い」等の意見をもらった．また，システムを良くするために他にどのような機能があったら良いかという質問には，「スマートフォンやタブレットで使えると直感的に操作ができそう」「団扇のデ図 15

団扇のデザインおよび文字制作の様子

6. まとめと今後の課題
本稿では，応援団扇のデザインと制作について着目した．

ザインをクックパッド[6]のように共有できたら面白そう」

5 つの機能を使ってデザイン支援を行い，画像保存や PDF「デザインを元に必要な材料の提示をしてくれる機能」等化によって制作支援も行うシステム「FanMaker」を提案しの意見があった．さらに応用できそうなこととして，キンた．本システムを利用することで，デザインや工作の得意・ブレシート †† のデザイン支援という意見があったため今苦手に関わらず，より簡単に時間をかけずに団扇制作がで後検討していきたい．

きるようになることを目指した．

次に，3 人のユーザに 4.3.2 節の方法で，ハサミを使い画

今後は，団扇のデザインから画用紙を切り取る辺の長さ用紙を切って貼り合わせてもらった．作業終了後にアンケを計測して制作時間の予測を行い，印刷前に必要な制作時ートに回答してもらった．4.3.2 節の手法の良かった点とし間をユーザに提示する機能を取り入れることを検討していて「文字や縁を自分で作る必要が無く，黒い線に沿って切る．ペーパークラフト制作のための制作時間提示[7]を応用るだけで良いため従来の方法よりも簡単なこと」「文字を貼することで実現できると考えており，これを導入することる位置のガイドを付けたことで張り付けるときにズレないでより使いやすくなるように支援ができると考える．また，こと」が挙げられた．不器用でも簡単かつ綺麗に画用紙を提案システムをスマホアプリや Web 上で使えるようにす切れるという意見もあり，提案システムの目的である工作ることで，より多くのユーザに使用してもらえるシステムの得意・苦手に関わらずより簡単に制作ができるようになを目指す．

るための支援ができていると考えられる．改善点として，表面に印刷すると黒い線が残って見栄えが悪くなるという意見があった．これは PDF 化するときに反転させることで改善することが可能だと考える．3 人のユーザはどちらかと言えば画用紙を切り取る作業が苦手であったが，図 14 に示す通り，ユーザ間で仕上がりの差が生まれずに画用紙で文字を作成することができた．

図 14

ユーザが作成した文字

参考文献[1] 鶴田 直也，三谷 純，金森 由博，福井 幸男. 幼児向け折り紙作品の創作支援システム. インタラクション 2011 論文集,
2011, IPSJ Symposium Series Vol.2011, No.3, pp.49-56.
[2] 五十嵐 悠紀，五十嵐 健夫. Holly: ステンシルデザインのためのドローエディタ, 情報処理学会論文誌, 2012, vol. 53, no.
3, p. 1119-1127.
[3] 上原 瞳, 五十嵐 悠紀. 球体ポップアップカードのデザイン支援システム, 第 26 回インタラクティブシステムとソフトウ
ェアに関するワークショップ(WISS2018), 2018, 3-A23.
[4] 安達 悠斗, 五十嵐 悠紀. 色彩調和論による配色デザイン支援システム, 第 27 回インタラクティブシステムとソフトウェ
アに関するワークショップ(WISS2019), 2019, 1-G3.
[5] 日本色研事業株式会社,
http://www.sikiken.co.jp/colors/colors12.html, 2007[6] クックパッド, https://cookpad.com/ (参照 2019/12/10)[7] 三谷 純. 計算機による立体紙模型の設計支援に関する研究，
PhD thesis, 東京大学大学院工学系研究科精密機械工学専攻,
2003.

†† ペンライトを装飾するためのシートのこと．OHP フィルムという透明なコピー用紙にデザインを印刷し，筒状のペンライトのライト部分に入れて使用する．

© 2020 Information Processing Society of Japan

313