- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2024-04-16T14:34:33+09:00;2024-04-02T15:27:55+09:00","default:member","member")
*MainTitle
SubTitle ・・・・・・・・・・・・・・・・
#author("2024-06-11T15:39:02+09:00;2024-06-04T14:11:23+09:00","default:member","member")
*Make UP!
ゲーム感覚で服装のマナーが学べるサイト
//↑どんなのを誰のために〜みたいに具体的なサブタイトルがよい 服の販売や映像で広がる想いなどは具体的な文がない
メインビジュアル、あるいは
プロジェクトの最新の状態を視覚的に掲載
//イラストの着せ替えで今日の気分をステータスに！
#image(main2.PNG)
-''Your Name''
-'''Keywords：・・, ・・・, ・・・, ・・・'''
-https://www.example.com
-''Ayaka Yamamoto''
-'''Keywords：Web,JavaScript,イラスト,マナー,ゲーム'''
-https://yamm10.github.io/makeup/
//-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。
~
~
**概要
***これは何？
//&color(red){これは何か・・を簡潔に};
ゲーム感覚で服装のマナーが学べるサイト
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
-背景
--結婚式や就活など、服装のマナーは数が多い上に複雑な印象がある。
--snsの情報を見ても文字が多く知識を身につけるのに時間や労力が必要。
//きっかけならいいが自分のことばかり話さない。自分が何を思ったかではない
-目的
--ゲーム感覚で楽しみながらマナーを身につける。
--サイト上で要素を動的に切り替えられている仕組みを作る研究。
//動的な要素を磨くためにオーソドックスなJavascriptを使いたい。
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
TPOをわきまえた服装をゲーム感覚で楽しく知る。
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Web+イラスト
~
***メンバー
//***メンバー
//&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記};
~
//~
***制作ツール
//&color(red){使用するツール｜ハードウエア・ソフトウエア};
-Adobe Illustrator
-Procreate
-Visual Studio Code
-GitHub
~
***プロジェクトの期間
//&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX };
2024.04.09 - 後期
~
***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
-[[TPOに合わせた服装>https://happymail.co.jp/happylife/special-feature/time-place-and-occasion/]]
-[[服装の意味と装いのマナー>https://natulan.jp/terminal/manner15/]]
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-[[２択で育成ゲーム>https://apps.apple.com/jp/app/2%E6%8A%9E%E3%81%A7%E8%82%B2%E6%88%90%E3%82%B2%E3%83%BC%E3%83%A0/id1626000099]]
-[[集いの場での「服装のマナー」クイズ。>https://www.kateigaho.com/article/detail/175672]]
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-[[Nagashima Laboratory>https://nagashima.kyusan-u.ac.jp/index/]]
-[[画像切り替え>https://nagashima.kyusan-u.ac.jp/note/gallery/]]
~
~
**プロジェクト管理
***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[googleスプレッドシート>https://docs.google.com/spreadsheets/d/1FR901SE0FGL8ZyqOF7hy1hNlKR_taklKmm3veBiTO8U/edit?usp=sharing]]
~
***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-%%テーマ決め%%
-%%目的、背景、コンセプト%%
-%%タイトル決め%%
-イラスト
-サイト制作
-中間発表の準備
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**2024.06.11
-画像が二つ並べられているのはよくあるがゲームっぽいサイトはないから良い
-二択にするタイプか間違い探し形式(不適切な部分)をクリック→問題の後半になるにつれて変えても良い(使うコードが違うから)
~
**2024.06.04
中間発表
-マナーを学ぶという言い回しにしなくてもいいのではないか
-イラスト何枚描くかの把握
-今の感じのコード自体は今まで習ったやつで出来そう、どのくらいのレベル、形式もう少し考えてもいいかも...?
-二択のクイズなら難易度上げたり捻り入れると良い
-すでにあるサイトやgoogle画像のどこが分かりにくいと思ったのか具体的に（どういうところが分かりにくいのか、画像欄見たら文字なしでも見やすいから）
-最終的に完成形はどういうところまで持ってくるのか
-研究内容と自分がやりたい事が噛み合うようにもう少し教員と相談してもいいかも
~
**2024.05.28
***先行事例
-[[２択で育成ゲーム>https://apps.apple.com/jp/app/2%E6%8A%9E%E3%81%A7%E8%82%B2%E6%88%90%E3%82%B2%E3%83%BC%E3%83%A0/id1626000099]]
-[[集いの場での「服装のマナー」クイズ。>https://www.kateigaho.com/article/detail/175672]]
~
***[[イラストラフ>https://drive.google.com/drive/folders/11WeCbHPO7oNeQW1mz850NNy1GleArvcS?usp=sharing]]
~
***現状調査
-[[TPOに合わせた服装>https://happymail.co.jp/happylife/special-feature/time-place-and-occasion/]]
-[[服装の意味と装いのマナー>https://natulan.jp/terminal/manner15/]]
~
***デザインラフ
#image(nagare1.PNG)
#image(nagare2.PNG)
#image(nagare3.PNG)
~
**2024.05.21
***背景と目的
-背景
--結婚式や就活など、服装のマナーは数が多い上に複雑な印象がある。
--snsの情報を見ても文字が多くて知識を身につけるのに疲れる。
-目的
--ゲーム感覚で楽しみながらマナーを身につける。
--サイト上で要素を動的に切り替えられている仕組みを作る研究。
動的な要素を磨くためにオーソドックスなJavascriptを使いたい。
~
***題材マナー
-結婚式
-就活
~
***結婚式マナー
OK
-白パールネックレス
-肩の露出は避ける
-ひざ丈～ひざ下丈
-小ぶりなパーティーバック
-ストッキング
-パンプスかストラップのある靴
-コサージュか髪飾り
~
NG
-過度なキラキラアクセサリー
-過度な露出（ノースリブは羽織物を着れば〇）
-全身白or黒（羽織物やバックで全身白黒を避ければ〇）
-おろしたままのいつも通りのヘアスタイル
-大きすぎるバッグ
-バッグ 動物革、ファー、紙、布系
-短すぎる着丈
-純白のドレス
-素足
-かかとのないミュール
-揺れるピアスやイヤリング
-生花を使ったアクセ
-腕時計
-ミュール、ブーツ、ノーヒール、カジュアルシューズ
-黒のストッキング、タイツ
~
***就活マナー
-髪が顔にかからないようにする
-アイシャドーや口紅は薄め
-シャツの色は白（しわもないように）
-スーツは黒やネイビー、チャコールグレーなどの落ち着いた色
-スカートの長さは膝丈が目安
-ストッキング着用
-靴はプレーンな革の紐靴、パンプス、ローファーなどシンプルなもの
-眼鏡は表情を隠すほどのものは△
-派手すぎるネイル
-清潔感大事！
~
**2024.05.14
[[サイト試作>https://yamm10.github.io/makeup/]]
~
着せ替え+ゲーム要素を入れたい
-ゲームの要素や世界観練り直し
--服に点数つけられる
--お題に沿うように作ってもらう
--NPCと競いあって順位
--3つの選択肢の中から場にあった適切な服装のものを選ぶ
--場所の設定をお題として出し適切な服装にキャラメイクしてもらう
~
***コンセプト
TPOをわきまえた服装をゲーム感覚で楽しく知る
~
***背景と目的
結婚式や就活など、服装のマナーは数が多い上に複雑な印象がある。
~
**2024.05.07
***メモ
-まずラフを描く
-JavaScriptで画像を切り替えられるようにする
[[イラストラフ>https://drive.google.com/drive/folders/11WeCbHPO7oNeQW1mz850NNy1GleArvcS?usp=sharing]]
~
**2024.04.30
-まずはイラストを一式(1着分)描いてコードを書いていく！動くか確認するとこまでは絶対前期で完成させる！
-着せ替え系にするのは決定
-ゲームというとジャンルが広いので何を指しているのかはっきりさせる、もしくは無くす
-ゲームの世界観決めをする
-この取り組みは誰に何を与えるのか、着せ替え自体を楽しむものなのかその先の何かなのか
-服のジャンルの世界観(国や時代や次元)
~
***現状調査
最近は比較的好きな服を好きなように着れるようになってきた。それでも恥ずかしかったり周りの目を気にしたりしている人が一定数いる。
~
***先行事例
-[[Picrew>https://picrew.me/ja#google_vignette]]
-[[CHARAT>https://charat.me/]]
着せ替えサイトは推しに似せてキャラメイクをしたり、一次創作のキャラデザの参考にしたり、自分の好みを詰め込んでキャラメイクをするという使われ方をしていることが多い。
~
**2024.04.23
***コンセプト
ファッションでその日の自分のテンションを上げることが出来ると思う。可愛さ、かっこよさなどをゲーム風に取り入れ、それを攻撃力のようにステータスとしてキャラメイク画面に導入する。
イラストの着せ替えをゲームのキャラメイク風に。
~
※ステータスをキャラメイク中に表示するか最後に診断結果風に出すかで検討中
※ステータスの項目をファッションの系統(かわいい、かっこいい、綺麗、カジュアル、モード等)にするかは検討
~
***参考
-[[Pinterest>https://www.pinterest.jp/yamamo200403/%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6/]]
~
***ワイヤーフレーム
#image(kouzuann1.PNG)
#image(kouzuann2.PNG)
#image(kouzuann3.PNG)
~
~
来週
衣装や全体的なデザイン決め
~
**2024.04.16
***XXXX
-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
***テーマ
タップしたら変わるイラストのWebサイト
~
***XXXXXXX
-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
***制作ツール
-Javascript
-Adobe Illustrator
-Procreate
~
***背景と目的
静が多いインタラクティブに動的なインターフェーズが求められている。
サイト上で要素を動的に切り替えられている仕組みを作る研究。
動的な要素を磨くためにオーソドックスなJavascriptを使いたい。
~
***参考
先行事例
-[[卒業研究/Peep>猪本結衣/卒業研究II]]
-[[情報デザイン研究/ぬいをおしゃれに>https://design.kyusan-u.ac.jp/socialdesign/?cmd=read&page=%E6%88%90%E7%94%B0%E4%BD%B3%E6%B4%A5%E5%B8%8C%2F%E6%83%85%E5%A0%B1%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6I&word=DressUp]]
-[[ゲーム ホーム画面 (YouTube)>https://youtu.be/ebsfwEmaPnE?si=Z084RODpncxF81MJ]]
-[[Picrew>https://picrew.me/ja#google_vignette]]
技術
-[[編集>https://design.kyusan-u.ac.jp/OpenSquareJP/?WebDesign]]
--[[切り替え１>https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/ImageSwitcher]]
--[[切り替え２>https://design.kyusan-u.ac.jp/OpenSquareJP/?jQuery/DressUp]]
~
~
来週
-コンセプト決め
-ラフ、大まかな構図
~
**2024.04.09
***テーマ候補
-着せ替えイラスト
-ネイルデザイン
-レトロ、昔のものを今風のデザインに
-最近のものをレトロ風にデザイン
-食べ物
-ゲーム
-動物
-カフェ
-服のしわ
-怪異、ホラー
-VTuber
-LINEスタンプ
-擬人化
~
***形式候補
-イラスト＋Web,実物＋コンセプト
--イラスト使った作品orイラストで何かを発信する
-ゲームっぽい？１画面でタップする系のサイト
-着せ替え、キャラ作成サイト
~
-参考作品
--https://design.kyusan-u.ac.jp/socialdesign/?堺由加子/卒業研究II
--https://takearest1.github.io/peep/girl/girl.html
--[[卒業研究/vesselII>https://design.kyusan-u.ac.jp/socialdesign/?%E5%A0%BA%E7%94%B1%E5%8A%A0%E5%AD%90/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6II]]
--[[卒業研究/Peep>猪本結衣/卒業研究II]]
~
~
~
