PAGES

GUIDE

DATA

Operator Fan

Operator (ソフトウェアシンセサイザー)の紹介/音色プリセット共有サイト
Keywords:html / css/ jQuery / illustrator / ableton live

mock.jpg

プロジェクトの概要

これは何?

Operator(Ableton live付属のソフトウェアシンセサイザー)の紹介/プリセット共有サイトを制作するプロジェクトです

最終的にできる物



プロジェクトで使用するツール

  • illustrator
  • Ableton live
  • Atom
  • GitHub



    研究の流れ
    サイトマップ作成
    ワイヤーフレーム作成
    photoshopでデザイン案
    コーディング (html/css/jQuery)
    コンテンツ制作(各シンセイラスト、プリセット、デモ音源、他作業と並行して)
    SNSで拡散/Ableton JPへ紹介のお願い


    予備知識
    Ableton Liveとは
    DAW
    ソフトウェア シンセサイザーとは



目的・主旨

一般的なシンセサイザーの仕組み(減算方式 )とFMシンセサイザーの仕組み(乗算方式)が一緒になったOperatorは万能型シンセサイザーであり、海外でのメイキングビデオなどでは使われている所をよく見かける。しかし日本サイトでの情報では、FMシンセサイザーの仕組みのみといった説明がしてあることが多い。そのため取っ付きにくさのあるFMシンセサイザーだと誤解され使われていない場合が多い。そこでOperatorを紹介/プリセット共有をするサイトを作ることで日本で使う人が増えるきっかけを作りたい。


ターゲット

Ableton liveをすでに使っている人(音楽やっている人)

  • Operatorの仕組みがわからない層:プリセットをそのまま使える(音楽的なことにもっと時間を使える)
  • Operatorの仕組みがわかる層:プリセットをそのまま使える+他の人がどのような使い方をしているか参考にすることができる
  • Webサイトコンセプト:親しみやすさ
    理由
    日本で使う人が増えるきっかけを作りたいとという目的があるため親しみやすさをテーマに制作しました

制作物

Webサイト

https://kzhub.github.io/operatorfan/ ← こちらです。

サイト内利用のイラスト

ope1.jpgFM1.jpg
poly6ok.jpgmonosynth.jpg

音色プリセットを利用したデモ演奏音源

https://soundcloud.com/fan-operator

Operator音色プリセット




プロジェクト管理

スケジュール

  • 進行管理表(ガントチャート形式)へのリンク
  • サイトコンセプト決定

ToDo

作業流れ参考リンク

  • サイトマップ作成
  • ワイヤーフレーム作成(home.main2つ)
  • photoshopでデザイン案
  • コーディング
  • コンテンツ制作(各シンセイラスト、プリセット、デモ音源、他作業と並行して)


  • SNSで拡散/Ableton JPへ紹介のお願い

進捗・記録

2019.12.11

  • サイトについてページの更新
  • 学科サイトの整理
  • jQueryの組み込み

2019.12.4

サイト内イラストの作成

synth3.png
synth4.png

2019.11.27

サイト内イラストの作成/サイトのhtml.css更新

synth2.png

2019.11.20

Articleを利用したプリセット一覧ページの相談作成

2019.11.13

2019.11.6

  • html.cssを更新

2019.10.30

  • 中間報告
    abletonについてわかりやすく変更する

2019.10.23

全体イメージの制作

mainsynth.jpg

2019.10.16

サイト基本html.css作成

10%)

2019.10.09

25%)
25%)

html/レスポンシブデザイン/横並びのサムネ参考(sample02をみる)

keyword:article(html)/

メモ:
基本同じhtmlで作り変わるページだけidを別にして作り分ける
メニューバーのレスポンシブはstyle.cssの後半only screenあたり

横並びサンプルリンク
レスポンシブ参考リンク




2019.10.02

仮サイトマップ作成

50%)

2019.9.25

  • メニューカテゴリ
    ホーム(ロゴ)/プリセット/使い方/サイト概要

カテゴリ参考サイト

2019.9.18

  • イメージ連想できるシンセの絵を描いてサムネイルに(htmlが基本で作る取得したスターサーバーからUP)or wordpress
  • プリセットにはイメージしたものやジャンルなどつける
  • サイトフォント
  • Aboutなどにコンセプト
  • How to インストール方法
  • Audio demo貼るsound cloud
  • メイン画像はFMとanalogと混ぜたもの
  • メニューいいサイト日本語どのようにしているか



添付ファイル: filemock.jpg 17件 [詳細] fileope1.jpg 9件 [詳細] filepoly6ok.jpg 8件 [詳細] fileFM1.jpg 9件 [詳細] filemonosynth.jpg 9件 [詳細] filemainv.png 18件 [詳細] filemain.png 4件 [詳細] filesynth4.png 10件 [詳細] filesynth3.png 8件 [詳細] filesynth2.png 9件 [詳細] fileスクリーンショット 2019-12-04 19.42.01.png 3件 [詳細] filemainsynth.jpg 27件 [詳細] filehtnl.png 11件 [詳細] filewire2.jpg 13件 [詳細] filewire.jpg 13件 [詳細] fileunnamed.jpg 18件 [詳細]
Last-modified: 2020-01-08 (水) 01:27:03