概要 ▶ ソーシャルメディアでよりよい情報提供をするために、ウェブページを作成する際に、OGP（Open Graph Protocol）のメタデータを設定することが重要です。TwitterではOGPではなく「Twitter Cards」という独自のメタデータを設定することで、以下のスクリーンショットの様にツイートに書いたURLの情報を読み取って、タイトル・サムネイル・概要などを付加し、表現を豊かにすることができます。
ブログやウェブサイトを作成する上で、今やソーシャルメディア（SNS）を意識しないで作成することは難しくなってきています。
このため、ソーシャルメディアでよりよい情報提供をするために、ウェブページを作成する際に、OGP（Open Graph Protocol）のメタデータを設定することが重要です。
TwitterではOGPではなく「Twitter Cards」という独自のメタデータを設定することで、以下のスクリーンショットの様にツイートに書いたURLの情報を読み取って、タイトル・サムネイル・概要などを付加し、表現を豊かにすることができます。（Facebook・Google+のような表示になるとも言えます）
これはツイートを見ているユーザーに予めどのような情報が書いてあるのか分かって便利な機能です。
全てのサイトがTwitter Cardsに対応したら、ツイート内にタイトルを書かなくても良くなるかもしれませんね。
そうすると、140文字中でツイートできる内容がもっと増えるので、よりツイートの内容が濃いものになる、Twitter社ではそんなことも考えるのかもしれません。
さて、この便利なTwitter Cardsですが、設定を行ってもサムネイルの画像が正常に表示されない場合があります。
サムネイルが明らかに色が変です。それも横に圧縮されている状態です。
サムネイルの元になっている画像は以下の画像です。
この「[8019]DTPやデザイン作業で使用するIllustrator・Photoshop・InDesign・Acrobatのバージョンは？(2012年冬) | DTPサポート情報」のページのOGPの情報としては以下の設定がされています。
<meta property="og:image" content="http://blog.ddc.co.jp/mt/dtp/assets_c/2012/12/20121204-adobe-version-00-thumb-160x160-7881.png" /> <meta property="og:image" content="http://blog.ddc.co.jp/mt/dtp/images/20121204-adobe-version-00.png" />
OGPの「og:image」には先ほどのバナー画像と160×160ピクセルにMovable Typeが切り出し生成した以下の画像が設定されています。
まず、Twitter CardsではこのOGPの160×160ピクセルの「og:image」を使っていないことが分かります。
通常、FacebookやGoogle+でシェア・共有する場合は、この画像が使われているので無視されているようです（理由はきちんとあります）。
Twitter Cardsの表示では、横長のバナーから中央部分を切り出して、以下の120×120ピクセルの画像となっており、問題になっているページでは色彩情報やサイズ情報の不具合が発生しているようです。
この横長のバナーは保存形式が「PNG 8bitカラー」となっています。
他のページでバナーの保存形式を「JPEG」「PNG 24bit（32bit）」としている場合にはこの問題は発生していません。
この問題は自分だけの問題なのか？と思って検索したら、TwitterのDiscussionsのページ（掲示板・フォーラムのようなもの）で問題を提起している人がいました。
It seems that there is a problem in the conversion method of an image format at summary card.
The example is here. https://twitter.com/kconf/status/272221929983844352
This original image is 8 bit PNG format. http://bit.ly/1175kCn
But this image is lost the color by the process of conversion and changes into the gray scale.
The converted image is here. http://bit.ly/11n6mJz
Reply to comment | Twitter Developers
Twitterの開発者のレスポンスは以下の通りで、Twitter側の問題だと仰っています。（2012年12月1日のレスポンス）
Thanks, good catch, this looks like it's a PNG problem on our side.
Reply to comment | Twitter Developers
他の方へのレスポンスもあり、修正項目として取り入れることが表明されていました。（2012年12月4日のレスポンス）
Thanks, we are fine tuning some features for PNG, good catch, I will add it to the fixes to be implemented.
Reply to comment | Twitter Developers
結果としては、まだTwitterへ報告されて日が浅いこともあり（この記事は2012年12月8日に書いています）、修正・解決とは至っていません。
ただ分かっている回避策としては、Twitter Cardsの画像として使う形式を以下のいずれかにすれば大丈夫です。
- PNG形式：24bit（32bit）カラー
- JPEG形式
早くこのPNG形式の8bitカラーの問題が修正されると良いですね。
それでは。
余談
本文中に出てきた、DTP・デザインで使用するアドビソフトのバージョンアンケートを12月31日までやっていますので、ぜひご参加下さい。現在200名ほどのご回答を頂きました。ありがとうございます！