今回は主にFC2ブログの 要約タイプテンプレート についてです。
web一般で主流のデザインは今や リスト系, カード系 と呼ばれるものになっています。そういう意味では「全文タイプテンプレート」は使い方によっては流行遅れかもしれません。
グリッドレイアウト
こんな風に各コンテンツがほぼ同じサイズ、ほぼ同じ見た目で 整列 しているものが グリッドデザイン または グリッドレイアウト と呼ばれます。グリッドには「格子状の分割線」であり、「その線に沿わせる」のがグリッドデザインです。
グリッド系レイアウトという大枠の中でもさらにいくつかの細分化があります。
メイソンリーレイアウト
「変則グリッド」という言い方もできるかと思います。各コンテンツの サイズが異なる ものをレンガ状に詰めて並べるのが メイソンリーデザイン または メイソンリーレイアウト です。メイソンリーとは元々「石積み」「レンガ職人」を表す英単語で、フリーメイソンの語源でもあります。
メイソンリーのメリット
- イマドキっぽい
- 無駄なスペースが生じない
メイソンリーのメリットはその見た目です。なんかシャレオツ、的な。そして大きさの異なるコンテンツの上辺あるいは下辺同士を合わせて配置すると、小さい方は必然的に上下いずれかに余白ができますよね。その余白を詰めるのがメイソンリーの特徴です。
メイソンリーのデメリット
- 時系列を遵守しない
- 重たくなりがち(製作者の手腕による)
まず「時系列」なんですが、メイソンリーは見た目重視レイアウトですから、最も都合の良い組み合わせで配置を行います。通常「ブログ」というのは左を起点に右へ順に並べていくのが王道です。例えば記事を「新しい順」に指定している場合、左には5月4日の記事、その右横には5月3日、そのまた右横には5月2日、下の段左に5月1日、といった具合です。
ところがメイソンリーの場合は大きさの都合で例えば左に5月4日、その右横に5月1日、その右横に5月2日、下の段左に5月3日 …といったことが起こります。つまり 時系列と並び順が狂うことが往々にして有る という意味です。
続いて「負荷」について。メイソンリーを実現するには現状だと JavaScript に頼るしかありません。CSSだけでも可能っちゃ可能なんですが、その場合は「時系列順、左から右」の原則を守ることができません。現在では「左上 → 左下 → 右上 → 右下」といった感じで「縦に並べる」しか無いんですね。手法的には「multi column(マルチカラム)」というレイアウトです。メイソンリーはそもそも時系列を遵守しないとは言え、さすがに縦にブログ記事を並べてしまうというのはやりすぎ。他に「heightの値にvw単位を指定」といった方法もありますがこちらについてもブログレイアウトとしてはちょっと難あり。今後はCSSレベルで簡単にメイソンリーを実現できる日が来るかもしれませんが今のところはできない、と。
記事の並びというのはトップページに於いては一番のメインになりますよね。一番目立つのが記事の並びです。この「並べ」という作業にJSを用いた場合、一般的な「html + CSS」で並べるよりも速度が遅くなります。そしてメイソンリーには有名なjQueryプラグインがあるんですが、プラグインを用いると速度的にはあまり良いことにはならないんですね。
参考としてサンプル画像に用いた「Mocha」と「Lilting」について、「Mocha」はjQueryプラグインで実装しています。そしてスマートフォンでシングルカラムになった時に時系列の狂いを修正するスクリプト内容を追加しているのと(これをやらないと縦一列でも時系列がおかしくなります)、画像の遅延読み込み(lazyloading)を共存させるためのスクリプトも追加しています。一方「Lilting」の方はプラグインは利用せず最小限のネイティブJSで実装しています。メイソンリーとしてはかなり軽量に仕上がっているはず。要するに「Mocha」の方が負荷が高い、ということです。
メイソンリーの場合「シングルカラム時の時系列修正」「ページ描画を極力妨げない対策」などが必要になってきますが、これらは製作者の考え方や技量に左右されます。
メイソンリーレイアウトに向かないブログジャンル
時系列が重要なブログ です。当たり前の話ですが。例えば 小説 であったり、また例えば 回を追った説明記事 などを書かれる方ですね。小説の1話目の隣には3話目ではなく2話目が有るべきです。
ページ送りの種類
トップページのページ送りは大別して以下の3種が主流です。
- リスト型
- 前後ページへのリンクのみ
- 無限スクロール(ページ送りなし)
「無限スクロール」はスクロールするとどんどん記事が読み込まれるタイプです。
過去記事閲覧を重視するならリスト型一択
読みたい記事の選択時にトップページから当たりをつける場合「前後ページのみ」「無限スクロール」ではかなりしんどい。たまに総ページ数が1000超えの方で前後送りのみの方とかいらっしゃるんですが、そういう場合はもうトップからの移動は期待しないほうが良いと思います(笑)
一番注意が必要なのはやはり「無限スクロール」ですよねぇ (´・ω・｀)
閲覧時に「ブラウザバック」することがよくあるかと思います。ブラウザのメモリの状況によっては 先回開いた内容をリロードすることがあります ので、例えばすっごいたくさんスクロールしたのに戻ったらまた最上部まで戻っている… といった状況に。これは特にスマートフォンでは頻繁に起こります。
SNSなど比較的短文でその場で読んでその場でコメントして… という場合には無限スクロールで十分です。Facebookなどが良い例ですね。ですが ブログというのは個別記事を開いてもらってナンボ ですし、主要ページ種を行ったり来たりするのもブログの特徴 です。トップから個別記事へ、個別記事からまたトップへ、さらにそこからカテゴリ別ページへ、再度トップページへ、など。起点となるトップへの行き来を困難にさせるのが無限スクロールです。
ブログ管理人が「最新記事のいくつかを開いてもらえれば良い」という方針なら良いんですが、そうでない場合はやはり「リスト型」を選択するのが望ましいと思います。ページ送りはとても大事ですから特徴を知って自身にとって最良と思われるものを選ぶようにしましょう。
私的結論としては ブログに無限スクロールは圧倒的に不向き だと考えています。SNSでしか使っちゃいかんやつ、というか。
スピードを最重要とするならば前後のみ送りも視野に
FC2ブログの場合、前後のみのリンクであればJSが不要なのでページへの負担が最小限です。リスト型や無限スクロールはJS必須です。総ページ数が少ないなど条件が見合う場合には選択しても良いのかなぁ、と思います。ただ先の章で述べた内容と突き合わせて考えるようにします。
ページ送りは「自分で自分の記事が探せるか」を確認してみてください。記憶にある過去記事を自分ですぐに探し当てられるかどうか。もちろん管理画面を利用せずにです。自分で探せないのであれば他人はなおさら探せません。
パソコンとスマートフォンで特徴の違いすぎるテンプレートを設定すべきではない
この点に於いては レスポンシブデザインテンプレート が有利です。ただし設定は必ず確認してください。
FC2ブログでレスポンシブテンプレートを正しく使う方法
FC2ブログは数多ある公式・共有テンプレートから気に入ったものを無料で選択・利用できるようになっています。説明文の中に レスポンシブ という文言の付いているテンプレートが最近ではたくさんありますよね。 何故それが説明内に書いてあるかというと 非常に大事な特徴だから 書いてあります。 伝える必要の無いものであれば最初から書いてない。...
パソコン版テンプレートとスマートフォン版テンプレートを別々で設定する方は デザインが似ている というだけではなく 使い勝手 の面も気にした方が良いですね。特に ナビゲーションリンク が一致しているかどうか、ページ送り種 の一致、コメント欄の入力項目 の一致など。
で、「私のブログはパソコンユーザーがメイン」と決めつけてスマートフォン閲覧者をハナから蹴っている方がいらっしゃるんですが、スマホユーザーというのはかなりシビアですからスマホで見づらいとなればもう訪れてはもらえないと思ってください。「パソコンユーザーがメイン」なのではなく「スマホユーザーが来てくれなくなっている」のかもしれませんよ。
Googleの方針は スマホ第一主義 です。これはもう誰にも覆すことはできませんし、2019年7月1日以降に開設されたサイト(またはこの日以降にクローラーに発見されたサイト)は 強制的にMFIが適用されます。
* MFI = モバイルファーストインデックス, スマホでの見た目や閲覧状況などが最優先で格付け及びインデックスされること
既存のサイトでPCからの閲覧数がかなり高く、PC閲覧状況で検索上位に位置しているサイトについてはMFIの適用が遅くなっているはずです。MFIに切り替わった時に大きく順位変動が生じそうなサイトのことです。ですが7月からは新規サイトだけでなく恐らく新規ページ(新規記事)についてもモバイル最優先になると予想されます。ですから スマホでの見た目や使い勝手を絶対に無視してはいけない ということです。自身がスマホを所有していないのであれば何らかの方法で目視確認を行ってください。
スマートフォンやタブレットを持っていない人はこのサイトで見え方を確認できるよ
これからのwebは スマートフォンでの見え方を最重要視するべし！。 ということで、スマートフォン持ってない・タブレット持ってないという方がパソコンから簡単に自分のブログの見え方を確認する方法をご紹介。 各ブラウザの検証機能を利用すれば一発でわかるのですが、どうも難しい…というよりも、食わず嫌いな方が多いようで。 いっそweb上のツールサイトを利用した方が簡単な感覚があるのかなぁ、と。 その前になんで今...
スマホから見たら何かしらのコンテンツがはみ出している、ですとか、フラッシュが掲載されているといったものはもうお話にならないレベルです。これらはGoogleから 重大なモバイルユーザビリティ上の問題を検出 として警告を受ける類のものです。
自分のブログがスマホユーザーにどう見えているかを確認する手っ取り早い方法は、ブラウザのアドレスバー内のURLの末尾に ?sp を追加してください。これはレスポンシブテンプレートを選択した際に最重要なレスポンシブ設定ができているかどうか不明な場合にも有効な方法です。
webのこの風潮から最も有利なのはレスポンシブデザインを採用することで、この点は既にGoogleが公式に言及しています。それでもスマートフォン専用版を利用するという方は、FC2ブログでダウンロード可能なスマホ専用版テンプレートの中から「これだ」と思えるものを探してください。デザインだけを見て選ぶと失敗します。使い勝手・ユーザビリティを重視するようにしてください。
スマートフォン版の非表示を勧める理由
以前から何度も記事にはしていますが、スマートフォン版と併用する人のなんと多いことか ｡(ﾟうｪ´ﾟ)ﾟ｡ レスポンシブデザインの最大の強みは「見た目」だけではありません。本質を理解しましょう という記事です。 結論から。 レスポンシブデザインを選択したならスマホ版は非表示に！！！...
There are no comments yet.