成田佳津希/情報デザイン研究I をテンプレートにして作成

開始行:
*ぬいをおしゃれに ぬいぐるみを気軽に楽しく変身 #image(mainv.png) -''成田佳津希'' -''Keywords''：web, イラスト, ぬいぐるみ, 衣装 -https://katsukinarita.github.io/dezak_nuikise1-2/ //--アンケートを作ったので、良ければご協力お願いします！[... ~ **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/... ~ //***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/... ボタンで切り替え --[[JavaScript画像合成、canvas合成>https://blog.katsubema... --[[JavaScript配置>https://proengineer.internous.co.jp/co... ~ ~ **Project Management ***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... [[スケジュール表>https://docs.google.com/spreadsheets/d/1... ~ ***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を分けてｊｓを分けていない状態だと移行後、画像の表示... ---https://katsukinarita.github.io/dezak_nuikise1-2/ jsも分けたところ、きちんと動いた ~ ~ **2021.06.17(10週目) ***Web -ボタンの仕組みを変えるのは難しく進まないため一旦保留 -サイトデザインの変更 --上半身と下半身パーツボタンで背景の色を変えて違いを分か... |#image(site01.png,,)||#image(site02.png,,)| |変更前||変更後| ~ ~ **2021.06.10(9週目) ***Web -ボタンの仕組みを変えたい --ボタンをまとめたい 先週の参考サイトを参考に試作しているが上手くいかない --２回目のクリックで消える、違うボタンで画像が切り替わる 1番最初に作った試作ページのonclickを使用し if (num == 2) { num = 0; } else { num ++; } の部分を使用、numの数字を変更すると出来るが、今のbuttonに... -サイトの構想 ボタンがまとまればパーツの部位ごとに分けて表示させたい ~ ~ **2021.06.03(8週目) ***Web -ボタンの仕組みを変えたい --ボタンをまとめたい --２回目のクリックで消える、違うボタンで画像が切り替わる -参考サイト --https://qiita.com/soehina/items/49cd1a81328878ff19ec 複数のボタンのうち、特定のボタンをクリックしたら、そのボ... --https://qiita.com/kawakami-kazuyoshi/items/227d99b28d28... 複数ボタンの判別 --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/ 洋服画像クリックで表示 ぬいぐるみ本体画像を合成結果キャンパスの背景に表示 改善点･･消しゴムボタンを使用すると全部消える （消しゴムボタンを使用しても人形画像が消えないように改善... ~ --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.... 使用アプリ ibisPaint X ~ ***Web -デモページの作成 --https://katsukinarita.github.io/dezak_demo02/ 洋服画像クリックで表示 [[参考サイト>https://blog.katsubemakito.net/html5/canvas-... 改善点･･ぬいぐるみ本体画像を合成結果キャンパスの背景にし... ~ ~ **2021.05.06(4週目) ***イラスト -ベースはともぬいの形を参考 #image(nui.png,,50%) 使用アプリ ibisPaint X --[[ともぬい>https://bpnavi.jp/s/general/pc/medias/show_b... -着せ替えイラスト --アイデアスケッチより学生服作成 これからたくさん種類を増やす |#image(body01.png,,)|#image(leg01.png,,)|#image(leg02.pn... 使用アプリ ibisPaint X ~ ***Web -デモページの作成 --https://katsukinarita.github.io/dezak_demo01/ 画像クリックで画像切り替え ~ ~ **2021.04.22(3週目) ***アイデア -イメージ参考 --[[着せ替えぬいぐるみ>https://stars.bnarts.jp/item-28/in... -アイデアスケッチ --学生服からの連想、被り物 #image(w1.jpg,,50%) ~ ***サイト参考 --[[Java画像切り替え>https://www.sejuku.net/blog/63834]] 時間で変化、進む･戻るボタン --[[JavaScript画像切り替え2>https://www.kenschool.jp/blog... ボタンで切り替え ~ ~ ~ ~ **2021.04.21(2週目) ***アイデア -イメージ参考 --[[付け袖>https://www.google.com/search?q=%E4%BB%98%E3%8... --[[付け襟>https://www.google.com/search?q=%E4%BB%98%E3%8... ~ --[[ぬいぐるみ着せ替え>https://king.mineo.jp/staff_blogs/... --[[ぬいぐるみ衣装>https://www.gift-gift.jp/nuigurumi_cos... ~ ***サイト参考 --[[CHARAT DRESSUP>https://charat.me/dressup/]] --[[CHARAT MONO>https://charat.me/mono/]] ~ ~ **2021.04.14(1週目) ***アイデア 服装・衣装の想像、制作、ネットでまとめる -衣装イメージ参考 --[[ピンタレスト>https://www.pinterest.jp/annahino/%E8%A1... --[[モダリーナ>https://www.modalina.jp/modapedia/]] ~ ***取り入れてみたい・気になる要素 -服装の着せ替え --[[キャラット>https://charat.me/]] -マウスオーバーでイラスト↔︎写真切り替え ~ ~ //**20XX.XX.XX //***XXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯ //--[[◯◯>◯◯◯]] //~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯ //--[[◯◯>◯◯◯]] ~ ~ //--[[ちびキャラメーカー>https://charat.me/dash2/]] ~

