#author("2022-07-22T13:18:59+09:00","default:member","member")
*ころくる
球技のボールを比較するWebサイト
//
#image(top.png)
-''Narita Katsuki''
-'''Keywords ： web, 3DCG, ball, sports'''
-https://katsukinarita.github.io/sotu02/
~
**概要
***これは何？
//&color(red){これは何か・・を簡潔に};
球技で使用されているボールの大きさなどをわかりやすく比較するサイト。
~
***背景と目的
//&color(red){プロジェクトの背景と目的};
//背景と目的別々に書く
//背景・・・社会的理由、社会の状況×個人的理由、別々に書く、個人的なきっかけ
//目的・・・サイトを通じた目的×サイトを作ることは目的ではない
-背景
昨年オリンピックが日本国内で行われたり、スポーツ漫画の影響、また中学校の部活動でスポーツに興味を持つ機会が多い。またスポーツの中でも球技は野球やサッカー当のスポーツ中継、漫画の題材や体育の授業に取り入れられることが多く目にする機会が多い。しかし新たに興味を持っても競技するために必要なボールがどのような大きさなのかということがネットで調べても文字情報だけでの説明や数種目で比べるサイトが少なく分かりにくい。そこで様々な競技のボールを視覚情報を用いて説明をすることで、新たに関心を持った競技に触れやすくなるのではないかと思った。
-目的
画像などを用いて視覚的に分かりやすい情報で直感的に理解でき、その後文字情報での詳細説明をするWebサイトを作成することで、クラブ活動や習い事で球技を始めようとしている小学生などの球技に関心を持ち始めた人が、より球技に関心を持ったり始めるときのきっかけになりたい。
~
***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
//大きな方針、目的を達成するための手順、具体例
画像などを用いて視覚的に分かりやすい情報で伝えることで、クラブ活動や習い事で球技を始めようとしている小学生などの子供にも分かりやすくする。それから、文字情報などでの詳細説明をすることで、より詳しく知ろうとしている人も利用できるようにする。また3Dモデルも使用することでただ見て読むだけではない動きのあるものにして、もともと興味のある競技だけでなく、より多くの競技にも関心を持ち参考にし、運動を始めるきっかけになれるサイト。
~
***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Webサイト
-現在製作途中のサイト
https://katsukinarita.github.io/sotu02/
-サイト完成イメージ
https://drive.google.com/file/d/1uW1uRlcbDYRrNC92YSYi6XZeFAga68WA/view?usp=drivesdk
https://drive.google.com/file/d/1f2hbE5USCOVmjkTSzRv1iRVmQRYtDdw_/view?usp=drivesdk
-サイト内で使用予定の3Dモデル
#image(tennis1.png,50%)
#image(tennis2.png,50%)
#iframe(https://katsukinarita.github.io/sotusei01/, 100%, 75%)
3Dモデルがうまく表示されない状況です
~
//***メンバー
//&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記};
~
***制作ツール
//&color(red){使用するツール｜ハードウエア・ソフトウエア};
Belnder, GitHub, ibisPaint X
~
***プロジェクトの期間
//&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX };
2022.04.08~2022.12.23
~
***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
//のまとめ、課題、これからの
ボールの画像を横に流れるようになど、動きのあるイメージに近いものになってきた。
これからもっとサイト全体の詳細を作っていく。
またサイトに3dモデルの埋め込んでも多少動きは出たり分かりやすくはなるが、興味を引けるサイトにはならないと思うので、実際のボールを使って動画を撮ってみたりなど工夫をしていく。
~
~
**調査
***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
-[[漫画に影響を受けて始めたスポーツランキング>https://trend-research.jp/13054/]]
トップ10のうち6種目が球技だった。
-[[スポーツ少年団とは>https://www.japan-sports.or.jp/Portals/0/data/syonendan/doc/H28guidebook.pdf]]
-[[小学校クラブ活動>https://mama.chintaistyle.jp/article/primary-school-club/]]
-[[中学校部活動>https://www.stepnet.co.jp/stepblog/?p=9802]]
小学生でも分かりやすいサイトにしようと考えた理由として上記の記事などから、社会全体的に小学生から中学生の間にスポーツ少年団やクラブ活動、部活動に参加できるようになることから球技に関心を持つ機会が多いと考えたからだ。
-[[中学生の読解力低下>https://www.yomiuri.co.jp/kyoiku/support/ranger/20200107-OYT8T50054/]]
-[[児童生徒の読解力は低下しているのか>https://www.jstage.jst.go.jp/article/kokugoka/67/0/67_KJ00006253407/_pdf]]
-[[小学生読書量1/3に>https://www.nippon.com/ja/japan-data/h00641/amp/]]
現在の小中学生の読解力の低下やスマートフォンを活用しているという情報から、日頃YouTubeやInstagramなどのSNSといった文字情報よりも映像や画像などの視覚情報から情報を得ることに慣れていることを知った。そのため、小中学生にも分かりやすいサイトを作るために、まず文章で説明するのではなく、画像を並べ直感的に分かりやすくしようと考えた。
~
***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-[[ボールの大きさ比較>https://melos.media/hobby/12950/2/]]
〇ボールの説明書きが詳しく、どのように使い分けられているのか分かりやすい
△文字だけでの説明で想像しにくい
-[[ボールの大きさ比較２>https://www.zeroone.fun/posts/8107570]]
〇それぞれのボールの大きさや重さがグラフ化されており違いが分かりやすい
△実際の大きさは想像しにくい
-[[ボールの大きさ比較３>https://standard-size.com/sports/basketball-ball/]]
〇画像での比較が分かりやすく、文字での説明も詳しく記載してある
△他の競技のボールとは比べられない
~
全体的に文字での説明が多いように感じ、直感的に違いを感じ取ることが難しいと感じる。
また、同じ競技の違う大きさのボールを比べるものは多いが、異種競技のボールを比べているサイトは少なかった。
上記のことから、異種競技や身近なものを直感的に比較し想像することが難しいと感じた。
~
***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
-[[ユニバスケール（Nicon）>https://www.nikon.co.jp/sp/universcale/]]
-[[3Dモデルをサイトに埋め込み>https://www.noboyu.com/how-to-embed-3d-models-website/]]
-[[動くwebデザインアイデア帳>https://coco-factory.jp/ugokuweb/]]
-テクスチャ貼り付け
#youtube(M_AoNzdC4gI)
~
~
**プロジェクト管理
***スケジュール
[[スケジュール>https://docs.google.com/spreadsheets/d/15v5L4sjuy2r0Smox3qcT6Xhq5sBJyLzPtKohTULSDGE/edit?usp=sharing]] ◁ここから見れます
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~
***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
-サイト制作
--どのように比較させるのか
--3Dモデルの組み込み
--サイトの枠組み作り
-3Dモデル制作
--ボール
--比較するもの（スマートフォン等身近なもの）
-画像制作
//***NotToDo
//&color(red){やらないこと：何をするかではなく「何をしないか」を考える};
//&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・};
~
~
#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。};
#hr
~
~
**2022.06.30
***試作
https://katsukinarita.github.io/sotu02/
~
~
**2022.06.23
***試作
https://katsukinarita.github.io/sotu02/
ボールの大きさの詳細を追加
~
~
**2022.06.16
***試作
https://katsukinarita.github.io/sotu02/
バスケットボール、バレーボール、サッカーボールのイラストを追加
https://drive.google.com/file/d/1c1dCyh8ljzt5u7dI7h2EN9mLZwxoIvs1/view?usp=sharing
https://drive.google.com/file/d/1sSUgXpAcP0jV0O16QbGeP46so0uWAvi-/view?usp=sharing
https://drive.google.com/file/d/1XfPX3jh46tuvEzWMAWwc_g8HhLot7AOz/view?usp=sharing
~
~
**2022.06.09
***試作
https://katsukinarita.github.io/sotu02/
表示された小ウィンドウを×ボタンだけでなく、枠外をクリックすると消える仕様を追加
テニスボール、野球ボールのイラストを制作、置き換え
比較しやすくなるようにはっきりとした色の線画と、線画の色よりも薄い色で塗りをした
https://drive.google.com/file/d/1Gl9usg9i3v0edv6JwCw56CQpZ23Dd3jj/view?usp=sharing
https://drive.google.com/file/d/15ZfVAfuaLGVxbjsJWwuCjyUypQMsoAVM/view?usp=sharing
~
~
**2022.06.02
***試作
https://katsukinarita.github.io/sotu02/
画像をクリックしたら小ウィンドウが表示するようにする
（画像はフリー素材を使用）
横スクロールにしたい
~
~
**2022.05.25
***調査
技法・技術
-[[動くwebアイデア帳>https://coco-factory.jp/ugokuweb/]]
***試作
#iframe(https://katsukinarita.github.io/sotusei01/, 100%, 75%)
3dモデルがうまく表示されない→ローカルサーバー立ち上げ
参考にしたサイト⇒-[[3Dモデルをサイトに埋め込み>https://www.noboyu.com/how-to-embed-3d-models-website/]]
-サイトイメージ
https://drive.google.com/file/d/1f2hbE5USCOVmjkTSzRv1iRVmQRYtDdw_/view?usp=drivesdk
~
~
**2022.05.17
***調査
//先行事例
//-[[ユニバスケール（Nicon）>https://www.nikon.co.jp/sp/universcale/]]
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
技法・技術
-[[blender無料テクスチャまとめサイト>https://vtuberkaibougaku.site/2021/08/16/blender-freetexture/]]
-[[Python>https://camp.trainocate.co.jp/magazine/what-is-python/]]
~
***試作
-blenderにて作成
#image(tennis1.png,50%)
#image(tennis2.png,50%)
-サイトイメージ変更
https://drive.google.com/file/d/1uW1uRlcbDYRrNC92YSYi6XZeFAga68WA/view?usp=drivesdk
//-
~
~
**2022.05.12
***調査
先行事例
-[[ユニバスケール（Nicon）>https://www.nikon.co.jp/sp/universcale/]]
いろいろな身近なものから想像がつかない大きさのものまでを
比較できクリックで詳細が見れたりするのでサイトをみているだけでおもしろい
小さい子から大人まで楽しめそう
-[[物の大きさをわかりやすく例えて伝える方法>http://xn--u9ja1bf5rretb2z.com/2018/01/14/mononoookisa/]]
同じくらいの大きさの身近にあるものを記載しておくと想像しやすい
こども向けのサイトにしたいのかなど対象の年代に合わせて例えを考える
-[[図を重ねて比較>https://spacerobot-lab.blogspot.com/2020/06/sports-BallSize-Distance.html]]
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
技法・技術
//-[[見やすいHP>https://hatafull.co.jp/blog/7154]]
-blender参考動画
#youtube(DsNZzUZPhw4)
#youtube(KxAMC-PRBOU)
テクスチャー
#youtube(M_AoNzdC4gI)
惑星比較アニメ
#youtube(9hUo435X6f0)
~
***試作
サイトイメージ
https://drive.google.com/file/d/1ypjdX4Mccn9TMzAJPJZHeR2KFu8U7THx/view?usp=drivesdk
//-
~
~
**2022.04.15
***調査
先行事例
-[[身長比較したったー>https://hikaku-sitatter.com]]
自分で好きな大きさを並べられるのが面白い。
人だけじゃなく人と一緒に並べられやすい物も並べられる。
-[[自分で選んで比較(Appleサイト)>https://www.apple.com/jp/iphone/compare/]]
自分でモノを選んで比較できる
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
技法・技術
-[[3Dモデルをサイトに埋め込み>https://www.noboyu.com/how-to-embed-3d-models-website/]]
~
//***試作
//-
~
~
**2022.04.08
***テーマ案
-ボールを比べるサイト
スポーツで使用されているボールの遍歴やメーカーによる違いを並べたり
違うスポーツのボールを並べて大きさ比較をしたり身近なものを並べる
３DCGで作成したものを並べてクルクルできたりしたら面白そう
-ジェンダーに関すること
SDGｓで世の中の関心が高まってきているように感じるジェンダーや
トランスジェンダー（ＬＧＢＴＱ＋）についてのサイト
もっと興味を持ってもらえたり知ってもらう
性の悩みが増えるといわれている中学生にも読みやすくて
伝わるようなわかりやすく説明するサイト
-3年前期にしていた着せ替えの仕組みを使ったもの
~
***調査
-[[ボールの大きさ比較>https://melos.media/hobby/12950/2/]]
〇ボールの説明書きが詳しく、どのように使い分けられているのか分かりやすい
△文字だけでの説明で想像しにくい
-[[ボールの大きさ比較２>https://www.zeroone.fun/posts/8107570]]
〇それぞれのボールの大きさや重さがグラフ化されており違いが分かりやすい
△実際の大きさは想像しにくい
-[[ボールの大きさ比較３>https://standard-size.com/sports/basketball-ball/]]
〇画像での比較が分かりやすく、文字での説明も詳しく記載してある
△他の競技のボールとは比べられない
~
-[[ジェンダーとは>https://docoic.com/59507]]
文章が長かったり、多かったりして言い回し方が少し難しく感じてしまう
-[[ジェンダーについて問いかけ>https://humanization.jimdofree.com/%E4%BC%81%E6%A5%AD-%E7%B5%84%E7%B9%94-%E3%81%A8%E4%BA%BA%E6%A8%A9/%E6%97%A5%E5%B8%B8%E7%94%9F%E6%B4%BB%E3%81%AE%E4%B8%AD%E3%81%AE%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%80%E3%83%BC%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%AA%BF%E3%81%B9%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/]]
〇身近な問題提起で想像しやすい
説明するだけのサイトが多い中で問いかけられることで理解がしやすい・深まる
△文字ばかりで見にくい
-[[ジェンダーとは>https://ej.alc.co.jp/entry/20190917-book-ej1910]]
動画の説明をしているサイト
動画が約８分半と長めなので気軽には見にくそう
-[[LGBTQについて>https://jobrainbow.jp/magazine/whatislgbtqia]]
詳しくかつ、太文字を使うなどの工夫があり、
文は多いが読みやすくわかりやすい
-[[LGBTQについて２>https://jibun-rashiku.jp/column/column-3215]]
全体的にもだが、多くの人が前提知識を持っていそうな部分は特に
短く簡潔に説明がされており読みやすい。
特に詳しく説明がされている部分も一文が短く読みやすく感じた。
また文字の色分けされているのが読みやすくてわかりやすいように感じた。
-[[診断テスト>https://www.arealme.com/gay-test/ja/]]
文章を読むだけよりも、何か行動を起こせるほうが面白く興味を持ってもらえそう
~
~
//**20XX.XX.XX
//***XXXXXX
//-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯
//-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯
//~
//***XXX
//-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
//-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
//~
//~
~
