野田悠斗/卒業研究

軌跡

オリジナルキャラクターによるギャラリーサイト

• 野田　悠斗
• イラスト,オリジナルキャラクター,Webサイト,（シングルページ）
• https://no5y.github.io/sotsukenn4/

概要

これは何？

WEBサイトによるオリジナルキャラクターの紹介サイト。

背景と目的

WEB　×　イラストレーション
オリジナルキャラクターによる目新しいイラストレーションの紹介と、WEBサイトによりSNS等と異なるアプローチの制作。

コンセプト

・自身が作成したイラストを使用して、WEBサイトを使った表現でイラストレーションの制作過程や読者にキャラクターに親身によってもらうためのプロフィールを掲載し、世界観をを表現する。

・一次創作によるメリットとしてSNS等で発信されている数多のファンアートに埋もれず、独自のジャンルで作品を展開が可能。

成果物の仕様

webサイトにて掲載
縦構図3枚,横構図2枚の計5枚

メンバー

制作ツール

Macbook pro
ipad pro(第２世代)
clipstudio PRO
github
Adobe Dreamweaver(HTML,CSS,Javascript)

サイトマップ

プロジェクトの期間

4/14~12/20

まとめ

WEBサイトによるオリジナルイラスト紹介を目的としている為、達成する事が出来たと実感した。
しかし、WEBデザインとイラストのどちらに時間を割くか一年間を通して見直す必要がある。
オリジナルイラストに関しては構図や色構成等、改善をしていく。

中間のまとめ

スケジュールの制作
ストーリー進行のための制作

研究に使用するイラスト

(https://drive.google.com/drive/folders/1-616j9GpVr-EDXqRNQC1imfL-Lt9elnv?usp=sharing)

調査

現状調査

https://www.adobe.com/jp/products/flashplayer/end-of-life.html

シングルページ

先行事例

• https://vook.vc/e/4306
• https://kaerudx.com/

技法・技術情報

https://note.com/designmemo/n/n8ead200cd1b8

プロジェクト管理

スケジュール

前期

後期

ToDo

• イラストの制作
• 線画
• 下塗り
• HTML,CSSの進捗
• JSによる簡易アニメーションの制作
• 試作の制作

前期末発表

サイトのCSSの考案や載せるイラストの厳選
イラストのジャンルやどのようなイラストを提示するかは決まったが
サイトの見せ方について技術的な問題がある。

2023.12.22

イラストレーション進捗

1枚目の彩度変更
5枚目の線画

イラストの下書きや色つけまでの工程の更新。

2023.12.15

イラストレーション進捗

4人目の完成

サイトマップの変更及び
5キャラクターそれぞれにメニューの追加。

イラストの下書きや色つけまでの工程の更新。

2023.12.8

イラストレーション進捗

三人目のデザイン変更/完成

イラストの下書きや色つけまでの工程を載せる。

2023.12.1

イラストレーション進捗

4枚目の小道具の追加

2023.11.24

イラストレーション進捗

4,5枚目の線画修正
イラストの色合いの変更

スライドショーの更新
3枚目のタイムラプスの掲載

2023.11.17

イラストレーション進捗

2枚目の完成、4枚目のデザイン変更

サイト全体の色合い変更

2023.11.10

イラストレーション進捗

5枚目のデザイン変更

タイムラプスの掲載を開始

2023.10.27

イラストレーション進捗

下塗り
CSSによるサイトのイメージ変更

2023.10.20

イラストレーション進捗

下塗り
線画の修正

2023.10.13

イラストレーション進捗

下塗り

各キャラクターの設定の考案
身長,年齢,服装等...

2023.10.06

イラストレーション進捗

下塗り
下絵

WEBサイトの刷新

スライドショーの制作
CSSの打ち込み

2023.09.29

イラストレーション進捗

下絵
1枚目の完成

WEBサイトの刷新

CSSの打ち込み

2023.09.22

イラストレーション進捗

下絵

WEBサイトの刷新

2023.09.15

イラストレーション進捗

下絵

WEBサイトの刷新

2023.07.21

研究のテーマ

イラストのラフ案
キーフレームの制作

2023.07.14

研究のテーマ

Webサイトの進捗

2023.07.07

研究のテーマ

イラストの制作
デジタル出力

2023.06.30

研究のテーマ(練り直し）

UIデザインの制作
https://sdesignlabo.com/2023gameui/
https://sdesignlabo.com/photoshop/ps-gameui1/

2023.06.23

研究のテーマ(練り直し）

UIデザインの制作
https://sdesignlabo.com/2023gameui/
https://sdesignlabo.com/photoshop/ps-gameui1/

2023.06.16

研究のテーマ(練り直し）

https://sdesignlabo.com/photoshop/ps-gameui1/

2023.05.19

研究のテーマ

WEBサイトによるオリジナルキャラクターのヒストリー
GithubにてHTMLの打ち込み

参考

• https://vook.vc/e/4306
  モーションデザイン

2023.05.12

研究のテーマ決定

参考

• https://b-risk.jp/blog/2021/01/anim-reference/
  
  
  

2023.04.21

研究のテーマ決め

• スクロールすることにより、ストーリーが進むWebサイト
  
  

参考

• https://b-risk.jp/blog/2021/01/anim-reference/
  
  
  

2023.04.14

研究のテーマ出し

• イラスト、SNS(主にTwitter)等の支持を拡大する目的
• 多種多様の情報媒体を駆使する

参考

• chocolate Inc（映像制作会社）
• https://www.chocolate-inc.com/
• 餃子の王将 × Rageblue
• https://www.dot-st.com/rageblue/cp/gyoza_no_ohsho