成田佳津希/卒業研究II

ころくる

まるい道具を使うスポーツやその道具を比較・紹介するWebサイト

• Narita Katsuki
• Keywords ： web, ball, sports
• https://katsukinarita.github.io/korokuru/

概要

これは何？

球技で使用されているボールなどの大きさ等をわかりやすく比較するサイト。

背景と目的

• 背景
  昨年オリンピックが日本国内で行われたり、スポーツ漫画の影響、また中学校の部活動でスポーツに興味を持つ機会が多い。またスポーツの中でも球技は野球やサッカー当のスポーツ中継、漫画の題材や体育の授業に取り入れられることが多く目にする機会が多い。しかし新たに興味を持っても競技するために必要なボールがどのような大きさなのかということがネットで調べても文字情報だけでの説明や数種目で比べるサイトが少なく分かりにくい。そこで様々な競技のボールを視覚情報を用いて説明をすることで、新たに関心を持った競技に触れやすくなるのではないかと思った。

• 目的
  画像などを用いて視覚的に分かりやすい情報で直感的に理解でき、その後文字情報での詳細説明をするWebサイトを作成することで、クラブ活動や習い事で球技を始めようとしている小学生などの球技に関心を持ち始めた人が、より球技に関心を持ったり始めるときのきっかけになりたい。
  
  

コンセプト

知っている物と比べられるような、大きさの順番にボールのイラストのスライドなど、視覚的に分かりやすい情報でまず伝えることで、球技に興味を持った小学生や中学生などにより関心を持ってもらう。それから文字情報を用いた説明をすることで画像などの視覚情報から情報を得ることに慣れている小中学生にも、より詳しい情報を知ってもらう。その情報を一覧や条件ごとにまとめたりして並べたりすることで、もともと興味のある競技意外にも目に入るようにして、より多くの競技にも関心を持つきっかけになることができるサイト。

成果物の仕様

Webサイト

サイト内で使用しているイラスト

• https://drive.google.com/drive/folders/1-2Im2iMev5C1ioukRj6QDAso_YPdapOJ?usp=sharing
• https://drive.google.com/drive/folders/1-9cCFMOn7zFzRqbzfMuMSPqqsm1QUqRw?usp=sharing

制作ツール

Visual Studio Code, GitHub, ibisPaint X

プロジェクトの期間

2022.04.08~2022.12.23

まとめ

動きのあるスライドで興味関心を持たせたり、その後一覧で詳しい情報を知ることができる。また、それらによって新たな興味を持つきっかけを作れるコンセプト通りのようなサイトになったと思う。より多くの球技を知ってもらうためにもこれからも情報を足し続けて、サイトをブラッシュアップしていきたい

調査

現状調査

• 漫画に影響を受けて始めたスポーツランキング
  トップ10のうち6種目が球技だった。
• スポーツ少年団とは
• 小学校クラブ活動
• 中学校部活動
  小学生でも分かりやすいサイトにしようと考えた理由として上記の記事などから、社会全体的に小学生から中学生の間にスポーツ少年団やクラブ活動、部活動に参加できるようになることから球技に関心を持つ機会が多いと考えたからだ。
• 中学生の読解力低下
• 児童生徒の読解力は低下しているのか
• 小学生読書量1/3に
  現在の小中学生の読解力の低下やスマートフォンを活用しているという情報から、日頃YouTubeやInstagramなどのSNSといった文字情報よりも映像や画像などの視覚情報から情報を得ることに慣れていることを知った。そのため、小中学生にも分かりやすいサイトを作るために、まず文章で説明するのではなく、画像を並べ直感的に分かりやすくしようと考えた。
  
  

先行事例

• ボールの大きさ比較
  〇ボールの説明書きが詳しく、どのように使い分けられているのか分かりやすい
  △文字だけでの説明で想像しにくい
• ボールの大きさ比較２
  〇それぞれのボールの大きさや重さがグラフ化されており違いが分かりやすい
  △実際の大きさは想像しにくい
• ボールの大きさ比較３
  〇画像での比較が分かりやすく、文字での説明も詳しく記載してある
  △他の競技のボールとは比べられない
  
  
  全体的に文字での説明が多いように感じ、直感的に違いを感じ取ることが難しいと感じる。
  また、同じ競技の違う大きさのボールを比べるものは多いが、異種競技のボールを比べているサイトは少なかった。
  上記のことから、異種競技や身近なものを直感的に比較し想像することが難しいと感じた。
  
  

