西山実伶/情報デザイン演習IIA

WAKE UP!!!

眠気を覚ますお助けWebサイト

• 西山 実伶
• Keywords：Wed Design、Google Site、Sleep
• https://sites.google.com/view/mezame-2022←クリック！

概要

これは何？

授業中、話し合い中、勉強中などで寝たくないのに眠ってしまう！......という悩みを少しでも助けられるようにおすすめ順に目覚まし方法を紹介するWebサイト。

背景と目的

講義中や勉強中にどうしても眠くなる時があったため、眠気を覚ます&眠らない方法を調べ、それをWebサイトに方法をまとめ提供する。

コンセプト

睡眠についての歴史や関連のあるものなどを調べるとともに、眠気を覚ます方法を実践し、見やすいようにまとめる。

眠りについての調査

西山実伶/情報デザイン演習IIAメモ

成果物の仕様

• webサイト
• 画像
• サイトマップ
  

制作ツール

• ハードウェア
  • MacBook Air
  • iPad（第五世代）
• サービス
  • ibisPaint
  • googleサイト
    
    

プロジェクトの期間

プロジェクトの期間｜2022.04.11 - 2022.07.27

まとめ

自分でプロジェクトの内容を決め、作成していくことは初めての経験でしたが自分なりに楽しむことができたと思います。睡眠について調べていくうちに興味深い内容が多く、もっと多くの人に共有したいと考えるようになりました。どのようにすれば興味を持ってくれるのか、どのような構成にすれば見やすくなるのかを考えるのが一番大変でした。プロジェクトを通して新たな知識を身につけることができ、スケジュールの管理の仕方や調査の仕方などを経験できたことがよかったです。今回のプロジェクトで身につけたことを今後の作品制作や活動にも活かしていきたいと思います。

プロジェクト管理

スケジュール

スケジュール管理表

ToDo

• 目を覚ます方法を調べる（ネタ集め）
• メインビジュアルを考える
• サイトのタイトル決め
• 集めた方法を実践する
• おすすめ順にならべてみる
• Webサイトの作成
  • ワイヤーフレーム、コンセプト、サイトの構成
• メインビジュアルの修正
• イラストの準備
• 各ページの文章作成

2022.07.26　

制作物の現状

https://sites.google.com/view/mezame-2022

今週の取り組み　

イラストを描き終えました。
今回作成した画像をGoogleドライブに載せています。
Googleドライブ

2022.06.27　

制作物の現状

https://sites.google.com/view/mezame-2022

今週の取り組み　

• イラスト2枚追加
• 文章作成
  
  
  
  

今後の課題　

• 文章作成
• イラスト
  
  
  
  

2022.06.20　

制作物の現状

• https://sites.google.com/view/mezame-2022

今週の取り組み　

• 眠気覚ましのツボ調べ
• 方法（授業中編）の文章
• 目次を修正
• 眠り編のサイト開設
  
  

今後の課題　

• メインビジュアルの修正
• イラストの準備
• 各ページの文章作成
  
  
  
  

2022.06.13　

制作物の現状

• https://sites.google.com/view/mezame-2022
• 西山実伶/情報デザイン演習IIAメモ

メモを更新しました。ツボ押しや目薬、睡眠に関する参考リンクなどを追加しています。

今週の取り組み　

• カフェインをとる（コーヒー）
• 運動する（ラジオ体操）
• 仮眠をとる（20分程度）
  上記の方法を試しました。
• ツボ押しの調査
• おすすめの目薬調査
  
  

今後の課題　

• メインビジュアルの修正
• イラストの準備
• 各ページの文章作成
  
  
  
  

2022.06.06　

制作物の現状

ワイヤーフレームを少し変更しました。

今週の取り組み　

• 足上げ腹筋
• 手をつねる
• 限界まで息を止める
• 目薬をさす
• 深呼吸をする
  上記の方法を試しました。
  
  

今後の課題　

• メインビジュアルの修正
• イラストの準備
• 各ページの文章作成
  
  
  
  

2022.05.30　

今週の取り組み　

あくびについて調べました。メモの方に少しまとめています。

今後の課題　

• メインビジュアルの修正
• イラストの準備
• 各ページの文章作成
  
  
  
  

