ころくる
球技のボールを比較するWebサイト
- Narita Katsuki
- Keywords : web, 3DCG, ball, sports
- https://katsukinarita.github.io/sotu02/
概要
これは何?
球技で使用されているボールの大きさなどをわかりやすく比較するサイト。
背景と目的
- 背景
昨年オリンピックが日本国内で行われたり、スポーツ漫画の影響、また中学校の部活動でスポーツに興味を持つ機会が多い。またスポーツの中でも球技は野球やサッカー当のスポーツ中継、漫画の題材や体育の授業に取り入れられることが多く目にする機会が多い。しかし新たに興味を持っても競技するために必要なボールがどのような大きさなのかということがネットで調べても文字情報だけでの説明や数種目で比べるサイトが少なく分かりにくい。そこで様々な競技のボールを視覚情報を用いて説明をすることで、新たに関心を持った競技に触れやすくなるのではないかと思った。
- 目的
画像などを用いて視覚的に分かりやすい情報で直感的に理解でき、その後文字情報での詳細説明をするWebサイトを作成することで、クラブ活動や習い事で球技を始めようとしている小学生などの球技に関心を持ち始めた人が、より球技に関心を持ったり始めるときのきっかけになりたい。
コンセプト
画像などを用いて視覚的に分かりやすい情報で伝えることで、クラブ活動や習い事で球技を始めようとしている小学生などの子供にも分かりやすくする。それから、文字情報などでの詳細説明をすることで、より詳しく知ろうとしている人も利用できるようにする。また3Dモデルも使用することでただ見て読むだけではない動きのあるものにして、もともと興味のある競技だけでなく、より多くの競技にも関心を持ち参考にし、運動を始めるきっかけになれるサイト。
成果物の仕様
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モデル
制作ツール
Belnder, GitHub, ibisPaint X
プロジェクトの期間
2022.04.08~2022.12.23
まとめ
ボールの画像を横に流れるようになど、動きのあるイメージに近いものになってきた。
これからもっとサイト全体の詳細を作っていく。
またサイトに3dモデルの埋め込んでも多少動きは出たり分かりやすくはなるが、興味を引けるサイトにはならないと思うので、実際のボールを使って動画を撮ってみたりなど工夫をしていく。
調査
現状調査
- 漫画に影響を受けて始めたスポーツランキング
トップ10のうち6種目が球技だった。 - スポーツ少年団とは
- 小学校クラブ活動
- 中学校部活動
小学生でも分かりやすいサイトにしようと考えた理由として上記の記事などから、社会全体的に小学生から中学生の間にスポーツ少年団やクラブ活動、部活動に参加できるようになることから球技に関心を持つ機会が多いと考えたからだ。 - 中学生の読解力低下
- 児童生徒の読解力は低下しているのか
- 小学生読書量1/3に
現在の小中学生の読解力の低下やスマートフォンを活用しているという情報から、日頃YouTubeやInstagramなどのSNSといった文字情報よりも映像や画像などの視覚情報から情報を得ることに慣れていることを知った。そのため、小中学生にも分かりやすいサイトを作るために、まず文章で説明するのではなく、画像を並べ直感的に分かりやすくしようと考えた。
先行事例
- ボールの大きさ比較
〇ボールの説明書きが詳しく、どのように使い分けられているのか分かりやすい
△文字だけでの説明で想像しにくい - ボールの大きさ比較2
〇それぞれのボールの大きさや重さがグラフ化されており違いが分かりやすい
△実際の大きさは想像しにくい - ボールの大きさ比較3
〇画像での比較が分かりやすく、文字での説明も詳しく記載してある
△他の競技のボールとは比べられない
全体的に文字での説明が多いように感じ、直感的に違いを感じ取ることが難しいと感じる。
また、同じ競技の違う大きさのボールを比べるものは多いが、異種競技のボールを比べているサイトは少なかった。
上記のことから、異種競技や身近なものを直感的に比較し想像することが難しいと感じた。
技法・技術情報
- ユニバスケール(Nicon)
- 3Dモデルをサイトに埋め込み
- 動くwebデザインアイデア帳
- テクスチャ貼り付け
プロジェクト管理
スケジュール
スケジュール ◁ここから見れます
ToDo
- サイト制作
- どのように比較させるのか
- 3Dモデルの組み込み
- サイトの枠組み作り
- 3Dモデル制作
- ボール
- 比較するもの(スマートフォン等身近なもの)
- 画像制作
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
調査
技法・技術
試作
3dモデルがうまく表示されない→ローカルサーバー立ち上げ
参考にしたサイト⇒-3Dモデルをサイトに埋め込み
2022.05.17
調査
技法・技術
試作
- blenderにて作成
- サイトイメージ変更
https://drive.google.com/file/d/1uW1uRlcbDYRrNC92YSYi6XZeFAga68WA/view?usp=drivesdk
2022.05.12
調査
先行事例
- ユニバスケール(Nicon)
いろいろな身近なものから想像がつかない大きさのものまでを
比較できクリックで詳細が見れたりするのでサイトをみているだけでおもしろい
小さい子から大人まで楽しめそう - 物の大きさをわかりやすく例えて伝える方法
同じくらいの大きさの身近にあるものを記載しておくと想像しやすい
こども向けのサイトにしたいのかなど対象の年代に合わせて例えを考える
- 図を重ねて比較
技法・技術 - blender参考動画
試作
サイトイメージ
https://drive.google.com/file/d/1ypjdX4Mccn9TMzAJPJZHeR2KFu8U7THx/view?usp=drivesdk
2022.04.15
調査
先行事例
- 身長比較したったー
自分で好きな大きさを並べられるのが面白い。
人だけじゃなく人と一緒に並べられやすい物も並べられる。 - 自分で選んで比較(Appleサイト)
自分でモノを選んで比較できる
技法・技術 - 3Dモデルをサイトに埋め込み
2022.04.08
テーマ案
- ボールを比べるサイト
スポーツで使用されているボールの遍歴やメーカーによる違いを並べたり
違うスポーツのボールを並べて大きさ比較をしたり身近なものを並べる
3DCGで作成したものを並べてクルクルできたりしたら面白そう - ジェンダーに関すること
SDGsで世の中の関心が高まってきているように感じるジェンダーや
トランスジェンダー(LGBTQ+)についてのサイト
もっと興味を持ってもらえたり知ってもらう
性の悩みが増えるといわれている中学生にも読みやすくて
伝わるようなわかりやすく説明するサイト - 3年前期にしていた着せ替えの仕組みを使ったもの
調査
- ボールの大きさ比較
〇ボールの説明書きが詳しく、どのように使い分けられているのか分かりやすい
△文字だけでの説明で想像しにくい - ボールの大きさ比較2
〇それぞれのボールの大きさや重さがグラフ化されており違いが分かりやすい
△実際の大きさは想像しにくい - ボールの大きさ比較3
〇画像での比較が分かりやすく、文字での説明も詳しく記載してある
△他の競技のボールとは比べられない
- ジェンダーとは
文章が長かったり、多かったりして言い回し方が少し難しく感じてしまう - ジェンダーについて問いかけ
〇身近な問題提起で想像しやすい
説明するだけのサイトが多い中で問いかけられることで理解がしやすい・深まる
△文字ばかりで見にくい - ジェンダーとは
動画の説明をしているサイト
動画が約8分半と長めなので気軽には見にくそう - LGBTQについて
詳しくかつ、太文字を使うなどの工夫があり、
文は多いが読みやすくわかりやすい - LGBTQについて2
全体的にもだが、多くの人が前提知識を持っていそうな部分は特に
短く簡潔に説明がされており読みやすい。
特に詳しく説明がされている部分も一文が短く読みやすく感じた。
また文字の色分けされているのが読みやすくてわかりやすいように感じた。 - 診断テスト
文章を読むだけよりも、何か行動を起こせるほうが面白く興味を持ってもらえそう