技法・技術情報

• ユニバスケール（Nicon）
• 動くwebデザインアイデア帳
  
  
  
  

プロジェクト管理

スケジュール

スケジュール　◁ここから見れます

ToDo

• サイト制作
  • どのように比較させるのか
    ---頭文字検索
  • サイトの枠組み作り
    ---ボールが流れるように
    ---頭文字検索
• 画像制作
  • ボール
  • 比較するもの（スマートフォン等身近なもの）
• ボールのリストアップ

2022.12.22

• 『このサイトについて』ページに『サイトのみかた』を追加
  
• 『このサイトについて』『サイトのみかた』の文字に背景を追加
  
  まるい柔らかいイメージで作成
• イラストで一覧にしたときの背景変更
  
  
  
  

2022.12.15

• フッターの統一
• 『このサイトについて』ページの追加
  まだ編集中です
  図鑑のようにページのみかたの説明を追加予定
• メニューバーの改善
  
  
  
  

2022.12.02

講評をうけて

• メニューバーの組み直し、再考
  --『あ/か、さ/た ...』→『あ、か、さ、た ...』
  • 『home』ページが必要か、英語表記でいいのか
    --『このサイトについて』のようなサイトマップになるようなページの追加
    -フッターの統一
• どんなワードで検索したら出てくるのか
• 分かりやすさを考える(見る層に小中学生が含まれることを考えつつ)
  --スライドのカーソルが重なると動きが止まることを明記する
  --スライドに戻る、進むボタンを追加
  • サイト内の言葉選びの再考
    
    

イラスト

• イラスト追加
  • アルティメット

サイト

• スライド
  • 戻る、進むボタンを追加
• メニュー
  • 『あ/か、さ/た ...』→『あ、か、さ、た ...』
• リスト
  • アルティメットの追加
    
    
    
    

2022.12.01

イラスト

• イラスト追加
  • 500mlペットボトルiPhone、chrome　book

サイト

• ロゴ、メニューバーのフォントを変更
  IM Fell Great Primer SC　⇒　ニコモジ
  丸みの帯びたイメージのフォントに変更
• スライド
  • 身近なもののイラストを追加
  • 画像の置き換え（小さいボールの横の余白調節）
• リスト
  • 競技名と外部サイトの間を広げる＆点線で区切る
  • 外部リンク先のページ名のフォントを小さく・色をグレーにした
    リンクの文字とページ名の違いをはっきりさせて分かりやすくするため

2022.11.28

サイト

• リストの改善
  • 競技・ボール名のところにその競技のルールなどを説明してあるサイトリンクを掲載
    （そのスポーツの協会サイト⇒協会サイトの説明が難しいorルールの記載がない場合は簡単にルールなどが説明されているサイト）

2022.11.22

イラスト

• 4~16cmのボールイラストの画像サイズ変更→差し替え

サイト

• サイズ変更したボール画像の差し替え
• ボールイラストのスライドの仕様を変更（wideslider→slick）
• スライドの画像にカーソルを合わせると競技名を表示
  • いままで
    スライドの画像をクリックしてボールの詳細表示させることでボールのことを知ってもらう。文字情報は一覧でも見られるようにしておく。
    ↓
    スライドを興味を引くきっかけとし、競技名を見てサイト内の索引から探して詳細を見てもらう。

2022.11.11

イラスト

• イラスト追加
  • バトミントン

サイト

• リストにボールを追加
• ボールイラストのスライドindexを追加（wideslider）
  • 前回の仕様のまま挿入しても画像をクリックしてもボールの詳細が表示されない

2022.11.05

サイト

リストにボールを追加

2022.10.29

イラスト

ボールイラスト追加

2022.10.22

イラスト

ボールイラスト追加

2022.10.17

イラスト

ボールイラスト追加

2022.10.11

サイト

• 直径順に並べ替えができるように

2022.10.01

サイト

https://katsukinarita.github.io/korokuru/

• 頭文字ごとでの索引をできるように

2022.09.23

サイト

はじめに小ウィンドウが開いてしまうのを改善

ボール

• ボールのリストアップ
  リスト
  
  
  
  

2022.09.16

サイト

https://katsukinarita.github.io/sotu02/