2022.05.23

指摘された問題点

• フォントがサイトのイメージと合っていない。
• トップページの「WAKW UP!!!」が画面外に切れている。
  
  

好評価を得た点

• サイトマップ、サイトの構成
• サイトが見やすい。
• イラストが可愛い。←ありがとうございます！！！！
• 睡眠関連の内容
  
  

2022.05.22

やっぱりほんわかしたイメージがいいなぁ・・・
ということで↓↓

プロトタイプ

• メインビジュアル変更（ラフ）
  
  
  
• サイト名
  変更前：目覚めの館
  変更後：WAKE UP!!
  
  
• サイトマップ
  
  
  

メモ作成

参考リンクなどを載せています。

• 西山実伶/情報デザイン演習IIAメモ
  
  

google site（準備中）

• WAKE UP!!
  ※一部ダミーテキストを使用しています。

2022.05.09

今回制作したプロトタイプ

• サイトマップ
  

• ワイヤーフレーム
  

※ダミーテキストとイラストやを使用しています。

プロトタイプ制作の方法

• ibis paint
• google site
• ダミーテキスト
• イラストや
  
  

Webのネーミング②

• ホームページ：目覚めの館（仮）
• webページ：睡眠について（歴史、理由）、方法（身体編、食べ物編）、その他（寝る方法）
  
  

メインビジュアル（仮）変更可能性あり

まだイメージが固まってません・・・

2022.04.25

アイデアの量産 ＞ 絞り込み

Webの公開方法

• googleサイト
  
  

Webの内容（素材ネタ）

• 「睡眠」に関する基本的な情報
• なぜ睡眠を必要とするのか、仕組みなど
• 眠気覚ましの方法
  • 眠気覚ましのツボ
  • 眠気覚ましの飲みもの＆食べ物
  • 眠気覚ましの行動
    
    

Webのネーミング

• ホームページ：WAKE UP！！！
• webページ：HISTORY、WHY、HOW TO
  
  

Webの構成

• ホームページ：webサイトの使い方の説明
• HISTORY：「睡眠」の歴史について
• WHY：なぜ睡眠が必要か
• HOW TO：目を覚ます方法
  
  
  
  

2022.04.18

現状調査｜テーマ内容の先行事例

• 眠気とおさらば！どこでも簡単にできる眠気覚ましのツボ
• 【徹底比較】眠気覚ましドリンクのおすすめ人気ランキング19選【コンビニでも手軽に】
• 【すぐに試せる】簡単に眠気を覚ます方法10選！
  
  

現状調査｜表現形式の先行事例

• 日中あくびが止まらない　原因と予防方法
• 睡眠はどのように進化してきたのか
  
  

現状調査｜時間軸（対象の歴史的知見）

• 現代的な意味で、科学的に「睡眠」「覚醒」が扱われるようになったのは、20世紀初頭、1920年代ごろからと考えられている。参考サイト
• 昔と今では睡眠の本質には変わりがないものの、その環境は大きく異なっている。参考サイト
  
  

現状調査｜空間軸（対象の地理的知見）

• ヒトの睡眠はノンレム睡眠とレム睡眠(REM sleep)という質的に異なるふたつの睡眠状態で構成されています。参考サイト
  
  

現状調査｜技術

• googleサイト
• Illustrator
• abisPaint
  
  

解決すべき課題

• サイト名を考える
• 眠くならない方法を探し、実践してみる
• 効果がありそうな方法、その場でできそうな方法などの項目に分けてみる
• 必要なイラストを描く
• webサイトをつくる
• サイトの構成を考える
  
  
  
  

2022.04.11

プロジェクトのテーマ候補（10件以上）

• 眠気覚ましの方法
• 眠れない人のための睡眠音楽&方法
• 迷ったときはこの曲！楽しく歌おう！
• 便利な時間割アプリorサイト
• 大学内の顔集
• 新しい手遊び
• 九州産業大学学食ランキング
• Processingを使ったゲーム
• 大学周辺の食べ物マップ
• 駆け込みマップ（何か忘れ物をした時、今すぐに必要な道具がある時、etc.）
  
  
  
  

参考リンク

• 西山実伶/情報デザイン演習IIAメモに記載