マンネリからの脱却

最近、公共施設においてパブリックビューイングでニュースやエンタメの閲覧サービスをしています。テキストの書体はゴシック体か明朝体が多く、見慣れた安心感がある反面、マンネリ・ワンパターンは否めません。そこで筆記体風に動く表現をバージョンアップしてみました。

前回、11字からなるキャッチコピーは3句ずつ区切った筆記体風描写でした。書体、色、サイズの設定は句単位でしか行えなかった点を、一文字ずつ設定できるように改訂しました。この手順は、縁取り文字を作るツール例えばInkScapeなどを利用して一字ごとのpathデータを作ることになります。InkScapeの例では、pathデータに変換するオブジェクトを選択ツールを使ってすべて選択した後に、画面最上位にあるメニューから パス-オブジェクトをパスへ を設定し、次に ファイル メニューを選び、名前を付けて保存 にて svgファイルを確保します。

縁取り文字については 縁取り文字とSvg を参照してください。

この後には、svgファイルからアニメーションを付加するツール(アニメーションジェネレータ：LazyLinePainterやartistaなど)を使ってhtmlコードを出力します。すべてのテキストにオリジナルなアニメーションを加えたhtmlプログラムコードは、pathにdコマンドによりきめ細かな手書き風描写を実現してくれます。css, Javascript, htmlの基礎知識があれば、ツールが生成したコードに手を加えて更なる緻密な描写にすることも可能です。

実演

ブラウザのロードボタン（⟳）の押下で再実行できます。