田尻有沙/情報デザイン研究I をテンプレートにして作成

開始行:
*Petal Note 花を記録してイラストスタンプを集めるWebサイト #image(pe.jpg) -''田尻有沙'' -'''Keywords：花, 花集め, スタンプ帳, デジタル''' -https://a7lor.github.io/Petal_Note/ ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ Petal（ペタル）＝花弁 本システムは利用者が日常で出会った花を記録し、スタンプの... 写真そのものをスタンプ化するのではなく、記録した花の種類... ~ ***背景と目的 舞鶴公園での桜祭りに訪れたり、海の中道海浜公園でネモフィ... つい最近シール帳がブームになったことで、それに近しいスタ... 日常の中で花に目を向けるきっかけを作り、見つけた花を楽し... ~ ***コンセプト 体験&視覚型Webサイト ~ ***成果物の仕様 [[Webサイト>https://a7lor.github.io/Petal_Note/]] [[作品概要>https://ksumail-my.sharepoint.com/:b:/g/person... ~ ***制作ツール Visual Studio Code (GitHub) Figma（メインビジュアル） 生成AI Google Gemini ver.3.1 Flash-Lite（ロゴ・イラスト作... ~ ***プロジェクトの期間 2024.04.09 - 2024.07.16 ~ ***まとめ 1~2年次の間に学んだことを活かして、コンセプトの統一やアニ... 一方で、保存したメモを後から見返す機能を実施できなかった... 後期や卒業研究に持ち越し、利用方法や注意事項の充実、保存... また、現段階では同じ花を2回目以降に記録しても変化がないた... ~ ~ **調査 ***現状調査 日本には多くの種類の花が存在するが、本研究では日常で観察... ~ ***先行事例 -[[プランティー>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つの観点から、個人情報を収集せず、利用者の端末内だけ... ~ -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/]]：... ~ ~ **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?... -[[光るボタン>https://youtu.be/DHdAXqScevo?si=zZutK3xh3RE... -[[タブ切り替え>https://youtu.be/IInT90sEI60?si=dTVht3W7h... -[[カレンダー機能>https://youtu.be/-OcVVgDLI3U?si=42VzZ0u... ~ ~ **2026.04.23 ***花選び [[農林水産省>https://www.maff.go.jp/j/pr/aff/1702/spe1_01... 本研究の対象範囲は道端・公園・学校・街路樹周辺など、日常... 今期では体験設計および実装の観点から、扱う花の種類を12種... ~ ~ **2026.04.16 ***タイトル案 -花の栞 --出会った花を残していく小さな記録帳 -この花、あつめた --見つけた花が増えていく記録帳 -&color(#f08080){Petal Note}; --&color(#f08080){花を記録してイラストスタンプを集めるWeb... ~ ***制作物 本当はアプリを作りたいが、技術無し ↪︎まずはWebサイトを作ってみる うまく機能できそう、あるいはアプリのほうが実現可能と考え... ~ ***利用例案 -メイン 1.外で花を見る 2.スマホで撮るor記録する 3.「チューリップを発見！」「たんぽぽをゲット！」などイラ... 4.スタンプ帳に追加 5.自分だけの花畑が少しずつ賑やかに　&color(#f08080){→視覚... -その他機能 日記と軽く繋げる --どこで見たか --だれと見たか --一言メモ（その日の気分や花の状態ー満開など） 初めて記録した花はレア演出？？ 名前がわからない花 ↪︎仮登録機能（あとで調べる） ~ ~ **2026.04.09 ***テーマ案 -SNS時代におけるアイドルの在り方 -貝殻の形や色はなぜ美しいと感じるのか -西新商店街の魅力再発見を目的としたWebサイト -「一杯の価値」を高めるコミュニケーションデザイン -「いいこと日記」をスタンプで表現する体験型Webサイト -抱くという行為が生む安心感の可視化 -&color(#f08080){花が増えていくWebサイト}; -歌うと世界が変わるUI -推しとの思い出を集めるWebサイト -音楽体験が記憶に残る仕組みのデザイン ~ ***参考事例 -花関連 --[[フレネットHIBIYA>https://www.frenet-hibiya.co.jp/flow... --[[ハナノナ 花認識サービス>https://flowers.stair.center/... -いいなと思ったWebデザイン例 --[[violet(ビヲレ)>https://violetpatisserie2014.com/#top]] --[[nebane>https://nebane.jp]] --[[僕と私の株式会社>https://boku-to-watashi-and.com]] ~ ~ ~

