#author("2020-12-04T17:38:54+09:00","default:member","member")
*BeatToolJP
音声素材 ”sample pack” のWeb配信
'''Keywords：WebDesign/ SoundDesign/"Sample Pack"/ R&B/Soul/Hiphop'''
#image(mock.jpg,,70%)
~
**プロジェクトの概要
[[https://kzhub.github.io/Ksamples/>https://kzhub.github.io/Ksamples/]]
#iframe(https://kzhub.github.io/Ksamples/,100%,70%)
~
***これは何？
~サンプルパック(鍵盤などを演奏した音源やドラムの叩いた音が入っているファイル)やサンプル楽器を制作し、それらを配布するサイトを立ち上げるプロジェクト
~
~
~
***背景
-コンピューターの進化により気軽に楽曲制作が行える時代が訪れており個人で楽曲を制作する人が多くなっている
-サンプルパックの殆どが海外の有料のものであり、登録なども必要で利用しにくい状態である
~
~
~
***目的
-サンプルパックやサンプル楽器などの音楽制作に役立つ素材を無償で配布し、気軽に利用できるサイトを制作し公開することを目的とする。
~
~
~
***ターゲット
-音楽制作に興味がある人
-音楽制作を行なっている人
~
~
~
***研究方法
1.企画
2.サイトマップ・ワイヤーフレーム制作
3.サンプルなどのコンテンツ制作
4.HTML,CSS,JavaScriptで制作
5.Github pagesを利用し公開
~
~
~
**調査
***Web
-[[Splice>https://splice.com/sounds/splice/mxxwll-sounds-sample-pack]]モノトーンでまとめいることで追加されるコンテンツに左右されないサイト
#image(splice.png,,50%)
-[[ドロップシャドウの利用>https://clear-gel.jp/]]~
#image(shadow.png,,50%)
~
***サンプルパック
-ファイル形式はwav形式が多い
-サンプリングレートは44.1kHzや44.8kHzなど製作者によって異なる
-量子化ビット数は24bitが多く採用されているが環境によっては使えないこともある
~
~
~
**コンセプト
~
***ユーザーが気軽にしやすいサイト
-すぐにサンプルパックのダウンロードに辿りつける
-ダウンロード前にサンプルの視聴ができるシステム
~
***シンプルだが簡素ではないデザイン
-サンプルパックのジャケットに視覚的な特徴を加える
-自然なドロップシャドウを利用した現代的なサイトデザイン
~
~
~
~
**制作物
-ロゴ
気軽にサイトを使用してもらえるようフォントは洗練されているが優しい印象を持つAvenirを使用
#image(logo.png,,60%)
~
-[[Webサイト>https://kzhub.github.io/Ksamples/]]
#image(mock.jpg,,50%)
~
-サンプルパックジャケットイラスト
#image(ja1.png,,100%)
#image(ja2.png,,100%)
~
-サンプルパック7種類
-制作例音源
~
~
~
**まとめ
-サイトを制作し実際に利用してもらったことで、改良ができ気軽に利用できるサイトを制作することが出来た
-今後の展開としては多数の人に利用してもらい、コンテンツの改良を行なう
-そのため宣伝の方法を工夫し多くの人に利用されるよう活動を行う
~
~
~
CENTER:''進捗・記録''
**2020.12.3
-safariで見た際のフォント改善
-チュートリアルの制作
#image(ttra.png,,50%)
**2020.11.26
-ヘッダーロゴサイズ調整
-サンプルパックジャケットブラッシュアップ
#image(guitar2.jpg,,50%)
**2020.11.20
-トップページダウンロードボタン追加
#image(down.png,,50%)
-サンプルパック制作
**2020.11.12
-サンプルパック個別ページ背景設定
-ダウンロードボタン認識しやすく変更
-about項目追記
#image(about.png,,50%)
-サンプルパック説明文追加
#image(setumei.png,,50%)
**2020.11.5
-レスポンシブデザインの調整(各種サンプルパックページ）
-footer 位置
-見出しフォント変更
-見出しアイコン追加
#image(mida1.png,,50%)
#image(mida2.png,,50%)
-サイトロゴ修正
**2020.10.29
-ジャケット制作
#image(boc.jpg,,50%)
#image(gtj.jpg,,50%)
-サイト整備
ホーム画面,個別ページ制作
レスポンシブ対応
**2020.10.22
-ジャケット制作
-サイト整備
ドロップシャドウ調整
メニュー調整(編集中)
サンプルパック個別ページ調整
**2020.10.15
-サンプルパック用ジャケット制作
#image(Jacke2expo.jpg,,50%)
-サイト整備
ジャケット画像サイズ変更,ドロップシャドウCSS追加
**2020.10.8
-Illustratorを利用しサンプルパックジャケット制作(ElectricPianoPack)
#image(ja3.jpg,,50%)
-サイト整備
**2020.10.1
-Illustratorを利用しサンプルパックジャケット制作
シンセサイザーらしい要素を加える
#image(IMG_6565.jpg,,50%)
**2020.9.24
-[[サンプルパックデモ音源制作>https://soundcloud.com/n5gwu6s7tjrw/social]]
-サンプルパックのジャケット制作に利用する参考資料収集
