見るモジ
言葉の意味を視覚と触覚で伝える2.5次元コンテンツ
概要
これは何？
言葉の意味を可視化するコンテンツ
背景と目的
擬音語(擬声語)であるオノマトペは、日本人の日常会話の中で多く使われているが、海外の人からすると、それを理解することはとても難しいらしい。
今回の研究では、活字にグラフィック要素を加えたタイポグラフィに、アニメーション要素と、触るという要素を加え、動き、質感を持たせることで、オノマトペを可視化させた今までにないコンテンツを作成する。
コンセプト
視覚と触覚で伝える文字
成果物の仕様
- webサイト
・掲載作品18枚
- Instagram(mojimoji__oo)
- 紙媒体(絵本)
・14.8×14.8cm
・全38ページ(サンプルページ1枚)
・製本直送を使用し、11月中旬ごろ納品予定
- オブジェ
・高さ、幅10cm以内の物を7個(1/7)
-進捗
制作ツール
- Adobe Illustrator
- Adobe aftereffect
- Visual design code(HTML・css)
- 製本直送(製本)
プロジェクトの期間
2024.04.12 - 2024.12.13
中間発表までのまとめ(10/25)
普段何気なく読み書きし、日常会話中で使っている言葉を説明する手段としてグラフィックやアニメーションを使用するため、見せ方や使い方を考えながら制作するのがとても難しかった。
さらにわかりやすくするため、音をつけてみたり複雑な動きをつけてみたりと試行錯誤したが、言葉の響きとギャップが生まれて逆効果になってしまったが、さまざまな試作を重ね、コンテンツ自体は一番シンプルで分かりやすいものができた。
今後はwebサイトの仕様の更なる改善やオブジェの強化等、よりコンテンツを使いやすくさせるというところに重点を置き、作業を進めたいと考えている。
調査
現状調査
制作を進めるにあたり、今回タイポグラフィのモチーフとなるオノマトペについての調査を行なった。
- オノマトペとは
猫が「ニャーニャー」と鳴く声、ドアを「ドンドン」と叩く音等、物理的な音を表す擬音語と、星が「きらきら」と輝く、氷が「ドロドロ」と溶ける等、実際には音を伴わない状態や心情を表す擬声語を総称した言葉をオノマトペという。
日本語のオノマトペの多さは他の言語と比較しても顕著であり、英語は約 3000 語であるのに対し、日本語は約 12000 語もあるとされている。しかし、オノマトペ は会話の中で使用されることがほとんどであり、学術論文には全く と言っていいほど用いられず、改まった話し言葉においても、くだけた会話に比べると使用が少ない。そのため、日本語学習者にオノマトペを導入する際は、主に、会話での使用を意識して行う必要がある 。
- オノマトペの効果
①訴求力が高まる
例えば、スーパーマーケットで販売されている商品のパッケージや、ポップに、食品であれば食感を表す「もちもち」、「サクサク」、掃除用品であれば清潔感を表す「ピカピカ」、「ツルツル」のようなオノマトペを用いることで、商品の具体性を感じ、より購買意欲を高めることが期待できる。
②表現力が高まる
会話や説明の中でオノマトペを用いることで、表現力が高まり、聞き手に直感的に伝えやすくする効果がある。
Apple社の共同創業者の一人であるスティーブ・ジョブズ氏は、「オノマトペの魔術師」と呼ばれていて、大人数の前での商品発表時、特に注目して欲しい際に「ブン」「ボン」などのオノマトペを用いて、聞き手に想像力を膨らませて惹きつけるプレゼンを行っていた。
③独自性を付与する
詩人、童話作家である宮沢賢治氏は、短編小説の『風の又三郎』で「どっどど どどうど どどうど どどう」、短編小説の『やまなし』で「クラムボンはぷかぷか笑ったよ」と、独特なオノマトペを作中に用いたことが注目されている。
また、漫画家である荒木飛呂彦氏の『ジョジョの奇妙な冒険シリーズ』での「ゴゴゴゴゴ」「ズキュゥゥゥン」等も、作品の代名詞としても知られている。
先行事例
「見るモジ」3年後期
AR絵本
技法・技術情報
- Adobe Illustrator
- Adobe aftereffect
- Adobe aero
- visual design code
プロジェクト管理
スケジュール
ToDo
-テーマ決め
-スケジュール制作
- 3年後期で制作したものをIllustratorで制作し直す、加筆修正
- aftereffectでアニメーションをつける
- webサイト、Instagramに掲載し直す
- 紙媒体に印刷
- オブジェの制作
- 概要集
発表用ページ
卒研中間発表
進捗記録
2024.10.25
進捗
- 中間発表2
- 絵本原稿制作
・ふりがなをつけた
・文字の大きさの調整
・QRコードを丸く柔らかい印象に、ビジュアルに合わせた色にする
メモ
2024.10.25
進捗
- 中間発表
- 学科サイト
・ターゲットは？
・まとめに感想を書かない
「自分の狙いはここにあって、そのためにこんな作業をしたことで、こう言った効果が生まれた」
- Webサイト
・フォントの指定
・メインビジュアルの大きさ、概要文の範囲を制御
- 絵本、オブジェ
・存在意義は？
・ふりがなをつける（子どもをターゲットに）
・触れる物を作る（オブジェ）
2024.10.18
進捗
- アニメーション作成(9/18)
→アニメーション
- 永嶋先生にwebサイトについての相談
・一つ一つの存在感がでかい→横３つで動いてるのがうるさいかも？
・フォントを指定するだけで印象が変わる
- webサイトの改善
・メインビジュアルを変更
・メインビジュアルに伴いサイト全体を白ベースに→タイポグラフィを主張
・コンテンツのページの画像サイズが大きく、Web上で見た時に画面からはみ出ていたため、大きさを制御
・English wordを省略→類似する単語を並べることで逆に混乱してしまうため
- オブジェ・絵本の試作
・製法直送を使って製本(11月中旬納品予定)
・オブジェの強度を上げる
2024.10.11
進捗
2024.10.4
進捗
- アニメーションの制作(5/18)
- aiデータ
- アニメーション
- 今後のスケジュール調整
〜10/25
・現段階の制作物をwebサイトに掲載
・オブジェの試作
・絵本のサンプルページ
10/25
・中間発表
〜11/1
・アニメーション終了
・webサイトコーティング
・オブジェの作成
・絵本原稿の作成
2024.09.27
進捗
- 制作の続き
- aiデータ
- アニメーション
- オブジェのアイデアスケッチ、必要材料の確認
→[[Google drive>]]
2024.09.20
進捗
- 制作の続き
- 新しいオノマトペの追加
Google drive
・ふにゃふにゃ
・びゅーん
・じわじわ
- 学科サイト背景・目的部分をあらためて設定
- 今後の制作スケジュールの見直し（かなり押してる）
夏季休暇
進捗・メモ
2024.07.19
進捗
- 前期最終発表③
- 制作の続き
→Google drive
- 前期最終審査に向けて学科サイトをブラッシュアップ
- 概要集の作成・提出
今後の計画
- 夏休み中
・アニメーションをつける
・展示物②の原稿・表紙作り（Illustrator）
- 次回の中間発表まで
・webサイトへの掲載
・展示物③のアイデアスケッチ
2024.07.12
進捗
- 前期最終発表②
- 制作の続き
- アニメーションに入る前にイラレでデザインの改善からやり直す
- 作成したアニメーションはmp4、GIFで書き出し、両方保存
→Google drive
- 概要集について
・引用元の詳細を記載すれば画像の使用は自由
・本文の段落の高さは必ず揃える。図面の説明は別のテキストボックスを作成する。本文中に図面の説明を入れてフォントサイズを変えると段落が狂う。
・調査項目について、前振りを付け加える。
・図面の大きさは特に揃える必要は無いが、幅を統一させたり、上下左右に揃えると見栄えは良い。
・図面の番号、見出しの番号の確認
2024.07.05
進捗
- 前期最終発表
中間発表時 使用ページ
- 講評内容
・ARの手間を調べる（時間的に厳しそうかを早く知るべき）
・GIF→256色までなので、色が変わる可能性がある
・mp4→音がつくと、わかりやすいがオノマトペと合わせづらい
・『言語の本質-ことばはどう生まれ、進化したか-』/今井むつみ
・目的がおかしい（評価基準がないから達成しようが無い）
・ビジュアルが悪いので作り直し、統一性が無い
・展示と研究は無関係
2024.06.28
進捗
- 概要集の作成
- 制作を進める
・アニメーションをつける
・中間発表に向けて試作を３つ
2024.06.14
進捗
2024.06.07
進捗
2024.05.31
進捗
- 中間発表②
中間発表時 使用ページ
- 中間発表にて言われたこと
・展示イメージができているのは良い
・ARにするかQRにするかもっとよく考えるべき
・「教材」ではない。これは何、なんのためかを定める
・アニメーション全部つけるのは大変。計画的に
- 学科サイトのブラッシュアップ
- 制作のつづき
2024.05.24
進捗
2024.05.17
進捗
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年後期の継続）
- バリアフリー教材
専攻事例
参考
