ウェブサイトにツイッターカード(Twitter Cards)を設定する

本日はウェブサイトにツイッターカード(Twitter Cards)を設定してみたいと思います。

ツイッターカードとは、ツイートしたときのつぶやきの下に表示される画像とかビデオリンクとかのことです。

こんな↓ヤツですね。

ツイッター・カードの表示例(ツイッター・カードに該当するところが赤枠で囲われている)

ウェブサイト上でこのツイッターカードの設定をしておくと、そのリンクを含むツイートがされたときに指定の文章や画像が一緒に表示されるようになります。

OGPとは別に設定できます(Twitter Cardsの記述が優先される)ので、ツイッターのオーディエンスが他の媒体と異なる場合に記事の紹介分を変更したり、表示する画像を変えたりすることができます。

ツイッターカードの設定方法

カードをウェブサイトに追加する方法はいたって簡単です。

基本的にはTwitter公式サイトを参照すれば良いのですが、備忘録も兼ねて以下に一通り書いてみたいと思います。

カードの種類を選択する

公式サイトの手順に従って(笑)、まずはカードの種類を選択します。

時点では、選べるカードは以下の7つ(実質5種類ですが理由は後述します)です。それぞれ強調するポイントが違うので、実装したいウェブページやサービスの特性によって選ぶのが良いかと思います。

  • Summaryカード
    もっとも一般的なカードです。リンク先のページタイトルや説明文、サムネイル画像、ツイッターのアカウント情報を含めることができます。

  • 大きな画像のSummaryカード
    基本的にSummaryカードと変わりませんが、画像がツイートの横幅いっぱいに表示されます。指定できる画像の大きさや容量はSummaryカードと同じです。

  • Photoカード
    こちらのカードはに廃止されました。恐らく選択自体は可能だと思いますが、指定しても上記「大きな画像のSummaryカード」として表示されるようです。

  • Galleryカード
    こちらのカードもPhotoカード同様、に廃止され、「大きな画像のSummaryカード」に統合されています。「ギャラリー」という名の通り、元々は複数画像を表示するために用いられていましたが、統合により一枚しか表示できなくなっているため、わざわざ指定する意味はないでしょう。

  • Appカード
    アプリ宣伝用のカードで、アプリの概要やダウンロードリンクを表示することができます。ユーザーのOSによって表示内容を変更することが可能です。例えば、iPadやiPhoneなどのiOS搭載機ではApp Storeの、Android端末ではGoogle Playのダウンロードページを指定することが可能です。ちなみにそれぞれのOSで提供されているTwitter公式アプリ内でも表示されます。

  • Playerカード
    音声(音楽)または映像メディアをツイート上で再生することができるカードです。ただ、実際に表示するためには事前審査が必要みたいですので、手間は掛かるかもしれません。

  • Productカード
    商品やサービスの表示に適したカードですが、こちらもに廃止されています。ただ、Summaryカードに統合されていますので、機能自体は生きています。

ウェブページにコードを記述する

表示したいカードが決まったら、次は表示用のタグをページに書いていきます。

ただ、特定のカードに決めたからといって、そのカードしか指定できない訳ではないです。ページの内容に応じて、適したカードを表示するよう設定していきましょう。

今回は基本中の基本であるSummaryカードを設定します。

実装方法は簡単で、ヘッダータグの中に下記のようなコードをほんの数行追加するだけです。各タグの詳細やここで記述されていない種類のタグについては、公式ページをご参照ください。


<meta name="twitter:card" content="summary" /><!-- カード種別の選択 -->
<meta name="twitter:site" content="@ツイッターのアカウント名" />
<meta name="twitter:title" content="ページの表題" />
<meta name="twitter:description" content="ページの簡潔な内容" />
<meta name="twitter:image" content="表示したい画像のURL" />
<meta name="twitter:url" content="ページのURL" />

すべてのページに上記のコードを記述しても良いのですが、WordPressなどであればヘッダーの中に書いておけば書き漏れがありません。その場合はTwitter Cardsの部分だけ別ファイルとして切り出して、ループ内でWordPress関数を呼び出していく感じになると思いますが、こちらについては後日OGPの記事を書きますので、その時にまとめて説明したいと思います。

表示確認を行う

ページにコードを記述したら、ちゃんと表示ができるか確認を行います。

実際に当該ページを含んだツイートをするという手もありますが、公式ページに検証用のツールが置いてあるので、こちらを利用しましょう。

公式ページの手順では、検証を行った後、承認を受けるようなことが書いてあるのですが、私は特にそのような手順を踏まなくても表示することができました。

ツイッター・カードのプレビュー画面

