紙吹雪メッセージ 使い方ガイド

Manual

紙吹雪メッセージの使い方

箱が開いて紙吹雪が舞い、壁に押し付けられた一枚にメッセージが浮かび上がる。そんな短い動画を、ブラウザだけで作って保存・共有できます。登録もインストールも要りません。

紙吹雪メッセージの画面全体
画面はこれだけです。上がプレビュー、その下に再生バー、長さの切替、書き出しと共有のボタン、いちばん下に文字の入力欄が並びます。

作りかた

箱に書く文字を決める

冒頭、閉じた箱の正面に印字される言葉です。「今日の予定」のような短い言葉が向いています。

  • 3行まで、1行につき12文字まで入ります。
  • 入力欄の右上のカウンタが、行数と最長行の文字数を示します。上限に達すると色が変わります。
  • 文字数が多いほど自動で小さく組まれます。1〜2行の短い言葉がいちばん読みやすくなります。
箱に書く文字の入力欄
右上のカウンタは「行数 / 上限 · いちばん長い行の文字数 / 上限」。上限に達すると色が変わります。

紙に書く文字と画像を入れる

最後に壁の紙へ浮かび上がる本文です。ここが動画の締めになります。

  • 4行まで、1行につき12文字まで。改行できます。
  • 「画像を添付」を押すと、写真を一緒に載せられます。画像が上、文字がその下の帯に入ります。
  • 画像を併用するときは文字を2行くらいに抑えると、どちらも大きく見えます。
紙に書く文字の入力欄と画像を添付ボタン
「画像を添付」を押すとファイルを選べます。添付するとこの右にサムネイルと外すボタンが出ます。

長さを選ぶ

プレビューの下のボタンで、2種類の構成を切り替えられます。切り替えると頭から再生し直します。

  • ロング(15.0秒)── 箱が開いたあとカメラが真上まで上がり、そこから箱のまわりを360度まわってから紙に寄ります。
  • ショート(7.3秒)── 真正面に構えたまま紙吹雪が舞い、少しだけ視点を上げて一気に寄ります。俯瞰と回転を省いた分だけ短くなります。
ロングの流れを8コマで示した図
ロング。箱 → 真正面 → 紙が飛び出す → 真俯瞰 → 横 → 回転 → 壁ドン → 文字。
ショートの流れを6コマで示した図
ショート。真正面に固定したまま紙が舞い、そのまま寄って壁ドンへ繋がります。

保存する・共有する

プレビューの下、長さの切替と同じ行に並んだ丸ボタンを押します。どちらも、まず動画の書き出しから始まります。書き出しが終わるまで他の操作はできません。

動画を端末に保存します。
端末の共有シートに渡します。LINE・X・メールなど、送信先はそこで選びます。
長さの切替とダウンロード・共有ボタンの行
左が長さの切替、右の2つが書き出しと共有です。
書き出し中の表示
書き出し中はボタンが沈み、すぐ下に進捗バーと状態が出ます。終わるまで他の操作は受け付けません。

共有のしくみ

共有ボタンは1つだけです。X も LINE も、リンクを開くだけの共有では動画を添付できません(本文とURLしか渡せないため)。動画を送れる唯一の経路が端末の共有シートで、しかもWebページ側から送信先アプリを指定する方法はありません。そのため宛先ごとのボタンは設けず、アプリの選択は共有シートに任せています。

共有シートが動画に対応している場合(多くのスマートフォン)

共有シートが開き、そこから LINE や X を選ぶと、動画が添付された状態で投稿画面に進みます。そのまま送信できます。

対応していない場合(主にパソコン)

動画が自動的に保存されます。投稿したいサービスを自分で開き、保存された動画を添付してください。

仕様

形式
MP4(H.264 / High profile)・音声なし。WebCodecs 非対応のブラウザでは WebM になります
解像度
1080 × 1080 の正方形・30fps
長さ
ロング 15.0秒 / ショート 7.3秒
ファイルサイズ
ロング 約9.4MB / ショート 約2.9MB
箱の文字
3行まで・1行12文字まで
紙の文字
4行まで・1行12文字まで
使える画像
PNG・JPEG・WebP/12MBまで・長辺8000pxまで
使えない画像
GIF・SVG・その他の形式

うまくいかないとき

ボタンを押しても何も起きない

保存も共有も、先に動画を書き出してから実行されます。ボタンのすぐ下に進捗バーが出ている間は処理中です。長さや端末の性能にもよりますが、数秒から十数秒かかります。

画像が受け付けられない

安全のため、ファイル名の拡張子ではなく中身を読んで形式を判定しています。別の形式のファイルの名前を .png などに変えても通りません。PNG・JPEG・WebP のいずれかで保存し直してください。GIF と SVG は仕様上お使いいただけません。

文字が小さくて読みにくい

入力した文字は、紙や箱の面に収まるよう自動で縮みます。上限いっぱいまで入れると小さくなるので、行数か1行の文字数を減らすと大きく表示されます。画像を添付しているときは、文字の入る帯が狭くなる点にもご注意ください。

共有シートが開かない

そのブラウザや端末が、動画つきの共有に対応していません。この場合は動画が自動で保存されるだけです。投稿したいサービスを自分で開き、保存された動画を添付してください。

入力欄で改行できない

行数が上限に達しています。その状態で改行を押しても、すでに入力した内容が消えないよう、改行のほうを受け付けない作りにしています。どこかの行を消してからお試しください。

プライバシー

入力した文字も、添付した画像も、この端末の中だけで処理されます。どこかのサーバーに送信されることはありません。動画の書き出しもブラウザの中で完結します。

添付した画像は動画に描き直されるため、撮影日時や位置情報といったExif情報は出力される動画には残りません。

作ってみる