• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 菊池真桜/情報デザイン演習IIA2 へ行く。
  • 1 (2025-05-26 (月) 17:47:15)
  • 2 (2025-06-02 (月) 16:37:05)
  • 3 (2025-06-09 (月) 16:07:37)
  • 4 (2025-06-09 (月) 16:59:21)
  • 5 (2025-06-16 (月) 13:44:40)
  • 6 (2025-06-23 (月) 08:31:59)
  • 7 (2025-06-23 (月) 10:10:46)
  • 8 (2025-06-30 (月) 15:49:06)

---

＆Lyric

タイポグラフィで紹介する刺さる歌詞 サイト

• Mao Kikuchi
• Keywords：歌詞, タイポグラフィ, Webサイト,
• 相互評価シート ← ご協力ありがとうございました
  
  

概要

これは何？

心に響くと感じる曲の歌詞をタイポグラフィで表現し紹介するWebサイト

背景と目的

最近の人気曲はショート動画で使用される回数に比例していることがほとんど。
その影響で人が聞き入るような"曲調"が重視されがちな気がします。
(もちろん歌詞も曲調も素晴らしい音楽はたくさんあるけど！)


だけど、曲の魅力はその先にある歌詞や世界観にあることも少なくないです。
明るいポップな曲調でも実は深いメッセージ性が込められていたり、
元気の出るメロディーの中に、誰かの痛みが隠れている歌詞だったり、


このサイトは曲の"歌詞"に注目して、歌詞から曲と出会える場所をコンセプトに
歌詞を「音」だけでなく「目」で感じる形でさらに曲の良さを伝えられるものにしたいと考えています。

制作ツール

• Visual Studio Code
  
  

成果物の仕様

• Webサイト
  
  

---

---

2025.06.30

2025.06.23

見出された問題点

• 歌詞の解釈
• メニューバーにHOMEを追加させるべき
  
  

好評を得た点 ＞ プロジェクトの特性として

• 横画面のスライド形式
  
  
  
  

2025.06.16

今回制作したプロトタイプ

プロトタイプの説明

• サイトマップ
  
• ワイヤーフレーム(Figma)
  ↑Click
  
  
  
  

2025.06.09

現状分析

テーマ内容

• 刺さる歌詞とは
  • JPOPの歌詞はなぜ若者の共感を生むのか
  • "歌詞が良い"の種類
• 音楽紹介記事
  • 10リスト連載一覧
  • 10リスト(RADWIMPSの名歌詞10)
  • 心が元気になる曲
  • 歌詞50選
    
    

表現形式

• 画面が横に移動する表現
  • 石の美術館
  • MAISONCACAO
    
    

課題定義

• 1.公開方法
• 2.成果物のネーミング
• 3.成果物の形式（分量とサイズ）
• 4.成果物の構成
• 5.素材（イラスト・写真・記事等）の入手方法・生成方法
• 6.著作権について
  
  

制作上のアイデア（課題ごとに複数のアイデア）

• 1. 公開方法
  • 限定公開サイト
  • htmlにベーシック認証(パスワード)をかける

• 2. 成果物のネーミング

• 3. 成果物の形式（分量とサイズ）
  • Webサイト(HTML,CSS,JavaScript)

• 4.成果物の構成

• 5.素材（イラスト・写真・記事等）の入手方法・生成方法
  • タイポグラフィ(Adobe Illustrator , Clips studio paint)
  • バックグラウンド素材(写真orパターンイラスト)

• 6.著作権について
  • ウェブサイトでの掲載:
    歌詞のワンフレーズ程度であれば、引用ルールにのっとって正当な範囲内で掲載可能

2025.06.02

テーマ候補

• 色の組み合わせを見つけるサイト
• タイポグラフィ× 美しい日本語
• タイポグラフィ× 歌詞
• 猫が寄ってきてくれるアイテム集
  
  

成果物の仕様

• 形式：Webサイト
  
  

この演習を通して身につけたいスキル

• HTML,CSS,JavaScript
• Adobe Illustrator
• アイデアの幅を広げる