ぬいをおしゃれに
ぬいぐるみを気軽に楽しく変身
- 成田佳津希
- Keywords:web, イラスト, ぬいぐるみ, 衣装
- https://katsukinarita.github.io/dezak_nuikise1-2/
Overview
Introduction / What is This
- イラスト×web×推し
ぬいぐるみを模したキャラクターを好きなように着せ替えるサイト
Background and Purpose
最近、アニメキャラの『ともぬい』など様々な種類のぬいぐるみが
プライズ景品としてゲームセンターに並べられたり、
商品として販売される事が増えてきた。
増えてきた背景の一部に、
沢山のオタク達が推しのぬいぐるみと一緒に旅行に行き記念撮影を撮ったり、
ランチに出かけご飯と推しぬいを一緒に写真に収めたりなどの
『ぬい活』が活発になっていることが挙げられると思う。
ぬい活が活発になってきてから私を含めデフォルトの衣装のままではなく、
上から違う被せ物などをして自分らしく推しにおしゃれをさせている人を
TwitterやInstagramで見かけることが多い。
しかし実際に着せ替えるとなると衣装を買うための費用や
衣装制作をする費用・手間がかかり大変である。
サイトでぬいぐるみを模したキャラクターを着せ替れるサイトを作ることで
気軽に推しに色々な洋服を着せる想像がしやすくなるため
衣装を作る際の参考になど、よりぬい活を楽しむために活用できたら、
そして今までぬいぐるみを持っていたが着せ替えまではしていなかった人、
全く知らなかった人にも興味を持って貰えたら嬉しい。
そう思いサイトを作りたいと思った。
Concept
手軽に楽しめる、ぬいぐるみ着せ替えサイト
Output
Webサイト
Tools
- Github
- JavaScript
- CSS
- ibisPaint X
Conclusion / Summary
今回制作したサイトをオタク仲間や友人に体験してもらったところ、
「楽しい」「実際にぬいぐるみを着せ替えてみようかな」「小学生の頃にしていた、
自由帳に色々パーツを描いて組み合わせる遊びに似ていて懐かしい」
「袴が組み合わせでエプロンのように見えたり発見があった」
などの感想を頂いた。
しかしその一方で「ぬいぐるみ本体に顔や髪形が無いので推しぬいを
着せ替える想像が少ししづらい」「想像できて楽しいし興味はあるが
実際に衣装が用意できないので着せ替えはしないと思う」という感想も頂いた。
今回の研究目標は、「ぬいぐるみを模したキャラクターを着せ替れるサイトを
作ることで多くの人にぬいぐるみを着せ替えることに
興味を持って貰うこと」であった。
もともとぬいぐるみを着せ替えていた人、ぬい活をしていた人だけでなく、
ぬい活文化を知らなかった人にもこのサイトを楽しみ
ぬいぐるみを着せ替えることに興味を持ってもらうことができたので、
目標を達成できたと思う。
また今回の研究を通じてJavascriptについて今までよりも学ぶことができ、
よりWebについて興味が湧き関心が高まった。
今回、思うような動作ができなかった箇所はあるが、だからこそ
これからに繋がる研究になったと思う。
Survey
Present Status
- 洋服のイラストがまだ少ないのでとにかく描く
- 洋服ボタンを押せば押すだけ画像が重なる
- 切り替わるようにしたい
- 同じ洋服ボタンをもう一度押すと消える仕様にしたい
-サイトデザインがシンプルすぎる
→メインビジュアルをクリックするとフェードアウトし、着せ替え画面に移り変わるように変更。また上半身と下半身パーツで背景色を分けて分かりやすくした。
Precedent
- 先行事例
アイコンメーカー- キャラット
- Picrew
ぬいぐるみに近いミニキャラのアイコンメーカー - CHARAT DRESSUP
- CHARAT MONO
キャラクターメーカーは沢山あるがミニキャラやぬいぐるみをモチーフにしているもの、洋服の着せ替えに重点を置いているものが少ないように感じる
Technique / Technology
Project Management
Schedule
ToDo
アイデアスケッチ- イラスト制作
サイト試作- サイト制作
2021.06.30(11週目)
イラスト
- 着せ替えイラストを追加
- チャイナ服やゴシックロリータなどを追加
使用アプリ ibisPaint X
- チャイナ服やゴシックロリータなどを追加
2021.06.24(11週目)
Web
- サイト制作
- メインビジュアルをクリックすると着せ替え画面に移行するように変更
- https://katsukinarita.github.io/dezak_nuikise1/
HTMLを分けてjsを分けていない状態だと移行後、画像の表示がされなかった - https://katsukinarita.github.io/dezak_nuikise1-2/
jsも分けたところ、きちんと動いた
- https://katsukinarita.github.io/dezak_nuikise1/
- メインビジュアルをクリックすると着せ替え画面に移行するように変更
2021.06.17(10週目)
Web
- ボタンの仕組みを変えるのは難しく進まないため一旦保留
- サイトデザインの変更
- 上半身と下半身パーツボタンで背景の色を変えて違いを分かりやすく表示
- 上半身と下半身パーツボタンで背景の色を変えて違いを分かりやすく表示
2021.06.10(9週目)
Web
- ボタンの仕組みを変えたい
- ボタンをまとめたい
先週の参考サイトを参考に試作しているが上手くいかない - 2回目のクリックで消える、違うボタンで画像が切り替わる
1番最初に作った試作ページのonclickを使用し
- ボタンをまとめたい
if (num == 2) { num = 0; } else { num ++; }
の部分を使用、numの数字を変更すると出来るが、今のbuttonになると上手く応用ができない
- サイトの構想
ボタンがまとまればパーツの部位ごとに分けて表示させたい
2021.06.03(8週目)
Web
- ボタンの仕組みを変えたい
- ボタンをまとめたい
- 2回目のクリックで消える、違うボタンで画像が切り替わる
- 参考サイト
- https://qiita.com/soehina/items/49cd1a81328878ff19ec
複数のボタンのうち、特定のボタンをクリックしたら、そのボタンのみに処理が行われる。 - https://qiita.com/kawakami-kazuyoshi/items/227d99b28d28c81e7ebf
複数ボタンの判別 - https://www.kaiketu-pg.net/js_for/
繰り返し処理 - https://qiita.com/konno-siki/items/0541e023bbe04f7ec79d
ボタンで画像表示、表示⇔非表示・・・画像の切り替え
- https://qiita.com/soehina/items/49cd1a81328878ff19ec
2021.05.27(7週目)
着せ替えイラストの追加
- チャイナ服、運動着
イラストアイデア
ロリータ、ゴスロリ、ストリート、被り物(ポンチョとか)、
使用アプリ ibisPaint X
2021.05.20(6週目)
イラスト
- 着せ替えイラスト
- アイデアスケッチより学生服(ブレザー)、和服作成
まだまだたくさん種類を増やす
使用アプリ ibisPaint X
- アイデアスケッチより学生服(ブレザー)、和服作成
Web
- デモページの作成
- https://katsukinarita.github.io/dezak_demo02/
洋服画像クリックで表示
ぬいぐるみ本体画像を合成結果キャンパスの背景に表示
改善点・・消しゴムボタンを使用すると全部消える
(消しゴムボタンを使用しても人形画像が消えないように改善済、2021.5.24)
- https://katsukinarita.github.io/dezak_demo03/
デモ2との違いはindexからscriptを分けて別にしている
すると洋服が合成されない(消しゴムボタンは作動しているため、背景画像の後ろに洋服画像が表示されている可能性あり)
- https://katsukinarita.github.io/dezak_demo04/
indexからscriptを分けて別にしている
洋服の種類を増やし、合成もできる
改善点・・消しゴムボタンを使用すると服は全部消える。洋服画像の画質が悪い。
- https://katsukinarita.github.io/dezak_demo02/
2021.05.13(5週目)
イラスト
- 着せ替えイラスト
- アイデアスケッチより学生服作成(セーラー)
まだまだたくさん種類を増やす
・伝統服(和服、チャイナ…etc)、メイド服、軍服など 使用アプリ ibisPaint X
- アイデアスケッチより学生服作成(セーラー)
Web
- デモページの作成
- https://katsukinarita.github.io/dezak_demo02/
洋服画像クリックで表示
参考サイト
改善点・・ぬいぐるみ本体画像を合成結果キャンパスの背景にしたいが表示できていない
- https://katsukinarita.github.io/dezak_demo02/
2021.05.06(4週目)
イラスト
- ベースはともぬいの形を参考 使用アプリ ibisPaint X
- 着せ替えイラスト
- アイデアスケッチより学生服作成
これからたくさん種類を増やす 使用アプリ ibisPaint X
- アイデアスケッチより学生服作成
Web
- デモページの作成
- https://katsukinarita.github.io/dezak_demo01/
画像クリックで画像切り替え
- https://katsukinarita.github.io/dezak_demo01/
2021.04.22(3週目)
アイデア
- イメージ参考
- アイデアスケッチ
- 学生服からの連想、被り物
- 学生服からの連想、被り物
サイト参考
- Java画像切り替え
時間で変化、進む・戻るボタン - JavaScript画像切り替え2
ボタンで切り替え
2021.04.21(2週目)
アイデア
サイト参考
2021.04.14(1週目)
アイデア
服装・衣装の想像、制作、ネットでまとめる
取り入れてみたい・気になる要素
- 服装の着せ替え
- マウスオーバーでイラスト↔︎写真切り替え