LogoMark.png

折橋和真/卒業研究

fashion&music snap

fashionとmusicの「新しい見方」を届けるWebサイト

main2.jpg

概要

これは何?

音楽とファッションを紐付けて新しい角度から「発見」のあるwebサイト。

背景

これまで、音楽とファッションに関する歴史を描いたり、解説をしたりすることはある程度やり尽くされているところがある。今更「この楽曲やファッションはこうだ」という話をしても、ピンと来ないと思う。例えば、音楽について考えてみると、社会生活をする上での「現実逃避の手段」として楽しむ側面だけでなくて、「現実の社会と向き合うこと」に繋がる面がある。既存のwebサイトを見たときにページトップにファッションと音楽という風に書かれていても、スナップ写真を見た際にファッションと音楽というものが目を通して入ってこないものが多いという背景がある。

目的

背景があった上で、音楽それ自体をただ楽しむだけでも全く問題ないが、「今この時代に、音楽とファッションに関するサイトを出す意義」を考えたとき、好きなアーティストと好きな音楽を見聞きしして「自分と似ているな」と感じることや、サイトを見て一つの側面として、そういう見方もあると伝えることには意義があると思う。

コンセプト

・ファッションと音楽の掲載を中心としたスナップ
・ファッションと音楽を掛け合わせることによる「新しい見方」

成果物の仕様

・webサイトに公開
・スナップ写真18枚を作成
・各々のスナップの着用している服のタグ付け、サイト文には音楽のリンクを載せる
・ワイヤーフレーム
wireframe.jpg
・サイトマップ
sitemap2.jpg
・サイト内イメージ

2023-07-02 15.49のイメージ.jpg

aaa.jpg bbb.jpg ccc.jpg ddd.jpg

メンバー

折橋 和真

制作ツール

・figma
・sublime text
・illustrator
・photoshop

プロジェクトの期間

プロジェクトの期間|2023.04.14 - 2023.12.22

まとめ

ファッションと音楽を簡潔に効率よく情報を伝達するサイトの構築はできた。試作の段階で表現したいWebサイトの形を作ることはできたが、系統別に分けたスナップのファッションの概要、音楽の概要を記載したりスナップ写真自体の撮り方の規則性をつけることができた。部位別で撮ったスナップ写真(tops、pants、shoes)をクリックすることにより各々のサイトに誘導する事ができ、音楽の面では全身スナップに音楽のURLを添付することによりyoutubeで視聴する事が可能になった。また、webサイトの最下部にあるinstagramアイコンを押すとinstagramアカウントに飛ぶことができ、SNSで拡散を広める次第である。今後は、webサイト、instagramを見てもらった人に具体的な「新しい見方」を感じてもらえるよう模索し、広報活動をしていく。



調査

現状調査

hiphopカルチャーとシューズについて
音楽とファッションに「現代的視点」を重ねる意義

先行事例

Fashionsnap




プロジェクト管理

スケジュール

スケジュール

ToDo

・試作の制作
・音楽と靴の歴史調査
・画像自体に服のブランドをタグ付けする
・音楽サイトを画像に添付する
・メンズ、レディース表記を変える
・服のリンク、音楽のリンクを付ける
・スナップのモデル名を変更





進捗記録




2023.12.22

・仮説明パネルをブラッシュアップし説明パネル完成

2023.12.15

・最終審査を終えて今後のブラッシュアップ事項をまとめた
・仮説明パネル完成

2023.12.08

・説明パネルの作成
・説明パネルのメインビジュアルを再作成

2023.12.01

・後期概要集の添削後、改善し完成
・年間スケジュール完成

2023.11.24

・後期概要集を作成
・年間スケジュールの整理

2023.11.17

・サイト内イメージ更新
aaa.jpg bbb.jpg ccc.jpg ddd.jpg

2023.11.10

・htmlとcssを利用し、スナップを押すと服のリンクに飛べるような仕様にした。
・音楽に関しては、全体スナップの下のリンクを押すとyoutubeに飛ぶ事ができる。

2023.10.27

中間報告まとめ
・画像を18枚に変更
・1スナップに色々な角度の写真を掲載する
・メンズ、レディース表記を変える
・othersを変更し、有効化
・服のリンク、音楽のリンクを付ける
・スナップのモデル名を変更

2023.10.20

・サイト内のレイアウト変更
→mens snap、ladys snapを追加
・webサイトの更新

2023.10.11

・タグ付けイメージ
sakura.jpgyuka.jpghinata.jpg

2023.10.03

・メインビジュアル完成

main2.jpg

2023.09.28

・スナップ写真撮影
tomoki.jpgdaiki2.jpgsakura2.jpg

2023.09.21

・サイトマップ完成

sitemap2.jpg

2023.09.15

・サイト再編集
・サイトマップ再作成

2023.07.21