終了行:
*Petal Note 花を記録してイラストスタンプを集めるWebサイト #image(pe.jpg) -''田尻有沙'' -'''Keywords：花, 花集め, スタンプ帳, デジタル''' -https://a7lor.github.io/Petal_Note/ ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ Petal（ペタル）＝花弁 本システムは利用者が日常で出会った花を記録し、スタンプの... 写真そのものをスタンプ化するのではなく、記録した花の種類... ~ ***背景と目的 舞鶴公園での桜祭りに訪れたり、海の中道海浜公園でネモフィ... つい最近シール帳がブームになったことで、それに近しいスタ... 日常の中で花に目を向けるきっかけを作り、見つけた花を楽し... ~ ***コンセプト 体験&視覚型Webサイト ~ ***成果物の仕様 [[Webサイト>https://a7lor.github.io/Petal_Note/]] [[作品概要>https://ksumail-my.sharepoint.com/:b:/g/person... ~ ***制作ツール Visual Studio Code (GitHub) Figma（メインビジュアル） 生成AI Google Gemini ver.3.1 Flash-Lite（ロゴ・イラスト作... ~ ***プロジェクトの期間 2024.04.09 - 2024.07.16 ~ ***まとめ 1~2年次の間に学んだことを活かして、コンセプトの統一やアニ... 一方で、保存したメモを後から見返す機能を実施できなかった... 後期や卒業研究に持ち越し、利用方法や注意事項の充実、保存... また、現段階では同じ花を2回目以降に記録しても変化がないた... ~ ~ **調査 ***現状調査 日本には多くの種類の花が存在するが、本研究では日常で観察... ~ ***先行事例 -[[プランティー>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つの観点から、個人情報を収集せず、利用者の端末内だけ... ~ -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/]]：... ~ ~ **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?... -[[光るボタン>https://youtu.be/DHdAXqScevo?si=zZutK3xh3RE... -[[タブ切り替え>https://youtu.be/IInT90sEI60?si=dTVht3W7h... -[[カレンダー機能>https://youtu.be/-OcVVgDLI3U?si=42VzZ0u... ~ ~ **2026.04.23 ***花選び [[農林水産省>https://www.maff.go.jp/j/pr/aff/1702/spe1_01... 本研究の対象範囲は道端・公園・学校・街路樹周辺など、日常... 今期では体験設計および実装の観点から、扱う花の種類を12種... ~ ~ **2026.04.16 ***タイトル案 -花の栞 --出会った花を残していく小さな記録帳 -この花、あつめた --見つけた花が増えていく記録帳 -&color(#f08080){Petal Note}; --&color(#f08080){花を記録してイラストスタンプを集めるWeb... ~ ***制作物 本当はアプリを作りたいが、技術無し ↪︎まずはWebサイトを作ってみる うまく機能できそう、あるいはアプリのほうが実現可能と考え... ~ ***利用例案 -メイン 1.外で花を見る 2.スマホで撮るor記録する 3.「チューリップを発見！」「たんぽぽをゲット！」などイラ... 4.スタンプ帳に追加 5.自分だけの花畑が少しずつ賑やかに　&color(#f08080){→視覚... -その他機能 日記と軽く繋げる --どこで見たか --だれと見たか --一言メモ（その日の気分や花の状態ー満開など） 初めて記録した花はレア演出？？ 名前がわからない花 ↪︎仮登録機能（あとで調べる） ~ ~ **2026.04.09 ***テーマ案 -SNS時代におけるアイドルの在り方 -貝殻の形や色はなぜ美しいと感じるのか -西新商店街の魅力再発見を目的としたWebサイト -「一杯の価値」を高めるコミュニケーションデザイン -「いいこと日記」をスタンプで表現する体験型Webサイト -抱くという行為が生む安心感の可視化 -&color(#f08080){花が増えていくWebサイト}; -歌うと世界が変わるUI -推しとの思い出を集めるWebサイト -音楽体験が記憶に残る仕組みのデザイン ~ ***参考事例 -花関連 --[[フレネットHIBIYA>https://www.frenet-hibiya.co.jp/flow... --[[ハナノナ 花認識サービス>https://flowers.stair.center/... -いいなと思ったWebデザイン例 --[[violet(ビヲレ)>https://violetpatisserie2014.com/#top]] --[[nebane>https://nebane.jp]] --[[僕と私の株式会社>https://boku-to-watashi-and.com]] ~ ~ ~

ページ名: