LogoMark.png

金ヶ江光千瑠/情報デザイン演習IIA2 の変更点


#author("2025-07-23T12:09:58+09:00","default:member","member")
#author("2025-07-23T15:14:56+09:00","default:member","member")
*Alt '90s
90年代の音楽シーンまとめWebサイト 

#image(alt90.jpg)
-''金ヶ江光千瑠''
-'''Keywords:音楽, 90年代, , ・・・'''
-'''Keywords:音楽, 90年代, , Webサイト'''
-[[完成サイト>https://rurulia21.github.io/Alt-90s/]]
-%%[[相互評価シート>https://docs.google.com/spreadsheets/d/1GlY0vcTF9tYJPTOgSo6Xt1LrAQPTW1_OP-URzFOCYFM/edit?usp=sharing]]%%  ← ご協力ありがとうございました。

~

//***CONTENTS
//#contents2_1
//~


**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
90年代の音楽シーンをジャンルごとにまとめたWebサイト
~

***背景と目的
//&color(red){プロジェクトの背景と目的};
90年代には多様な音楽のサブジャンルが誕生、台頭し、それらが現代音楽にも多大な影響を与えている。そのため、そのルーツとされる音楽をジャンルごとに文化的背景なども踏まえ深く掘り下げたいと考えた。
 また、これらをまとめたサイトを作成しようと思った理由は二つある。ひとつは、現代音楽を愛す人たちにそのルーツを知ってもらいたいということ、もうひとつは音楽をあまり聴かないという人にとっても90年代という多彩な音楽が生まれた時代を通して、自分が好きな音楽に出会って欲しいという思いからだ。

~

***制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
Visual Studio Code(HTML,CSS,JavaScript),GitHub,Adobe Illustrator,Grok
~

***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Webサイト
~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**2025.07.07
***作業の記録
-目次、サイズなどのサブボタン導入
-Youtubeの動画の埋め込み
-Spotifyのプレビュー追加
~
***MEMO
-動画の埋め込み制限
-テキスト量
-
~
~

**2025.06.30
***Webサイト作成
-githubで作成
~
***プロトタイプの改正
-ページの見出しタイトルはメインジャンルだけ載せる
-サブページはつくらず1ページにまとめる方針に変更
-別に「about」のページを作り、そこに関連する曲やミュージャンを載せる
~
~

**2025.06.23
***プロトタイプのテスト
~
***問題点とアドバイス ※要検討
-見出しがジャンル名だとぱっと見わからない
-種類が多いため別ページに分けず一つのページにまとめたほうがいいかも
-紹介した曲に関連する曲を載せて欲しい

***好評を得た点 > プロジェクトの特性として
-ジャンルごとに分けられているのがいい
~

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

-サイトマップ
#image(20250616_sitemap.png )
~

//***プロトタイプの説明
//-◯◯◯◯◯◯◯、◯◯◯◯◯◯
//-◯◯◯◯◯、◯◯◯◯◯◯
~
~

**2025.06.09

***現状分析
-[[90年代の派生ジャンル>https://note.com/junjunjunpiano/n/n4749dbf2f5c1]]
-時代背景
~
 
***課題定義
-1. Webサイトのレイアウトを考える
-2. どんな音楽なのかが伝わらない
~

***制作上のアイデア(課題ごとに複数のアイデア)
-1. ジャンルごとに分ける
--サブページをつくる
--各項目へのショートカット
--

-2. 音を聴かせる
--Youtubeのリンクを貼る
--Spotifyなど簡単に試聴できるサブスクのリンク貼る

~
~

**2025.06.02
***テーマ候補
-サブスク比較
-音楽とファッション
-秘境巡り
-オーディオ紹介
-90年代の音楽シーン
~

***成果物の仕様
-形式:WEBサイト
//-サイズ:◯◯◯◯◯◯◯
//-分量:◯◯◯◯◯◯
~

***この演習を通して身につけたいスキル
-HTML,CSS,JavaScript
~
~