田代爽乃/情報デザイン研究I

ププとロロは探検隊

ゲームの内容や開発チームの活動をまとめたサイト

• 田代爽乃
• Keywords：Web, Site, WordPress, Game
• http://otubuwoham.wp.xdomain.jp/

概要

これは何？

ゲーム作ろうラボで現在制作中の子ども向けプログラミング知育ゲームのゲーム内容や開発チームの活動についてまとめたサイト

背景と目的

ププとロロは探検隊のカードゲームの試作を使用したワークショップを開催したときに「このゲームでどんな事を学べるの?」と保護者の方から質問を頂いた。ワークショップに来てくれた人には直接伝えることが出来るが、今後リリースまで考えているゲームのため、ワークショップ以外にもこのゲームについての情報を発信できる場所が作れないかと考えた。

コンセプト

• このゲームで遊ぶことでどんなことが学べるか分かりやすく書かれているサイト
  
  
  
  

成果物の仕様

• http://otubuwoham.wp.xdomain.jp/
  
  
• ワイヤーフレーム
  
  
• サイトマップ
  
  
  
  

制作ツール

WordPress(Cocoon)
Adobe Illustrator 2023
Adobe Photoshop 2023
Adobe xd

プロジェクトの期間

プロジェクトの期間｜20023.04.11 - 2023.7.11

まとめ

「ゲームを通してどのようなことが学べるのか」という説明をうまくまとめることができたが、その説明をサイトにどのように記載していくかを悩んだ。
ユーザーの興味関心を惹きつけるためにプラグインなどでアニメーションをつけたり、CSSを使ってカスタマイズしてみたが、全体的にまとまらないデザインになってしまった。ユーザーに安心して利用して貰うためにも、特に伝えたい箇所を強調したり、視覚的に情報整理ができるように細かいあしらいを取り入れるなどの工夫が必要だと感じた。

調査

現状調査

ゲーム自体にゲームでどのようなことが学べるのかが分かる説明などがない

先行事例

• ワオっち！キッズサイト
• ごっこランド｜親子で遊べる！No.1社会体験アプリ
• Mr.shape｜ミスターシェイプ｜子ども向けアプリ タッチカード
• 「すみすみ」公式サイト｜すみっコぐらしやリラックマのパズルゲーム
• 知育アプリ『ドラクエベビー&キッズ〜スライムとあそぼう〜』公式サイト｜SQUARE ENIX
  
  

• 文字が全体的に大きい
• アニメーションなどを使用しゲームのコンセプトに合ったWebデザイン
• 図やイラストを使用したり、文字を強調することでどの様な力を育めるか一目で分かる
  
  
  
  

技法・技術情報

• 1冊ですべて身につくWordPress入門講座(参考書)
  
  
  
  

プロジェクト管理

スケジュール

スケジュール

ToDo

• サイトマップの制作
• ワイヤーフレームの制作
• スケジュールの設定
• サイトに掲載する内容の確認・調査
  
  
  
  

2024.04.06

サイトの更新

• 色の変更
• メインビジュアルの変更
  
  
  
  
  

2023.07.18

ブラッシュアップ

• 「ホーム」ページのあらすじと説明文の追加
• 「その他」ページの説明の追加
• フッターの修正
• 「あそびかた」ページから「システム」ページに変更
• 「システム」ページの画像作成
• サイトマップの更新
  
  
  
  

2023.07.11

メモ

• ゲーム自体の説明が足りない(「あそびかた」ページ、「ゲームページ」について)
• サイトの構成について
• フッターの修正
• 「その他」ページ(メンバーについての説明、目標など)
  
  
  
  

2023.07.04

• 背景の制作・変更
  

2023.06.27

サイト編集

• 「あそびかた」ページ画像の追加
  
  
  
  
  

2023.06.20

サイト編集

• 「あそびかた」ページの更新
• 「ゲーム」ページの更新
  使用したフリーイラスト ソコスト
  
  
  
  

2023.06.13

サイト編集

• 活動報告記事の更新
• 「ホーム」のページの更新(ゲーム概要の画像の作成)
  
• 「キャラクター」ページの更新(キャラクターの紹介画像の作成)
  
  
  
  
  

2023.06.06

サイト編集

• 背景画像の作成
  
  
  

修正

• ゲームタイトルについて開発チームと話し合い、キャラクターの名前部分をカタカナに変更
• アピールエリア、ロゴ、メインビジュアルの修正(タイトルの変更)
  
  
  

2023.05.30

サイト編集

• サイト内全てフォントの変更
  
  

修正

• アピールエリアの文字修正(カーニング、文字の大きさの調整)
• ロゴの文字修正(カーニング、文字の大きさの調整)
  
  

2023.05.23

サイト編集

• お知らせ、活動報告記事の更新
• レイアウトや配色決め
  (サイト全体の配色、固定ページの制作、CSSを使用したレイアウト)
• アニメーションの追加(サイト読み込み、画像)
• アピールエリアの制作
  
  
  
  
  

2023.05.16

サイト編集

• ワイヤーフレームの作成
  
  
  
  

2023.05.09

サイト作成(編集中)

ぷぷとろろは探検隊

2023.05.02

スケジュール表の作成

スケジュール

サイトマップ

※「ダウンロード」の部分はデジタル版、アナログ版が完成したら掲載する

2023.04.25

参考サイト

• ワオっち！キッズサイト
• ごっこランド｜親子で遊べる！No.1社会体験アプリ
• Mr.shape｜ミスターシェイプ｜子ども向けアプリ タッチカード
• 「すみすみ」公式サイト｜すみっコぐらしやリラックマのパズルゲーム
• 知育アプリ『ドラクエベビー&キッズ〜スライムとあそぼう〜』公式サイト｜SQUARE ENIX
  
  

• 文字が全体的に大きい
• アニメーションなどを使用しゲームのコンセプトに合ったWebデザイン
• 図やイラストを使用したり、文字を強調することでどの様な力を育めるか一目で分かる
  
  
  
  

2023.04.18

参考サイト

• 双極性障害とは
  • 双極性障害について
  • 双極性障害とは - 原因、症状治療方法などの解説
• 双極性障害の人への接し方
  • 双極性障害の人への接し方で大切なこと
  • 家族や身近な皆様に知っておいていただきたいこと
  • 家族、友人として
  • 双極性障害の人への接し方は?
    
    
    
    

2023.04.11

テーマ候補

• 双極性障害を抱えた人に周りの人ができることをまとめたWebサイトの制作
• ゲーム作ろうラボで制作中の知育ゲームの紹介と活動内容についてまとめたWebサイトの制作
• SNS上でのマナーについて分かりやすくまとめた動画制作
  
  

先行研究の調査

• 南竹うらら/情報デザイン研究I
  • SNSへの発信の仕方の参考になりそう
• 紀野はるか/情報デザイン研究II
  • 情報をまとめていく上で参考になりそう
• 牧野友紀/情報デザイン研究I
• 中尾日香梨/卒業研究II
• 西山実伶/情報デザイン演習IIA
  • サイトの構成を考える上で参考になりそう
    
    

メモ

• 専門的な情報をサイトに掲載したい場合は自分で噛み砕いた文章の後に
  引用、参考にしたサイトのURLを記載する
• 自分の発信する情報が正確なのか専門家に確認する必要がある