#author("2024-12-20T14:37:10+09:00","default:member","member") #author("2024-12-20T14:38:03+09:00","default:member","member") *ミルモジ 言葉の意味を視覚と触覚で伝える2.5次元コンテンツ #image(main.jpg) -''佐光 美憂'' -'''Keywords：タイポグラフィ、AR絵本''' -[[Webサイト「ミルモジ」>https://miyuusakou.github.io/mirumoji00/]] -[[Instagram>https://www.instagram.com/mojimoji__oo/]] ~ **概要 ***これは何？ 言葉の意味を可視化するコンテンツ ~ ~ ***背景と目的 擬音語（擬声語）であるオノマトペは、日本人の日常会話の中で多く使われているが、海外の人からすると、それを理解することはとても難しいという話を聞いたことから本研究を始めた。 今回の研究では、活字にグラフィック要素を加えたタイポグラフィに、アニメーション要素と、触るという要素を加え、動き、質感を持たせることで、オノマトペを可視化させた今までにないコンテンツを作成する。 ~ ***コンセプト 視覚と触覚で伝える文字 ~ ***メインビジュアル コンテンツのメインビジュアルは、タイトルとなっている「見る」と「文字」の要素を入れ、『言葉の意味の可視化』という意味をこめている。 ~ ***成果物の仕様 -webサイト ・URL▶︎https://miyuusakou.github.io/mirumoji00/ ・掲載作品18枚 -紙媒体（絵本） ・A5スクエア ・左綴じ ・全40ページ（コンテンツ概要ページ、各コンテンツにつき見開き1ページ×18） ・[[しまうま出版>https://publish.n-pri.jp/]]を使用 ・[[原稿データ>https://drive.google.com/drive/folders/1WgqKLiUYrZo8NBc75dmVJgPKu9wM8-UI?usp=sharing]] |50|50|c |#image(book01.jpg)||#image(book02.jpg)| -オブジェ ・作品をモチーフにし、質感を見る物×4、実際に触れられる物×4の計8個 #image(object02.jpg) -Instagram(mojimoji__oo) ・ハッシュタグを使用し、コンテンツの拡散、コンテンツを知るきっかけ作りを目的としている。 #image(instagram.jpg) ~ ~ ***制作ツール -Adobe Illustrator -Adobe aftereffect -Visual design code(HTML・css) -しまうま出版(製本) ~ ~ ***プロジェクトの期間 2024.04.12 - 2024.12.13 ~ ***まとめ 普段何気なく使っている言葉を説明する手段として、「アニメーションを見る」、「物を触る」といった体験を通して、文字を「読む」「書く」といった動き以外にも、言葉の意味を吸収する新しいコンテンツができたと考える。また、コンテンツの入り口として、どの年代でも手に取りやすい絵本と、国籍を問わずアプローチができるInstagramを使用することで、親しみやすいコンテンツづくりを意識することができた。 ~ ~ **調査 ***現状調査 制作を進めるにあたり、今回タイポグラフィのモチーフとなるオノマトペについての調査を行なった。 -オノマトペとは 猫が「ニャーニャー」と鳴く声、ドアを「ドンドン」と叩く音等、物理的な音を表す擬音語と、星が「きらきら」と輝く、氷が「ドロドロ」と溶ける等、実際には音を伴わない状態や心情を表す擬声語を総称した言葉をオノマトペという。 日本語のオノマトペの多さは他の言語と比較しても顕著であり、英語は約 3000 語であるのに対し、日本語は約 12000 語もあるとされている。しかし、オノマトペ は会話の中で使用されることがほとんどであり、学術論文には全く と言っていいほど用いられず、改まった話し言葉においても、くだけた会話に比べると使用が少ない。そのため、日本語学習者にオノマトペを導入する際は、主に、会話での使用を意識して行う必要がある 。 -オノマトペの効果 ①訴求力が高まる 例えば、スーパーマーケットで販売されている商品のパッケージや、ポップに、食品であれば食感を表す「もちもち」、「サクサク」、掃除用品であれば清潔感を表す「ピカピカ」、「ツルツル」のようなオノマトペを用いることで、商品の具体性を感じ、より購買意欲を高めることが期待できる。 ②表現力が高まる 会話や説明の中でオノマトペを用いることで、表現力が高まり、聞き手に直感的に伝えやすくする効果がある。 Apple社の共同創業者の一人であるスティーブ・ジョブズ氏は、「オノマトペの魔術師」と呼ばれていて、大人数の前での商品発表時、特に注目して欲しい際に「ブン」「ボン」などのオノマトペを用いて、聞き手に想像力を膨らませて惹きつけるプレゼンを行っていた。 ③独自性を付与する 詩人、童話作家である宮沢賢治氏は、短編小説の『風の又三郎』で「どっどど どどうど どどうど どどう」、短編小説の『やまなし』で「クラムボンはぷかぷか笑ったよ」と、独特なオノマトペを作中に用いたことが注目されている。 また、漫画家である荒木飛呂彦氏の『ジョジョの奇妙な冒険シリーズ』での「ゴゴゴゴゴ」「ズキュゥゥゥン」等も、作品の代名詞としても知られている。 ~ ***先行事例 [[「見るモジ」3年後期>佐光美憂/情報デザイン研究II]] [[AR絵本>https://techpla.com/tansa/]] ~ ***技法・技術情報 -Adobe Illustrator -Adobe aftereffect -Adobe aero -visual design code ~ ~ **プロジェクト管理 ***スケジュール -[[卒業研究年間予定>https://docs.google.com/spreadsheets/d/1JMD_s7nX8su3F-_-gvSL5Wyou_142R4W2YkqsrYQgK8/edit?usp=sharing]] ~ ***ToDo %%-テーマ決め%% %%-スケジュール制作%% -3年後期で制作したものをIllustratorで制作し直す、加筆修正 -aftereffectでアニメーションをつける -webサイト、Instagramに掲載し直す -紙媒体に印刷 -オブジェの制作 -概要集 ~ ***発表用ページ [[卒研中間発表>佐光美憂/卒研メモ]] ~ #hr CENTER:''進捗記録'' #hr **2025.01.08 -最終ブラッシュアップ ~ **2024.12.20 ***進捗 -最終成果発表 ~ **2024.12.13 ***進捗 -最終成果発表 ~ **2024.12.6 ***最終成果発表 -cssを一つにまとめる -くるくるが物理的に回らない -絵本から飛んだ時、「ミルモジ」webサイトの一部に飛んだとわかるようにする -ビジュアルの統一 ・メインビジュアルが若干右寄り？ ・メインビジュアルを若干丸くor全体のフォントを角ばった感じにする ・GIFに枠がついてるのとついていないのを統一させる ・見出しのCSS装飾もっと探す ・例文のオノマトペ部分色変える ~ **2024.11.29 ***進捗 -最終成果発表① -学科サイトの編集 -後期概要集完成 [[作品概要（PDF）>https://drive.google.com/file/d/13i4r-U8aqOU353w26F9iLcLcfWDGs92Z/view?usp=sharing]] ~ **2024.11.22 ***メモ -作品概要 ・図版の番号は3回確認 ・気持ち悪い改行は字詰め -Webサイト ・メインページはメニューをつけない ・メインビジュアルにサブタイトルをつけ、サイト内の概要を一文減らす ・Instagramアイコンが浮いてる、サイトにあったシンプルなものに変える ***進捗 -作品概要の作成 -webサイトの作成 -オブジェ作り終了 ・質感を見るもの4つ、触れられるもの4つの計8つ #image(object01.jpg) ①しくしく キャラクターのフィギュア感を出すために樹脂粘土を使用 ②ドロドロ 樹脂粘土で文字を作成し、上からグルーガンを使用して液体状のプラスチックをかけてドロドロかんを出した。 ③ぷかぷか クリア粘土に、プラ板で作成した文字を乗せて、水に浮かんでいるようにした。 ④ぼこぼこ 例文に「板にぼこぼこ穴をあけた」という表現を使ったため。積み木を削り、穴を開けた。 ⑤くるくる ハンドスピナーを裏側に使用し、実際に手でくるくる動かせる仕組みを作った。 ⑥もこもこ 紙粘土で土台の文字を作成し、もこもこの毛糸を纏わせた。 ⑦むちむち スポンジにエンジェルクレイと呼ばれる柔らかい粘土をつけ、スクイーズを作成した。 参考▶︎[[100均のエンジェルクレイを使って手作りスクイーズ>https://youtu.be/A5W4YoU7KCw?si=DF7SnvC4i5v1fBQD]] ⑧ゆらゆら プラ板で文字を作り、足元がゆらゆらする土台に貼り付けた。指で押すと実際にアニメーションと同じ動きをするように作成した。 ~ **2024.11.15 ***メモ -コンテンツページをもっと充実させる。現在は絵本と同じ例文一文のみなので、差別化させる。 ・例文を増やす ・言葉の解説をつける（辞書のように） -メインページ ・メニューをなくす、区切りをなくすことで変な隙間なく埋める ・区切る程の量が無いかも？ ・サムネイルを静止画or冒頭1,2コマだけ動かす仕様にすればコンテンツページに飛びたくなるかも？ ***進捗 -絵本終了 ・[[原稿データ>https://drive.google.com/drive/folders/1WgqKLiUYrZo8NBc75dmVJgPKu9wM8-UI?usp=sharing]] ・製本ツール [[しまうま出版>https://publish.n-pri.jp/]] ・サイズ：A5スクエア ・納品予定日 12/3 ・全40ページ（コンテンツ概要ページ、1コンテンツにつき見開き1ページ×18） -Webサイトの改善 ・サイト全体のフォントを変えて、柔らかい印象に →使用ツール[[Google fonts(Zen maru gothic)>https://fonts.google.com/selection/embed]] ・SNS(Instagram)ボタンの位置を真ん中に調整 ・導入の説明文を要約、テキストボックスの幅を狭めてスッキリさせた ~ **2024.11.8 ***進捗 -中間発表3 -絵本原稿制作 ・右ページの例文を、それぞれのビジュアルを連想させるような文章にする。 -アニメーションGIF終了 ・[[GIFデータ>https://drive.google.com/drive/folders/18PvuLzSzsPMOgpOXQXw5cMaCuezQ0IRa?usp=sharing]] ・Webサイトに載せられるサイズに圧縮 →使用サイト [[I♡IMG>https://www.iloveimg.com/ja]] ~ **2024.11.1 ***進捗 -中間発表2 -絵本原稿制作 ・ふりがなをつけた ・文字の大きさの調整 ・QRコードを丸く柔らかい印象に、ビジュアルに合わせた色にする ***メモ -触れるオブジェを作る ・ボードにする ~ **2024.10.25 ***進捗 -中間発表 -学科サイト ・ターゲットは？ ・まとめに感想を書かない 「自分の狙いはここにあって、そのためにこんな作業をしたことで、こう言った効果が生まれた」 -Webサイト ・フォントの指定 ・メインビジュアルの大きさ、概要文の範囲を制御 -絵本、オブジェ ・存在意義は？ ・ふりがなをつける（子どもをターゲットに） ・触れる物を作る（オブジェ） ~ **2024.10.18 ***進捗 -アニメーション作成(9/18) →[[アニメーション>https://drive.google.com/drive/folders/18PvuLzSzsPMOgpOXQXw5cMaCuezQ0IRa?usp=sharing]] -永嶋先生にwebサイトについての相談 ・一つ一つの存在感がでかい→横３つで動いてるのがうるさいかも？ ・フォントを指定するだけで印象が変わる -webサイトの改善 #image(site02.jpg) ・メインビジュアルを変更 ・メインビジュアルに伴いサイト全体を白ベースに→タイポグラフィを主張 ・コンテンツのページの画像サイズが大きく、Web上で見た時に画面からはみ出ていたため、大きさを制御 ・English wordを省略→類似する単語を並べることで逆に混乱してしまうため -オブジェ・絵本の試作 ・製法直送を使って製本(11月中旬納品予定) ・オブジェの強度を上げる #image(site03.jpg) ~ **2024.10.11 ***進捗 -授業欠席 -アニメーション作成(6/18) -aiデータ終了 -[[aiデータ>https://drive.google.com/drive/folders/1MGorvmRJkz7MzSKbHXflCuyLmJ0szA1S?usp=sharing]] -[[アニメーション>https://drive.google.com/drive/folders/18PvuLzSzsPMOgpOXQXw5cMaCuezQ0IRa?usp=sharing]] -メインビジュアル変更 ~ **2024.10.4 ***進捗 -アニメーションの制作(5/18) -[[aiデータ>https://drive.google.com/drive/folders/1MGorvmRJkz7MzSKbHXflCuyLmJ0szA1S?usp=sharing]] -[[アニメーション>https://drive.google.com/drive/folders/18PvuLzSzsPMOgpOXQXw5cMaCuezQ0IRa?usp=sharing]] -今後のスケジュール調整 〜10/25 ・現段階の制作物をwebサイトに掲載 ・オブジェの試作 ・絵本のサンプルページ 10/25 ・中間発表 〜11/1 ・アニメーション終了 ・webサイトコーティング ・オブジェの作成 ・絵本原稿の作成 **2024.09.27 ***進捗 -制作の続き -[[aiデータ>https://drive.google.com/drive/folders/1MGorvmRJkz7MzSKbHXflCuyLmJ0szA1S?usp=sharing]] -[[アニメーション>https://drive.google.com/drive/folders/18PvuLzSzsPMOgpOXQXw5cMaCuezQ0IRa?usp=sharing]] -オブジェのアイデアスケッチ、必要材料の確認 →[[Google drive>]] ~ **2024.09.20 ***進捗 -制作の続き -新しいオノマトペの追加 [[Google drive>https://drive.google.com/drive/folders/1MGorvmRJkz7MzSKbHXflCuyLmJ0szA1S?usp=sharing]] ・ふにゃふにゃ ・びゅーん ・じわじわ -学科サイト背景・目的部分をあらためて設定 -今後の制作スケジュールの見直し（かなり押してる） **夏季休暇 ***進捗・メモ -制作の続き -ビジュアルの変更 #image(site01.jpg) -[[Google drive(ai)>https://drive.google.com/drive/folders/1MGorvmRJkz7MzSKbHXflCuyLmJ0szA1S?usp=sharing]] -[[Google drive(GIF)>https://drive.google.com/drive/folders/18PvuLzSzsPMOgpOXQXw5cMaCuezQ0IRa?usp=sharing]] -ARをやめる→QRへ ・スケジュール調整により、タスク削減のため -mp4→GIF -コンテンツを19→18へ ・Webサイト及びInstagramで横3つで並べることを想定した際に、キリが良いため ~ **2024.07.19 ***進捗 -前期最終発表③ -制作の続き →[[Google drive>https://drive.google.com/drive/folders/1seyd_f8uYCeSYMVLSsSBO2sdMheXFWfA?usp=sharing]] -前期最終審査に向けて学科サイトをブラッシュアップ -概要集の作成・提出 ***今後の計画 -夏休み中 ・アニメーションをつける ・展示物②の原稿・表紙作り（Illustrator） -次回の中間発表まで ・webサイトへの掲載 ・展示物③のアイデアスケッチ ~ **2024.07.12 ***進捗 -前期最終発表② -制作の続き -アニメーションに入る前にイラレでデザインの改善からやり直す -作成したアニメーションはmp4、GIFで書き出し、両方保存 →[[Google drive>https://drive.google.com/drive/folders/1seyd_f8uYCeSYMVLSsSBO2sdMheXFWfA?usp=sharing]] -概要集について ・引用元の詳細を記載すれば画像の使用は自由 ・本文の段落の高さは必ず揃える。図面の説明は別のテキストボックスを作成する。本文中に図面の説明を入れてフォントサイズを変えると段落が狂う。 ・調査項目について、前振りを付け加える。 ・図面の大きさは特に揃える必要は無いが、幅を統一させたり、上下左右に揃えると見栄えは良い。 ・図面の番号、見出しの番号の確認 ~ **2024.07.05 ***進捗 -前期最終発表 [[中間発表時 使用ページ>佐光美憂/卒研メモ]] -講評内容 ・ARの手間を調べる（時間的に厳しそうかを早く知るべき） ・GIF→256色までなので、色が変わる可能性がある ・mp4→音がつくと、わかりやすいがオノマトペと合わせづらい ・『言語の本質-ことばはどう生まれ、進化したか-』/今井むつみ ・目的がおかしい（評価基準がないから達成しようが無い） ・ビジュアルが悪いので作り直し、統一性が無い ・展示と研究は無関係 ~ **2024.06.28 ***進捗 -概要集の作成 -制作を進める ・アニメーションをつける ・中間発表に向けて試作を３つ -動画の圧縮・GIF変換 ・[[video smallar>https://www.videosmaller.com/jp/]] ・[[cup cat>https://www.capcut.com/ja-jp/]] -GIFを学科サイトに載せたい ・サイズを小さくする →[[動画ファイルサイズをオンラインで小さくする方法>https://webdesignday.jp/tools/how-to-reduce-video-file-size-online/]] ・AeでそのままGIF保存するのではなく、mp4で保存し、オンライン上で動画ファイルサイズを小さくし、GIFで保存し直す ・[[OBの先輩の学科サイト>https://design.kyusan-u.ac.jp/socialdesign/?茂里洸大/卒業研究I]] ~ ~ **2024.06.14 ***進捗 -中間発表④ [[中間発表時 使用ページ>佐光美憂/卒研メモ]] -制作を進める -GIFを学科サイトに載せたい ・サイズを小さくする →[[動画ファイルサイズをオンラインで小さくする方法>https://webdesignday.jp/tools/how-to-reduce-video-file-size-online/]] ・AeでそのままGIF保存するのではなく、mp4で保存し、オンライン上で動画ファイルサイズを小さくし、GIFで保存し直す ・[[OBの先輩の学科サイト>https://design.kyusan-u.ac.jp/socialdesign/?茂里洸大/卒業研究I]] ~ ~ **2024.06.07 ***進捗 -※就職活動により欠席 -中間発表③ [[中間発表時 使用ページ>佐光美憂/卒研メモ]] -制作を進める ~ ~ **2024.05.31 ***進捗 -中間発表② [[中間発表時 使用ページ>佐光美憂/卒研メモ]] -中間発表にて言われたこと ・展示イメージができているのは良い ・ARにするかQRにするかもっとよく考えるべき ・「教材」ではない。これは何、なんのためかを定める ・アニメーション全部つけるのは大変。計画的に -学科サイトのブラッシュアップ -制作のつづき ~ **2024.05.24 ***進捗 -中間発表① -中間発表ページのブラッシュアップ [[中間発表時 使用ページ>佐光美憂/卒研メモ]] -[[アニメーション試作①>https://drive.google.com/file/d/1PzlJh7aT9aKuQjZQvkspdNBMEvQ6YpKb/view]] ~ **2024.05.17 ***進捗 -中間発表の準備 [[中間発表時 使用ページ>佐光美憂/卒研メモ]] -メインビジュアルを使って試作を制作 -展示イメージ #image(中間報告-展示イメージ.jpg) ~ **2024.05.10 ***テーマ -視覚で伝える文字「続・見るモジ」 ~ ***進捗 -webサイト 3年後期のサイトをそのまま使う。サムネイルの画像をGIFアニメに変えて、カーソルをおいたら動くようにしたい。クリックしたら各画像の説明ページに飛ぶのは継続させる。 -展示物を増やす 紙粘土等で作ったオブジェを展示。展示が華やかになる＋物体によってテクスチャを見せることで更に視覚的に意味を伝えることにつなげる -紙媒体×映像について わざわざARにする意味は？ユーザーからするとカメラ機能の許可やアプリのダウンロードが面倒くさいかも →それぞれのページにQRコードを付けて、WEBサイトの該当ページに飛ばす -3年後期の制作物をベースに。 理想：手描きで描いてたのをイラレで作り替える→aftereffectでGIFアニメーションを作る→webサイトに埋め込む→紙に印刷（カメラをかざすと動かす仕組みにする）→それぞれにあった展示用のオブジェを作る（MAX10個が多分限界） ~ ~ ~ ~ **2024.04.26 ***テーマ -続・見るモジ ~ ***進捗 -adobe aero -後期の制作物をベースに Illustratorで作り変えて、After Effectsでアニメーションをつける 紙媒体に印刷、スマホをかざすとイラストが動き出す グラフィック＋アニメーション要素でさらに理解度を上げる -手書きで描いていた分のいくつかをIllustratorで作り直す ~ ~ **2024.04.19 ***テーマ -絵本と映像の融合 ~ ***進捗 -先生とテーマについて相談 紙媒体×映像 -adobe aero -後期の制作物をベースに -デスクトップだけでなく、実際に手に取れるものを展示したい -スケジュールの制作 ~ ~ **2024.04.12 ***候補 -タイポグラフィで言葉の意味を伝える（3年後期の継続） -バリアフリー教材 ~ ***専攻事例 -[[AR絵本>https://techpla.com/tansa/]] ~ ~ 参考 -https://it-trend.jp/development_tools/article/32-0002 -https://qiita.com/sanokazuya0306/items/75eeb7009bf4eb5678bc ~ ~