終了行:
*ぬいをおしゃれに ぬいぐるみを気軽に楽しく変身 #image(mainv.png) -''成田佳津希'' -''Keywords''：web, イラスト, ぬいぐるみ, 衣装 -https://katsukinarita.github.io/dezak_nuikise1-2/ //--アンケートを作ったので、良ければご協力お願いします！[... ~ **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/... ~ //***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/... ボタンで切り替え --[[JavaScript画像合成、canvas合成>https://blog.katsubema... --[[JavaScript配置>https://proengineer.internous.co.jp/co... ~ ~ **Project Management ***Schedule //&color(red){計画的な遂行のために、進行管理表を作成して... [[スケジュール表>https://docs.google.com/spreadsheets/d/1... ~ ***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を分けてｊｓを分けていない状態だと移行後、画像の表示... ---https://katsukinarita.github.io/dezak_nuikise1-2/ jsも分けたところ、きちんと動いた ~ ~ **2021.06.17(10週目) ***Web -ボタンの仕組みを変えるのは難しく進まないため一旦保留 -サイトデザインの変更 --上半身と下半身パーツボタンで背景の色を変えて違いを分か... |#image(site01.png,,)||#image(site02.png,,)| |変更前||変更後| ~ ~ **2021.06.10(9週目) ***Web -ボタンの仕組みを変えたい --ボタンをまとめたい 先週の参考サイトを参考に試作しているが上手くいかない --２回目のクリックで消える、違うボタンで画像が切り替わる 1番最初に作った試作ページのonclickを使用し if (num == 2) { num = 0; } else { num ++; } の部分を使用、numの数字を変更すると出来るが、今のbuttonに... -サイトの構想 ボタンがまとまればパーツの部位ごとに分けて表示させたい ~ ~ **2021.06.03(8週目) ***Web -ボタンの仕組みを変えたい --ボタンをまとめたい --２回目のクリックで消える、違うボタンで画像が切り替わる -参考サイト --https://qiita.com/soehina/items/49cd1a81328878ff19ec 複数のボタンのうち、特定のボタンをクリックしたら、そのボ... --https://qiita.com/kawakami-kazuyoshi/items/227d99b28d28... 複数ボタンの判別 --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/ 洋服画像クリックで表示 ぬいぐるみ本体画像を合成結果キャンパスの背景に表示 改善点･･消しゴムボタンを使用すると全部消える （消しゴムボタンを使用しても人形画像が消えないように改善... ~ --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.... 使用アプリ ibisPaint X ~ ***Web -デモページの作成 --https://katsukinarita.github.io/dezak_demo02/ 洋服画像クリックで表示 [[参考サイト>https://blog.katsubemakito.net/html5/canvas-... 改善点･･ぬいぐるみ本体画像を合成結果キャンパスの背景にし... ~ ~ **2021.05.06(4週目) ***イラスト -ベースはともぬいの形を参考 #image(nui.png,,50%) 使用アプリ ibisPaint X --[[ともぬい>https://bpnavi.jp/s/general/pc/medias/show_b... -着せ替えイラスト --アイデアスケッチより学生服作成 これからたくさん種類を増やす |#image(body01.png,,)|#image(leg01.png,,)|#image(leg02.pn... 使用アプリ ibisPaint X ~ ***Web -デモページの作成 --https://katsukinarita.github.io/dezak_demo01/ 画像クリックで画像切り替え ~ ~ **2021.04.22(3週目) ***アイデア -イメージ参考 --[[着せ替えぬいぐるみ>https://stars.bnarts.jp/item-28/in... -アイデアスケッチ --学生服からの連想、被り物 #image(w1.jpg,,50%) ~ ***サイト参考 --[[Java画像切り替え>https://www.sejuku.net/blog/63834]] 時間で変化、進む･戻るボタン --[[JavaScript画像切り替え2>https://www.kenschool.jp/blog... ボタンで切り替え ~ ~ ~ ~ **2021.04.21(2週目) ***アイデア -イメージ参考 --[[付け袖>https://www.google.com/search?q=%E4%BB%98%E3%8... --[[付け襟>https://www.google.com/search?q=%E4%BB%98%E3%8... ~ --[[ぬいぐるみ着せ替え>https://king.mineo.jp/staff_blogs/... --[[ぬいぐるみ衣装>https://www.gift-gift.jp/nuigurumi_cos... ~ ***サイト参考 --[[CHARAT DRESSUP>https://charat.me/dressup/]] --[[CHARAT MONO>https://charat.me/mono/]] ~ ~ **2021.04.14(1週目) ***アイデア 服装・衣装の想像、制作、ネットでまとめる -衣装イメージ参考 --[[ピンタレスト>https://www.pinterest.jp/annahino/%E8%A1... --[[モダリーナ>https://www.modalina.jp/modapedia/]] ~ ***取り入れてみたい・気になる要素 -服装の着せ替え --[[キャラット>https://charat.me/]] -マウスオーバーでイラスト↔︎写真切り替え ~ ~ //**20XX.XX.XX //***XXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯ //--[[◯◯>◯◯◯]] //~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯ //--[[◯◯>◯◯◯]] ~ ~ //--[[ちびキャラメーカー>https://charat.me/dash2/]] ~

ページ名: