アニメーションするバッジは、フィードをスクロールする中でも目に留まります

下の動画は、手を加えていない書き出しそのままです。スタイルは Edge-Halo。光の輪郭がバッジの縁をなぞって動き、6秒のつなぎ目のないループになっています。LinkedIn では、こうした動画はフィードで自動的に無音で再生されます。その動きは、静止画にはできないことをします。指先を一瞬だけ止めるのです。

LinkedIn は、動画が画面に入ってくるとすぐ、無音でループ再生します。動かない投稿ばかりが並ぶ中では、アニメーションバッジが画面内で唯一動いているもの、ということがよくあります。そして目は、どれほど強い色よりも、変化に確実に反応します。そのために動きが何かを語る必要はありません。光の輪郭が動くだけで、名前とイベントが読まれるあの一秒のあいだ、指先を止められます。

本当の面白さは、一人ひとりに合わせられるところにあります。来場者ごとに専用の動画を用意するとなれば、これまでなら編集ソフトとレンダリング時間が要る制作会社の仕事でした。ここでは、それがその人のブラウザの中で生まれます。あなたのリンクを開き、写真と名前を入れると、書き出しがイベントの世界観のままその人専用の MP4 を計算します。100人の来場者からは100本の別々の動画が生まれ、あなたの手間はバッジ一つとリンク一本のままです。

さらに、めったにないという強みもあります。バッジの取り組みはたいていフィードで静止画として流れるので、動くバッジはそのぶん目立ちます。そして、これらの動画はどれもその人のネットワークの中で再生されるので、効果は来場者をまたいで積み上がっていきます。どれくらい積み上がるかは、ネットワーク効果の記事が試算しています。

アニメーションは、いわば声のトーンです。コンプライアンスの会議ならタイトルの上に控えめな輝きがなじみますし、コミュニティのフェスティバルなら紙吹雪を降らせて構いません。カタログはこの幅をまるごとカバーしています。ほとんど気づかないほどのエフェクトから、花火や金の雨のような派手なものまでです。

スタイルはエディターで一度だけ選び、それがイベントのすべてのバッジに適用されます。もっと控えめにしたいときは、強さを抑えられます。目安として、スタイルの系統を一覧にしました。

文字スタイルは、文字だけを動かします。バッジのそれ以外の部分はまったく静かなままです。フォイルの艶が金属のように文字の上を走り、きらめきが一文字ずつをなでていき、グラデーションがタイトルの中を移ろいます。もっと大きく見せたいときは、文字が一つずつ立ち上がったり、断片から組み上がったりします。テック系の催しには、文字をコンマ数秒だけちらつかせるグリッチがあります。

動くのはタイポグラフィだけなので、写真とその人の名前は妨げられずに読めます。だからこそ文字スタイルは、まじめな客層に向けた催しで、フィードでは動きがほしいけれど専門的なイベントらしく見せたい、というときの第一候補になります。下の例では、フォイルの艶がエディトリアルなレイアウトの上を走っています。

光スタイルは、縁、輪郭、光線を使います。最初の例に出てきた Edge-Halo はバッジの縁に沿って光の輪郭を走らせ、ネオンの枠はモチーフのまわりにチューブライトを巡らせ、レーザーは鋭い線でバッジを走査し、サーチライトは幅広い光の円錐でデザイン全体をなでていきます。

これらのエフェクトが本領を発揮するのはダークなデザインの上です。光が、夜の看板のようにバッジをフィードの周囲から浮かび上がらせます。テックカンファレンス、夜の催し、ステージ照明のあるものすべてには、これが自然な選択です。下は、ネオンのコンセプトに乗せたサーチライトです。

独立したエフェクトの一群は、バッジの感情の核である写真そのものに働きかけます。パルスは、アクセントカラーのリングをリズムよく写真から外へ送り出します。まるで、すべての視線をその人へ導くレーダーのようです。近い仲間として、光の弧がプロフィール写真のまわりを回る光の輪、写真の後ろから光線を扇状に広げてゆっくり回す放射状の光、顔のまわりに点を巡らせるオービットがあります。

これらのスタイルが力を発揮するのはスピーカーバッジです。そこでは顔こそがメッセージだからです。名前を読むより先に、その人だと気づいてもらう。下は、深い青のグローを添えたクラシックなレイアウトに乗せたパルスです。リングが、外から内へと注目を写真に集めていきます。

カタログでいちばん自由がきくのは絵文字の雨です。好きな絵文字を選び、望むなら最大8種類を混ぜると、バッジがそれをパーティクルとして流します。動きは6つのパターンから選べます。雨のように降る、シャンパンの泡のように上がる、中央からはじける、ふんわり漂う、紙吹雪のように舞う、写真のまわりを回る。密度と大きさも合わせて調節でき、ぽつぽつとしたアクセントから、びっしり降りしきる様子まで作れます。

こうして一つのエフェクトが、テーマを組み立てる部品になります。チャリティーガラにはハート、製品ローンチにはロケット、卒業パーティーには角帽、夏祭りには太陽。あなたのイベントに結びついたシンボルが、投稿されるどのバッジにも一緒に流れます。下は、紙吹雪モードのパーティー絵文字ときらめきです。

ティッカーはカタログの中でも特別な存在です。ここでは、あなた自身が書いた文字が動くからです。テレビのニュース欄のように、バッジの縁を帯が流れ、覚えてほしい一行をエンドレスに運びます。「Let’s connect at OneClickBadge Summit」のような招待の一言、展示会ならホールとブース番号、あるいはチケット販売の案内です。

文面はエディターで打ち込み、帯と文字の色はデザインに合わせて整えます。下では、切り抜いた登壇者と夕焼けのグラデーションの下を、例の一行が流れています。

アニメーションを入れても、手順はほとんど変わりません。そこが大事なところです。いつものようにバッジをデザインし、エディターで動画アニメーションのセクションを開きます。そこに、肝心のチェックがあります。「動画ダウンロードを提供」です。初期状態ではオフで、その場合、受け取った人は画像だけをダウンロードします。チェックを入れて初めて、受け取り手のページに画像と並んで動画の選択肢も現れます。

チェックを入れると、その下にライブプレビュー付きのスタイル選択が現れます。カタログからスタイルを選び、望めば強さ、速さ、エフェクトの色を整え、確認のためにアニメーションをエディターの中でそのまま再生できます。そのためにバッジ自体を作り直す必要はありません。

そのあと登壇者や来場者は、いつもと同じリンクを開き、写真と名前を入れ、ダウンロード時に画像と動画のどちらかを選べます。どちらもアカウントは不要です。動画は MP4 で書き出されます。LinkedIn をはじめ、ほぼどのプラットフォームも動画投稿としてそのまま受け付ける形式です。書き出しで MP4 を扱えない古いブラウザには、自動的に WebM が渡されます。レンダリングも編集もアプリのインストールも要りません。書き出しはその人のブラウザの中で進みます。

たいていは両方を、チャンネルごとに使い分けます。動画は、静止画に打ち勝つフィードでこそ力を発揮します。画像は、プロフィールやニュースレター、動画が自動再生されない場所すべてで、変わらず正しい選択です。どちらの版も同じバッジから生まれるので、選ぶこと自体にコストはかかりません。周りの人は、両方の形式をそのままダウンロードするだけです。

投稿にあたっての実践的なヒントを一つ。LinkedIn では動画投稿は無音で始まります。だからここのスタイルはどれも、はじめから音なしで成り立つように作ってあります。この前後の告知の進め方まで組み立てたい方は、イベントの宣伝ガイドに道筋があります。