LogoMark.png

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


#author("2021-11-08T21:11:28+09:00","default:member","member")
#author("2022-01-17T00:54:29+09:00","default:member","member")
*夏のクール便 ー ひんやり瓶
訪れた人に夏を届けるWebサイト
//ここは、夏を届ける空間です

~

#image(main_02.jpg)
#image(main_03.jpg)

~

-''奈須本真椰''
-'''Keywords:夏,セーラー服,空気感'''
-https://maya-des.github.io/cool_sample02/(準備中)
-'''Keywords:夏,空気感'''
//-https://maya-des.github.io/summer_cool/
//-https://maya-des.github.io/cool_sample09/ (更新中)
-https://maya-des.github.io/summer_cool/ ※PCからの閲覧推奨

~
~

**概要
~
***これは何?
//&color(red){これは何か・・を簡潔に};
イラスト×Webサイト:「夏」「セーラー服」をモチーフに物語が展開していくWebサイト
イラスト×Webサイト:「夏」をモチーフに物語が展開していくWebサイト
//アニメーション×グッズ
~

***背景と目的
//&color(red){プロジェクトの背景と目的};
近年、日本の夏が暑すぎることから、「夏」というものに対し嫌悪感を抱いている人も少なくないと感じる。私自身もすっきりとした涼しげなイメージのある想像上の夏に憧れを抱いている。
そのためサイト上のイラストを郵便物(=ひんやりした瓶)に見立て、Webサイトを訪れる人に届けることで、夏に対する嫌悪感を少しでも軽いものにしたいと考えた。サイト上で物語を展開させる際に、日記風で書き留めることでさらにリアリティを演出することが出来ると考えている。
また、私は夏の空・海の青色にセーラー服の紺色が溶け込む様子や、夏の風になびく様子も涼しげで綺麗であると感じている。
近年ではセーラー服をモチーフとしたファッションや楽曲、イラストなどが流行している。その理由として、アニメやゲームなどで学園モノが流行したことが挙げられる。イラスト投稿サイトのPixivではセーラー服に関する投稿が10万件を超えるなど、主に創作活動をする人々の間で流行しているように感じる。
こういったセーラー服が好きな人がこのWebサイトを訪れた際に、共感してもらえるような空間を作りたい。
//また、私は夏の空・海の青色にセーラー服の紺色が溶け込む様子や、夏の風になびく様子も涼しげで綺麗であると感じている。
//近年ではセーラー服をモチーフとしたファッションや楽曲、イラストなどが流行している。その理由として、アニメやゲームなどで学園モノが流行したことが挙げられる。イラスト投稿サイトのPixivではセーラー服に関する投稿が10万件を超えるなど、主に創作活動をする人々の間で流行しているように感じる。
//こういったセーラー服が好きな人がこのWebサイトを訪れた際に、共感してもらえるような空間を作りたい。
//~
//また、来年の卒業研究では、グッズを制作し販売したいと考えている。その試作も兼ねて、まずは自分用にグッズ(今回の研究テーマをモチーフにしたもの)を制作したい。
~

***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
まるで自分もそこにいるかのような、夏の一瞬の“涼しげな”空気感を鮮明に表現したイラストや、それを用いたWebサイトの作成
これらを郵便物(=ひんやりした瓶)に見立て、Webサイトを訪れる人に届ける
日記風に文章(投稿のコメント・カテゴリー名など)を書き留めることでよりリアリティを演出させる
日記風に文章を書き留めることで、よりリアリティを演出させる
「暑い」という単語を使わずに夏の暑さを表現し、「涼しい」という単語を使わずに夏の涼しさを表現
~

***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
イラストのサイズ:1024×768
GitHubを用いた、画面をスクロールすることで物語が展開していくWebサイト
//動画のサイズ:16:9
//グッズのサイズ:キーホルダーやアクリルスタンドなど、小物をメインに制作(手のひらサイズ)
~

***制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
スマホ(ibisPaint X)、PC(GitHub)
//グッズ(PixivFACTORY)
~

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

