Petal Note
日常で見つけた花をスタンプに
概要
これは何？
Petal（ペタル）＝花弁
本システムは利用者が日常で出会った花を記録し、スタンプのように残していくWebサイト。
写真そのものをスタンプ化するのではなく、記録した花の種類に対応したイラストデータをデジタルスタンプとしてスタンプ帳へ追加する仕組みです。
背景と目的
舞鶴公園での桜祭りに訪れたり、海の中道海浜公園でネモフィラを見た際に、ただ写真に収めるのではなく何か別の形で記録を残したいと考えたのがきっかけ。
つい最近シール帳がブームになったことで、それに近しいスタンプ帳らしきものをもっと身近な媒体（ーSNS）で出来たら気軽に利用しやすいと考えた。
日常の中で花に目を向けるきっかけを作り、見つけた花を楽しく記録・収集できる体験を提供することを目的とする。
コンセプト
体験&視覚型Webサイト
成果物の仕様
Webサイト
制作ツール
Visual Studio Code
(GitHub)
Illustrator
生成AI Gemini（イラスト作成）
プロジェクトの期間
2024.04.09 - 2024.07.02
まとめ
調査
現状調査
日本には多くの種類の花が存在するが、本研究では日常で観察できる花に対象を限定する。制作や設計の負担を考慮し、季節性や発見しやすさから代表的な15〜20種類の花を選定する。
先行事例
技法・技術情報
- const image = document.getElementById("flowerImage");
画像を表示するimg要素を取得し、選択した画像を表示している。
- const title = document.getElementById("flowerTitle");
名前を表示する要素を取得し、「〇〇をゲット！」というメッセージを表示している。
プロジェクト管理
スケジュール
ToDo
- UI設計
ボタン配置を考える画面ごとのレイアウト決定デザイン方向の決定（色・世界観）
- 開発（試作）
試作Webサイトの作成（動作確認）画像アップロード機能
- 各ページ制作
トップページの作成記録ページの作成スタンプ帳の作成- マイページの作成
進捗記録
2026.07.02
必要機能の洗い出し データ一時保存機能
ログイン機能を実装する場合
- ユーザーの個人情報であるメールアドレスやパスワードを管理するため情報漏洩などのセキュリティ対策が必要になる
- GitHub上で公開する際にも、個人情報を扱うシステムの管理や安全性の確保が難しくなる
以上2つの観点から、個人情報を収集せず、利用者の端末内だけで花の記録を管理できるlocalStorageを使用した。
- JavaScriptの`localStorage`を使用
ユーザーが選択した花の情報を一時的に保存
- `localStorage.setItem()`を使用
記録画面で選択した花の名前をブラウザ内に一時保存し、次の画面へ受け渡している。
- `localStorage.getItem()`を使用して保存されたデータを取得することで、選択した花に応じたイラストと「〇〇をゲット！」というメッセージを表示できるようにした。
- 取得した花の情報は`JSON.stringify()`で配列として保存し、スタンプ帳で取得済みの花を表示するために利用している。
2026.06.25
作品概要の作成2
2026.06.18
作品概要の作成1
2026.06.11
css・javasprictによるWebサイト全体に色をつける
2026.06.04
主要なhtmlメニューの作成とcssによるイラストの動きをつける
index
record
date
stamp
mypage
2026.05.21
生成AIによる花のイラスト作成
生成AIで作ることにより、一定の統一感を持ったビジュアルを表現。
2026.05.14
ワイヤーフレームの作成
2026.05.07
サイトマップ
見えにくいため、タップして拡大してください。
2026.04.30
cssアニメーション案
2026.04.23
花選び
農林水産省によると、外国原産の花も含め日本で生産されている花きは約4万品種にのぼり、さらに毎年2000〜3000の新品種が追加されている。
本研究の対象範囲は道端・公園・学校・街路樹周辺など、日常生活の中で自然に目にする花である。生産品種全体と比較すると少なくなるものの、それでも多様な種類が存在する。
今期では体験設計および実装の観点から、扱う花の種類を15〜20種に絞ることとした。
- 春：サクラ / 梅 / たんぽぽ / シロツメクサ / オオイヌノフグリ / 藤 / ツツジ
- 夏：紫陽花 / アサガオ / ヒマワリ / ムラサキカタバミ
- 秋：コスモス / キンモクセイ
- 通年・花壇：チューリップ / パンジー / バラ
- 特別枠：ネモフィラ / 菜の花
2026.04.16
タイトル案
制作物
本当はアプリを作りたいが、技術無し
↪︎まずはWebサイトを作ってみる
うまく機能できそう、あるいはアプリのほうが実現可能と考えたら、後期の研究IIや卒業研究で作る
利用例案
- メイン
1.外で花を見る
2.スマホで撮るor記録する
3.「チューリップを発見！」「たんぽぽをゲット！」などイラストと共に可愛い演出 →体験型
4.スタンプ帳に追加
5.自分だけの花畑が少しずつ賑やかに →視覚型
- その他機能
日記と軽く繋げる
- どこで見たか
- だれと見たか
- 一言メモ（その日の気分や花の状態ー満開など）
初めて記録した花はレア演出？？
名前がわからない花
↪︎仮登録機能（あとで調べる）
2026.04.09
テーマ案
- SNS時代におけるアイドルの在り方
- 貝殻の形や色はなぜ美しいと感じるのか
- 西新商店街の魅力再発見を目的としたWebサイト
- 「一杯の価値」を高めるコミュニケーションデザイン
- 「いいこと日記」をスタンプで表現する体験型Webサイト
- 抱くという行為が生む安心感の可視化
- 花が増えていくWebサイト
- 歌うと世界が変わるUI
- 推しとの思い出を集めるWebサイト
- 音楽体験が記憶に残る仕組みのデザイン
参考事例
