LogoMark.png

奈須本真椰/情報デザイン研究I のバックアップの現在との差分(No.0)


#author("2021-10-02T00:13:48+09:00","default:member","member")
*かそう空間で息を吸う(仮想 × 夏想)
ここは、架空の田舎の夏の概念を集めた空間です

~

#image(gatan_goton.jpg)

~

-''奈須本真椰''
-'''Keywords:夏,セーラー服,空気感'''
-https://kasou8.wordpress.com

~
~

**Overview
~
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
イラスト×アニメーション×Webサイト:「夏」「セーラー服」のイラストを用いたWebサイト
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
近年、日本の夏が暑すぎることから、私はすっきりとした涼しげなイメージのある想像上の夏に憧れを抱いている。また、私は夏の空・海の青色にセーラー服の紺色が溶け込む様子や、夏の風になびく様子も涼しげで綺麗であると感じている。
また、セーラー服を着ていると、「自分は学生である」という分かりやい証明が出来る(ブレザーは社会人も着る)。私はセーラー服のこういった特性が好きで、学生の頃の制服を着せられていた、どこか懐かしい空気感を忘れたくないと思っている。
そのため、学生の頃の夏の瞬間をいつでも思い返し、想いを馳せることの出来る空間をWeb上に作ろうと考えた。日記風に文章を書き留めることでさらにリアリティを演出出来ると考えている。
また、近年ではセーラー服をモチーフとしたファッションや楽曲、イラストなどが流行している。その理由として、アニメやゲームなどで学園モノが流行したことが挙げられる。イラスト投稿サイトのPixivではセーラー服に関する投稿が10万件を超えるなど、主に創作活動をする人々の間で流行しているように感じる。
こういったセーラー服が好きな人がこのWebサイトを訪れた際に、共感してもらえるような空間を作りたい。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
まるで自分もそこにいるかのような、夏の一瞬の空気感を鮮明に表現するイラストやそれを用いたアニメーション、Webサイトの作成
日記風に文章(投稿のコメント・カテゴリー名など)を書き留めることでよりリアリティを演出させ、どこかの誰かのあったかもしれない架空の夏の一場面を集めた(仮想)、夏に想いを馳せる(夏想)空間を作成
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
~
#iframe(https://kasou8.wordpress.com, 100%, 75%)
~
https://kasou8.wordpress.com
[[アンケート>https://docs.google.com/forms/d/e/1FAIpQLSfOflnJkzvUPHQpftIRn45F3wYrmRi8plAt1jN5Pk9vZsnRxg/viewform?usp=sf_link]]←こちらからよろしくお願い致します(※こちらのアンケートの回答は今後の研究の参考として学科サイトに掲載させていただく場合がございます。予めご了承ください。)
~

***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
スマホ(Android内蔵カメラ/ibisPaint X)、PC(Adobe After Effects/WordPress)
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
[[進行管理表>https://docs.google.com/spreadsheets/d/17sg7y8Inx4HBluotjVdZQfkQREF7b3tosz5w76ehe7A/edit?usp=sharing]]←こちらから!
~

***Conclusion / Summary
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
今回制作したWebサイトをセーラー服が好きな友人に見てもらい、感想を聞いたところ、「学生の頃の夏の瞬間やその空気を感じ、共感することが出来た」と伝えられた。
今回の研究の目標は、「主に創作活動をしているセーラー服が好きな人がこのWebサイトを訪れた際に、共感してもらえるような空間を作りたい」であったため、これは達成することが出来たと感じる。
しかし、もっと多くの方の意見も取り入れることで、より良いものが作れるのではないかと感じた。
ので、アンケートを作成しました。送っていただけるととても喜びます!
~
[[アンケート>https://docs.google.com/forms/d/e/1FAIpQLSfOflnJkzvUPHQpftIRn45F3wYrmRi8plAt1jN5Pk9vZsnRxg/viewform?usp=sf_link]]←こちらからよろしくお願い致します(※こちらのアンケートの回答は今後の研究の参考として学科サイトに掲載させていただく場合がございます。予めご了承ください。)
~
今回の研究で、文章を扱う際に、一人称視点(日記風)で書き留めることでよりリアリティを感じることが出来ると分かった。
また、後期では卒業研究を視野に入れた上で、引き続き前期で作成したイラストを用いた動画やWebサイトの制作を進める。イラストが少なく感じるので、これからも増やしていく(全体で30枚ほど)。
よりリアリティを求めるにはどうするか、アンケートの結果を元にさらに調査や研究を進めていきたい。

~
~

**Survey
~
***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-近年ではセーラー服をモチーフとしたファッションや楽曲、イラストなどが流行している(きっかけはアニメやゲームなどの学園モノ)
-イラスト投稿サイトのPixivではセーラー服に関する投稿が10万件を超えるなど、主に創作活動をする人々の間で流行している
~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};
-写真を用いた動画(シネマグラフ)のイメージ:(URL:https://helpx.adobe.com/jp/photoshop/how-to/create-cinemagraph.html)
-イラストを用いたアニメーションのイメージ1、2、3:(URL:https://twitter.com/imassc_official/status/1332200552000733187 、https://twitter.com/imassc_official/status/1332203845544337408 、https://twitter.com/imassc_official/status/1331876823639068673)花火や提灯の光の反射が自然で、リアリティがある。イラストを描く際に参考にしたい。
-イラストを用いたアニメーションのイメージ4:(URL:https://twitter.com/imassc_official/status/1332188863888982017)髪や植物のなびきが滑らかかつ自然な動きをしていて、リアリティがある。イラストを動かす際に参考にしたい。
//https://campaign-shinycolors.idolmaster.jp/ssr2020/
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
//-Aeを用いたLive2D風アニメーションの作成方法
-シネマグラフの作り方:(URL:https://helpx.adobe.com/jp/photoshop/how-to/create-cinemagraph.html)
-WordPressでgifアニメーションを取り入れる方法(URL:https://dandashokai.com/5596)
-セーラー服の構造(URL:https://www.schoolwear-shop.com/smartphone-page/sailor-uniform01.html)
~

~

**Project Management
~
***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
-[[進行管理表>https://docs.google.com/spreadsheets/d/17sg7y8Inx4HBluotjVdZQfkQREF7b3tosz5w76ehe7A/edit?usp=sharing]]←こちらから!
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-%%テーマの決定%%
-%%テーマに基づいた調査を進める%%
-%%進行管理表の作成%%
-%%タイトルの決定%%
-%%メインビジュアルの作成%%
-%%Webサイトの作成%%
-%%タイトル・サブタイトルの変更%%
-%%サイトマップの作成%%
-%%カテゴリーの作成%%
-%%目的・背景をもっと書き込む%%
-%%サイトアイコンの変更%%
-%%試作(イラスト、アニメーション)%%
-%%動画内に音を取り入れる%%
-%%カテゴリー名をシンプルに(名詞)%%
//-回答していただいたアンケートをまとめる
-レンタルサーバーの使用
-Webサイトの比率を編集
-イラストの制作(全体で30枚ほど)
-改善点を考慮した動画の試作
-サムネの変更?
-SNSとの併用?

~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**2020.7.1
~
***Webサイトの編集
~
#iframe(https://kasou8.wordpress.com, 100%, 75%)
~
#image(gatan_goton_catch_ai.jpg)
~
#image(kara_kara_catch_ai.jpg)
~
-アイキャッチイラストを変更し、投稿ページ内の画像のサムネと被らないようにした
~
***アンケートの作成
-Webサイト「かそう空間で息を吸う」についてのアンケートの作成
-[[アンケート>https://docs.google.com/forms/d/e/1FAIpQLSfOflnJkzvUPHQpftIRn45F3wYrmRi8plAt1jN5Pk9vZsnRxg/viewform?usp=sf_link]]←こちらから!(※こちらのアンケートの回答は今後の研究の参考として学科サイトに掲載させていただく場合がございます。予めご了承ください。)
~
***プレゼンを通して見つかった改善点
-Webサイトをより良いものにするため、レンタルサーバーを使用
-メニューが見やすくなるようにWebサイトの比率を編集
-カテゴリー名をシンプルに(名詞)
-SNSと併用しても良いかもしれない
~
***3年後期〜4年卒業研究に向けての目標
-卒業研究を視野に入れた上で、引き続き前期で作成したイラストを用いた動画やWebサイトの制作を進める
-イラストが少なく感じるので、これからも増やしていく(全体で30枚ほど)
-よりリアリティを求めるにはどうするか、アンケートの結果を元にさらに調査や研究を進めていきたい
-動画(現在は試作段階)は全体の動きをスローにすることで、さらに「瞬間」を表現することが出来るのでは
~

~

**2021.6.24
~
***Webサイトの編集
~
#iframe(https://kasou8.wordpress.com, 100%, 75%)
~
-これまでの投稿に添えていたひとことコメントが簡略的で質素だったので、人間味が溢れる文章に変更
-「このサイトについて」のページをさらに詳しく、分かりやすくするため文章を付け加えた
~
***イラストの作成
~
#image(sui_sui.jpg)
~
-金魚が泳ぐように、水面を左右に揺らすイメージ
~
#image(kara_kara.jpg)
~
-かざぐるまが風になびくように、それぞれ回転させるイメージ
~
#image(kara_kara2.jpg)
~
-線画がある状態も良いかもしれない…
~
***今週の目標
-イラストの作成
-Webサイトをより綺麗に
-アンケートを実施するなどして、Webサイトを訪れた人に感想を送っていただく(学科サイトに記載する)
~

~

**2021.6.17
~
***Webサイトの編集
~
#image(kasou_icon.jpg,,50%)
~
-サイトアイコンの変更(セーラー服と夏の日差しをイメージ)
~

***動画の試作
~
#YouTube(69fSfXnghNI)
~
-前回作成した動画内に新しく音を取り入れた
-より臨場感を表現出来たように感じたため、他の動画にも取り入れたい
-※動画内の音源はフリー音源サイト(https://soundeffect-lab.info)からお借りしました
~

***今週の目標
-イラストの作成
-Webサイトをより綺麗に
~

~

**2021.6.10
~
***Webサイトの編集
~
#iframe(https://kasou8.wordpress.com, 100%, 75%)
~
-どのようなWebサイトなのか一目で分かるよう、サブタイトルの下に説明文を付け加えた
-詳しいWebサイトの説明は「このサイトについて」に記載
~
#image(image_04.jpg)
~
-カテゴリーを増やし、分類した
-カテゴリー名も日記風(作文風?)にすることで、よりリアリティを演出する
~

***今週の目標
-イラストの作成(夏休みのイメージで、30日分描く?)
-動画内に音を取り入れてみる
-サイトアイコンの変更
-Webサイトをより綺麗に
~

~

**2021.6.3
~
***イラストの試作
~
#image(heww_dokan.jpg)
~
-花火が打ち上がるように、光る部分を動かすイメージ
~

***動画の試作
~
#youtube(suArEzMIMfg)
~
-窓の外の景色が流れていく様子や、電車が揺れる様子を再現
~
#image(gatan_goton.jpg)
~
-↑元のイラスト
~

***Webサイトの編集
~
#image(image_03.jpg,,75%)
~
-GIFアニメーションをWebサイトに載せる形から、YouTubeに上げた動画のリンクを直接Webサイトに埋め込む形に変更
~

***中間発表を通して見つかった改善点
-タイトル・サブタイトルの変更(どんなWebサイトなのか一目で分かるようにする)
-目的・背景をもっと書き込む、「好き」の追求
-サイトマップの作成
-投稿欄で画像と動画のサムネが被るため1つにまとめる?
-動画内に音を取り入れるのも良いかもしれない
-カテゴリーの作成
~

***今週の目標
-上記
-イラストの作成
-サイトアイコンの変更
~

~

**2021.5.27
~
***イラストの修正
~
#image(gatan_goton.jpg)
~
-襟のラインや細かい箇所の修正
~

***イラストの試作
~
#image(pachi_pachi.jpg)
~
-手持ち花火の光っている部分を左から右へと動かすイメージ
~

***Webサイトの編集
~
#image(image_01.jpg,,50%)
~
#image(image_02.jpg,,50%)
~
-日記風に書き留めることで、よりリアリティを演出する(どこかの誰かのあったかもしれない夏)。
~

***今週の目標
-イラストの作成
-サイトアイコンの変更
-Webサイトをより綺麗に
-動画の試作
~

~

**2021.5.20
~
***Webサイトの作成
-[[プロトタイプサイト(準備中)>https://kasou8.wordpress.com]](←こちらから)
レンタルサーバーを用いたWebサイトの作成を試みたものの、上手く稼働しなかったため、限られた範囲内でより良いWebサイトの作成を進める。
~

//***試作
//~

***今週の目標
-イラストの試作
-Webサイトをより綺麗に、見やすくする
~

~

**2021.5.13
~
***メインビジュアルの作成
~
#image(kasou_sample_01.jpg)
~

***試作(完成イメージ)
~
#image(kasou_sample_01.jpg)
~
#image(kasou_sample_02.jpg)
~
-1枚目→2枚目のように、電車の動きに合わせて窓の外の景色も横に流れて見えるよう動かしてみる
~

***今週の目標
-イラストの試作
-Webサイトの作成
~

~

**2021.5.6
~
***スケジュール
-[[進行管理表>https://docs.google.com/spreadsheets/d/17sg7y8Inx4HBluotjVdZQfkQREF7b3tosz5w76ehe7A/edit?usp=sharing]](←URL)
~

***タイトルの決定
-「かそう空間で呼吸する」
~

***サブタイトルの決定
-「仮想 × 夏想」
~

***今週の目標
-メインビジュアルの作成
-イラストの試作
-動画の試作(余裕があれば)
~

~

**2021.4.22
~
***調査
-イラストを用いたアニメーションのイメージ(URL:https://campaign-shinycolors.idolmaster.jp/ssr2020/)
~

***仮タイトルの決定
-「だれかのなつ」
~

***仮サブタイトルの決定
-「あったかもしれないしなかったかもしれない」
~

***今週の目標
-進行管理表の作成
-タイトルの決定
-サブタイトルの決定
~

~

**2021.4.15
~
***テーマの決定
-イラスト×gifアニメーション×Webサイト:「概念的な夏」「セーラー服」のイラストを用いたgifアニメーションやWebサイトの作成
-福岡の各地を訪れ、実際に存在する場所をイラストに(余裕があれば)
~

***Webサイト完成イメージ
-投稿イメージの参考1:透明愛好家(URL:https://tomeinohito.studio.site/)
-投稿イメージの参考2:昨年情報デザイン演習ⅢAにて作成したWebサイト(URL:https://nas5may.wordpress.com/)
~

***今週の目標
-テーマに基づいた調査を進める
-仮タイトルの決定
-仮サブタイトルの決定
~

~

**2021.4.8
~
***自分の好きなもの・持ち味
-概念的な夏
-セーラー服
-ダンス(より自分らしさが増す…?)
~

***概要
-イラスト×gifアニメーション×Webサイト:「概念的な夏」「セーラー服」のイラストを用いたgifアニメーションやWebサイトの作成
-ダンス×イラスト×gifアニメーション×Webサイト:「ダンス」「セーラー服」のイラストを用いたgifアニメーションやWebサイトの作成(自分が踊るところを撮影し、写真を参考にイラストを作成)
~

***使用するツール
-Android内蔵カメラ
-ibisPaint X
-Adobe Illustrator
-Adobe After Effects
-WordPress
-Live2D(余裕があれば)
~

***調査
-セーラー服について(URL:https://www.schoolwear-shop.com/smartphone-page/sailor-uniform01.html)購入も検討中
-WordPressでgifアニメーションを取り入れる方法(URL:https://dandashokai.com/5596)
~

***今年度の目標
-前期では主にイラスト・Webサイトの作成
-後期では主にgifアニメーションの作成
~

***卒業研究に向けての長期的な目標
-3年生(情報デザイン研究)では主にイラストの作成やそれを用いたgifアニメーション・Webサイトの作成
-4年生(卒業研究)では主にセーラー服をモチーフにしたグッズの作成・販売:情報デザイン研究で作成したイラストやgifアニメーションを用いたグッズ販売サイトの作成
//-「セーラー服を愛するすべての人たちへ。」
~

***今週の目標
-テーマの決定
~

//!メモ!
//夏の空気 呼吸 息吹 鼓動 足音
//夏のかお 香り/表情
//夏がそこにいる
//一瞬を閉じ込めました 一瞬を永遠に 一瞬が呼吸する
//シネマグラフ

~

~

~