アウトライン化した表現
アウトラインにアニメーションを付加
メッセージをアウトライン化しアニメーションを付加するとさらに表現に深みが増します。毛筆で文章を書いているようにしています。
動画によるアウトラインとアニメーション
アウトライン化について
電子機器でメッセージを表示すると一瞬で表示が終わります。テレビ番組では普通ならば電子表示するところを、わざわざ手書きでフリップを作ってアピールしているのが目につきます。表示を長くして注意を惹きつける手法として文字をアウトライン化する表現方法があります。文字や記号はコード化されフォントとして定義して情報量を節約しています。
従来方法に抗してアウトライン化するのはいつも正しいとは言い切れません。萬然とした表現にインパクトを与えるにはアウトライン化表現が効果的です。切り札は効果的に用いてこそ意味があります。
アウトライン化表現の一例
日本を中心に置いた世界地図と日本列島をテキストで表現してみました。アウトライン化ツールはInkscapeです。これにLazylinepainterを用いてアニメーションを追加しました。InkscapeはSvgプログラミングコードを、LazylinepainterはHtmlプログラミングコードを出力します。
背景や文字の色付けやタイミングなどはHtmlプログラミングコードにテキストエディタにて手を加えています。その際、できうる限りのコメントを追加しています。HTMLのコードは稿末で公開しています。css, HTML, JavaScript の初歩的な知識を修得され最後までお読みいただきHtmlプログラミングコードをダウンロードして自前の表現を確立してください。
アウトライン化への考察
ここで用いた表現はすべて「テキスト」ですと言いたいところですが、背景やまゆ型の日本列島にはcircle, rect, text 要素を使っています。
ほとんどはテキストを変換して作成されたpath要素から成り立っています。
「愛夢美龍桜漢鬱🌸🗾🐧🌏」は日本語を習いたての外国人が多く検索している漢字です。ユニコードは世界の様々な言語を共通の文字集合として定義し、unix, Windows, macOS などの主要オペレーティングシステムでサポートされている規格です。その中で利用頻度の高い絵柄を文字のように扱かうべく定義したものを「絵文字」と呼んでいます。
よって、ブラウザやOSが異なるとデザインが少し変わることがありますが、画像を使うよりは情報量が少なくて済み重宝されています。この絵文字は日本が発祥と言われています。
公開プログラミングコードと謝意
HTMLプログラミングコードを公開します。css, html, javascriptの基礎的な知識を必要とします。開発環境はブラウザがあれば十分です。あとは使いやすいテキストエディタを用意します。
フリーのサクラエディタは開発を力づけてくれました。Inkscapeの解説本『すぐに使えるずっと使えるInkscapeのすべてが身に付く本』はSvgへの理解を手助けしてくれ、ソフトウェアLazylinepainter群は深みのある表現を加えるにはアニメーション利用が効果的であることを教えてくれました。
HTMLプログラミングコードをテンプレートにして自前のキャッチコピー開発に役立ててください。
余談
Lazylinepainterによる漢字の時間差表示において、書き順（筆順）は保証の限りではありませんが正しく（期待した通りに）表現する方法があります。Lazylinepainterはpathデータにdata-llp-duration, data-llp-delayによりpathごとに表示時間と表示時期を指定しています。この部分を吟味して正しい筆順を表示することが可能です。
あとづけ
日本列島の骨格は北海道、本州、九州、四国の4島から成り立っていると地理で習いましたが、日本地図のテキスト絵文字（UNICODE:🗾）は佐渡島を追加して5島になっています。
UNICODEの策定機関はコードのみを決定しデザインには関与していないと思われます。日本列島のシルエットの設計者には新潟県を後押しする担当者がいたのでしょうか。