#author("2023-07-18T12:00:12+09:00;2023-07-18T11:59:21+09:00","default:member","member") #author("2023-07-18T12:02:09+09:00;2023-07-18T11:59:21+09:00","default:member","member") *motion 一つ一つの動きを擬音をテーマに表現する #image(01.gif) -''Saki Kougami'' -'''Keywords：Motion graphics,Adobe After Effects,WordPress''' -__[[WordPress Site>https://kohaku-work-589.com/]]__ //[[進捗>https://www.instagram.com/589_0509/]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 //computer graphics, ~ **概要 ***これは何？ -モーショングラフィックスの一つ一つの動きに着目し、細分化したGIF、WordPressサイト //-擬音をモーションで表現した映像制作 //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 -モーショングラフィックスは動くことで、シンプルでも静止画より様々な情報を伝えることができます。さらに近年ではスマホなどの普及によりテレビやCMだけではなくYouTubeなどのSNS、動画広告での使用も増加しています。 -モーショングラフィックスは視聴者に注目してもらうために様々なモーションが存在します。aftereffectを使用してモーショングラフィックスを作る方に向けて、モーションを分解して理解できるように今回はモーショングラフィックスの一つ一つの動きに着目し、モーショングラフィックスGIFを制作、サイトにまとめます。また擬音で整理することで、みなさんの想像する音で動きを直感的に見つけやすくします。 -モーショングラフィックスは視聴者に注目してもらうために様々なモーションが存在します。aftereffectを使用してモーショングラフィックスを作る方に向けて、モーションを分解して理解できるように、今回は、モーショングラフィックスの一つ一つの動きに着目し、モーショングラフィックスGIFを制作、サイトにまとめます。また擬音で整理することで、みなさんの想像する音で動きを直感的に見つけやすくします。 //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト -擬音を用いることでモーショングラフィックスの動きを直感的に理解・検索してもらえるサイト //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 -サイトマップ #image(サイトマップ.jpg) -ワイヤーフレーム |#image(02.jpg)||#image(03.jpg)||#image(04.jpg)| -__[[WordPress Site>https://kohaku-work-589.com/]]__ --GIF形式・1920×1080・10秒以内の尺 --動きを分類する（20投稿） //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール -aftereffect -Illustrator -WordPress --CONOHA WING --cocoon（モノクロ by yurukei20） //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 2023.04.11 - 2023.XX.XX (二、三週間別の企画していました) //&color(red){プロジェクトの期間｜2023.04.11 - 20XX.XX.XX }; ~ ***まとめ モーショングラフィックスにおける図形の動きや変形は、何がどのように動いているのかを理解するのが難しいです。しかしこのサイトでは、モーショングラフィックスの動きを簡潔に表したGIFによって、一つ一つの動きを理解することができます。また、技法だけではなく擬音でもモーションを探せることで、より直感的にモーショングラフィックスに使用したい動きを調べることができます。サイト画面は、TOP画面を検索ボタンにする、サイドバーや関連記事などの情報をなくすことで、辞書のように検索しやすくなっていると考えられます。記事には制作例や設定する項目を書く、難しい動きはZIPファイルにすることでサイトを見た方が、aftereffectsで再現できます。同じ学部の方（匿名希望）にサイトを見てもらったところ、わかりやすく自分も再現できると思うとコメントをいただきました。 //-動きに注目させるために色をモノクロにしてSEもなくしていたが情報量が足りず味気ないと感じた //-今まで通りの制作から色数を増やした制作に変更する //-SEは入れれそうなものにのみ挿入する //--すべてに挿入したかったがあまり自分の想像している音がなかったため //--動きに注目して音を感じてほしいため //--GIF形式にする予定なので音の情報が元から必要ないため //-試作をブラッシュアップしてさらに擬音を伝わりやすくしたい //-もう一度動きの分類をして制作を絞る //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; ~ ~ **調査 ***現状調査 -https://www.dhw.ac.jp/faculty/graphic/motiongraphics/ --モーショングラフィックスは動きや音がつくことにより静止画よりもさらに情報が伝わりやすいです。さらに近年ではスマホなどの普及によりテレビやCMだけではなくYouTubeなどのSNS、動画広告での使用も増加しています。 -https://goworkship.com/magazine/visualdesign-motion-ux-effect/ --モーショングラフィックスは視聴者に注目してもらうために様々なモーションが存在し、それらが組み合わさって一つの作品になっています。その一つ一つを分解、分析し区別できると考えます。 -https://tsuta-world.com/tsuta-marke/media/?p=7281 -https://thingmedia.jp/11323 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 -__[[しん>https://twitter.com/shiiiiiin223]]__ -__[[TAK>https://twitter.com/gakky72867206]]__ -__[[擬音>https://nihon5-bunka.net/onomatopoeia/#i-10]]__ //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[Action Planetあくしょんプラネット>https://www.youtube.com/@ActionPlanet]] -[[mooograph>https://www.youtube.com/@mooograph]] -[[Putti Monkey Wrench>https://www.youtube.com/@PuttiMW]] -[[モーション周期表>http://foxcodex.html.xdomain.jp/About.html]] -aftereffect ~ ~ **プロジェクト管理 ***スケジュール -__[[スプレッドシート>https://docs.google.com/spreadsheets/d/1T8OXNN3E5-0GIt9cLXVWo19qsB6dkSUJtqLNX3oza6A/edit?usp=sharing]]__ //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo -モーションの基礎を作り終える -サイトにGIF形式でupする %%-SNSにアップする%% %%-プラグインを入れる%% %%-__[[エクセル>https://docs.google.com/spreadsheets/d/1cnJ5-XbgWsVwDFOuTNhwpGYiW7TrQPAi8Ip8d8OKZWI/edit?usp=sharing]]__で単語を出す%% %%-いくつかまとまるのか全然違うものの集まりなのか分類する%% //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.07.11 ***作業 -__[[WordPress Site>https://kohaku-work-589.com/]]__ -最終発表から修正 --TOP画面新規作成 --記事（モーションの工程）を詳しく書く --ワイヤーフレーム変更 |#image(02.jpg)||#image(03.jpg)||#image(04.jpg)| 擬音50音順でモーションを分類してみると擬音の数に偏りが生じました。 特に「あ行」「な行」「や行」「ら行」が少なく、「は行」が一番擬音が多いという結果になりました。 ※__[[擬音>https://nihon5-bunka.net/onomatopoeia/#i-10]]__参照 ~ ~ **2023.07.04 ***作業 -__[[WordPress Site>https://kohaku-work-589.com/]]__ -最終発表から修正 --サイドメニューなどの削除 ~ ~ **2023.06.27 ***作業 -__[[WordPress Site>https://kohaku-work-589.com/]]__ -GIFの投稿、カテゴリー分類をする -最終発表準備 ~ ~ **2023.06.20 ***作業 -サイトマップ --50音順では何の50音順なのかわからない →技法で検索できない動きをを検索させたいなら「動きで探す」などのタイトルにした方が良い --〇〇で探すというタイトルにする -分類の仕方について --せっかくWordPressを使用しているから回転と移動どちらも対応している動きなどは複数のカテゴリーに入れ込む --場合によってはカテゴリーだけではなくタグも利用する -サイトマップ #image(サイトマップ.jpg) -WordPressサイトを作ろうとしたら有料になった --xfreeでは無料サーバーを一つしか作ることができないのでしくアカウントを作るか、サーバーをレンタルしなくてはならない →無料版だと読み込みが遅いためサーバーをレンタルする →[[konaha WING>https://www.conoha.jp/wing/]] -__[[WordPress Site>https://kohaku-work-589.com/]]__ -現在制作しているGIFの投稿、カテゴリー分類をする ~ ~ **2023.06.13 ***作業 -オンラインコミュニティサイトを作るにはWEBアプリケーションが必要になる。 現在の持っている技術でできる範囲を超えている。 -銀行や配達業者と契約する必要がある。 -多額のお金がかかる。 -WordPressであればオンプレミスとクラウドどちらでも使用できる。 まずはWordPressのカスタマイズから ~ ***企画変更 -前回の企画である「一つ一つの動きを、擬音をテーマにモーションで表現する研究」を「WordPressにて分類する」 ~ ***試作 -WordPress上の分類の仕方を考える --あいうえお順 --アニメーションの仕方(種類)で分類 --形と動きに関係性をつける(擬音や動きによって形を変える) -サイトマップ #image(サイトマップ1.jpg) -ワイヤーフレーム |#image(1.jpg)||#image(2.jpg)| //-動画制作 //-GIF化 ~ ~ ~ *on-line 新しいビジネスモデルとしての自前オンラインサイトの制作 //、会員制コミュニティーサイトの制作 #image(01.gif) -''Saki Kougami'' -'''Keywords：Web site, community, official site, creator economy''' //-[[進捗>https://www.instagram.com/589_0509/]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何？ -個人サイト、会員制オンラインコミュニティサイトのテンプレートサイト --独自コンテンツ販売サイト --ファンクラブ型オンラインサロン //、会員制コミュニティーサイト） //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 コミュニティーサイトには大きくオンラインサロンとファンクラブがあります。 オンラインサロンとは会費を支払い、情報などを得ることができる会員限定のオンラインコミュニティのことをいいます。ファンクラブは、特定のアーティストや有名人のファンが集まるコミュニティであり、そのアーティストや有名人に関連するコンテンツや情報を提供します。（会費ありと無料コンテンツもある） 数年前から著名人や有識者がオーナーとなり情報提供や交流をすることでオーナーと会員との距離感が近い存在であったり、スキルアップができたりするため人気になっています。 コロナウイルスの影響により社会的距離が求められ、オンライン活動が増えました。経済不安やおうち時間の増加によりクリエイターエコノミーが発展し、オンラインサロンなどのコミュニティーサイトは副業や起業の支援役割を果たしました。これ以外にもSNSやサブスクリプションサービスなどのオンラインコンテンツが増加した結果、コンテンツの飽和が生じ、今後は価値を感じるコンテンツの選択が重視されるようになると考えます。クリエイターエコノミーはさらに発展し、企業以外にも「この人の〇〇を買う」のような、人と人との交流を通じた場所の重要性が高まると考えられます。このため、個人が主体となり、コンテンツを発表、販売、他のサービスへの誘導、観覧者と交流できるサイトのテンプレートサイトを制作しようと考えました。また、プラットホームが消えるとサロンも消える可能性があるため自前サイトで制作しようと思いました。 //作り、特定のテーマや関心事に共感する人々が集まって交流できるサイトを制作しよう //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト -ペルソナがコンテンツを発表する個人サイトの制作 --ペルソナは女性クリエイター -コンテンツを発表、販売するサイト --グッズ販売、他のサービスへの誘導、観覧者と交流できるサイトはのちのプロジェクトに繋げる --課題としてこのサイトを作る過程を投稿型コンテンツ、香椎祭でやる模擬店のグッズ販売を想定したサイトにする -買いたいと魅力的に感じて長く滞在してもらえるように、清潔感のある見た目にする -操作性や流動性がわかりやすい画面作りをする //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 -Webサイト -ワイヤーフレーム -サイトマップ -サイトのテンプレート //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール -HTML //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 2023.05.23 - 2023.XX.XX //&color(red){プロジェクトの期間｜2023.04.11 - 20XX.XX.XX }; ~ ***まとめ 企画を変更したので、どのような問題点があるか教授たちと相談していきたいと思った。それらの意見も踏まえてワイヤーフレームやサイトマップを迅速に制作して前半を巻き返したいと思った。 //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; ~ ~ **調査 ***現状調査 コミュニティーサイトには大きくオンラインサロンとファンクラブがあります。 オンラインサロンとは会費を支払い、情報などを得ることができる会員限定のオンラインコミュニティのことをいいます。ファンクラブは、特定のアーティストや有名人のファンが集まるコミュニティであり、そのアーティストや有名人に関連するコンテンツや情報を提供します。（会費ありと無料コンテンツもある） 数年前から著名人や有識者がオーナーとなり情報提供や交流をすることでオーナーと会員との距離感が近い存在であったり、スキルアップができたりするため人気になっています。 ~ オンラインサロンの種類 -コミュニティ型 --コミュニティ型のオンラインサロンの目的は、同じ趣味や目標などを持つ会員が集まって交流することです。 -ファンクラブ型 --ファンクラブとは、タレントやアーティストなど著名人のファンが料金を支払って入会する会員制のサービスです。 -スキルシェア型 --オンラインサロンを運営するオーナーが会員に対して、知識やスキルを提供するという形です。 -プロジェクト型 --プロジェクト型のオンラインサロンは、オーナーが掲げるプロジェクトを達成するために、活動するコミュニティです。 ~ コロナウイルスによって社会的距離が必要性になり、多くの人々がオンラインでの活動や情報交換に頼るようになりました。 その中でイベントのオンライン移行やzoomを代表とするデジタル技術の進化によりオンラインコミュニティーやプラットホームを使用することが増加しました。 これらの技術はこれからの生活にも活用されて発展していくと考えます。 さらに経済不安やおうち時間の増加により学びへの関心や情報共有の需要の増加、クリエイターエコノミーが発展したことで、オンラインサロンなどのコミュニティーサイトは副業や起業の支援として重要な役割を果たしました。 また上記の内容からコロナ前と比べてコンテンツも増加しました。 その結果、イベントや娯楽をはじめとする様々なコンテンツが飽和状態にあります。 今後は飽和の中でどこに価値を感じるかを大切に購入したり利用したりしていく時代になると考えます。 よって現在も注目されているクリエイターエコノミーはこれからもさらに発展し、ファン同士やクリエイター、アーティストとの関係性を強化する場が必要になってくると思います。物やサービスは企業が提供するだけではなく、「この人の〇〇を買う」のような人と人との交流を通した場所で展開していくと考えました。 そこでクリエイターエコノミーに参入する必要性があると感じ、個人でプラットホームを立ち上げ、個人が主体となり、コンテンツを発表、販売、他のサービスへの誘導、観覧者と交流できるサイトのテンプレートを制作しようと考えました。また、プラットホームが消えるとサロンも消える可能性があるため自前サイトを制作しようと思いました。 //特定のテーマや関心事に共感する人々が集まり、交流するサイトを制作しようと考えました。 https://www3.nhk.or.jp/news/html/20210331/k10012947941000.html https://www.nhk.or.jp/gendai/articles/4528/ https://toyokeizai.net/articles/-/372557 https://ideasforgood.jp/glossary/creator-economy/ ~ -大手オンラインサロンのプラットホーム メリット --最短でオンラインサロンの立ち上げが可能 --既に多くのユーザーがプラットフォームに登録されているため、新規ユーザーの獲得や集客の負担が軽減される デメリット --利益から手数料を徴収される --自分好みのカスタマイズができない --プラットホームが消えるとサロンも消える -独自のサイトで運営しているサイト メリット --自分好みのカスタマイズできる --収益数料や利用料を支払う必要がないため収益を最大化することができる --自分が管理している限り消えない 増設長期的運用では優位になると考えられる デメリット --利用者の獲得と集客の負担 --サイト制作技術がいる 自前オンラインサロンは作ることができる -https://autoro.io/mag/onlinesalon/ -https://www.rbbtoday.com/webcode/sidebusiness/online-salon-start/#i -https://hint.lit.link/fan-club/fanclub-platform -https://coconala.com/magazine/8511 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 -__[[DMMオンラインサロン>https://lounge.dmm.com/]]__ -__[[CAMPFIRE Community>https://community.camp-fire.jp/]]__ -__[[個人公式サイト>https://www.mayu1111.org/]]__ -__[[芸能人の例>https://salon.horiemon.com/]]__ -__[[芸能人の例>https://ado-dokidokihimitsukichi-daigakuimo.com/]]__ //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -HTML ~ ~ **プロジェクト管理 ***スケジュール -__[[スプレッドシート>https://docs.google.com/spreadsheets/d/1T8OXNN3E5-0GIt9cLXVWo19qsB6dkSUJtqLNX3oza6A/edit?usp=sharing]]__ //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo %%-モーションの基礎を作り終える%% %%-サイトにGIF形式でupする%% %%-SNSにアップする%% %%-プラグインを入れる%% %%-__[[エクセル>https://docs.google.com/spreadsheets/d/1cnJ5-XbgWsVwDFOuTNhwpGYiW7TrQPAi8Ip8d8OKZWI/edit?usp=sharing]]__で単語を出す%% %%-いくつかまとまるのか全然違うものの集まりなのか分類する%% //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ **2023.06.06 ***作業 -女性クリエイターをペルソナにして、サイトのテンプレートを提案する →コンテンツは挿入？ --このサイトを作る過程を投稿型コンテンツ、香椎祭でやる模擬店のグッズを販売できるようにして使い方を想像しやすくする ~ -既存のテンプレート（有料プラットフォームなど）との違い ~ &color(blue){既存のテンプレート}; オンラインコミュニティサイトに不可欠な機能 一般的なメニュー構成 ~ -ホーム/ダッシュボード サイトの概要や最新情報の表示 コミュニティの活動のハイライト ~ -コンテンツ/記事 メンバーが投稿した記事やコンテンツの一覧 カテゴリ別のフィルタリングや検索機能 ~ -フォーラム/ディスカッション トピックやスレッドの一覧表示 メンバー同士のディスカッションや質問への回答 ~ -イベント/スケジュール 予定されているイベントやセミナーのスケジュール表示 参加登録やイベントへの参加確認 ~ -メンバープロフィール メンバーのプロフィール情報の表示と編集 メンバー同士のつながりやコミュニケーション ~ -メッセージ/ダイレクトメッセージ メンバー同士の個別メッセージのやり取り グループチャットやプライベートチャットの機能 ~ -リソース/資料 コミュニティメンバーが共有する資料やリソースの一覧 ファイルのアップロードやダウンロード機能 ~ -サポート/ヘルプセンター メンバーがサポートやヘルプを求めるための機能 よくある質問（FAQ）やガイドラインの提供 ~ //-支払い/会費管理 //サロンの利用料金や会費の管理機能 //支払い方法や会員ステータスの表示と更新 ~ -通知/アラート 新着投稿やコメント、イベントの通知機能 メンバーへの重要な情報の伝達 ~ ~ ~ &color(blue){今回制作するテンプレート}; -ホーム/ダッシュボード サイトの概要や最新情報の表示 クリエイターの活動のハイライト ~ -メンバーコミュニティ ファン同士、クリエイターとのの交流やコミュニケーションの場 投稿やコメント、いいねなどの機能 ~ -クリエイター情報: クリエイターのプロフィール情報、経歴、作品紹介 クリエイターの最新ニュースやスケジュールの表示 ~ -イベント/ライブ情報 クリエイターのイベント情報の一覧 チケット予約や参加申し込みの機能 ~ -オンラインコンテンツ ファンクラブ限定のオンラインコンテンツ（記事、動画、音楽、写真など）の提供 ダウンロードやストリーミングの機能 カテゴリ別のフィルタリングや検索機能 ~ -メッセージ/ダイレクトメッセージ ファンとアーティストの個別メッセージのやり取り グループチャットやプライベートチャットの機能 ~ -ファンクラブ限定特典 ファンへの特別なプレゼントや限定商品の販売 プラン（メンバーシップ）レベルに応じた特典の表示 ~ -コミュニティイベント ファン同士やアーティストとのコミュニティイベントの案内 オフラインイベントやファンミーティングの情報 ~ -サポート/ヘルプセンター メンバーがサポートやヘルプを求めるための機能 よくある質問（FAQ）やガイドラインの提供 ~ -通知/アラート 新着コンテンツやイベントの通知機能 メンバーへの重要な情報の伝達 //~ //-ファン投票/アンケート //ファンによる投票やアンケートの実施 //アーティストの意見や意思決定に参加する機能 ~ -プラン（メンバーレベル）/ランク メンバーシップのレベルやランクの表示 アクティブなファンやコントリビューターの評価 ~ -ファンクラブニュースレター ファンクラブメンバーへの定期的なニュースレター配信 最新情報や特別コンテンツの案内 //~ //-コンテスト/プレゼント企画 //ファンクラブメンバー向けのコンテストやプレゼント企画の実施 //特典の獲得や参加者間の交流を促進 ~ -ファンクラブストア オフィシャルグッズや限定商品の販売 メンバー限定の割引や特典の提供 ~ -アーカイブ/過去コンテンツ 過去のコンテンツやアーカイブの閲覧 過去のイベントやライブの映像や写真の提供 ~ -ソーシャルメディア連携 ファンクラブのソーシャルメディアアカウントとの連携 最新情報や投稿のシェア機能 ~ -支払い/会費管理 サロンの利用料金や会費の管理機能 支払い方法や会員ステータスの表示と更新 ~ -サポートへの連絡 ファンクラブの運営チームへの連絡手段 問い合わせやフィードバックの送信 ~ //今の案では、一般的なウェブサイトのテンプレートと、オンラインコミュニティサイトのテンプレートの違いがわかりにくいので、どのような根拠で、この提案になっているのか、という説明がされていると、よいと思います。 ~ //一般的なウェブサイトのテンプレートとの違い ~ ~ **2023.05.30 ***試作 -__[[サイトマップ>https://drive.google.com/drive/folders/1-3yu1z2NPAy9Cg7f2X23ERLSoy0i_cAS?usp=sharing]]__ -__[[ワイヤーフレーム>https://drive.google.com/drive/folders/11urQhNUeG7vToa3Xa02OD9zYnjZnSEaR?usp=sharing]]__ -企画細分化 ~ ***コンセプト -ペルソナがコンテンツを発表する個人サイトの制作 --ペルソナは女性クリエイター -コンテンツを発表、販売するサイト --グッズ販売、他のサービスへの誘導、観覧者と交流できるサイトはのちのプロジェクトに繋げる --このサイトを作る過程を投稿型コンテンツ、香椎祭でやる模擬店のグッズを販売できるようにして使い方を想像しやすくする -買いたいと魅力的に感じて長く滞在してもらえるように、清潔感のある見た目にする -操作性や流動性がわかりやすい画面作りをする ~ ~ **2023.05.23 ***企画変更 -会員制コミュニティーサイト制作 ~ ***先行事例 -__[[DMMオンラインサロン>https://lounge.dmm.com/]]__ -__[[CAMPFIRE Community>https://community.camp-fire.jp/]]__ -__[[個人公式サイト>https://www.mayu1111.org/]]__ -__[[芸能人の例>https://salon.horiemon.com/]]__ -__[[芸能人の例>https://ado-dokidokihimitsukichi-daigakuimo.com/]]__ ~ ***現状調査 コミュニティーサイトには大きくオンラインサロンとファンクラブがあります。 オンラインサロンとは会費を支払い、情報などを得ることができる会員限定のオンラインコミュニティのことをいいます。ファンクラブは、特定のアーティストや有名人のファンが集まるコミュニティであり、そのアーティストや有名人に関連するコンテンツや情報を提供します。（会費ありと無料コンテンツもある） 数年前から著名人や有識者がオーナーとなり情報提供や交流をすることでオーナーと会員との距離感が近い存在であったり、スキルアップができたりするため人気になっています。 ~ オンラインサロンの種類 -コミュニティ型 --コミュニティ型のオンラインサロンの目的は、同じ趣味や目標などを持つ会員が集まって交流することです。 -ファンクラブ型 --ファンクラブとは、タレントやアーティストなど著名人のファンが料金を支払って入会する会員制のサービスです。 -スキルシェア型 --オンラインサロンを運営するオーナーが会員に対して、知識やスキルを提供するという形です。 -プロジェクト型 --プロジェクト型のオンラインサロンは、オーナーが掲げるプロジェクトを達成するために、活動するコミュニティです。 ~ コロナウイルスによって社会的距離が必要性になり、多くの人々がオンラインでの活動や情報交換に頼るようになりました。 その中でイベントのオンライン移行やzoomを代表とするデジタル技術の進化によりオンラインコミュニティーやプラットホームを使用することが増加しました。 これらの技術はこれからの生活にも活用されて発展していくと考えます。 さらに経済不安やおうち時間の増加により学びへの関心や情報共有の需要の増加、クリエイターエコノミーが発展したことで、オンラインサロンなどのコミュニティーサイトは副業や起業の支援として重要な役割を果たしました。 また上記の内容からコロナ前と比べてコンテンツも増加しました。 その結果、イベントや娯楽をはじめとする様々なコンテンツが飽和状態にあります。 今後は飽和の中でどこに価値を感じるかを大切に購入したり利用したりしていく時代になると考えます。 よって現在も注目されているクリエイターエコノミーはこれからもさらに発展し、ファン同士やアーティストとの関係性を強化する場が必要になってくると思います。物やサービスは企業が提供するだけではなく、「この人の〇〇を買う」のような人と人との交流を通した場所で展開していくと考えました。 そこで私自身もクリエイターエコノミーに参入する必要性があると感じ、自分でプラットホームを立ち上げ、個人が主体となり、コンテンツを発表、販売、他のサービスへの誘導、観覧者と交流できるサイトを制作しようと考えました。また、プラットホームが消えるとサロンも消える可能性があるため自身でサイトを制作しようと思いました。 //特定のテーマや関心事に共感する人々が集まり、交流するサイトを制作しようと考えました。 https://www3.nhk.or.jp/news/html/20210331/k10012947941000.html https://www.nhk.or.jp/gendai/articles/4528/ https://toyokeizai.net/articles/-/372557 https://ideasforgood.jp/glossary/creator-economy/ ~ -大手オンラインサロンのプラットホーム メリット --最短でオンラインサロンの立ち上げが可能 --既に多くのユーザーがプラットフォームに登録されているため、新規ユーザーの獲得や集客の負担が軽減される デメリット --利益から手数料を徴収される --自分好みのカスタマイズができない --プラットホームが消えるとサロンも消える -独自のサイトで運営しているサイト メリット --自分好みのカスタマイズできる --収益数料や利用料を支払う必要がないため収益を最大化することができる --自分が管理している限り消えない 増設長期的運用では優位になると考えられる デメリット --利用者の獲得と集客の負担 --サイト制作技術がいる 自前オンラインサロンは作ることができる -https://autoro.io/mag/onlinesalon/ -https://www.rbbtoday.com/webcode/sidebusiness/online-salon-start/#i -https://hint.lit.link/fan-club/fanclub-platform -https://coconala.com/magazine/8511 ~ //***調査 //***技法・技術情報 ~ ~ ~ 前回までの企画 *motion × sound 擬音をモーションで表現する研究 #image(01.gif) -''Saki Kougami'' -'''Keywords：Motion graphics, computer graphics, Adobe After Effects''' -[[進捗>https://www.instagram.com/589_0509/]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何？ -擬音をモーションで表現した映像制作 //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 -モーショングラフィックスは動くことで、シンプルでも静止画より様々な情報を伝えることができます。さらに近年ではスマホなどの普及によりテレビやCMだけではなくYouTubeなどのSNS、動画広告での使用も増加しています。 -モーショングラフィックスは視聴者に注目してもらうために様々なモーションが存在します。今回はモーショングラフィックスの一つ一つの動きに着目し、細分化しながらモーショングラフィックスを制作します。 親しみがあり、みなさんの想像する音で動きを楽しんでもらうためにテーマは擬音を視覚的に捉えたものとします。 //音のイメージを的確に表現する方法を研究します。 //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト -簡単な図形、動きで擬音を視覚化するモーショングラフィックス //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 -4秒~10秒を目安に動画を12個制作 ( Instagram ) -GIF形式での書き出し //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; //~ ***制作ツール -aftereffect -Illustrator //&color(red){使用するツール｜ハードウエア・ソフトウエア}; ~ ***プロジェクトの期間 2023.04.11 - 2023.XX.XX //&color(red){プロジェクトの期間｜2023.04.11 - 20XX.XX.XX }; ~ ***まとめ -動きに注目させるために色をモノクロにしてSEもなくしていたが情報量が足りず味気ないと感じた -今まで通りの制作から色数を増やした制作に変更する -SEは入れれそうなものにのみ挿入する --すべてに挿入したかったがあまり自分の想像している音がなかったため --動きに注目して音を感じてほしいため --GIF形式にする予定なので音の情報が元から必要ないため -試作をブラッシュアップしてさらに擬音を伝わりやすくしたい -もう一度動きの分類をして制作を絞る //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; ~ ~ **調査 ***現状調査 -https://www.dhw.ac.jp/faculty/graphic/motiongraphics/ --モーショングラフィックスは動きや音がつくことにより静止画よりもさらに情報が伝わりやすいです。さらに近年ではスマホなどの普及によりテレビやCMだけではなくYouTubeなどのSNS、動画広告での使用も増加しています。 -https://goworkship.com/magazine/visualdesign-motion-ux-effect/ --モーショングラフィックスは視聴者に注目してもらうために様々なモーションが存在し、それらが組み合わさって一つの作品になっています。その一つ一つを分解、分析し区別できると考えます。 -https://tsuta-world.com/tsuta-marke/media/?p=7281 -https://thingmedia.jp/11323 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 -__[[しん>https://twitter.com/shiiiiiin223]]__ -__[[TAK>https://twitter.com/gakky72867206]]__ //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -[[Action Planetあくしょんプラネット>https://www.youtube.com/@ActionPlanet]] -[[mooograph>https://www.youtube.com/@mooograph]] -[[Putti Monkey Wrench>https://www.youtube.com/@PuttiMW]] -[[モーション周期表>http://foxcodex.html.xdomain.jp/About.html]] -aftereffect ~ ~ **プロジェクト管理 ***スケジュール -__[[スプレッドシート>https://docs.google.com/spreadsheets/d/1T8OXNN3E5-0GIt9cLXVWo19qsB6dkSUJtqLNX3oza6A/edit?usp=sharing]]__ //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo -モーションの基礎を作り終える -サイトにGIF形式でupする %%-SNSにアップする%% %%-プラグインを入れる%% %%-__[[エクセル>https://docs.google.com/spreadsheets/d/1cnJ5-XbgWsVwDFOuTNhwpGYiW7TrQPAi8Ip8d8OKZWI/edit?usp=sharing]]__で単語を出す%% %%-いくつかまとまるのか全然違うものの集まりなのか分類する%% //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ ~ ~ **2023.05.16 ***作業 -__[[進捗>https://www.instagram.com/589_0509/]]__ -ブラッシュアップ --効果音をつける --情報量を増やすため色数を増やす -効果音をダウンロード -企画見直し ~ ~ ***企画 -見ることで擬音を感じることができるモーショングラフィックスを複数作る ~ ~ **2023.05.09 ***作業 -__[[進捗>https://www.instagram.com/589_0509/]]__ ~ ***制作物の仕様 -Instagram -animation GIFで掲載（出来たら別サイト） ~ ***企画 %%-見ることで擬音やオノマトペを感じることができるモーショングラフィックスを複数作る%% %%-最後にそれらを組み合わせて使用し、音楽に合わせたモーショングラフィックスを作る%% ~ ~ **2023.05.02 ***作業 -メインビジュアルを変更 -プラグイン入れる -アカウント作る ~ ***企画 %%-様々な擬音からモーショングラフィックスを複数作る%% %%-最後にそれらを組み合わせて使用し、モーショングラフィックスを作る%% ~ ***制作物の仕様 %%-動画(VIMEO)%% -animation GIF（サイト） ~ ~ **2023.04.25 ***作業 -__[[エクセル>https://docs.google.com/spreadsheets/d/1cnJ5-XbgWsVwDFOuTNhwpGYiW7TrQPAi8Ip8d8OKZWI/edit?usp=sharing]]__で単語や音の案を出す -いくつかまとまるのか全然違うものの集まりなのか分類する ~ ***企画 -モーショングラフィックスを約30個作成する ~ ***テーマ -効果音（オノマトペ）、単語、環境音楽 -言葉に表せない情景なども含む -音が無くても音が聞こえるモーション、表現の組み合わせを研究する ~ ***制作物の仕様 -動画(VIMEO) -animation GIF ~ ***テーマ選定 -[[効果音（オノマトペ）>https://nihon5-bunka.net/onomatopoeia/#i-10]] -単語 人柄 鉱石 色 ~ ***今回の使用用途 -モーションロゴ -リリックビデオ ~ ***現状調査 -モーションロゴはどういった場面で使用されているか --ドラマの状況説明（推理など） --映画のタイトル --企業説明 --案内 --展示会場 --モーションロゴ --リリックビデオ --MV --PV ~ 使用される状況で効果的な表現は全く異なるので、 自身がどんな場面で使用するかを想定する必要がある ~ ~ **2023.04.18 ***研究は映像制作に決定 ***企画 -様々なモーションを制作していく -それらのモーションを分類する ~ ***現状調査 -https://www.dhw.ac.jp/faculty/graphic/motiongraphics/ --モーショングラフィックスは動きや音がつくことにより静止画よりもさらに情報が伝わりやすいです。さらに近年ではスマホなどの普及によりテレビやCMだけではなくYouTubeなどのSNS、動画広告での使用も増加しています。 -https://goworkship.com/magazine/visualdesign-motion-ux-effect/ --モーショングラフィックスは視聴者に注目してもらうために様々なモーションが存在し、それらが組み合わさって一つの作品になっています。その一つ一つを分解、分析し区別できると考えます。 -https://tsuta-world.com/tsuta-marke/media/?p=7281 -https://thingmedia.jp/11323 ~ ~ ***先行研究 -映像制作 --[[フォトコラージュアニメーション>https://twitter.com/gakky72867206/status/1644285102028124160?s=20]] --[[フォトコラージュアニメーション>https://twitter.com/hiro_023_/status/1645368309339271169?s=20]] --[[3Dを利用したモーショングラフィック>https://twitter.com/FuyuuG_mp4/status/1640239403481337857?s=20]] --[[C4Dを用いた作品>https://twitter.com/gakky72867206/status/1630468153523474432?s=20]] ~ -楽曲制作 --[[四コマ文庫>https://youtube.com/shorts/h07iBAfU9qs?feature=share]] --[[死神>https://youtu.be/8nxaZ69ElEc]] ~ ~ ***技法・技術情報 -映像制作 --[[もう石田>https://www.youtube.com/@mouishida/videos]] --[[UMU TOKYO>https://www.youtube.com/@umutokyo5997]] --[[藍瀬まなみ>https://youtu.be/a0rBr7ci8a4]] --[[サンゼ>https://www.youtube.com/@sanze-studio]] --[[カズノコ>https://www.youtube.com/channel/UC9h7pRTzhl62qEQfAY98efA]] --[[しん>https://twitter.com/shiiiiiin223]] --[[カナタ>https://twitter.com/kana_tasyohizei]] --[[【Blender攻略】The_Movie>https://twitter.com/The1Movie]] --[[Illustrator Tricks>https://twitter.com/inspiredbytheAI]] --[[TAK>https://twitter.com/gakky72867206]] --[[モーション周期表>http://foxcodex.html.xdomain.jp/About.html]] --[[Action Planetあくしょんプラネット>https://www.youtube.com/@ActionPlanet]] --[[mooograph>https://www.youtube.com/@mooograph]] --[[Putti Monkey Wrench>https://www.youtube.com/@PuttiMW]] ~ -楽曲制作 --[[使い方1>https://youtu.be/nMPUcoVmDE0]] --[[使い方2>https://youtu.be/AwuNxNmHoaI]] --[[使い方3>https://youtu.be/AwuNxNmHoaI]] --[[クランとリオン>https://youtu.be/KXXdBQLZqsI]] --[[Reo>https://youtu.be/a0rBr7ci8a4]] --[[シユウ>https://www.youtube.com/@siy6u_DTM]] --[[yamaha>https://www.youtube.com/@SteinbergJapan]] --[[音楽理論1>https://www.youtube.com/live/_zMHo4Lq9aw?feature=share]] --[[音楽理論2>https://youtube.com/playlist?list=PLedsR4qZqNvGKqv4_RgBv5Ve3uNBAsd1Y]] --[[音楽理論3>https://youtube.com/playlist?list=PLNowcEUQ8P2NmG0dsIVp0C1NvA6M2rVBE]] --[[音楽理論4>https://youtu.be/UFgVnhlhA40]] --[[音楽理論5>https://youtu.be/B2HdaiEm3U0]] ~ ~ **2023.04.11 ***調査 先輩方の先行研究の調査 PV制作でしたいことに近い -[["その波、寄せては返す" PV制作プロジェクト>https://design.kyusan-u.ac.jp/socialdesign/?%E6%9C%AB%E5%B4%8E%E6%97%A5%E8%8F%9C%E5%AD%90/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] -[[Vaporwave FuturePop>https://design.kyusan-u.ac.jp/socialdesign/?%E5%B2%A1%E9%83%A8%E6%98%8E%E6%97%A5%E9%A6%99/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] -[[幻鯨>https://design.kyusan-u.ac.jp/socialdesign/?%E5%B1%B1%E5%B7%9D%E6%BB%89%E7%94%9F/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] -[[Attractive Motion>https://design.kyusan-u.ac.jp/socialdesign/?%E7%9F%A2%E5%B9%A1%E9%BE%8D%E6%98%9F/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] ~ サイトを使用しているがモーションが参考になる -[[Web小説 『 黒い金魚 』>https://design.kyusan-u.ac.jp/socialdesign/?%E7%B4%80%E9%87%8E%E3%81%AF%E3%82%8B%E3%81%8B/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] ~ これらは物だけれど、ブランディングの参考になる -[[「kamakura」のブランド化、プロモーション>https://design.kyusan-u.ac.jp/socialdesign/?%E6%9C%AB%E5%B4%8E%E6%97%A5%E8%8F%9C%E5%AD%90/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6II]] -[[unkdown. PV>https://design.kyusan-u.ac.jp/socialdesign/?%E6%8A%98%E6%A9%8B%E5%92%8C%E7%9C%9F/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] -[[𝐃𝐀𝐘 𝐛𝐲 𝐃𝐀𝐘>https://design.kyusan-u.ac.jp/socialdesign/?%E9%87%8E%E7%94%B0%E8%90%8C%E3%80%85%E8%8F%9C/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] ~ ブランディングの一つにSNS運用も考えられるので参考になる -[[WITH FLOWERS>https://design.kyusan-u.ac.jp/socialdesign/?%E9%95%B7%E5%B2%A1%E8%8C%89%E7%90%86%E5%A5%88/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] //-[[かそう空間で息を吸う（仮想 × 夏想）>https://design.kyusan-u.ac.jp/socialdesign/?%E5%A5%88%E9%A0%88%E6%9C%AC%E7%9C%9F%E6%A4%B0/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I]] ~ ***やってみたいこと -映像制作 --テーマ、コンセプトを決めてそれに合わせた制作 --MVを作る ---モーショングラフィック ---2Dと3D（実写も？）を使用する ---楽曲制作と合わせてもいいかも ~ -楽曲制作 （のちにパッケージやMVに繋げる） --合成ソフト --MIXする --グラフィックデザイン ~ -サイト作成 --祖母の家から見た地元の市についてまとめたサイト --プロモーションビデオ制作 わからないことがあればAIに探してもらう ~ ~ ~