***まとめ
//***まとめ(中間発表時点)
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
テーマに沿ったWebサイトの基盤や、キャラクターデザイン、ストーリーの大まかな構成は決まったので、今後はストーリーに用いるイラストを描いていく。また、より「夏らしさ」を表現するため、サイト全体のレイアウトなどもその都度更新する(例:ボタンを押すと夏の音が聞こえてくる演出や、動画が再生される演出)。
//テーマに沿ったWebサイトの基盤や、キャラクターデザイン、ストーリーの大まかな構成は決まったので、今後はストーリーに用いるイラストをさらに描いていく。また、より「夏らしさ」を表現するため、サイト全体のレイアウトなどもその都度更新する(例:ボタンを押すと夏の音が聞こえてくる演出や、動画が再生される演出、それぞれのイラストに「夏」のマークを取り入れ、探してもらう演出)。

***まとめ
サイト内にオープニングアニメーションや効果音などを取り入れることで、「夏らしさ」を表現し、より世界観を演出することが出来ると分かった。また特定のアイテムを探してもらい、特典画像が見られるシステムを導入することで、ただイラストを用いるだけよりも、見る人を飽きさせないWebサイトを制作することが出来たと感じる。
これから卒業研究などで自身の作品の世界観を表現する際に活かしていきたい。


~
~


