#author("2026-10-20T16:04:08+09:00;2026-10-09T14:09:43+09:00","default:member","member") #author("2026-10-21T08:35:20+09:00;2026-10-09T14:09:43+09:00","default:member","member") *一字の扉 日本ならではの言葉を体験的に学ぶWEBサイト #image(main visual.png) -''浦朱里'' -'''Keywords：Four-character idioms, kanji, Japanese language, illustrations''' -https://west0423.github.io/Graduation-research_2026/ （制作途中） //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ 「四字熟語」「ことわざ」「大和言葉」「オノマトペ」といった日本ならではの言葉を、一字から連想される「モーション」と「音」で直感的に知ることができる体験型WEBサイト。 辞書のように言葉を「調べる」のではなく、画面の中の言葉に触れることで、その言葉が持つ意味や質感を学ぶことができる。 ~ ***背景と目的 日本語には、自然の移ろいや繊細な感情を表現する独自の言葉が数多く存在する。しかし、効率重視の現代において、それらの美しい言葉に触れる機会は減りつつある。 本制作では、言葉に興味がない人に対しても「知識」としてではなく、視覚的アプローチ（モーション）と聴覚的アプローチ（効果音）を掛け合わせることで、「感覚的に楽しむ」環境を提供し記憶に残すことを目的としてる。 ~ ***コンセプト //大和言葉、ことわざ、四字熟語、オノマトペを紹介するWebサイト 勉強や暗記を目的とせず言葉を遊び感覚で学べるWebサイト ~ ***成果物の仕様 Webサイト（パソコン） -https://west0423.github.io/Graduation-research_2026/ //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ ***制作ツール HTML,CSS,Illustrator,[[codepen>https://codepen.io/trending]] ~ ***プロジェクトの期間 2026.04.10 - 2026.12. ~ ***まとめ //前期では言葉の選別、サイト構成、またイラスト作成や試作サイト作成を行なった。初めは言葉のモーションと音のみの表現技法であったが、様々な人に対して言葉に興味を持ってもらうという目的のために、モーションと音に加えイラストを追加した。これにより、より多くの人に対して言葉に興味を持ってもらう仕組み作りができたと考える。後期ではより多くの人に日本ならではの言葉を知ってもらう目的のために、個別ページの作成に続き、言葉の細かな表現を追求し、また英語対応の機能も追加してく。 ~ ~ **調査 ***現状調査 SNSの普及により、短文でのやり取りやスタンプ、流行語によるコミュニケーションが主流となった。[[総務省の調査（2024）>https://www.soumu.go.jp/johotsusintokei/whitepaper/index.html]]によると、SNSの利用時間は全世代で増加傾向にあり、情報の「速さ」が重視される一方で、感情の機微を表現する繊細な言葉や、日本独自の情緒的な語彙（大和言葉やオノマトペなど）に触れる機会が減少している。 [[文化庁：令和5年度「国語に関する世論調査」>https://www.bunka.go.jp/tokei_hakusho_shuppan/tokeichosa/kokugo_yoronchosa/pdf/94116401_01.pdf]] ~ ***先行事例 https://patatap.com [[見て楽しむ-ことば図鑑-みっけ Amazonリンク>https://www.amazon.co.jp/stores/みっけ/author/B0DB1M81VN?ref=ap_rdr&shoppingPortalEnabled=true]] //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; ~ ~ **プロジェクト管理 ***スケジュール [[ガントチャートリンク>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as010_st_kyusan-u_ac_jp/IQCrXrvi-X0VTrpriJwPGCujAb5hQ3jOD4JDsAfEKZnbUYU?e=Wk3GNt]] ~ ***ToDo -概要記入 %%-メインビジュアル設定%% ~ //-%%ガントチャート制作%% //-%%漢字案だし (5~10個)（4/28）%% //-%%サイトマップ作り直し%% ~ //-%%ワイヤーフレーム作り直し%% -動き決め -イラスト作成(５つ) --花 --星 --海 --火 --%%雨%% ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2026.10.09 -一字の変更 火を削除、山を追加 -コード編集 --星ページ作成 ---参考コードサイト [[【CSS入門】テキストを縦書きにする方法やレイアウトの指定方法 >https://www.sejuku.net/blog/76881#index_id1]] [[Yahoo!知恵袋文字をランダムに表示する方法>https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12183688332]] ~ ~ **2026.10.02 -コード編集 ---参考コードサイト スクロールで夜から朝に変わる！背景アニメーション演出の実装方法 https://satokotadesign.com/blog/scroll-from-night-to-morning/ --海ページ作成 ~ ~ **2026.09.25 -イラスト制作 --海背景 -コード編集 --海ページ作成 ---参考コードサイト イメージ https://codepen.io/shunyadezain/pen/rNxzvgp position: stickyの設置方法 https://goat-inc.co.jp/blog/3779/ 背景グラデーション https://kmnmc.com/2025/02/18/11772/#toc2 スクロールbgm https://note.com/howmanydesigns/n/n583a626b5797 背景画像拡大縮小 https://www.nishishi.com/css/background-size-css3.html#background-size-css30 --星ページ作成 ---参考コードサイト https://codepen.io/lhwda1388/pen/bwbEVR ~ ~ **2026.09.18 -コード編集 --個別ページの設置 --星ページ背景とbgmの設置 ---参考 [[背景参考サイト JSとCSSでキラキラ輝く星空エフェクトを実装する方法>https://web-dev.tech/front-end/javascript/twinkle-stars-effect/#index_id0]] [[bgm参考サイト catnose>https://catnose.me/learning/html/audio/#google_vignette]] ~ ~ **2026.07.17 -効果音参考サイト --[[WebサイトにBGMや効果音をつける方法｜HTML Audio APIの基本と実装テクニック>https://satokotadesign.com/blog/html_audio_api/?amp=1]] --[[効果音ラボ>https://soundeffect-lab.info/]] -参考コード調べ [[メニューによって写真が変わる>https://codepen.io/ettrics/pen/zxexgQ]] [[スクロールで色が変わっていく>https://kmnmc.com/2024/08/07/11460/#toc2]] [[ナビメニューをクリックすると、5つのカテゴリーがサークル状に表示される>https://codepen.io/wbarahona/pen/vLoyOb]] [[下方向への矢印アニメーション>https://codepen.io/MishaHahaha/pen/bpaJaZ]] [[キーワードや単語を、カラフルな泡状バブルで表現する>https://codepen.io/Gthibaud/pen/pyeNKj]] [[カーソルの動きに合わせて向きが変わる>https://codepen.io/supah/pen/dGLLPK]] [[液状ボタン>https://codepen.io/waaark/pen/VbgwEM/]] [[茂みの影から画像がズームする>https://codepen.io/p0waqqatsi/pen/OJYVgMK]] [[マウスを動かす速度によって丸みが立体的に変化する>https://codepen.io/gusevdigital/pen/MWxyXRa ]] [[インクが水に溶けたようなエフェクト>https://codepen.io/ksenia-k/pen/MWMObrY]] [[動く星座>https://codepen.io/JulianLaval/pen/KpLXOO/]] [[カードを反転＋背景が変わる>https://kmnmc.com/2025/11/04/12469/]] [[パララックスアニメーション>https://kmnmc.com/2025/03/31/11918/]] [[スクロールに応じて背景色が変わる>https://kmnmc.com/2025/02/18/11772/]]~ ~ ~ **2026.07.10 -プレゼン準備 -トップページ制作 （メニュー設置） -雨個別ページ制作 （イラスト変更、HTML ,CSS） ~ ~ **2026.07.03 -トップページ制作 （配置、サイトについて記入） ~ ~ **2026.06.26 -概要集制作続き ~ ~ **2026.06.19 -概要集制作 -海ページ 背景イラスト制作 #image(海背景.jpg) ~ ~ **2026.06.12 -雨ページ 背景イラスト制作 #image(雨背景.jpg) ~ ~ **202606.05 -サイト構成内容変更 --文字メインからイラスト追加 --トップページの言葉の起源ワイヤーフレーム変更 --英語対応追加 ~ ~ **202605.29 webサイトテスト #image(progress record01.jpg) ~ ~ **202605.22 ***ワイヤーフレーム作り直し #image(wire frame01.png) ~ **202605.15 サイトマップ作り直し #image(sitemap02.jpg) ~ ~ **202605.08 ***サイト制作 -(仮)イラスト制作 -中間発表準備 ~ ~ **202605.01 ***サイト制作 -https://west0423.github.io/Graduation-research_2026/ ***ワイヤーフレーム制作 #image(wire frame.jpg) ~ ~ **202604.24 ***サイトマップ制作 #image(FigJam.jpg) ~ ***イメージ -[[Pintrest>https://pin.it/1BNFgvN0x]] ~ ***漢字・言葉 候補 #image(kanji.jpg) ~ ***メモ -グラフィック(漢字イメージ)×音 -日本らしさorスタンダード ~ ~ **202604.17 ***テーマ案 -日本語 --四字熟語 --ことわざ --大和言葉 --オノマトペ #image(image01.jpg) ~ ***参考サイト -[[午年ことわざかるた>https://lab.gigno.co.jp]] -[[四字熟語>https://yoji-jukugo.com/?s=星]] ~ ***参考画像 #image(image02.jpg) ~ ~ **202604.10 ***テーマ案だし -土日中心スケジュール帳 -- -視覚で変化させるWebサイト --不快な音、味、匂い - -- - ~ ~ ~ ~