検証時に表示される「*.ドメイン名 is whitelisted for summary card」なるメッセージを見る限り、ドメインがブラックリストに登録されているような場合に手順が必要となるのではないかと思います。もしかしたらブログサービスとかオールドドメインとかを使っている場合は、他の人や以前利用していた人がやらかしちゃっているかもしれませんので、承認が必要となる可能性があります。今後、確認する機会がありましたら、別記事でアップしたいと思います。

手順は以上です。

これでつぶやきにカードが表示されるようになります。

ウェブサイトのレイアウトを考える

ウェブサイトを作成するにあたっては、事前に様々な事柄を考えておく必要があります。

基本的なところでは、ウェブサイトのタイトルやURLなど、公開以前に設定が必須となるものもありますし、そもそも何を書くのか、という動機的なものもあるでしょう。また、企業など営利目的でウェブサイトを運営する主体は、(お金が余っている場合は別として)誰をターゲットにどのようなメッセージを送るのかをあらかじめ決めておかなかればいけません。

このサイトは以前書いたように完全な見切り発車で立ち上げてしまった訳なのですが、それでも一応タイトルやURL、ホームページを運営する目的や書く内容などはある程度事前に考えています。

そこで本日は、これらの情報を読み手に効果的に伝える手段の一つであるウェブサイトのレイアウトについて考えてみたいと思います。

レイアウトとは何か

ところでレイアウトとは何でしょうか?

本題に入る前にインターネット上の百科事典であるWikipediaの定義を参照してみましょう。

レイアウト(英語: layout, lay-out)とは、デザイン(紙、ウェブ等)、建築設計、インテリア(展示会場・展覧会場設計、ショールーム設計などを含む)、書籍・雑誌・新聞などの編集等々において、何をどこにどのように配置(割り付け)するかということ、また、そのような配置(割り付け)をする行為も意味する。

要は配置のことですが、強調するならばどこに何をどのように置くかといったところでしょうか。新聞や展示などは様々な種類の情報やものが対象となりますが、ウェブサイトの場合は記事やメニュー、サイドバーやウィジェットなどもうちょっと限定されていますよね。そうすると読み手に対して、どこに何をどのように配置すれば効果的に情報が伝わるかと言えるのではないでしょうか。

どのようにレイアウトするか

それでは、一体どのように配置するのが適切なのでしょうか。

ネット上に数多あるウェブページを見ても、正解を一つに絞るのは難しそうです。ブログサービスなどでは、デザインの設定画面で「左カラム(左サイドバー)」か「右カラム(右サイドバー)」か、あるいは「両カラム(左右サイドバー)」かを選ぶところがありますが、最大公約数的にはこのあたりが妥当なところなのかもしれません。どれを選択するかは、つまるところ(外観も含めた)目的に応じて自然に決まってくるものなのでしょう。

では、目的とレイアウトの関係とはどのようなものでしょうか。「読み手に対して、どこに何をどのように配置すれば効果的に情報が伝わるか」という観点からすると、まずは読んでもらうことを目的に据えたいところですが、世の中にはその枠に収まらないウェブサイトもあります。

例えば、SEO目的のサイトです。今は検索エンジンが対策を取ったため、それほどでもなくなりましたが、一昔前は特定のキーワードの検索結果で上位表示させるために、当該キーワードを羅列したり、上位表示させたいサイトへのリンクを貼っただけで内容がないウェブサイトなどがありました。その時はクローラー(検索エンジンがウェブサイトの分析に使うプログラム)の動きを意識して、左にキーワードを並べた記事、右にサイドバーを配した右カラムが優位なんてことも言われていました。私も昔Webマーケティングの仕事をやっていた時に「クローラーは上にあるキーワードの方が重要だと考える」と教わりましたが、サイドバーの位置なんてCSSで変えられるので、あんまり意味はないんじゃないかと思っています。実際のところは分かりませんが…

また、これもSEOと関係があるのですが、バナー広告だらけのページもありますね。あれも特定のキーワードの検索結果で上位表示させて、とにかく人を集めて一つでも多くクリックしてもらうのが目的なので、一番目立つところにバナー広告が貼り付けられています。一番といえば、ド真ん中なんでしょうけど、そこまで主張しない場合は、人の目の動きを意識して配置すると効果的らしいです。とはいえ、最近は検索エンジンの方が内容の薄っぺらいページを上位表示しないようになってきているので、左のサイドバーに置くか、記事の上の方にさり気なく貼り付けたりしているのが多いように見受けられます。

ただ、人間の目の動きを意識するのは、普通のウェブサイトでも大切なことだと思います。「Zの法則/Fの法則」なんていうのがありますが、うまく活用すれば読みやすさに繋がりそうです。結局のところ、読んでもらってナンボですから。アラビア語とか右から左に読む人にも通用するのか気になるところですが…

で、結局どうするのか?

さて、それで当ウェブサイトのレイアウトはどうなったのか。

