blog-RuinDig

短かったり長かったりする。Blog posts are my own.

Twitterで広告を使わなくても画像ウェブサイトカードは作れる

おことわり

内容は2020年8月10日時点のもの。筆者はTwitterで広告用のプロモーションツイートなどは全く使った事がない。

画像ウェブサイトカードとは

画像ウェブサイトカード(イメージウェブサイトカード)というのは、ウェブサイトのURLをTwitterでツイートすると表示されるカード形式のサムネイル表示システムの1つ。Twitterカードの一種であるsummary_large_imageのような1.91:1サイズと1:1サイズがある。自分のウェブサイトのTwitterでのサムネイル表示をもっと大きくしたり、サムネイル表示されない自分のYouTubeの動画や自分のInstagramの投稿などに使われる場合もある。

その他、広告ツイートにはなるが、画像ウェブサイトカードを使ったツイート例は以下の通り。

f:id:edgeknight:20200811105019p:plain

https://twitter.com/Peugeot_Japan/status/892037149326884865

f:id:edgeknight:20200811105048p:plain

https://twitter.com/Lenovo_WebShop/status/887581359828459520

Twitterで広告ツイートをしなくても画像ウェブサイトカードは作れる。そのためには、クレジットカードかデビットカードの「お支払い方法」を登録する必要がある。手順は次の通り。

お支払い方法の登録

