LogoMark.png

成田佳津希/情報デザイン研究I のバックアップの現在との差分(No.0)


#author("2021-09-29T14:17:49+09:00","default:member","member")
*ぬいをおしゃれに
ぬいぐるみを気軽に楽しく変身


#image(mainv.png)


-''成田佳津希''
-''Keywords'':web, イラスト, ぬいぐるみ, 衣装
-https://katsukinarita.github.io/dezak_nuikise1-2/

//--アンケートを作ったので、良ければご協力お願いします![[アンケート>https://forms.gle/YmsidCWKuvyw7iMq8]]

~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
--イラスト×web×推し
ぬいぐるみを模したキャラクターを好きなように着せ替えるサイト
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
最近、アニメキャラの『ともぬい』など様々な種類のぬいぐるみが
プライズ景品としてゲームセンターに並べられたり、
商品として販売される事が増えてきた。
増えてきた背景の一部に、
沢山のオタク達が推しのぬいぐるみと一緒に旅行に行き記念撮影を撮ったり、
ランチに出かけご飯と推しぬいを一緒に写真に収めたりなどの
『ぬい活』が活発になっていることが挙げられると思う。
ぬい活が活発になってきてから私を含めデフォルトの衣装のままではなく、
上から違う被せ物などをして自分らしく推しにおしゃれをさせている人を
TwitterやInstagramで見かけることが多い。
しかし実際に着せ替えるとなると衣装を買うための費用や
衣装制作をする費用・手間がかかり大変である。
サイトでぬいぐるみを模したキャラクターを着せ替れるサイトを作ることで
気軽に推しに色々な洋服を着せる想像がしやすくなるため
衣装を作る際の参考になど、よりぬい活を楽しむために活用できたら、
そして今までぬいぐるみを持っていたが着せ替えまではしていなかった人、
全く知らなかった人にも興味を持って貰えたら嬉しい。
そう思いサイトを作りたいと思った。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
手軽に楽しめる、ぬいぐるみ着せ替えサイト
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
Webサイト
#iframe(https://katsukinarita.github.io/dezak_nuikise1-2/, 100%, 75%)
~

//***Member
//&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記};
~

***Tools
-Github
--JavaScript
--CSS
-ibisPaint X
//&color(red){使用するツール|ハードウエア・ソフトウエア};
~

//***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
~

***Conclusion / Summary 
今回制作したサイトをオタク仲間や友人に体験してもらったところ、
「楽しい」「実際にぬいぐるみを着せ替えてみようかな」「小学生の頃にしていた、
自由帳に色々パーツを描いて組み合わせる遊びに似ていて懐かしい」
「袴が組み合わせでエプロンのように見えたり発見があった」
などの感想を頂いた。
しかしその一方で「ぬいぐるみ本体に顔や髪形が無いので推しぬいを
着せ替える想像が少ししづらい」「想像できて楽しいし興味はあるが
実際に衣装が用意できないので着せ替えはしないと思う」という感想も頂いた。

今回の研究目標は、「ぬいぐるみを模したキャラクターを着せ替れるサイトを
作ることで多くの人にぬいぐるみを着せ替えることに
興味を持って貰うこと」であった。
もともとぬいぐるみを着せ替えていた人、ぬい活をしていた人だけでなく、
ぬい活文化を知らなかった人にもこのサイトを楽しみ
ぬいぐるみを着せ替えることに興味を持ってもらうことができたので、
目標を達成できたと思う。

また今回の研究を通じてJavascriptについて今までよりも学ぶことができ、
よりWebについて興味が湧き関心が高まった。
今回、思うような動作ができなかった箇所はあるが、だからこそ
これからに繋がる研究になったと思う。


//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-洋服のイラストがまだ少ないのでとにかく描く
-洋服ボタンを押せば押すだけ画像が重なる
--切り替わるようにしたい
--同じ洋服ボタンをもう一度押すと消える仕様にしたい
%%-サイトデザインがシンプルすぎる%%
→メインビジュアルをクリックするとフェードアウトし、着せ替え画面に移り変わるように変更。また上半身と下半身パーツで背景色を分けて分かりやすくした。
~

