#author("2026-07-16T11:39:41+09:00;2026-07-16T01:41:33+09:00","default:member","member") #author("2026-07-16T12:10:34+09:00;2026-07-16T01:41:33+09:00","default:member","member") *Petal Note 花を記録してイラストスタンプを集めるWebサイト #image(pe.jpg) -''田尻有沙'' -'''Keywords：花, 花集め, スタンプ帳, デジタル''' -https://a7lor.github.io/Petal_Note/ ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ Petal（ペタル）＝花弁 本システムは利用者が日常で出会った花を記録し、スタンプのように残していくWebサイト。 写真そのものをスタンプ化するのではなく、記録した花の種類に対応したイラストデータをデジタルスタンプとしてスタンプ帳へ追加する仕組みです。 ~ ***背景と目的 舞鶴公園での桜祭りに訪れたり、海の中道海浜公園でネモフィラを見た際に、ただ写真に収めるのではなく何か別の形で記録を残したいと考えたのがきっかけ。 つい最近シール帳がブームになったことで、それに近しいスタンプ帳らしきものをもっと身近な媒体（ーSNS）で出来たら気軽に利用しやすいと考えた。 日常の中で花に目を向けるきっかけを作り、見つけた花を楽しく収集できる体験を提供することを目的とする。 ~ ***コンセプト 体験&視覚型Webサイト ~ ***成果物の仕様 [[Webサイト>https://a7lor.github.io/Petal_Note/]] [[作品概要>https://ksumail-my.sharepoint.com/:b:/g/personal/k24as016_st_kyusan-u_ac_jp/IQAcoVVVCE_WSKIax-TvsjfRAbW0ddjW6P12inm88m5fp3M?e=Xqg0U1]] ~ ***制作ツール Visual Studio Code (GitHub) 生成AI Gemini（イラスト作成） Figma（メインビジュアル） 生成AI Google Gemini ver.3.1 Flash-Lite（ロゴ・イラスト作成） ~ ***プロジェクトの期間 2024.04.09 - 2024.07.16 ~ ***まとめ 1~2年次の間に学んだことを活かして、コンセプトの統一やアニメーションによって柔らかな印象を持たせたWebサイトを作成することができた。 一方で、保存したメモを後から見返す機能を実施できなかったことや、ビジュアルを重視したWebサイトとしたため、利用時の注意事項を十分に記載することができなかった。 後期や卒業研究に持ち越し、利用方法や注意事項の充実、保存できる花の種類の増加、図鑑機能の作成、アプリ化などを進め、より利用しやすく利便性の高いシステムの実現を目指していきたい。 また、現段階では同じ花を2回目以降に記録しても変化がないため、繰り返し利用する動機につながりにくいという課題がある。今後は、同じ花を複数回記録することで新たな要素が追加されるなど、何度も利用したいと思えるような、より魅力的な機能を実装していきたい。 ~ ~ **調査 ***現状調査 日本には多くの種類の花が存在するが、本研究では日常で観察できる花に対象を限定する。制作や設計の負担を考慮し、季節の花や発見のしやすさから代表的な12種類の花を選別した。 ~ ***先行事例 -[[プランティー>https://www.unbalance.co.jp/w/planty/]] ~ ***技法・技術情報 -const image = document.getElementById("flowerImage"); 画像を表示するimg要素により選択した画像を表示している。 -const title = document.getElementById("flowerTitle"); 名前を表示する要素により「〇〇をゲット！」というメッセージを表示している。 ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; ~ ***ToDo -設計 --%%テーマの決定%% --%%利用方法%% --%%必要機能の洗い出し%% -ツール選定 -- %%デザインツール決定%% -- %%開発ツール決定%% -構造設計 --%%サイトマップの作成%% --%%ワイヤーフレームの作成%% -UI設計 --%%ボタン配置を考える%% --%%画面ごとのレイアウト決定%% --%%デザイン方向の決定（色・世界観）%% -素材制作 --%%主な花選び%% --%%スタンプデザイン%% -開発（試作） --%%試作Webサイトの作成（動作確認）%% --%%画像アップロード機能%% -各ページ制作 --%%トップページの作成%% --%%記録ページの作成%% --%%スタンプ帳の作成%% ~ ~ #hr CENTER:''進捗記録'' #hr ~ **2026.07.16 ***発表・ブラッシュアップ ~ **2026.07.09 ***利用イメージ |#image(IMG1.PNG)|#image(IMG2.png)| |#image(IMG3.jpg)|#image(IMG4.PNG)| |#image(IMG5.png)|#image(IMG6.png)| ~ ***レイアウトの変更 -メニューバーの位置変更（中央上→左上） ~ ~ **2026.07.02 ***データ一時保存機能 ログイン機能を実装する場合 -ユーザーの個人情報であるメールアドレスやパスワードを管理するため情報漏洩などのセキュリティ対策が必要になる -GitHub上で公開する際にも、個人情報を扱うシステムの管理や安全性の確保が難しくなる 以上2つの観点から、個人情報を収集せず、利用者の端末内だけで花の記録を管理できるlocalStorageを使用した。 ~ -JavaScriptの`localStorage`を使用 ユーザーが選択した花の情報を一時的に保存 -`localStorageのsetItem()`を使用 記録画面で選択した花の名前をブラウザ内に一時保存し、次の画面へ受け渡している。 -`localStorageのgetItem()`を使用して保存されたデータを取得することで、選択した花に応じたイラストと「〇〇をゲット！」というメッセージを表示できるようにした。 -取得した花の情報は`JSON.stringify()`で配列として保存し、スタンプ帳で取得済みの花を表示するために利用している。 ~ ~ **2026.06.25 ***作品概要の作成2 制作・まとめ・参考文献や資料 ~ ***サイトマップの作り直し・必要機能の洗い出し -ログイン機能の廃止 -My Pageの削除 ~ ~ **2026.06.18 ***作品概要の作成1 はじめに・目的と背景・現場調査と先行事例 [[プランティー>https://www.unbalance.co.jp/w/planty/]]：撮影した花をAIが解説および判別を行い、撮影した花を図鑑に登録され、自分だけの図鑑を作るスマホアプリ。 ~ ~ **2026.06.11 ***css・javasprictによるWebサイト全体に色をつける -背景：#f7f4ee -テキスト：#7d6958 #444 #af8c8e ~ ~ **2026.06.04 ***主要なhtmlメニューの作成とcssによるイラストの動きをつける index：（ホーム画面） record：（選択ページ） date：（記録ページ） stamp：（スタンプ帳） ~ ~ **2026.05.21 ***生成AIによる花のイラスト作成 生成AIで作ることにより、一定の統一感を持ったビジュアルを表現。 ~ ~ **2026.05.14 ***ワイヤーフレームの作成 #image(fi.gu.jpg) ~ ~ **2026.05.07 ***サイトマップ 見えにくいため、タップして拡大してください。 #image(w_.png) ~ ~ **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の新品種が追加されている。 本研究の対象範囲は道端・公園・学校・街路樹周辺など、日常生活の中で自然に目にする花である。生産品種全体と比較すると少なくなるものの、それでも多様な種類が存在する。 今期では体験設計および実装の観点から、扱う花の種類を12種に絞ることとした。 ~ ~ **2026.04.16 ***タイトル案 -花の栞 --出会った花を残していく小さな記録帳 -この花、あつめた --見つけた花が増えていく記録帳 -&color(#f08080){Petal Note}; --&color(#f08080){花を記録してイラストスタンプを集めるWebサイト}; ~ ***制作物 本当はアプリを作りたいが、技術無し ↪︎まずは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]] ~ ~ ~