ふりがなに強い字幕動画ソフト「Furigana Studio」をリリースしました

タイトルの通り、ふりがなに強い字幕動画ソフトをつくってみました。学習教材の動画制作などを想定しています。

ブラウザで動く体験版も用意していますが、動画出力機能はアプリ版のみとなります（現在は Apple Silicon 搭載の macOS のみ対応しています🙇）

ざっくり機能紹介

現在は試作品ということで、フィードバックを大募集しています。

学習系の動画制作をしていて字幕の「ルビ振り」作業に苦しんでいる人が身近にいました。それを見て自動化できそうだなぁと思ったことと、ちょうど Web 技術への興味が再燃していたため、つくってみよう、となりました。

実際に字幕を作る様子を見ていて、けっこうつらい作業だなと感じたので、できる限り作業が効率化できるように意識しています。

テキストや単語は複数選択して、まとめて書式を編集することができます。

設定したテキストデザインや、書式を保存して他の場所で再利用することが出来ます。書式の保存では、配置設定も保存されます。

また、保存した書式をエクスポートして他の人に共有することも出来ます。

字幕を編集していく上で、「このテキストだけは、位置を他の字幕と変えておきたい」「この単語だけは、特別なデザインで固定しておきたい」「それ以外の全体のデザインを一括で変更したい」というシチュエーションがあります。

このために、書式設定に詳細度を作り、詳細度順に書式を「上書き」していく方式を取ることにしました。

対象を「全体」にして変更した内容は、プロジェクト全体のデフォルト設定として適用される

対象を「選択したテキスト」にして変更した内容は、選択中のテキストだけに上書きされる

個別に単語を選択した状態で変更した内容は、選択中の単語だけに上書きされる

この仕組みによって、「この単語だけはこのデザインで固定したい！」という要望と、「それ以外の全体のデザインをかんたんに変更したい！」という要望を両立しています。

ただし、編集の「モード」を設けることによって、若干操作が複雑になったかなという印象はあります。

なるべくデザイン面での制約をつけたくありませんでした。現状は、テキストに対して CSS の TextShadow を設定可能にしています。これは設定次第で様々な効果をつけられて自由度はかなり高いと思います。

とはいえ、TextShadow だけでは実現が大変な効果や、よく使う効果については少し抽象化した機能を提供していこうと考えています。現在はアウトラインはより簡単に設定できるようになっています。

字幕の背景機能も少しこだわっています。背景色だけではなく、CSSでいうところの border-color, border-width, border-radius, padding を設定できます。

また、top, right, bottom, left それぞれに別の設定をすることもできて、下記のようなタイトルは背景機能だけで作ることが出来ます。

理想はプレビュー上に Gizmo を表示して、直感的に編集できたら良いと思うのですが、ちょっと大変そうだったので一旦すべての項目は入力欄に数字を入力したり、スライダーで操作する感じになっています。

ところどころ荒削りなところがありますし、もう少し作り込みたいところもあるのですが、より良いものにするにはいったん公開してなるべく多くの方に触れていただき、フィードバックをいただいたほうが良いと思いリリースに至りました。

便利そうだと思っていただけたらぜひ使ってみてください。そして、冒頭にも書きましたがフィードバックを大募集しています！

また、周りにこういうアプリを欲しがってそうな方がいらっしゃいましたら、ぜひ紹介していただけると幸いです。