***Precedent
//&color(red){先行事例の紹介、傾向分析など};
-先行事例
アイコンメーカー
--[[キャラット>https://charat.me/]]
--[[Picrew>https://picrew.me/]]
ぬいぐるみに近いミニキャラのアイコンメーカー
--[[CHARAT DRESSUP>https://charat.me/dressup/]]
--[[CHARAT MONO>https://charat.me/mono/]]

キャラクターメーカーは沢山あるがミニキャラやぬいぐるみをモチーフにしているもの、洋服の着せ替えに重点を置いているものが少ないように感じる
~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
--[[JavaScript画像切り替え>https://www.kenschool.jp/blog/?p=498]]
ボタンで切り替え
--[[JavaScript画像合成、canvas合成>https://blog.katsubemakito.net/html5/canvas-concat]]
--[[JavaScript配置>https://proengineer.internous.co.jp/content/columnfeature/6343]]
~
~

**Project Management

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

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
--%%アイデアスケッチ%%
--イラスト制作
--%%サイト試作%%
--サイト制作
~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
**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も分けたところ、きちんと動いた
~
~

**2021.06.17(10週目)
***Web
-ボタンの仕組みを変えるのは難しく進まないため一旦保留
-サイトデザインの変更
--上半身と下半身パーツボタンで背景の色を変えて違いを分かりやすく表示
|#image(site01.png,,)||#image(site02.png,,)|
|変更前||変更後|
~
~

**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
ボタンで画像表示、表示⇔非表示・・・画像の切り替え
~
~


**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を分けて別にしている
洋服の種類を増やし、合成もできる
改善点・・消しゴムボタンを使用すると服は全部消える。洋服画像の画質が悪い。
~
~
**2021.05.13(5週目)
***イラスト
-着せ替えイラスト
--アイデアスケッチより学生服作成(セーラー)
まだまだたくさん種類を増やす
・伝統服(和服、チャイナ…etc)、メイド服、軍服など
|#image(body02.png,,)|#image(body03.png,,)|#image(body04.png,,)|
使用アプリ ibisPaint X
~
***Web
-デモページの作成
--https://katsukinarita.github.io/dezak_demo02/
洋服画像クリックで表示
[[参考サイト>https://blog.katsubemakito.net/html5/canvas-concat]]
改善点・・ぬいぐるみ本体画像を合成結果キャンパスの背景にしたいが表示できていない
~
~

**2021.05.06(4週目)
***イラスト
-ベースはともぬいの形を参考
#image(nui.png,,50%)
使用アプリ ibisPaint X
--[[ともぬい>https://bpnavi.jp/s/general/pc/medias/show_by_key/tomonui]]

-着せ替えイラスト
--アイデアスケッチより学生服作成
これからたくさん種類を増やす
|#image(body01.png,,)|#image(leg01.png,,)|#image(leg02.png,,)|
使用アプリ ibisPaint X
~
***Web
-デモページの作成
--https://katsukinarita.github.io/dezak_demo01/
画像クリックで画像切り替え
~
~

**2021.04.22(3週目)
***アイデア
-イメージ参考
--[[着せ替えぬいぐるみ>https://stars.bnarts.jp/item-28/index.html]]
-アイデアスケッチ
--学生服からの連想、被り物
#image(w1.jpg,,50%)
~
***サイト参考
--[[Java画像切り替え>https://www.sejuku.net/blog/63834]]
時間で変化、進む・戻るボタン
--[[JavaScript画像切り替え2>https://www.kenschool.jp/blog/?p=498]]
ボタンで切り替え
~
~
~
~
**2021.04.21(2週目)
***アイデア
-イメージ参考
--[[付け袖>https://www.google.com/search?q=%E4%BB%98%E3%81%91%E8%A2%96&source=lnms&tbm=isch&sa=X&ved=2ahUKEwi2_sK115DwAhVzKaYKHXkwA3kQ_AUoAXoECAEQAw&biw=1484&bih=1282&dpr=2]]
--[[付け襟>https://www.google.com/search?q=%E4%BB%98%E3%81%91%E8%A5%9F&tbm=isch&ved=2ahUKEwjVx_y215DwAhXJAaYKHVn6ALYQ2-cCegQIABAA&oq=%E4%BB%98%E3%81%91%E8%A5%9F&gs_lcp=CgNpbWcQAzICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADIGCAAQBBAlUPmLAlj7kgJgpZkCaABwAHgAgAF-iAHcApIBAzMuMZgBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=Bc-AYJWxBMmDmAXZ9IOwCw&bih=1282&biw=1484]]
~
--[[ぬいぐるみ着せ替え>https://king.mineo.jp/staff_blogs/1228]]
--[[ぬいぐるみ衣装>https://www.gift-gift.jp/nuigurumi_costume/]]
~
***サイト参考
--[[CHARAT DRESSUP>https://charat.me/dressup/]]
--[[CHARAT MONO>https://charat.me/mono/]]
~
~


**2021.04.14(1週目)
***アイデア
服装・衣装の想像、制作、ネットでまとめる
-衣装イメージ参考
--[[ピンタレスト>https://www.pinterest.jp/annahino/%E8%A1%A3%E8%A3%85%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/]]
--[[モダリーナ>https://www.modalina.jp/modapedia/]]

~
***取り入れてみたい・気になる要素
-服装の着せ替え
--[[キャラット>https://charat.me/]]
-マウスオーバーでイラスト↔︎写真切り替え
~
~

//**20XX.XX.XX
//***XXXXXX
//-◯◯◯◯◯◯◯◯◯◯◯◯
//--[[◯◯>◯◯◯]]
//~
//***XXX
//-◯◯◯◯◯◯◯◯◯◯◯◯
//--[[◯◯>◯◯◯]]

~
~
//--[[ちびキャラメーカー>https://charat.me/dash2/]]
~