ころくる
球技のボールを比較するWebサイト
- Narita Katsuki
- Keywords ： web, 3DCG, ball, sports
概要
これは何？
球技で使用されているボールの大きさなどをわかりやすく比較するサイト。
背景と目的
- 背景
私は個人的にドッジボールをプレーしているのだが、認知度が高くなくボールはどのくらいの大きさなのかなど質問されることがよくある。
そのときに、プレイヤーでもどのくらいの大きさなのかと聞かれるとバレーボールよりも少し大きいのか同じくらいなのかなどは理解しておらず、返答によく困ることが多く、曖昧な返事になり話を深められない事があった。
ネットで調べてみると個々のそれぞれの球技で用いられるボールのサイズはそれぞれ知ることが出来るが、違う競技のボールのものと比べられるサイトが少なかったり、数値だけでの説明で想像がしにくいものが多く、調べる手間がかかってしまう。
そこで、視覚で分かりやすく比べられる事で、球技に関心を持ち始めたときに、より球技に親しみやすさが生まれるのではないかと思った。 - 目的
まず画像などを用いて視覚的に分かりやすい情報で直感的に理解でき、その後文字情報での詳細説明をするWebサイトを作成することで、クラブ活動や習い事で球技を始めようとしている小学生などの球技に関心を持ち始めた人が、より球技に関心を持ったり始めるときのきっかけになりたい。
コンセプト
画像などを用いて視覚的に分かりやすい情報で伝えることで、クラブ活動や習い事で球技を始めようとしている小学生などの子供にも分かりやすくする。それから、文字情報などでの詳細説明をすることで、より詳しく知ろうとしている人も利用できるようにする。また3Dモデルも使用することでただ見て読むだけではない動きのあるものにして、もともと興味のある競技だけでなく、より多くの競技にも関心を持ち参考にし、運動を始めるきっかけになれる場所。
成果物の仕様
Webサイト
- サイトイメージ
https://drive.google.com/file/d/1uW1uRlcbDYRrNC92YSYi6XZeFAga68WA/view?usp=drivesdk
https://drive.google.com/file/d/1f2hbE5USCOVmjkTSzRv1iRVmQRYtDdw_/view?usp=drivesdk - サイト内で使用予定の3Dモデル
3Dモデルがうまく表示されない状況です
制作ツール
Belnder, GitHub, ibisPaint X
プロジェクトの期間
2022.04.08~2022.12.23
まとめ
サイト全体の構成イメージはできたので、どんな色合いにするのかなど詳細を作りながら考えていく。
またまだ3dモデルの埋め込みが上手くできていない状況であり、これからWebサイト作りと並行して作業を続けていく。
3Dモデルについてはblenderでのテクスチャの貼り方などを理解することが出来たのでこれから量を増やしていく。
調査
現状調査
- スポーツ少年団とは
- 小学校クラブ活動
- 中学校部活動
小学生でも分かりやすいサイトにしようと考えた理由として上記の記事などから、社会全体的に小学生から中学生の間にスポーツ少年団やクラブ活動、部活動に参加できるようになることから球技に関心を持つ機会が多いと考えたからだ。 - 中学生の読解力低下
- 児童生徒の読解力は低下しているのか
- 小学生読書量1/3に
現在の小中学生の読解力の低下やスマートフォンを活用しているという情報から、日頃YouTubeやInstagramなどのSNSといった文字情報よりも映像や画像などの視覚情報から情報を得ることに慣れていることを知った。そのため、小中学生にも分かりやすいサイトを作るために、まず文章で説明するのではなく、画像を並べ直感的に分かりやすくしようと考えた。
先行事例
- ボールの大きさ比較
〇ボールの説明書きが詳しく、どのように使い分けられているのか分かりやすい
△文字だけでの説明で想像しにくい - ボールの大きさ比較２
〇それぞれのボールの大きさや重さがグラフ化されており違いが分かりやすい
△実際の大きさは想像しにくい - ボールの大きさ比較３
〇画像での比較が分かりやすく、文字での説明も詳しく記載してある
△他の競技のボールとは比べられない
全体的に文字での説明が多いように感じ、直感的に違いを感じ取ることが難しいと感じる。
また、同じ競技の違う大きさのボールを比べるものは多いが、異種競技のボールを比べているサイトは少なかった。
上記のことから、異種競技や身近なものを直感的に比較し想像することが難しいと感じた。
技法・技術情報
- ユニバスケール（Nicon）
- 3Dモデルをサイトに埋め込み
- 動くwebデザインアイデア帳
- テクスチャ貼り付け
プロジェクト管理
スケジュール
スケジュール ◁ここから見れます
ToDo
- サイト制作
- どのように比較させるのか
- 3Dモデルの組み込み
- サイトの枠組み作り
- 3Dモデル制作
- ボール
- 比較するもの（スマートフォン等身近なもの）
- 画像制作
進捗記録
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
テーマ案
- ボールを比べるサイト
スポーツで使用されているボールの遍歴やメーカーによる違いを並べたり
違うスポーツのボールを並べて大きさ比較をしたり身近なものを並べる
３DCGで作成したものを並べてクルクルできたりしたら面白そう - ジェンダーに関すること
SDGｓで世の中の関心が高まってきているように感じるジェンダーや
トランスジェンダー（ＬＧＢＴＱ＋）についてのサイト
もっと興味を持ってもらえたり知ってもらう
性の悩みが増えるといわれている中学生にも読みやすくて
伝わるようなわかりやすく説明するサイト - 3年前期にしていた着せ替えの仕組みを使ったもの
調査
- ボールの大きさ比較
〇ボールの説明書きが詳しく、どのように使い分けられているのか分かりやすい
△文字だけでの説明で想像しにくい - ボールの大きさ比較２
〇それぞれのボールの大きさや重さがグラフ化されており違いが分かりやすい
△実際の大きさは想像しにくい - ボールの大きさ比較３
〇画像での比較が分かりやすく、文字での説明も詳しく記載してある
△他の競技のボールとは比べられない
- ジェンダーとは
文章が長かったり、多かったりして言い回し方が少し難しく感じてしまう - ジェンダーについて問いかけ
〇身近な問題提起で想像しやすい
説明するだけのサイトが多い中で問いかけられることで理解がしやすい・深まる
△文字ばかりで見にくい - ジェンダーとは
動画の説明をしているサイト
動画が約８分半と長めなので気軽には見にくそう - LGBTQについて
詳しくかつ、太文字を使うなどの工夫があり、
文は多いが読みやすくわかりやすい - LGBTQについて２
全体的にもだが、多くの人が前提知識を持っていそうな部分は特に
短く簡潔に説明がされており読みやすい。
特に詳しく説明がされている部分も一文が短く読みやすく感じた。
また文字の色分けされているのが読みやすくてわかりやすいように感じた。 - 診断テスト
文章を読むだけよりも、何か行動を起こせるほうが面白く興味を持ってもらえそう
tennis2.png
tennis1.png
top.png
