メッセージボードの有効な使い方と導入の仕方

メッセージボードとは？

「お知らせ」という形の更新頻度の高いものであったり、「プロフィール」や「サイト説明」などほぼ固定の内容の場合もありますが、更新した記事のリストとは別で設ける某のことを指します。FC2ブログでは プラグイン3 を用いた掲載と言えばピンとくるかもしれません。例えば以下のようなもの。

グローバルナビゲーションの下に「お知らせ」というボックスがありますね。これのことです。この位置への配置をFC2ブログでは「プラグイン3を利用して行う」という独自の歴史があるようです。

スイートスポットの概念

個人的意見として、私はどちらかというとメッセージボード 反対派 です。とは言っても推奨できるパターンというのがあり、十把一絡げで否定するわけではありませんので誤解の無いようにお伝えしておきます。

で、テンプレート製作で最初からこのメッセージボードを入れてほしいという要望があるにはあるんですが お応えしていません。その理由も読み進めて頂ければ理解してもらえるのではないかと。

先に結論を言うと

• 推奨 --- 短文, 旬な内容(時系列に関わりあり)
• 非推奨 --- 長文, 常に内容が一定

えっ？メッセージボードの内容って基本的に固定でしょ？と思われたかもしれません。でもまぁちょっと聞いてください(笑)

赤く囲った部位、これは各々一番目立つ場所、スイートスポット と呼ばれます。細分すると主に「F型」「Z型」「I型」があり、これは閲覧者の 目線の動き を指しますが、その型分類いずれに属していたとしてもこのスイートスポットはほぼ共通です。つまり 最も美味しい場所 だと言えます。アフィリエイターさんがこの付近に広告を掲載したがるのはこれが理由です。

文章の内容

推奨できるパターンは例えば、

• 素材配付や商品販売などを行っており、新作の広報をする
• サークル活動や展示などをしており、メンバー募集や開催日時や場所の案内をする

細かく言えばキリがありませんが、上記のような場合には すぐに気づいてもらう ということが大事ですよね。例えば期限のついたものであったり、情報として見落としてほしくない内容など掲載がそれにあたります。これらをスイートスポットに掲載するのは至って合理的な方法だと思います。

逆に個人的に非推奨のパターンは

• いつ見ても内容が同じ

例えば「私はxxです。yyyについて書いています。」といった自己紹介的な内容。自己紹介というのは記事よりも優先される事柄ですか？という点を考えた方が良いと思うんですよね。

初見の方がトップページを訪れた時、メッセージボードはほぼ確実に目に入ります。その点については有効なんですが、度々訪れてもらえるようになったとして、毎回同じ文言が一番目立つところに記載されているとなると 読み飛ばしコンテンツ と化してしまいます。「何べん同じこと言うねん？もう知っとるし。」という印象に変わってしまうんです。

読み飛ばし部分が長文ともなるとこれはもう ストレス です。文章が長ければ長いほどストレスの度合いは増します。

私がメッセージボードをデフォルト採用しないのとプラグイン3をヘッダー下に配置しない理由は 文章量と文章内容のコントロールができない からです。特にプラグイン3をメッセージボード用にしてしまうと、ある人は1つだけかもしれませんが、またある人は5つ6つと多くのプラグインをカテゴリ3に登録してしまう場合も。そのコントロールは製作者にはできません。

また内容についても同じです。「タグ一覧」「コメント一覧」など 副情報 をメイン情報(記事)よりも美味しい場所に設置する意味(笑)

ただこれは私の方針であって、見方を変えると 足すよりも削る方が簡単 ですよね。特にhtmlやCSSは消すのは簡単なんです。ですから事前に入れてくれている作者さんもいらっしゃいます。それは親切心であって、私が厳しいというか意地が悪いだけ ←

結局ね、ここでも アナウンスの難しさ というのがネックになってくるんですね。例えばメッセージボードを入れておいて文章内容は「lorem ipsum」(よく用いられるダミーテキストです)としておいたとします。loren ipsum(ろれん いぷさむ)の意味をご存知の方は ここは任意で書き換えなさい、という意味だな とすぐに判断できるのですが、ご存知なければ そのまま放置される可能性が高い。プラグイン3でも「掲載プラグインは1つに絞ってください」と私がいくら自分のこのブログに記載したとしても、訪れて読んでくれなければ伝わることはありません。

なので本件とはちょっと逸れてアドバイスなんですが、共有テンプレートを採用したら 製作者のブログを訪れる と良いですね。そして 該当テンプレートについて書かれた記事を読む ことです。そこにはいくつかのアドバイスや注意点などが記されているかもしれません。

