ページ1: picoArtsを作ろうと思ったきっかけ

2023年の初めころ、いつものようにTikTokを見てた。当時はまだそんなにフォロワーもいなくて、たまに8bit音楽のアレンジ動画を投稿してるくらいだった。

で、適当にエフェクト見てたら、四角がいっぱい並んでてタップするとオンオフ切り替わるやつがあった。「あ、これシーケンサーじゃん」って思った瞬間、なんか面白そうだから作ってみたくなった。

普段Cubase使ってるから、ピアノロールは見慣れてる。でも、このTikTokエフェクトみたいに、もうちょっとカッコよくて直感的なインターフェースでピアノロールができたら面白そうだなって思ったのがきっかけ。

当時はプログラミングもそんなに得意じゃなかったし、Web Audio APIなんて触ったこともなかった。でも「まあ、なんとかなるでしょ」って軽い気持ちで始めた。今思えば、この軽い気持ちが良かったのかもしれない。最初から難しさを知ってたら、多分始めてなかった。

最初のアイデアはシンプルだった：

• 四角がグリッド状に並んでる
• クリックすると音が鳴る位置をオンオフできる
• 横軸が時間、縦軸が音程
• 8bitっぽい音が出る

これだけ。今思えば、本当にシンプルすぎる。でも、シンプルだからこそ最初の一歩が踏み出せたのかも。

最初はとにかく動くものを作りたかった。Web Audio APIとか全然知らなかったから、MDNとかQiitaとかをひたすらググって、サンプルコードをコピペしまくった。

「OscillatorNode」とか「AudioContext」とか、単語の意味も分からないまま使ってた。でも、とりあえず音が鳴った瞬間は本当に感動した。「おお、ブラウザで音楽が作れるじゃん！」って。

最初に作ったのは、本当に基本的なSquare波だけのやつ。ファミコンの音色っぽいのが出せて、それだけでテンション上がった。

でも見た目が本当にダサかった。HTMLのinput要素をそのまま使って、数字を直接入力するタイプの設定項目がずらっと上に並んでる。

みたいな感じで、まるで開発者ツールか何かみたいな見た目。これを人に見せるのは恥ずかしかった。

さらに致命的だったのがパフォーマンス。当時の実装は、グリッドの各マスをHTMLのbuttonで作ってたから、16x32のグリッドだけで512個のボタンがDOMに存在することになる。

これがとにかく重い。ちょっとグリッドサイズを大きくしようとすると、パソコンのファンがブンブン回る。クリックイベントも重いし、スクロールもカクカク。

「これはダメだ」と思って、全部作り直すことにした。この時点で既に、「完璧主義になりすぎると前に進めない」ということを学んだ。とりあえず動くものを作って、ダメだったら作り直せばいい。

Version 1で学んだことは多い：

1. Web Audio APIの基礎: 音を鳴らすだけでも結構複雑
2. パフォーマンスの重要性: 見た目がよくても重いと使えない
3. UI/UXの難しさ: 技術的に動くのと使いやすいのは別物
4. 作り直しへの抵抗感の軽減: 最初からやり直すことに慣れた

Version 1の反省を踏まえて、まずは見た目の改善から始めた。設定画面を隠せるようにしたのが一番大きな変更。左上に小さなボタンを作って、押すと設定が出たり消えたりする仕組み。

地味な変更だけど、見た目がだいぶスッキリした。tiktok的にも多分見やすくなった。

このあたりでTikTokに投稿したら、予想外に反響があった。コメントで「〇〇の曲も作って！」みたいなリクエストをもらうようになった。

調子に乗って、もっと機能を充実させようと思った。

でも、まだ課題は山積みだった：

• 保存機能がない（作った曲が消える）
• 音色が少ない
• ドラム音がない
• ズーム機能がない

ユーザーからの要望を聞いてると、どんどんやりたいことが増えてきた。