LogoMark.png

田尻有沙/情報デザイン研究I の変更点


#author("2026-05-21T10:02:39+09:00;2026-05-07T01:08:08+09:00","default:member","member")
#author("2026-05-21T10:15:53+09:00;2026-05-07T01:08:08+09:00","default:member","member")
*Petal Note
日常で見つけた花をスタンプに
#image(temporary.jpg)
-''田尻有沙''
-'''Keywords:花, 花集め, スタンプ帳, デジタル'''
//-https://www.example.com
//-__[[相互評価シート>https://www.example.com]]__  ← ここからコメントをお願いします。

~

//***CONTENTS
//#contents2_1
//~


**概要
***これは何?
Petal(ペタル)=花弁
日常で出会った花を記録し、スタンプのように残していくWebサイト。
外でのちょっとした発見が、少しずつコレクションになっていきます。
~

***背景と目的
舞鶴公園での桜祭りに訪れたり、海の中道海浜公園でネモフィラを見た際に、ただ写真に収めるのではなく何か別の形で記録を残したいと考えたのがきっかけ。
つい最近シール帳がブームになったことで、それに近しいスタンプ帳らしきものをもっと身近な媒体(ーSNS)で出来たら気軽に利用しやすいと考えた。
日常の中で花に目を向けるきっかけを作り、見つけた花を楽しく記録・収集できる体験を提供することを目的とする。
~

***コンセプト
体験&視覚型Webサイト
~

***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Webサイト 作成中
~

***制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
HTML
CSS
JavaScript
Visual Studio Code
(GitHub)
Illustrator
~

***プロジェクトの期間
2024.04.09 - 2024.07.16
~

***まとめ
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
~
~


**調査

***現状調査
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
~

***先行事例
-ゲーム要素
--[[PLAY! Honda e|Honda公式サイト>https://www.honda.co.jp/play-hondae/]]
~

***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};

~
~

**プロジェクト管理

***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
~

***ToDo
-設計
--%%テーマの決定%%
--%%利用方法%%
--必要機能の洗い出し

-ツール選定
-- デザインツール決定
-- 開発ツール決定

-構造設計
--%%サイトマップの作成%%
--%%ワイヤーフレームの作成%%

-UI設計
--ボタン配置を考える
--画面ごとのレイアウト決定
--デザイン方向の決定(色・世界観)

-素材制作
--%%主な花選び%%
--%%花のイラストデッサン%%
--花のイラスト作成
--スタンプデザイン
--演出用素材
--音の作成??

-開発(試作)
--試作Webサイトの作成(動作確認)
--画像アップロード機能

-各ページ制作
--トップページの作成
--記録ページの作成
--スタンプ帳の作成
--マイページの作成

-強化
--アニメーションの追加
--GET演出
--初回レア演出




//***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};

~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~



**2026.05.14
***ワイヤーフレームの作成
#image(fi.gu.jpg)

~
~


**2026.05.07
***サイトマップ
見えにくいため、タップして拡大してください。
#image(map.JPG) 

~
~


**2026.04.30
***cssアニメーション案
-[[ページフリップエフェクト>https://youtu.be/XKAxklONV0U?si=ebROJeNESE_g4cxw]]
-[[光るボタン>https://youtu.be/DHdAXqScevo?si=zZutK3xh3RE-_i-L]]
-[[タブ切り替え>https://youtu.be/IInT90sEI60?si=dTVht3W7hn7pNP3p]]
-[[カレンダー機能>https://youtu.be/-OcVVgDLI3U?si=42VzZ0uY6UNgnP5S]]

~
~


**2026.04.23
***花選び
[[農林水産省>https://www.maff.go.jp/j/pr/aff/1702/spe1_01.html]]によると、外国原産の花も含め日本で生産されている花きは約4万品種にのぼり、さらに毎年2000〜3000の新品種が追加されている。

本研究の対象範囲は道端・公園・学校・街路樹周辺など、日常生活の中で自然に目にする花である。生産品種全体と比較すると少なくなるものの、それでも多様な種類が存在する。
今期では体験設計および実装の観点から、扱う花の種類を15〜20種に絞ることとした。
-春:サクラ / 梅 / たんぽぽ / シロツメクサ / オオイヌノフグリ / 藤 / ツツジ
-夏:紫陽花 / アサガオ / ヒマワリ / ムラサキカタバミ
-秋:コスモス / キンモクセイ
-通年・花壇:チューリップ / パンジー / バラ
-特別枠:ネモフィラ / 菜の花

~
~


**2026.04.16
***タイトル案
-花の栞
--出会った花を残していく小さな記録帳
-この花、あつめた
--見つけた花が増えていく記録帳
-&color(#f08080){Petal Note};
--&color(#f08080){日常で見つけた花をスタンプに};

~

***制作物
本当はアプリを作りたいが、技術無し
↪︎まずはWebサイトを作ってみる
うまく機能できそう、あるいはアプリのほうが実現可能と考えたら、後期の研究IIや卒業研究で作る

~

***利用例案
-メイン
1.外で花を見る
2.スマホで撮るor記録する
3.「チューリップを発見!」「たんぽぽをゲット!」などイラストと共に可愛い演出 &color(#f08080){→体験型};
4.スタンプ帳に追加
5.自分だけの花畑が少しずつ賑やかに &color(#f08080){→視覚型};

-その他機能
日記と軽く繋げる
--どこで見たか
--だれと見たか
--一言メモ(その日の気分や花の状態ー満開など)

初めて記録した花はレア演出??
名前がわからない花
↪︎仮登録機能(あとで調べる)

~
~


**2026.04.09
***テーマ案
-SNS時代におけるアイドルの在り方
-貝殻の形や色はなぜ美しいと感じるのか
-西新商店街の魅力再発見を目的としたWebサイト
-「一杯の価値」を高めるコミュニケーションデザイン
-「いいこと日記」をスタンプで表現する体験型Webサイト
-抱くという行為が生む安心感の可視化
-&color(#f08080){花が増えていくWebサイト};
-歌うと世界が変わるUI
-推しとの思い出を集めるWebサイト
-音楽体験が記憶に残る仕組みのデザイン

~

***参考事例
-花関連
--[[フレネットHIBIYA>https://www.frenet-hibiya.co.jp/flowers/]]
--[[ハナノナ 花認識サービス>https://flowers.stair.center/ja/]]
-いいなと思ったWebデザイン例
--[[violet(ビヲレ)>https://violetpatisserie2014.com/#top]]
--[[nebane>https://nebane.jp]]
--[[僕と私の株式会社>https://boku-to-watashi-and.com]]
~
~

~