RSSフィードを考慮したデザインのすゝめ

ブロガーならいずれは抱えることになる問題である。ブロガー達は、ブログのコンポジションパネルを使い、細かいところまで気を配り、美しいエントリをデザインする。そして、投稿した後、RSSリーダーを開き、醜い惨状を目にすることになるのだ。

これは単純な問題である。RSSフィードは、ウェブページの進んだデザイン技術および位置調整技術を受け入れていない。RSSフィードは、CSSもJavaScript（例外はある）にも対応せず、作品のフォーマットを基本的なHTMLに頼っている。

そのため、デザイナーがウェブページとエントリを最新のブラウザーに合わせて作成しても、RSSリーダーは必要最低限の装備しか持たないため、台無しにされてしまうのだ。

どうすればこの問題を解決することが出来るのだろうか？そこで今回は、頻繁に発生する問題の幾つかを乗り切るテクニックを紹介しようと思う。

イメージ

イメージのフォーマットは、RSSフィードをデザインする際の問題の中でもとりわけ困難な問題と言えるだろう。これは、WordPress（ワードプレス）のブログにとりわけ当てはまる。RSSフレンドリなフォーマットが投稿パネルから削除され、CSSベースのメソッドしか用意されていないからだ。

それはさておき、RSSフィードに見た目の良いイメージをフォーマットする方法が3つある。

1. 「Align」要素を利用する: まずは、「Align=”left’/right」をIMGタグに加える方法が考えられる。しかし、この方法には2つの問題点がつきまとう。まず、テキストがイメージに近づきすぎないようにパディング要素を加えなければいけない点。そして、「Align」要素は軽視されている。RSSリーダーを中心として、現在でも幅広く受け入れられているものの、技術的に妥当とは言えないだろう。
2. インライン・スタイル要素を利用する: 「Align」要素を利用する方法と同じように、インラインの「Style」要素を使い、イメージを左/右に寄せることが出来る。確かに「Align」の利用と似ているが、「Style」は嫌われているわけではない。しかし、RSSリーダーに幅広く受け入れられているわけではなく（少なくとも「Align」ほどではない）、スタイルシートと重複するため、この方法を好むコーダーは少ない。
3. イメージを別のパラグラフに掲載する: エントリを作成するとき、イメージをテキストとは別のパラグラフに掲載しよう。CSSフォーマットでは、すぐ傍に表示されるが、RSSリーダーで閲覧するとイメージがテキストの段落と段落の間に表示される。フルバージョンとは異なるものの、醜いわけでもない。

いずれの方法も功を奏するだろう。1つ目、または、2つ目の方法を採用するなら、簡単に実行することが可能なワードプレスの良質なプラグインを薦める。しかし、大抵の場合、イメージを専用のパラグラフに置き、エントリの作成を続ける方が遥かに楽である。

ヘッダー

CSSを利用することで、ヘッダーを自分の思い通りに操ることが出来る。しかし、複雑なフォーマッティングは、RSSフィードには通じない。そのため、CSSなしで閲覧した際に、サブヘッダーとして見た目のよいヘッダーを選ぶべきである。

最高の結果を得るには、H2またはH3をエントリのサブヘッドとして利用することを薦める。なぜなら、H4～H6は、通常のテキストと同じ、あるいは小さく見えるからだ。一方、H1は、通常のヘッドラインと同じように映ってしまうだろう。

デフォルトのサブヘッダーがH2かH3になるように設定しよう。CSSの変数を調整する必要があるかもしれないが、RSSフィードの見た目を改善する際に大いに役立つはずだ。

テーブル

テーブルは、イメージのように、大半のRSSリーダーでも表示されるが、位置調整は難しい。イメージを掲載する際の方法と同じ方法を利用し、テーブルの位置を調整することが出来る。

しかし、強調するためにセルに色を加える場合など、情報を表示させるためテーブル内でCSSが利用されると、大きな問題が発生する。例えば、損失を赤いセルで示唆し、緑で利益を表す場合などだ。

それでも、特定のテーブルを利用し、意味を普段から理解してもらう必要があるデータに対して、定期的に特別なCSSのクラスを設定しているサイトもある。可能な場合、とりわけエントリの中で多用しないのなら、このような変更は、テーブル自体に行うべきである。

ソーシャルニュースの要素

有名なソーシャルニュースのボタンの大半が、JavaScriptを必要としている。JavaScriptを採用しているRSSリーダーもあるが、稀である。そのため、高度な言語を必要としないリンク版を用意しておくことが肝要である。

大半のソーシャルニュースサイトは、RSSフィードでも利用することが可能な、基本的な「Add to」リンクを用意している。高度なボタンはサイトで利用するようにしよう。

FeedBurner（フィードバーナー）を利用しているなら、Feed Flare（フィード・フレア）を使えば、簡単に大半のポピュラーなソーシャルニュースサイトをRSSフィードのエントリに加えることが出来る。

エンベッドしたコンテンツ

YouTube（ユーチューブ）のクリップやポッドキャスト・プレイヤーなど、エンベッドしたコンテンツをエントリで利用する試みは浸透しているものの、RSSフィードでこのようなコンテンツを表示させようとすると問題が発生する可能性がある。これらのエンベッドは、そもそもJavaScriptが用いられていることが多く、RSSリーダーでは利用することが出来ない、フラッシュなどのプラグインや機能を利用しているからだ。

これらのコンテンツは出来るだけエントリから除外した方がいいだろう。しかし、絶対に必要なときは、行を変えるように心掛けよう（可能な場合は、エントリの下）。もし、JavaScriptが利用されているなら、「NOSCRIPT」タグを挿入し、RSSを介して閲覧している人に、サイトでコンテンツを楽しんでもらえるように工夫しよう。

また、ポッドキャストをエンベッドするためにフラッシュを利用しているなら、そして、ワードプレスのユーザーなら、MP3へのリンクも忘れずに加える必要がある。ワードプレスにポッドキャストを認知させ、適切なタグを生成させるためだ。大半のRSSリーダーは、フラッシュ・プレイヤーを利用することが出来ないものの、ポッドキャストのタグを表示させることは可能であり、読者自身のフラッシュ・プレイヤーでオーディオをストリームしてもらおう。グーグル・リーダーは、この機能を用意している。

結論

RSSフィードのコーディングはそこまで難しいわけではないものの、何らかの犠牲を払う覚悟をしておく必要がある。とりわけ、大量のイメージやその他のビジュアル要素をエントリに掲載しているブロガーは肝に銘じておくべきである。

エントリをデザインする際には、読者の多くはサイトではなく、RSSを介して読むことを思い出そう。そのため、RSSフィードが、自分のサイトと同じように問題なく表示されることを念頭に置いて作業をする必要がある。

些細なことだが、読者は感謝するはずだ。

ライター紹介: ジョナサン・ベイリーは盗用、コンテンツ盗作、そしてウェブの著作権問題をテーマに取り上げ、Plagiarism Today（プレジャリズム・トゥデイ）でブログを書いている。ジョナサンはコンテンツ盗作問題に対応するウェブマスターが正確な情報を集め、この変化の激しい分野で取り残されないようにこのブログを2005年に始めた。それ以来、コンサルティングサービスをウェブマスターや企業に提供し、彼らが現実的なコンテンツ保護戦略を考案できるように、そして効果的な著作権ポリシーを策定できるように支援している。ジョナサンは弁護士ではなく、彼が提供している情報も法的なアドバイスとして捉えるべきではない。

[原文へ]

1件のコメントがあります。