・最終審査を終えて、スナップを撮るにしてもアップで撮ったり引いて撮ったりする。
・撮ってもらった人の一言を掲載をする。
・好きな音楽、好きな服のリンクに飛べるようにする。
・ジャンル分けして見易さや統一感を上げる。
・「新しい見方」をしてもらった上でどうしたいかを追求する。
 →先行事例を沢山調べる。

2023.07.14

まとめ
ファッションと音楽を簡潔に効率よく情報を伝達するサイトの構築はできた。試作の段階で表現したいWebサイトの形を作ることはできたが、系統別に分けたスナップのファッションの概要、音楽の概要を記載したりスナップ写真自体の撮り方の規則性をつけることが必要である。今後は、サイトを見てもらった人に具体的な「新しい見方」を感じてもらえるよう模索し、ブラッシュアップを重ねていく。

2023.07.07

概要集のフィードバックを受けてブラッシュアップをし、今後の展望サイトマップを作成

2023.06.30

サイト内イメージ
2023-07-02 16.43のイメージ.jpg 2023-07-02 16.43のイメージ (1).jpg 2023-07-02 16.43のイメージ (2).jpg 2023-07-02 16.44のイメージ.jpg

2023.06.23

サイトビュー制作

isolated_tablet_laptop_and_smartphone_composition (1).jpg

2023.06.16

ワイヤーフレーム制作

wireframe.jpg

2023.06.09

サイトマップ制作

sitemap.jpg

2023.06.02

音楽とファッションに「現代的視点」を重ねる意義

これまで、音楽とファッションに関する歴史を描いたり、解説をしたりすることはある程度やり尽くされているところがある。今更「この楽曲やファッションはこうだ」という話をしても、ピンと来ないと思う。
その中で、「今この時代に、音楽とファッションに関するサイトを出す意義」を考えたとき、好きなアーティストと好きな音楽を見聞きしして「自分と似ているな」と感じることや、サイトを見て一つの側面として、そういう見方もあると伝えることには意義があると思う。

2023.05.26

・サイト用写真撮影
1.jpg 2.jpg 3.jpg

2023.05.19

・テーマ変更(ファッションと音楽)
・sublimetextでサイト構築

2023.05.12

・試写(サイト用)
vans.jpg jacmus.jpg

2023.04.28

・動画媒体に変更

2023.04.21

調査

パンツ種類
hiphopカルチャーとシューズについて

nike

・NIKEのair force 1はNBAでのナイキシューズを着用した黒人選手の活躍も関わったと言われている。

adidas

・hiphopを大いに広めたとされるrun dmcが、紐無しadidasスーパースターを履いていた。

参照

・nike
https://tengusneaker.com/
・adidas
https://www.cdjournal.com/

2023.04.14

テーマ案

・「視る」ということに対しての疑門を解消するwebサイトor動画。
 ↓
 様々な洋服のdetailの概要を説明。

調査

・detail名称



GitHub管理

PAGES

GUIDE

添付ファイル: filesitemap2.png 13件 [詳細] filebbb.jpg 15件 [詳細] fileaaa.jpg 12件 [詳細] fileddd.jpg 15件 [詳細] fileccc.jpg 12件 [詳細] filesakura.jpg 17件 [詳細] fileyuka.jpg 13件 [詳細] filehinata.jpg 17件 [詳細] filedaiki.jpg 16件 [詳細] filedaiki2.jpg 19件 [詳細] filesakura2.jpg 18件 [詳細] filetomoki.jpg 15件 [詳細] filesitemap2.jpg 15件 [詳細] filemain2.jpg 14件 [詳細] file12B463F8-07A5-49A7-9207-60C1EADCBC20.jpeg 13件 [詳細] file7A154E69-D602-4027-A94F-1914C5CD51D5-min.jpeg 10件 [詳細] filemainvisual (2).jpg 22件 [詳細] file2023-07-02 15.49のイメージ.jpg 21件 [詳細] filecontact.html 77件 [詳細] fileservice.html 65件 [詳細] fileindex.html 73件 [詳細] file2023-07-20 17.14のイメージ.jpg 19件 [詳細] file2023-07-02 16.44のイメージ.jpg 20件 [詳細] file2023-07-02 16.43のイメージ (2).jpg 18件 [詳細] file2023-07-02 16.43のイメージ (1).jpg 18件 [詳細] file2023-07-02 16.43のイメージ.jpg 18件 [詳細] fileisolated_tablet_laptop_and_smartphone_composition (1).jpg 18件 [詳細] filewireframe.jpg 17件 [詳細] filesitemap.jpg 14件 [詳細] file3.jpg 22件 [詳細] file2.jpg 22件 [詳細] file1.jpg 23件 [詳細] fileIMG_0037.jpg 24件 [詳細] filejacmus.jpg 23件 [詳細] filevans.jpg 18件 [詳細] file4EB2FDB5-3DE4-45C0-AE6B-F7454BD74DDE.JPG 16件 [詳細]
Last-modified: 2024-01-15 (月) 00:09:42