浦朱里/卒業研究

一字の扉

日本ならではの言葉を体験的に学ぶWEBサイト

• 浦朱里
• Keywords：Four-character idioms, kanji, Japanese language, illustrations
• https://west0423.github.io/Graduation-research_2026/　（制作途中）

概要

これは何？

「四字熟語」「ことわざ」「大和言葉」「オノマトペ」といった日本ならではの言葉を、一字から連想される「モーション」と「音」で直感的に知ることができる体験型WEBサイト。
辞書のように言葉を「調べる」のではなく、画面の中の言葉に触れることで、その言葉が持つ意味や質感を学ぶことができる。

背景と目的

日本語には、自然の移ろいや繊細な感情を表現する独自の言葉が数多く存在する。しかし、効率重視の現代において、それらの美しい言葉に触れる機会は減りつつある。
本制作では、言葉に興味がない人に対しても「知識」としてではなく、視覚的アプローチ（モーション）と聴覚的アプローチ（効果音）を掛け合わせることで、「感覚的に楽しむ」環境を提供し記憶に残すことを目的としてる。

コンセプト

勉強や暗記を目的とせず言葉を遊び感覚で学べるWebサイト

成果物の仕様

Webサイト（パソコン）

• https://west0423.github.io/Graduation-research_2026/
  
  

制作ツール

HTML,CSS,Illustrator,codepen

プロジェクトの期間

2026.04.10 - 2026.12.

まとめ

調査

現状調査

SNSの普及により、短文でのやり取りやスタンプ、流行語によるコミュニケーションが主流となった。総務省の調査（2024）によると、SNSの利用時間は全世代で増加傾向にあり、情報の「速さ」が重視される一方で、感情の機微を表現する繊細な言葉や、日本独自の情緒的な語彙（大和言葉やオノマトペなど）に触れる機会が減少している。
文化庁：令和5年度「国語に関する世論調査」

先行事例

https://patatap.com
見て楽しむ-ことば図鑑-みっけ Amazonリンク

技法・技術情報

プロジェクト管理

スケジュール

ガントチャートリンク

ToDo

• 概要記入
  -メインビジュアル設定
  
  
  
  
• 動き決め
• イラスト作成(５つ)
  • 花
  • 星
  • 海
  • 火
  • 雨

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でキラキラ輝く星空エフェクトを実装する方法
      bgm参考サイト catnose
      
      
      
      

2026.07.17

• 効果音参考サイト

• WebサイトにBGMや効果音をつける方法｜HTML Audio APIの基本と実装テクニック

• 効果音ラボ

• 参考コード調べ
  メニューによって写真が変わる
  スクロールで色が変わっていく
  ナビメニューをクリックすると、5つのカテゴリーがサークル状に表示される
  下方向への矢印アニメーション
  キーワードや単語を、カラフルな泡状バブルで表現する
  カーソルの動きに合わせて向きが変わる
  液状ボタン
  茂みの影から画像がズームする
  マウスを動かす速度によって丸みが立体的に変化する
  インクが水に溶けたようなエフェクト
  動く星座
  カードを反転＋背景が変わる
  パララックスアニメーション
  スクロールに応じて背景色が変わる

2026.07.10

• プレゼン準備
• トップページ制作
  （メニュー設置）
• 雨個別ページ制作
  （イラスト変更、HTML ,CSS）

2026.07.03

• トップページ制作
  （配置、サイトについて記入）
  
  

2026.06.26

• 概要集制作続き
  
  

2026.06.19

• 概要集制作
• 海ページ　背景イラスト制作
  
  
  

2026.06.12

• 雨ページ　背景イラスト制作
  
  
  

202606.05

• サイト構成内容変更
  • 文字メインからイラスト追加
  • トップページの言葉の起源ワイヤーフレーム変更
  • 英語対応追加
    
    

202605.29

webサイトテスト

202605.22

ワイヤーフレーム作り直し

202605.15

サイトマップ作り直し

202605.08

サイト制作

• (仮)イラスト制作
• 中間発表準備
  
  

202605.01

サイト制作

• https://west0423.github.io/Graduation-research_2026/

ワイヤーフレーム制作

202604.24

サイトマップ制作

イメージ

• Pintrest
  
  

漢字・言葉 候補

メモ

• グラフィック(漢字イメージ)×音
• 日本らしさorスタンダード

202604.17

テーマ案

• 日本語
  • 四字熟語
  • ことわざ
  • 大和言葉
  • オノマトペ
    
    
    

参考サイト

• 午年ことわざかるた
• 四字熟語
  
  

参考画像

202604.10

テーマ案だし

• 土日中心スケジュール帳
• 視覚で変化させるWebサイト
  • 不快な音、味、匂い