0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ブラウザで動く振動解析ツールをClaudeと一緒に作った話【FFT・フィルタ・スペクトル解析】

0
Last updated at Posted at 2026-03-30

はじめに

私は機械系のエンジニアです。プログラマーではありません。

業務では振動解析などを日常的に行いますが、専用の計測器ソフトって高いし、起動が遅いし、ライセンスが1本しかないし……と何かと不便を感じていました。

「ブラウザでサクッとFFTできるツールがあればいいのに」と思い続けていたところ、AIを使えば自分でも作れるかもと思い、挑戦してみました。

その結果、こんなツールが完成しました。

👉 WaveAxis : https://waveaxis.vercel.app/
(PCでの閲覧推奨。最初の波形生成は少し時間がかかります)

👇アップデートしました! ランダム振動の生成やProプランへのアップデートができるようになっています。(2026/5/9記)
https://waveaxis-pro.vercel.app/

image.png


このツールでできること

  • 合成サイン波の生成(周波数・振幅・位相を自由に設定)
  • フィルタ処理(バターワース・チェビシェフ・楕円・ベッセル・FIRなど)
  • パワースペクトル(直接FFTで正確な振幅を算出)
  • PSD(Welch法による平均化)
  • スペクトログラム
  • 処理結果のCSVダウンロード

無料版は合成サイン波のみ対応。実データのCSV読み込みは今後の有料版で対応予定です。


使った技術

役割 技術
フロントエンド React (Vite)
バックエンド Python / FastAPI
数値計算 NumPy / SciPy
グラフ Plotly
フロントホスティング Vercel
バックエンドホスティング Render
ソース管理 GitHub

Claude(AIアシスタント)と一緒に作った

ここが一番伝えたいことです。

私はPythonは少し書けますが、React・FastAPI・デプロイまわりはほぼ素人です。それでも完成できたのは、Claude(Anthropic社のAIアシスタント) のおかげです。

ポイントは「Claude Code」という開発者向けツールではなく、普通のブラウザ版のClaude(claude.ai)だけを使ったことです。

会話しながらコードを1ファイルずつ作っていき、エラーが出たらエラーメッセージをそのまま貼り付けて「これどういう意味ですか?」と聞く。それを繰り返すだけで、フロントエンドからバックエンド、GitHubへのアップロード、Vercel/Renderへのデプロイまで全部できました。

プログラマーじゃなくても、AIと会話できれば本格的なWebアプリが作れる時代になったと実感しています。


GitHub・デプロイも全部Claudeに聞いた

GitHubは以前に一度使ったことがあるだけで、ほぼ覚えていない状態でした。

git add .
git commit -m "変更内容のメモ"
git push

この3行を教えてもらい、「これを繰り返すだけ」と言われたときは目からウロコでした。実際に今もこの3行しか打っていません。


フィルタの違いを見てみよう

ここからが本題です。9つの合成サイン波(低周波数帯域・中周波数帯域・高周波数帯域それぞれ3成分)を生成して、各フィルタの違いを見てみます。

使用する合成波の設定

成分 周波数 振幅
1 50 Hz 1.0
2 100 Hz 1.0
3 150 Hz 1.0
4 180 Hz 1.0
5 220 Hz 1.0
6 250 Hz 1.0
7 300 Hz 1.0
8 350 Hz 1.0
9 400 Hz 1.0

カットオフ周波数:200 Hz のローパスフィルタ で比較します。

image.png


① バターワース(4次)

最もポピュラーなフィルタです。通過域が平坦で、阻止域への減衰が比較的なだらか。

特徴:

  • 通過域がフラット
  • 位相特性が比較的良好
  • 急峻な遮断が必要な場合はやや不向き

image.png


② チェビシェフI型(4次・リップル1dB)

通過域に意図的なリップル(波打ち)を持たせることで、バターワースより急峻な遮断特性を実現します。

特徴:

  • バターワースより急峻に遮断できる
  • 通過域にリップルあり
  • リップル量で特性を調整可能

image.png


③ チェビシェフII型(4次・阻止域減衰10dB)

阻止域にリップルを持つタイプ。通過域はフラットに保てます。

特徴:

  • 通過域はフラット(バターワースに近い)
  • 阻止域にリップルあり
  • 阻止域の減衰量を直接指定できる

image.png


④ 楕円フィルタ(4次・阻止域減衰10dB・リップル1dB)

通過域・阻止域の両方にリップルを持つ代わりに、最も急峻な遮断特性を持ちます。

特徴:

  • 同じ次数では最も急峻な遮断
  • 通過域・阻止域の両方にリップルあり
  • 位相特性は他と比べてやや複雑

image.png


⑤ ベッセルフィルタ(4次)

位相特性(群遅延)の平坦性を優先したフィルタ。波形の形を崩さずに処理したいときに有効です。

特徴:

  • 群遅延が最も平坦
  • 波形の形状を保持しやすい
  • 遮断の急峻さはバターワースより劣る

image.png


⑥ 移動平均(窓幅4)

FIR型の最もシンプルなフィルタ。計算が軽く、直感的です。

特徴:

  • 実装がシンプル
  • 遮断特性はあまり良くない
  • ノイズ除去の簡易確認に便利

image.png


まとめ:どのフィルタを選ぶか

フィルタ 遮断の急峻さ 通過域の平坦性 位相特性 こんな用途に
バターワース ★★★ ★★★★★ ★★★★ 汎用的に使いやすい
チェビシェフI ★★★★ ★★★ ★★★ 急峻な遮断が必要
チェビシェフII ★★★★ ★★★★★ ★★★ 通過域フラット+急峻
楕円 ★★★★★ ★★★ ★★ とにかく急峻に遮断
ベッセル ★★ ★★★★ ★★★★★ 波形形状を保ちたい
移動平均 ★★ ★★★ ★★★★ 簡易ノイズ除去

おわりに

「振動解析ツールって高くて使いにくい」という現場のリアルな課題感から作り始めたツールですが、思った以上に本格的なものができました。

プログラマーじゃなくてもAIと会話しながら作れる、というのを身をもって体験できたのが一番の収穫でした。

もし「うちの会社でもこういうツールほしい」「CSV読み込みにも対応してほしい」という方がいればコメントでお声がけください。

無料版はこちらから試せます👇
https://waveaxis.vercel.app/
(PCでの閲覧推奨。最初の波形生成は少し時間がかかります)


参考

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?