現在のところは、ご覧の通り両カラムになっていますが、将来的にこのままにするかはまだ決めていません。一応、ホームページ作成の目的は「自分広告」なので、読んでもらうことが第一なのですが、広告運用とかSNSマーケティングとかもやってみたいというのが本音です。ただ、間違ってクリックさせるようなことはしたくないので(そもそも広告のガイドラインにも抵触すると思いますし)、外部のウェブサイトに移動する場合は、それが分かるようにしたい。そこで暫定的に採用したのが、左サイドバーは記事のカテゴリーやタグなどを中心とした内部リンク、右サイドバーはSNSのウィジェットやバナー広告などの外部リンクという両カラム構成です。

ただ、これも最終解ではなく、右サイドバーが全くクリックされないような状況であれば、改善を図ることになると思います。結局のところ、PDCAサイクルを回しつつ、目的が達成できているか確認していく、というのは最適解なのかもしれません。

見直すことになったら、またその経緯を記事にしていきたいと思います。

ウェブサイトのデザインについて

今週二度目の投稿です。

本日はこのウェブサイトのデザインについてお話したいと思います。

皆さんお気付きの通り、このウェブサイト、とても読みづらいです。

現在の状態は、レイアウトらしきものは確認できるものの、記事の入るメイン部分とサイドバーがベタッとくっついており、どこからどこまでがサイドバーで、どこからどこまでが読むところなのか、判別しづらい見た目となっております。

検索バーなんて途中で切れちゃってますし、背景も潔いほどの白ですし…

まさしくインターネット黎明期のホームページはたまたカラーテレビ以前の代物か!といった様相を呈しております。

さすがに(近い)将来は今みたいな見た目ではないと思うので、敢えて現在の状態をキャプチャしておきますが、こんな感じ↓です。

デザインがされておらず、読みにくい状態のウェブページ

その理由については、RIM Worksのセンスがないとか、手抜き工事であるとか諸説あるのですが、「割り切った」または「開き直った」というのが本当のところです。

それは、一つにはウェブの世界に「考えるよりもやった方が良い」という哲学(というか風潮)があるということもありますし、もう一つは自分の性格を考えてのことです。

本来の私の性分ですと、事前に色々下調べをして完全に準備ができてから始める、という流れが自然なのですが、これまでの経験上、それだといつまで経っても始まらないという状態に留まりがちでした。

こういうのを何回も繰り返しているうちに自己嫌悪に陥っていくのですが、そこで始めないよりはマシとかどうせ最初の方なんて誰も見てないなどと開き直ることを覚え、こういう恥知らずなことも平気でこなせるようになってきたのです。

ただ、これって必ずしも悪いことではないんです。

これだけ価値観が多様化した世の中になると、自分で完璧だと思っていたものが他人にとってはそうでもない、というようなことが多く起こるようになります。また、自分の作品に磨きをかけている間に流行が過ぎてしまう、というようなこともあるでしょう。

それならば、取りあえず必要最低限のものを出して、そこから改善していった方が生産的である、という考え方が出てきても不思議ではありません。

自己弁護のように聞こえる、というかそれ以外の何物でもないのですが、業界とか状況によっては取りあえず始めてみることが大事だったりするのです。別にそれを体現するためにこんな残念デザインを放置している訳ではないのですが…

ちなみにこのウェブサイトはWordPress(ワードプレス)で作っているのですが、設定しているテーマは_s(アンダースコア・エス)を基にしたものです。今後はこのツルっとした見た目を改善していく、というのもブログで紹介していきます(おっ、そんな隠れた目的もあったんですね)ので、乞うご期待!

念のため、最後に一言。

お仕事としていただいたウェブサイトは注文通りに納品いたしますので、どうぞご安心を!

ウェブサイト開設のお知らせ

はじめまして!RIM-Worksと申します。

何か団体っぽい物言いで始まりましたが、実際には一人でやっております。

そんな私は何者かと申しますと、都内某所に妻子と暮らす30代の男でございます。

以前はサラリーマンとしてIT企業に勤めていたのですが、現在は訳あって主夫あるいはイクメンという名の無職者となってしまいました。とはいってもリストラとかではなく、もっと家族と時間を過ごすために自発的に退職したのです。

カッコよく言うならば、フリーランス・エンジニアといったところでしょうか。

さて、それでこのウェブサイトは何かというと、端的にいってしまうと私という商品の広告です。

それは、ある時はポートフォリオ・サイトであり、またある時は作業日誌であり、そしてまたある時は商品のレビューという名のアフィリエイトであるようなものです。

時折、日々の恨みつらみを吐き出すブログ的なものにも変わります。

基本的に自己本位な広告ではありますが、似たような境遇の人あるいは何か情報をお探しの方のお役に立てれば嬉しいです。

ふつつかものではございますが、以後何卒よろしくお願い申し上げます。