Make UP!
ゲーム感覚で服装のマナーが学べるサイト
概要
これは何？
ゲーム感覚で服装のマナーが学べるサイト
背景と目的
- 背景
- 結婚式や就活など、服装のマナーは数が多い上に複雑な印象がある。
- snsの情報を見ても文字が多く知識を身につけるのに時間や労力が必要。
- 目的
- ゲーム感覚で楽しみながらマナーを身につける。
- サイト上で要素を動的に切り替えられている仕組みを作る研究。
コンセプト
TPOをわきまえた服装をゲーム感覚で楽しく知る。
成果物の仕様
Web+イラスト
制作ツール
- Adobe Illustrator
- Procreate
- Visual Studio Code
- GitHub
プロジェクトの期間
2024.04.09 - 後期
まとめ
調査
現状調査
先行事例
技法・技術情報
プロジェクト管理
スケジュール
googleスプレッドシート
ToDo
テーマ決め目的、背景、コンセプトタイトル決め- イラスト
- サイト制作
- 中間発表の準備
進捗記録
2024.06.11
- 画像が二つ並べられているのはよくあるがゲームっぽいサイトはないから良い
- 二択にするタイプか間違い探し形式(不適切な部分)をクリック→問題の後半になるにつれて変えても良い(使うコードが違うから)
2024.06.04
中間発表
- マナーを学ぶという言い回しにしなくてもいいのではないか
- イラスト何枚描くかの把握
- 今の感じのコード自体は今まで習ったやつで出来そう、どのくらいのレベル、形式もう少し考えてもいいかも...?
- 二択のクイズなら難易度上げたり捻り入れると良い
- すでにあるサイトやgoogle画像のどこが分かりにくいと思ったのか具体的に（どういうところが分かりにくいのか、画像欄見たら文字なしでも見やすいから）
- 最終的に完成形はどういうところまで持ってくるのか
- 研究内容と自分がやりたい事が噛み合うようにもう少し教員と相談してもいいかも
2024.05.28
先行事例
現状調査
デザインラフ
2024.05.21
背景と目的
- 背景
- 結婚式や就活など、服装のマナーは数が多い上に複雑な印象がある。
- snsの情報を見ても文字が多くて知識を身につけるのに疲れる。
- 目的
- ゲーム感覚で楽しみながらマナーを身につける。
- サイト上で要素を動的に切り替えられている仕組みを作る研究。
動的な要素を磨くためにオーソドックスなJavascriptを使いたい。
題材マナー
結婚式マナー
OK
- 白パールネックレス
- 肩の露出は避ける
- ひざ丈～ひざ下丈
- 小ぶりなパーティーバック
- ストッキング
- パンプスかストラップのある靴
- コサージュか髪飾り
NG
- 過度なキラキラアクセサリー
- 過度な露出（ノースリブは羽織物を着れば〇）
- 全身白or黒（羽織物やバックで全身白黒を避ければ〇）
- おろしたままのいつも通りのヘアスタイル
- 大きすぎるバッグ
- バッグ 動物革、ファー、紙、布系
- 短すぎる着丈
- 純白のドレス
- 素足
- かかとのないミュール
- 揺れるピアスやイヤリング
- 生花を使ったアクセ
- 腕時計
- ミュール、ブーツ、ノーヒール、カジュアルシューズ
- 黒のストッキング、タイツ
就活マナー
- 髪が顔にかからないようにする
- アイシャドーや口紅は薄め
- シャツの色は白（しわもないように）
- スーツは黒やネイビー、チャコールグレーなどの落ち着いた色
- スカートの長さは膝丈が目安
- ストッキング着用
- 靴はプレーンな革の紐靴、パンプス、ローファーなどシンプルなもの
- 眼鏡は表情を隠すほどのものは△
- 派手すぎるネイル
- 清潔感大事！
2024.05.14
サイト試作
着せ替え+ゲーム要素を入れたい
- ゲームの要素や世界観練り直し
- 服に点数つけられる
- お題に沿うように作ってもらう
- NPCと競いあって順位
- 3つの選択肢の中から場にあった適切な服装のものを選ぶ
- 場所の設定をお題として出し適切な服装にキャラメイクしてもらう
コンセプト
TPOをわきまえた服装をゲーム感覚で楽しく知る
背景と目的
結婚式や就活など、服装のマナーは数が多い上に複雑な印象がある。
2024.05.07
メモ
- まずラフを描く
- JavaScriptで画像を切り替えられるようにする
イラストラフ
2024.04.30
- まずはイラストを一式(1着分)描いてコードを書いていく！動くか確認するとこまでは絶対前期で完成させる！
- 着せ替え系にするのは決定
- ゲームというとジャンルが広いので何を指しているのかはっきりさせる、もしくは無くす
- ゲームの世界観決めをする
- この取り組みは誰に何を与えるのか、着せ替え自体を楽しむものなのかその先の何かなのか
- 服のジャンルの世界観(国や時代や次元)
現状調査
最近は比較的好きな服を好きなように着れるようになってきた。それでも恥ずかしかったり周りの目を気にしたりしている人が一定数いる。
先行事例
- Picrew
- CHARAT
着せ替えサイトは推しに似せてキャラメイクをしたり、一次創作のキャラデザの参考にしたり、自分の好みを詰め込んでキャラメイクをするという使われ方をしていることが多い。
2024.04.23
コンセプト
ファッションでその日の自分のテンションを上げることが出来ると思う。可愛さ、かっこよさなどをゲーム風に取り入れ、それを攻撃力のようにステータスとしてキャラメイク画面に導入する。
イラストの着せ替えをゲームのキャラメイク風に。
※ステータスをキャラメイク中に表示するか最後に診断結果風に出すかで検討中
※ステータスの項目をファッションの系統(かわいい、かっこいい、綺麗、カジュアル、モード等)にするかは検討
参考
ワイヤーフレーム
来週
衣装や全体的なデザイン決め
2024.04.16
テーマ
タップしたら変わるイラストのWebサイト
制作ツール
- Javascript
- Adobe Illustrator
- Procreate
背景と目的
静が多いインタラクティブに動的なインターフェーズが求められている。
サイト上で要素を動的に切り替えられている仕組みを作る研究。
動的な要素を磨くためにオーソドックスなJavascriptを使いたい。
参考
先行事例
技術
来週
2024.04.09
テーマ候補
- 着せ替えイラスト
- ネイルデザイン
- レトロ、昔のものを今風のデザインに
- 最近のものをレトロ風にデザイン
- 食べ物
- ゲーム
- 動物
- カフェ
- 服のしわ
- 怪異、ホラー
- VTuber
- LINEスタンプ
- 擬人化
形式候補
- イラスト＋Web,実物＋コンセプト
- ゲームっぽい？１画面でタップする系のサイト
- 着せ替え、キャラ作成サイト