文章量

例えば以下のような内容だとします。

パソコンの方でも結構場所取ってるんですが、今最も重要のはスマートフォンでの表示 なので見て頂くと、スイートスポットどころか above the fold全てを使い切ってもまだ足りていない 様子が伺えます。above the fold(あばぶ ざ ふぉーるど)というのは日本語的には ファーストビュー のことで、初期状態(スクロール前)で画面内に収まっている範囲のことです。

何度も言うように既知の内容というのは飛ばしスクロール対象ですから文章量が多いと時にはイライラしてしまうことも。メッセージ内容の編集はパソコンを利用して書く場合が多いのではないかと思います。スマートフォンでは 自分が思っている以上に行数が増えている 点に留意してください。画面が狭くなれば 折返し の機会が増えます。結果縦幅(高さ)が想像以上に増えてしまうことに。

掲載ページ

個別記事での掲載はおすすめしません。

Googleなどの検索から訪れた方が最初にたどりつくのはトップページではなく各個別記事であることが大半です。検索ユーザーは 欲しい情報をすぐに受け取れる ことが最優先で、ブログ主が何者であってサイトの目的な何であるのか、などついては今すぐ欲しい情報ではありません。検索ユーザーにこそabove the foldが大事。開いたページが関係のない内容で埋め尽くされていれば即離脱される可能性が高くなりますよね。

トップページの 一番最初のページのみ にしておくことをおすすめします。ページを繰るたび何度も同じ内容を読ませる必要はありません。

導入の仕方

【html】

<!--index_area-->
<div class="header-board">
  <div class="header-board-title">お知らせ</div>
  <div class="header-board-desc">
    ここにテキスト<br>
    ここにテキスト
  </div>
</div>
<!--/index_area-->

改行したい文章の末尾には <br> が必要です。最終行の末尾には不要。

【CSS】

.header-board {
  margin-bottom: 20px;/* メインコンテンツとの距離 */
  border: 1px solid rgb(200,200,200);/* ボックス全体のボーダー */
}

.header-board-title {
  padding: .5em 1em;/* タイトル部位テキスト上下余白 */
  background: rgb(243,231,231);/* タイトル部位背景色 */
  color: rgb(51,51,51);/* タイトル部位フォント色 */
  font-weight: bold;/* 太字指定 */
}

.header-board-desc {
  padding: 1em;/* 文書内容上下左右余白 */
  background: white;/* 文書内容部位背景 */
  color: rgb(51,51,51);/* 文書内容部位フォント色 */
}

上記CSS内容はサンプルに用いたものと同じ指定です。テンプレートによって背景色やボーダー色など適宜変更の必要はあるかと思います。

CSSはスタイルシートの末尾への追加でOKです。htmlを記載する位置 はテンプレートによって異なります。私のテンプレートの場合はほとんどが <main id="primary"> の 直下 ですが絶対ではありません。記載位置についてのご質問は各テンプレート専用記事で承ります。ただし装飾(CSS)はご自身でできる範囲内で行うようにしてください。各個人向けのCSS提供は致しません。

まとめ

昔からhtmlの世界では 記述順は重要度に比例する と言われています。つまりより重要な内容はhtmlのより前方(上の方)に記すべし、とされていました。ですが今html5時代になり、各ブロックの持つ役割を明示できるようになったので以前ほどうるさくは言われなくなりました。

それでもやっぱり「より重要なものはより前方に」というセオリー自体は健在。何故ならばhtmlのレンダリング(描画)は原則、書き順と同じなので、つまりはそれがabove the foldなどの概念に直結するからです。ですからコーダーという立場からはメッセージボードをメインコンテンツよりも上に掲載するというのは多少モヤっとするものなのです(笑)

とはいっても先に「推奨」という形でお伝えした「短文かつ旬な内容」については大いに意義があると思いますので、必要な方は導入されても良いのではないでしょうか。そして何かを導入する時には 自分以外の人間にとってそれが本当に必要かどうか をまず考えると良いと思います。

私の現在のブログは表紙ページ(エンターページ)があり、いつも訪れてくださる方へは邪魔になっていると思うんです。ですが「テンプレートをWordpressで使いたい」というお問い合わせが結構多く、それを弾くために「for FC2 user」を明記しています。なので理由はちゃんとある(笑)

再度念押しですが、メッセージボードの掲載自体を否定する意図はありません。そして記載内容についても自論を述べただけで私の意見に沿わないという場合に無理に従う必要などどこにもありません。自分が納得できる形で運営されるのが一番です。