パソコンでTwitter(https://twitter.com)にアクセスする。

f:id:edgeknight:20200810204646p:plain

f:id:edgeknight:20200810203422p:plain

ホーム画面(https://twitter.com/home)の左側、「もっと見る」をクリックして「Twitter広告」を選ぶ。

f:id:edgeknight:20200810203618p:plain

「広告キャンペーンの目的」が表示されるが、右上の「X」か右下の「キャンセル」をクリックする。

f:id:edgeknight:20200810205450p:plain

右上に自分のTwitterアカウントの名前(この場合RuinDig)が表示された所をクリックする。「お支払い方法」をクリックする。

f:id:edgeknight:20200810212258p:plain

「お支払い方法」の画面に移動したら右上の「新しいお支払い方法を追加」をクリックする。

f:id:edgeknight:20200811105955p:plain

カード番号(半角数字)、名前と名字(アルファベット半角大文字)、住所(日本語で入力できた)を入力して「I agree to the Twitter Advertising Terms.」にチェックを入れる。

f:id:edgeknight:20200810221959p:plain
お支払い方法が追加され、新しく追加したお支払い方法がデフォルトに設定された(後から変更・削除できる)。

お支払い方法でのカード情報の登録の時には支払いは全く発生しない。0円。

ここではLINE PayカードWebMoneyプリペイドカードの登録を試してみた結果、両方登録できた。カードが1個登録できればそれで問題ない。

画像ウェブサイトカードを使ったツイートの手順

次は画像ウェブサイトカードを使ってツイートするまでの手順を紹介する。

f:id:edgeknight:20200810222606p:plain

画面上部の「キャンペーン」「クリエイティブ」「アナリティクス」「ツール」「クリエイティブ」をクリックして「カード」を選ぶ。

f:id:edgeknight:20200810210739p:plain

「カードライブラリ」では自分で設定したこれまでのウェブサイトカードの設定が一覧で表示される。

「カードライブラリ」の右上にある「カードを作成」をクリックして「ウェブサイトカード」を選ぶ。

f:id:edgeknight:20200810210817p:plain

画面の右側に画像ウェブサイトカードの作成メニューが表示される。まずは「メディア」の「画像を選択」をクリックする。ここで選ぶ画像はツイートした時のサムネイル画像の表示に関係している。

f:id:edgeknight:20200810224143p:plain

画像をドラッグ・アンド・ドロップで持ってくるか、フォルダを参照して画像をアップロードする事ができる。

f:id:edgeknight:20200810224356p:plain

画像をアップロードすると1.91:1か1:1のサイズに調整したり、任意の範囲を切り取る事もできる。画像の調整が完了したら「トリミング」をクリックする。

f:id:edgeknight:20200810225900p:plain

「ヘッドライン」以降の項目は以下のような意味がある。全ての項目で入力が必要になっている。

  • ヘッドライン:ツイートでカードを表示する時に必要なタイトル。上限70文字。
  • ウェブサイトのURL:ツイートで表示するウェブサイトのURL。
  • カード名:カードライブラリ上での表示であって、ツイートする際の表示とは関係ない。上限80文字。

それぞれの入力が完了したら右下の「作成」をクリックする。

f:id:edgeknight:20200810231640p:plain

すると、一番上の列の一番左に作成した画像ウェブサイトカードが出てきた。ここまでではまだツイートはされていない。

f:id:edgeknight:20200810233008p:plain

作成した画像ウェブサイトカードを使ってツイートするためには、マウスカーソルをツイートしたい画像ウェブサイトカードに乗せる。すると、4つのアイコンが出てくる。それぞれ以下の機能がある。

  • プレビュー:ツイート時のウェブサイトカードの大体の見た目を確認できる。
  • ツイート:タイムラインに投稿するためのツイート作成。
  • 複製:既存のものと同じウェブサイトカードを作る。
  • 編集:一度作成したウェブサイトカードを編集する。削除のメニューはない。

「プレビュー」ではTwitterのiOSアプリ、Androidアプリ、デスクトップ(パソコン)での画像ウェブサイトカードの大体の見た目を以下のように確認できる。

f:id:edgeknight:20200811000243p:plain

TwitterのiOSアプリでの大体の見た目

f:id:edgeknight:20200811000312p:plain

TwitterのAndroidアプリでの大体の見た目

f:id:edgeknight:20200811000345p:plain

Twitterのデスクトップ(パソコン)での大体の見た目

f:id:edgeknight:20200810233008p:plain

ツイートするためには、左から2つ目の「ツイート」を選ぶ。

f:id:edgeknight:20200811001707p:plain

「作成モード」の画面に移動する。任意の文章を入力したら「広告用」のチェックを消して「ツイート」を押す。

f:id:edgeknight:20200811000111p:plain

右上に「ツイートが送信されました。」とメッセージが表示される。

f:id:edgeknight:20200811001543p:plain

このようにツイートできた。画像ウェブサイトカードはツイートの埋め込みでも確認できる。これで画像ウェブサイトカードを使ったツイートができた事になる。

f:id:edgeknight:20200811012706p:plain

ツイートに使ったツールとしてTwitter for Advertisersが表示されている。Twitterの広告ツールを使ってツイートした事が分かる。

ビデオウェブサイトカードの作成

ついでにビデオウェブサイトカードも作ってみた。ビデオウェブサイトカードは動画を載せられる形式のTwitterカードになる。

f:id:edgeknight:20200810210739p:plain

「カードを作成」をクリックして「ビデオウェブサイトカード」を選ぶ。

f:id:edgeknight:20200810233948p:plain

画面の右側にビデオウェブサイトカードの作成画面が現れる。「動画を見る」はこれまでツイートした動画の中から選ぶ形式。今回は「動画をアップロード」をクリックしてパソコンのフォルダを参照してアップロードする。

ファイルサイズの上限は1GB。

f:id:edgeknight:20200810234720p:plain

動画のアップロード処理時の様子。

f:id:edgeknight:20200810234814p:plain

動画のアップロードが完了するとファイル名が表示され、再生できるようになる。

f:id:edgeknight:20200810235207p:plain

ヘッドラインやカード名を設定する。動画のアップロード以外は画像ウェブサイトカードと同じ。

  • ヘッドライン:ツイートでカードを表示する時に必要なタイトル。上限70文字。
  • ウェブサイトのURL:ツイートで表示するウェブサイトのURL。
  • カード名:カードライブラリ上での表示であって、ツイートする際の表示とは関係ない。上限80文字。

f:id:edgeknight:20200811013345p:plain

ビデオウェブサイトカードを作成すると、画像ウェブサイトカードとは別に動画のウェブサイトカードのカードライブラリのページに置かれる。画像と動画の切り替えは右上の「動画」をクリックすると切り替えできる。

f:id:edgeknight:20200810235512p:plain

作成したビデオウェブサイトカードにマウスカーソルを乗せると4つのアイコンが表示される。それぞれの機能は画像ウェブサイトカードを使う時と変わらない。

  • プレビュー:ツイート時のウェブサイトカードの大体の見た目を確認できる。
  • ツイート:タイムラインに投稿するためのツイート作成。
  • 複製:既存のものと同じウェブサイトカードを作る。
  • 編集:一度作成したウェブサイトカードを編集する。削除のメニューはない。

「プレビュー」ではTwitterのiOSアプリ、Androidアプリ、デスクトップ(パソコン)でのビデオウェブサイトカードの大体の見た目を以下のように確認できる。動画を再生する事もできる。

f:id:edgeknight:20200811013756p:plain

TwitterのiOSアプリでの大体の見た目

f:id:edgeknight:20200811013811p:plain

TwitterのAndroidアプリでの大体の見た目

f:id:edgeknight:20200811022043p:plain

Twitterのデスクトップ(パソコン)での大体の見た目

f:id:edgeknight:20200811014239p:plain

ツイートのアイコン

ツイートするためには、左から2つ目の「ツイート」をクリックする。

f:id:edgeknight:20200811003301p:plain

「作成モード」の画面に移動する。任意の文章を入力したら「広告用」のチェックを消して「ツイート」を押す。

f:id:edgeknight:20200811003313p:plain

右上に「ツイートが送信されました。」とメッセージが表示される。

f:id:edgeknight:20200811003452p:plain

このようにツイートできた。

ただし、動画を再生できるのはTwitter上に限られていて、ブログやホームページなどの外部のウェブサイトにツイートを埋め込むとTwitterカードが静止画で表示されていて動画を再生できないようになっている。
https://twitter.com/RuinDig/status/1292846292125720576

他では以下のツイートも広告ツイートではないが、ビデオウェブサイトカードが使われている。https://twitter.com/ochyai/status/1292800364383625217

スマートフォンやタブレットのTwitterアプリでビデオウェブサイトカードのリンクを開くと、画面の上部に動画、その下にリンク先のページが表示されるようになっている。

f:id:edgeknight:20200811020305p:plain

スマートフォンのTwitterアプリでビデオウェブサイトカードのリンクを開いた時の画面。

関連資料

Twitterによる公式のウェブサイトカードの紹介ページ。

business.twitter.com

ウェブサイトカードに関するツイート

-end-