**調査
~
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
-近年日本の夏が暑すぎることから、「夏」というものに対し嫌悪感を抱いている人が増えている(昔に比べ嫌いになったという意見もメディアでよく目にする)
[[リンク1>https://toyokeizai.net/articles/-/229965?page=2]]
-近年ではセーラー服をモチーフとしたファッションや楽曲、イラストなどが流行している(きっかけはアニメやゲームなどの学園モノ)
-イラスト投稿サイトのPixivではセーラー服に関する投稿が10万件を超えるなど、主に創作活動をする人々の間で流行している
//-近年ではセーラー服をモチーフとしたファッションや楽曲、イラストなどが流行している(きっかけはアニメやゲームなどの学園モノ)
//-イラスト投稿サイトのPixivではセーラー服に関する投稿が10万件を超えるなど、主に創作活動をする人々の間で流行している
//-PixivFACTORYを用いることで個人用に様々な種類のグッズを制作することが容易になり、主に創作活動をする人々の間で流行している
~

***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
//-オリジナルグッズのイメージ(URL:https://shopzokuzoku.thebase.in/)ピアスやルームキーのキーホルダー。画期的な形のグッズなど、モチーフを別のものに置き換えて考えた上で参考にしたい。
-シンプルな作りのWebサイト(URL:https://demos.freehtml5.co/narrow/)完成イメージの参考。ページがシンプルな作りで、全体的に情報が整理されていてとても見やすい。
-日記風のWebサイト(URL:https://monokai.nl/2019/japan/)画像と文章の比率がまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。
//-ストーリーテリングを導入したWebサイト(URL:http://letters.konan-wu.ac.jp/)伝えたいことが順序立てて表現されており、分かりやすく印象に残る。Webサイトを作る際に参考にしたい。
-アニメーションを取り入れたWebサイト(URL:https://es-cinnamon.cafe)配色やフォントなどの統一感も含め、全体的に情報が整理されていてとても見やすい。サイトを開いた時に出るアニメーションなど、Webサイトを作る際に参考にしたい。

~

***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-オープニングアニメーションの取り入れ方(URL:https://www.legit.co.jp/open_css/15686)容量が軽いWebサイトを作る際に参考にしたい。
-セーラー服の構造(URL:https://www.schoolwear-shop.com/smartphone-page/sailor-uniform01.html)
//-セーラー服の構造(URL:https://www.schoolwear-shop.com/smartphone-page/sailor-uniform01.html)
//-WordPressでgifアニメーションを取り入れる方法(URL:https://dandashokai.com/5596)
//-Webサイトに用いたイラストをモチーフにしたグッズの製作(URL:https://factory.pixiv.net)
~

~

**プロジェクト管理
~
***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[進行管理表>https://docs.google.com/spreadsheets/d/1feCcmgLdPWz9PLPgLHv36O_Gv5kDTr4Dzup14UwDuIk/edit?usp=sharing]]←こちらから!
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-%%テーマの決定%%
-%%メインビジュアルの作成%%
-%%ストーリー構成の考案%%
-%%キャラクターデザイン%%
-%%Webサイトの試作%%
-イラストの試作
-%%セクションごとに背景やサイズを変更%%
-%%オープニングアニメーションの追加%%
-%%フッターのアドレス変更%%
-%%お楽しみ要素のシステム導入%%
-%%イラストのサイズの変更%%
-%%イラストの枠の削除%%
-%%メニュー表示の削除又はハンバーガーメニューの導入%%
-%%特典画像の作成%%
-%%イラストの作成%%
//-挨拶文の削除又は後書きページの作成
//-WebサイトそのものにBGMを導入
~
-効果音再生アイコンの作成
-スマホ用の画面サイズの設定
-ギャラリー内の画像を拡大するシステムの導入
-スクロールすると画像が下からフェードインするシステムの導入


//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

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

**2021.12.22
~
***Webサイトの作成
//https://maya-des.github.io/cool_sample07/
https://maya-des.github.io/cool_sample09/
~
-メニュー表示を削除し、ハンバーガーメニューを導入した。
-画面がゆっくりとスクロールする仕組みを導入した。
~

***イラストの作成
~
|#image(story_19.jpg)||#image(story_20.jpg)||#image(story_21.jpg)|
~
|#image(story_22.jpg)||#image(story_23.jpg)|
~
-主人公が寄り道した後に帰宅する場面。寒色系の色を用いて、昼よりは涼しく、過ごしやすい空間を表現。
~

***特典イラストの作成
~
#image(sp_right.jpg,,70%)
~
-正しい数字を選択すると特典画像が表示される仕組みを導入した。
~

~

**2021.12.15
~
***Webサイトの作成
https://maya-des.github.io/cool_sample06/
~
-イラストや文字のサイズを変更し、イラストの枠を削除した。
~

***イラストの作成
~
|#image(story_15.jpg)||#image(story_16.jpg)|
~
|#image(story_18.jpg)||#image(story_17.jpg)|
~
-主人公が寄り道する場面。暖色系の色を用いて、前の場面よりもさらに暑いイメージの屋外や教室を表現。
~

***今週の目標
-イラストの作成
-サイト全体のレイアウトの更新
~

~

**2021.12.08
~
***Webサイトの作成
https://maya-des.github.io/summer_cool01/
~
-お楽しみ要素のシステムを導入。
-挨拶文や説明文、イラストや効果音の追加。
~

***イラストの作成
~
|#image(gallery_09.jpg)||#image(gallery_10.jpg)||#image(gallery_11.jpg)|
~
|#image(gallery_12.jpg)||#image(gallery_13.jpg)||#image(gallery_14.jpg)|
~
-主人公が登校する場面。暖色系の色を用いて、前の場面よりもさらに暑いイメージの屋外や教室を表現。
~

***プレゼンを通して見つかった改善点
-メインであるイラストのサイズはもっと大きく(絵を魅せる)
-現代的なWebサイトの完成を目標としているので、メニュー表示はいらない
-挨拶文も消す?(いきなりストーリーを始めても良い)
-イラストの枠をより細く、目立ちすぎないようにする
-効果音再生アイコンの作成
-より世界観を演出するために、WebサイトそのものにBGMを導入しても良いかもしれない
~

***今週の目標
-イラストの作成
-サイト全体のレイアウトの更新
~

~

**2021.12.01
~
***Webサイトの試作
https://maya-des.github.io/cool_sample04/
-オープニングアニメーションを導入し、効果音を追加したことで、より世界観に入り込めるような構成に。
-htmlのエラー部分を改善。
~

***今週の目標
-ストーリーに用いるイラストや、特典イラストの作成
-サイト全体のレイアウトの更新
-お楽しみ要素のシステム導入
-ギャラリー内の画像を拡大するシステム導入
-フッターのアドレス変更
~
-プレゼン準備
~

~

**2021.11.24
~
***イラストの作成
~
|#image(gallery_06.jpg)||#image(gallery_07.jpg)||#image(gallery_08.jpg)|
~
-主人公が朝の身支度をする場面。暖色系の色を用いて、前の場面よりも少し暑いイメージの部屋を表現。
~

***今週の目標
-ストーリーに用いるイラストや、特典イラストの作成
-サイト全体のレイアウトの更新
-オープニングアニメーションの追加
-お楽しみ要素のシステム導入
~

~

**2021.11.17
~
***Webサイトの試作
https://maya-des.github.io/cool_sample03/
-背景の色や画面サイズを変更。
-お楽しみ要素について説明文の追加。
~

***今週の目標
-ストーリーに用いるイラストや、特典イラストの作成
-サイト全体のレイアウトの更新
~

~

**2021.11.10
~
***Webサイトの試作
https://maya-des.github.io/cool_sample02/
-イラストを追加し、背景の色を変更。
~

***イラストの作成
~
|#image(story_01.jpg)||#image(story_02.jpg)||#image(story_03.jpg)|
~
|#image(story_04.jpg)||#image(story_05.jpg)|
~
-主人公がセミの鳴き声で起床する場面。寒色系の色を用いて、涼しげなイメージの部屋を表現(暑いので視覚的に涼みたい)。
~

***試作(ラフ)
-[[部屋のラフ>https://drive.google.com/file/d/14hjdJ7T9A5I75t75F9pNQgUS9sBBxvqP/view?usp=sharing]]
寒色系の色を用いて、涼しげなイメージの部屋を表現。
~

***今週の目標
-イラストの作成
-サイト全体のレイアウトの更新
-特典イラストの作成
~

~

**2021.10.27
~
***Webサイトの試作
https://maya-des.github.io/cool_sample01/
~
#image(sitemap_01.jpg,,70%)
~
#image(sitemap_02.jpg,,70%)
~
-ボタンを押すと夏の音が聞こえてくる演出や、動画が再生される演出を取り入れてもいいかもしれない。
~

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

~

**2021.10.20
~
***Webサイトの構成ラフ
[[Webサイトラフ1>https://drive.google.com/file/d/19GGCJ-HOWz8-WQbck5VIBaxo7nsi6MeB/view?usp=sharing]]
[[Webサイトラフ2>https://drive.google.com/file/d/19H7N4-lc65uAS_DEFGblOB6griIP1F86/view?usp=sharing]]
~
-ストーリーの箇所のみ背景を変更。
~
#image(sky.jpg,,70%)
~
-画面をスクロールすることで、朝→夜へと時間が移り変わっていく様子を色の変化で表現する。
~

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

~

**2021.10.13
~
***ストーリー構成の考案
[[ストーリー構成1>https://drive.google.com/file/d/13aLL-MHtpogUmc7VrUQsNXP9snWkcKvM/view?usp=sharing]]
[[ストーリー構成2>https://drive.google.com/file/d/13bUYfTt9bYhwHq2e107QQmaKV2xmQybd/view?usp=sharing]]
[[ストーリー構成3>https://drive.google.com/file/d/13cIix0Y2Zy0dT41R6RKsnO7j0a4Cqv6-/view?usp=sharing]]
[[ストーリー構成4>https://drive.google.com/file/d/13jxp7Cpy0HiwStLXALE1pMsMcYvbnLEo/view?usp=sharing]]
-「暑い」という単語を使わずに夏の暑さを表現し、「涼しい」という単語を使わずに夏の涼しさを表現する。
-画面をスクロールすることで、朝→夜へと時間が移り変わっていく様子を、Webサイトの背景のグラデーションの色の変化(水色→紺など)で表現する。
-お楽しみ(?)要素として、それぞれのイラストに「夏」らしいマークを取り入れ(スイカやヨーヨーなど)る。サイトの下で答え合わせ。
~
-グッズは時間に余裕がある場合?研究の後にでも個人用に
~

***キャラクターデザイン
~
#image(character_design.jpg,,70%)
~
-主人公の視点(一人称視点)で物語を進めることで、よりリアリティを演出させる。
-主人公は物語の中で会話をしないため、口はあえて描かない(口無し=クチナシ)。
~

***メインビジュアルの変更
~
#image(main_02.jpg)
~
-メインビジュアルと実際のWebサイトの内容をリンクさせたものに変更、親しみやすさもある。
~

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

~

**2021.10.6
~
***メインビジュアルの作成
~
#image(main_01.jpg)
~
-「夏」の概念が詰まった郵便物をイメージ。
~

***試作(ラフ)
-[[グッズラフ>https://drive.google.com/file/d/10l3USi1TpwAKi2xVT5OVPMwHJ8N0-D66/view?usp=sharing]]
Webサイトに用いたイラストをモチーフにしたグッズを製作する(出来る範囲で)。写真を撮ってWebサイトにも載せる?
-[[Webサイトラフ>https://drive.google.com/file/d/10p3MPYAuFV-JmJGamSi1FTJgSOnmVwin/view?usp=sharing]]
主に色合いを工夫し、涼しげな印象を与えるWebサイトを作成する。ホーム画面をスクロールすることで物語が展開していく構成。サイト内で用いたイラストはギャラリー(ページ)にまとめる。
~

***今週の目標
-ストーリー構成の考案
-キャラクターデザイン
-Webサイトの試作
-イラストの試作
~

~

**2021.9.29
~
***テーマの決定
-「夏のクール便(ひんやり瓶)」:夏の概念がたくさん詰まったWebサイト。近年日本の夏が暑すぎることから、「夏」というものに対し嫌悪感を抱いている人も少なくないだろう。サイト上のイラストや動画を郵便物(=ひんやりした瓶)に見立て、Webサイトを訪れる人に届けることで、夏に対する嫌悪感を少しでも軽いものにしてもらいたい。
-WordPressではなくGitHubを用いる?
~

***調査
-シンプルな作りのWebサイト(URL:https://demos.freehtml5.co/narrow/)完成イメージの参考。ページがシンプルな作りで、全体的に情報が整理されていてとても見やすい。
-オープニングアニメーションの取り入れ方(URL:https://www.legit.co.jp/open_css/15686)容量が軽いWebサイトを作る際に参考にしたい。
~

//***試作(グッズのラフ)
//-Google Driveのリンクを貼る
//~

***今週の目標
-メインビジュアルの制作
-Webサイトの試作
-イラストの試作
~

~

**2021.9.22
~
***概要(テーマのメモ)
-イラスト×アニメーション×Webサイト:「概念的な夏」「セーラー服」のイラストを用いたgifアニメーションやWebサイトの作成([[奈須本真椰/情報デザイン研究I>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]]で製作したWebサイトを活用?サイト内で物語が展開していくような構成にしたい)
-イラスト×アニメーション×Webサイト:「概念的な夏」「セーラー服」のイラストを用いたgifアニメーションやWebサイトの作成([[情報デザイン研究I>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]]で製作したWebサイトを活用?サイト内で物語が展開していくような構成にしたい)
-イラスト×グッズ:Webサイトに用いたイラストをモチーフにしたグッズの製作([[pixivFACTORY>https://factory.pixiv.net]]を用いて自分用に製作、又は[[BOOTH>https://booth.pm/ja]]にて販売)
~

***調査
-オリジナルグッズ(URL:https://shopzokuzoku.thebase.in/)ピアスやルームキーのキーホルダー。画期的な形のグッズなど、モチーフを別のものに置き換えて考えた上で参考にしたい。
-アニメーションを取り入れたWebサイト1※音が出ます(URL:https://maxmara-bearinggifts.betteringbrands.com/)立体的で飽きさせない構成のアニメーションなど、Webサイトを作る際に参考にしたい。
-アニメーションを取り入れたWebサイト2(URL:https://es-cinnamon.cafe)配色やフォントなどの統一感も含め、全体的に情報が整理されていてとても見やすい。サイトを開いた時に出るアニメーションなど、Webサイトを作る際に参考にしたい。
-物語が展開していくWebサイト1(URL:http://yourpower.panda.org/)下にスクロールするに連れて物語が展開していく。絵本のように要点がまとめられているので分かりやすい。Webサイトを作る際に参考にしたい。
-物語が展開していくWebサイト2(URL:https://thebearandhisscarf.com/)上に同じ。Webサイトを作る際に参考にしたい。
-日記風のWebサイト(URL:https://monokai.nl/2019/japan/)画像と文章の比率がまとめられていてとても見やすい。Webサイトを作る際に参考にしたい。
-ストーリーテリングを導入したWebサイト(URL:http://letters.konan-wu.ac.jp/)伝えたいことが順序立てて表現されており、分かりやすく印象に残る。Webサイトを作る際に参考にしたい。
~

***今週の目標
-テーマの決定
-イラストやグッズ(ラフ)の試作
~

~

**2021.9.15
~
***概要(テーマのメモ)
-イラスト×アニメーション×Webサイト:「概念的な夏」「セーラー服」のイラストを用いたgifアニメーションやWebサイトの作成
~

***使用するツール
-ibisPaint X
-Adobe After Effects
-WordPress
~

***調査
-セーラー服について(URL:https://www.schoolwear-shop.com/smartphone-page/sailor-uniform01.html)購入も検討中
-WordPressでgifアニメーションを取り入れる方法(URL:https://dandashokai.com/5596)
-個人的に好きな構成のWebサイト(URL:https://es-cinnamon.cafe)配色やフォントなどの統一感も含め、全体的に情報が整理されていてとても見やすい。サイトを開いた時に出るアニメーションなど、Webサイトを作る際に参考にしたい。
~

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

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

~

~

~