
大手ブログサービスである「Ameba」「Yahoo!(2019年12月で終了)」「Livedoor」それぞれの スマートフォン版 表示の良い点や特徴を見てみたいと思います。
目的
や、私がやりたかっただけ(笑)
Yahoo!は残念ながら終了が決定していますが、個人的に 最も見やすいスマホ版 だと思っています(いました)
失くすには惜しい機能など、記録として残しておこうかと。
何故この3社か
「FC2」や「はてな」は レスポンシブテンプレートでのブログ運営 に舵を切っているようです。実際FC2のスマホ公式テンプレートは2015年を最後に新しいものは追加されておらず、便宜上PC版にカテゴライズされているレスポンシブテンプレートの更新が主体になっています。はてなブログも同じ方向性ではないかと思います。
レスポンシブテンプレート(PC, スマホ共通)とスマホ版(スマートフォン専用)を比較するのはフェアではありませんので、レスポンシブの提供が無く、どのユーザーもほぼ同じ見た目・同じ使い勝手となるこの3社をメインに据えています。あくまでも個人的・客観的に印象を述べるだけで、批判や否定の意図は持ちません。
FC2とは関係ない、ということになりますが、「何が必要」「何が不要」「何が便利」など、またweb一般で最近主流になっているのは「どんな」形なのか、などを知ることで参考になりますし、もしかしたら良い点は取り入れることができるものがあるかもしれません。
Amebaブログ

Ameba ポータル用ナビゲーション
最上部にあるのが ポータル用ナビゲーション ですね。

このナビゲーションは上部固定なので常に画面内の定位置から動きません。そして滞在中ブログでの利便性ではなく、Amebaブロガー全般及び見込み客(アカウント非所有者)向けの内容です。ログオフ状態の方がクリックすると アカウント作成画面 へ誘導されます(検索以外)
ホントは自ブログ内に関連するナビゲーションを固定しておきたいところだと思いますが、Amebaではポータル優先・運営の目論見優先(笑)
ドロワーもありますがこちらもポータル的内容です。
Ameba ヘッダー

ブログタイトルは非常にこぢんまりとした表記になっています。フォローボタンよりも小さい(笑)
ただ「日本の」web一般では ブログ名はそんなに大きくしなくとも良い という傾向にあります。昔のブログ・サイトだとまずサイト名が上部に目立つようにドーーーンと表示されている、という印象が強かったように思いますが、今はどちらかというと控えめ表示が主流のようです。
その最大の理由は「記事本文が主役である」という意識ですよね。なのでブログタイトルよりも寧ろ記事タイトルの方が大きくなっていることが最近では多い。そして当然「スマホという狭い画面のデバイス」を考えると全体的にいろんなものがコンパクトになる傾向があります。それとはまた別にこれは自論ですが、日本語のフォントの見た目にもよるのではないかと思います。
欧米諸国のブログというのは日本とは逆で ブログ名を大きく表記する 方が一般的。欧文フォントはサイズが大きくても体裁が良いんですね。ところが日本語は フォントサイズが大きいと途端に野暮ったくなる という特徴が ^^;
デカフォントのダサ感を軽減できるのは「明朝体」ぐらいなんですが、ところが明朝体は太字にするとこれまた途端に野暮ったくなります。もちろん個人感ですよ?なので個人的には日本のブログデザインよりも欧米のブログデザインの方が多少「簡単」という感じです。フォントで悩まなくて済むことが多いためです(笑)
ただこのアメブロの場合はどうだろう。フォローボタンが 近すぎて 男性なんか誤タップ率が高そうな。それでもこのサイズであればテキストの折返し(ブログ名の途中での改行)の機会は少ないでしょうから、「変なところで改行しちゃって気になって仕方がない」という場面は少ないのではないかと思います。
Ameba 自ブログ用ナビゲーション

こちらが自ブログというか、滞在中ブログ用のナビゲーションですね。固定はされずスクロールで画面外へ流れていくタイプ。そして 横スクロールタイプ です。スマホでのナビゲーションの主流は 展開型 か 横スクロール です。なにせ画面が狭いのですから、パソコンのように「大量のリンクを横並びで2段」といったことはやりづらい。パソコンで2段ならスマホでは4段・5段にも渡る可能性あるいは画面外にはみ出す可能性があります。
スマホでの「展開(ドロワーやアコーディオン)」と「横スクロール」は現時点でかなりメジャーな方法ですから「ハンバーガーボタンとか言われてもわからない」といつまでも言っていないで慣れる(笑)
やっぱりwebでスタンダート的になっているものについては「慣れる」というのが最適解です。
Ameba 記事の並び

これはもう問答無用で リスト系レイアウト です。どこのサービスもほぼこうしたリスト系・カード系のデザインになっています。スマートフォンという小さいデバイスで記事を 探す には これが最も適した表示です。ですから FC2ブログでレスポンシブテンプレートを採用 している方で 全文表示タイプを好んでいる方 はこのあたりのweb事情をよくよく考えてから選択をしてください。
(全文タイプでも「追記」を利用した文章量コントロールをしている方はその限りではありません)
あとこうしてみると サムネイル画像が重要 という点にも気付くかと思います。パッと見ただけでもサムネイルがついている記事が目立つはずなので。サムネイルが無い記事は見逃されやすい と言い換えができるかもしれません。
個人的にこのアメブロのデザインで気になる点は、右(画像配置)には余白が無く、左(記事タイトル)には余白がある点。なんか「位置がズレてる」感がありませんか。私だけでしょうか (∵`)
あと記事タイトル下にかなり小さい表示で「いいね数」「コメント数」「リブログ数」などがありますが、これらをクリックしても直接その位置に遷移(ページ遷移 + ページ内オブジェクト移動)は行われません。ただ該当記事が開くだけです。これは他サービスもほぼ同じ。ちょっと不便だな、と感じるところです。
ただスマホではタップの範囲を大きめにしておかないと「リンクが上手く開けない」というユーザビリティ面の難が生じますので、アメブロの「右側(サムネイル画像)タップで画像一覧へ、左側タップで個別記事へ」という仕様はある意味正解です。私なんかは指先がネイルでゴテゴテでタップは指先の側面がちょっと触れる程度という人間なので「フォントサイズ9pxとかでもフツーに押せるよ? (∵`)」と思っています(笑)
小さな文字の「コメント」などのページに直接行けるのが良いか、タップしやすさを取るか、というこのあたりは難しい選択ですね。
Ameba ページ送り

これですよねぇ (´・ェ・`)
前後にしか移動できない という仕様です。250ページ目に行きたいときとかどーする。とはいえ大手サービスのほとんどがこの形です。欲を言えば リスト型 が良いですよね。「だいたいこのあたりのページにあったはず」といった 予測がついている場合 もあって、そんなときはページを繰るのが非常に手間なんです。
といっても URLの数字を書き換えれば良い だけなんですけどね。それを知っている人がどのぐらい居るのか、です。アメブロでは
page-x.html
URL末尾の緑の部分がページ数ですからここを任意の数値に書き換えればOKです。参考までに。ただスマホでのURL入力(特に一部書き換え)はめちゃくちゃめんどくさい、と多くの方が感じているはず(笑)

個別記事のページ送りが上記です。スクロールして画面内に入ると「気に入ったらフォローしよう」のバーがビヨンと右側から出てきます。個人的にはめっさウザいけれども、目立たせる という意味では正解です。スクロールするたび何度もこのアニメーションを繰り返さない点は好感が持てます(笑)
Yahoo!ブログ

Yahoo! ポータル用ナビゲーション

アメブロ同様ポータルのナビゲーションがありますが固定はされていません。そしてこれまた同じく ハンバーガーボタン で展開する ドロワー がついており、中身は滞在中ブログとは直接関係のない色々です。

Yahoo! マイページとマイブログ移動用リンク

Yahoo!から移転を余儀なくされたユーザーさんたちが「必要」だと感じているもののひとつがこれではないかと思います。他者ブログ滞在中でもすぐにマイページあるいはマイブログに飛べる リンクです。
FC2ブログはYahoo!のように全ブロガー(時には全閲覧者)向けのリンクバナーやナビゲーションというのは用意されていませんが、「マイページ」にあたるのが「Admin, アドミン」「Log in, ログイン」「管理画面」などと表記されているリンクです。各テンプレートの ナビゲーション部位 にそれらの文言があるかどうかを確認してください。そして「マイブログ」にあたるものは ありません。ログイン状態であっても他者ブログページから一発で自身が所有するブログへジャンプするボタンやバナーはありませんので諦めてください ←
FC2ではこれに似た感じの 検索バー というのがありますが、FC2ポータルトップへのリンクとブログ内検索しかありません。あとは広告(笑)
Yahoo!ブロガーさんだとここに「あるのでは?つか、フツーあるよね?」と感じる方も多そうですが実際にはありません。ただの広告です。そしてどのみちスマホデバイスでは自動的に検索バーは非表示化されます。
Yahoo! ヘッダー

ブログタイトルはやはり小さいですね。まぁどこのサービスも スマホ専用版は 基本小さいですよ。(レスポンシブはまた別)
リンクになっているのはブログタイトル部位と、プロフィール画像部位のみ。ヘッダー画像を設定している場合はその範囲もトップへのリンクになっています。そしてプロフィール画像タップでプロフィール説明ページへと遷移します。FC2ブログは プロフィールページはありません ので、独立したページとして必要な場合は「記事として書き、その記事のリンクを記載する」という方法を取ることになります。もちろん代替として「プロフィールプラグイン」はあります。こちらを利用する場合は独立ページではなく常にサイドメニューに掲載する、という形になります。
こういう 時系列 とは無関係な静的ページを一般的に 固定ページ と言いますが、FC2には提供が無いんですね。はてなブログは最近(数ヶ月前?)に導入されたような気がします(うろ覚え)
Yahoo! 記事の並び

当然ながら リスト系レイアウト ですね。アメブロと同様ブログ概要文無し、記事タイトルとサムネイル画像のみ、という構成です。で、個人的に 記事の概要文は無理に入れなくて良い と思います。読む人も少ないでしょうし。「あれば読むかもしれない」という感じですかね。ともかく狭い画面であることを考えると、概要を表記するより寧ろ 読みたいと思わせるタイトルづくり の方に力を注ぐほうが良いと思います。
「読んで欲しい」「読ませたい」と思うあまりトップにダラダラと文章を表示してしまう方も多いんですが、読むか読まないかは閲覧者が勝手に決めます。そしてRSS登録をしてくれたり、あるいはFC2でブロともになって新着を受け取る方はリンクをクリックすれば直接その個別記事に飛ぶはずですから「記事を読むのにワンクリック余分」なんてことは無いはずです。しばらくぶりに訪れた方でもトップに整然と記事タイトルが並んでいる方が「未読の記事」を探しやすいはずですYO
話をYahoo!に戻しまして、自ブログ用ナビゲーションが無いのは タブ切り替え の方式を取っているからです。
Yahoo! ページ送り

これよこれ。Yahoo!ブログの素晴らしい点のひとつ。リスト型ページ送り。何度も言いますが大手の主流は「前後のみ型」です。リスト型にするには複雑なJSが必要なのでページスピード面で劣ることはあるかもしれませんが、ユーザービリティ面の方が個人的には勝る。
アメブロの方で書きましたのでYahoo!のトップページURLも載せておきます。
yblog.html?p=x
Yahoo! 個別記事ページ送りとコメント投稿フォーム

ここも個人的に すごくイイ と思っているのですが、まず サムネイル画像がついている 点。まぁこれは別に無くても良いか、と思っています(ぇ?)
それよりも下に コメント投稿フォーム がついていますよね。記事と同じページに投稿欄のあるサービスって実はなかなか無いんです。アメブロも 別ページ で書かなきゃいけませんし、受信コメントの一覧も別ページ。Yahoo!は コメント投稿フォームも受信コメント一覧も記事と同じページにある んですよね。ですから作業の流れが非常に円滑です。
個別記事というのはブログ内で最も大事なページですから、関連する事項でのページ遷移は少ないに越したことはありません。コメントなどはまさに「記事に関連する事項」ですから、同ページ内に収まっているのが理想ですよね。
さらにYahoo!には コメント一覧 という独立ページがあり、これまでに受信したコメントをリスト形式で延々と見ることが可能です。「どこの記事に」書かれたかは重要でなく、ともかく受信した順に確認することができます。

これ何が良いかというと、日記ブログなんかはさておき、情報系ブログ記事や専門性の高いブログ記事などは コメント欄の内容が有益 であることが多いんですよね。そのコメント内容をリストとして見ることができる。そしてこのリストを一般閲覧者に可視化するかどうかはユーザーの選択性になっています。つまり非表示可能。
Yahoo!は「自分が誰にコメントしたか」がマイページでちゃんとわかるようになっていますが、さらにこの機能もある、ということですね。これは 寧ろFC2ブログに欲しい。可能っちゃ可能ですけどね。JSを使って作成することはできます。ただしページ種を犠牲にする必要が。まぁ「全記事リスト」になるかと思います。ただかなり無理矢理な形になりますので方法は紹介しません。
FC2へ移転時の注意点は、アメブロ・Yahoo!など多くのサービスと異なり、コメントする際に自動的に自分のブログへのリンクが記載されるというシステムはFC2には無い ので、自主的にURLを記載するようにしてください。一度入力すればクッキー情報の働きで次回からは自動入力になります。行ったり来たりは容易にしておかないと交流が困難ですし、訪問を受ける機会が減ってしまいます。そのためには よほどの理由が無い限りURLは記載する ようにしましょう。もちろん強制するものではありません。
余談になりますが、私個人がいつも思っているのは「スタッフブログへのURL無しコメントは時として損」ということです。ただ文句を言いたいだけ、という方も中には居ますのでそういう場合は除外するとして。何か問題や疑問が生じたときに、そのコメントにURLがついていれば「答えを知っている人」からの手助けが受けられるかもしれませんよね。そのためには「問題の目視確認ができるようにしておく」というのが大事。不平をぶつけるよりも答えあるいはそれに近いものを得られる方が得だと思うんですけどね (´・ω・`)
というわけで、Yahoo!のページ送り・コメントの仕様は他サービスに無い良い点だと思います。もったいないなぁ。ですがYahoo!の最大のデメリットは セマンティックな記事を書けない点 です。この点は他サービスに大きな遅れを取ってしまいましたね。もう終了ですから言ってもアレだけど。でもアメブロとかもそう変わらんかー (∵`)
そういえばYahoo!の個別記事は他サービスと 時系列が逆 になってますね。アメブロ・Livedoorは「左が新しい、右が古い」ですがYahoo!は逆で「左が古い、右が新しい」です。
Livedoorブログ

* 記事の様子が確認できないと説明になりませんのでスマホのモックアップ(mocup, 模型)からわざとはみ出させています
Livedoor ヘッダー

既出の2社と比較すると大きめですかね。ヘッダー部位は全面リンクになっておりタップしやすいです。
Livedoor 自ブログ用ナビゲーション

アメブロ同様 横スクロールタイプ ですね。ポータル用ナビは見当たりませんがLivedoorユーザーさんがログイン状態の時は表示されてるのかしら。私アカウント持ってませんので未確認です。すみません。
あとこのすぐ上に「ブログリーダーで読者になる」というリンクバナーがあり、LINEでRSSを受け取る ことができます。RSSというのは簡単に言えば 新着情報受取 のことで、マイページや管理画面に表示されるお友達の記事のリストもRSSです。LivedoorのRSSはLINE連携でもって行う、ということになりますね。
Livedoor 記事の並び

2社が リスト系 なのに対し、Livedoorは カード系 を採用していますのでスクロール量は多いですね。こちらもリスト系同様スマホ表示では最適解です。
そして 記事概要文 も表示されています。記事の書き出しを表示したい、という場合にはこうしてカードレイアウトにする方が無難。リスト系では文字の量によってはサムネイル画像とのバランスが悪くなりますので、記事タイトルの表示・概要文共に表記文字数の制限(省略)をかけることがあります。なので概要文が要る場合は「サムネイル大きめ + 概要文」で上下配置してカード系に仕上げる方が適していると言えるかもしれません。
また、カード系にするメリットは 個別記事以外に遷移するリンクを掲載しやすい 点です。アメブロで例に出しましたが、カード系の場合はリンクの上下に余裕を持たせることができますのでそういったことが可能。要はリンク同士は近すぎるとタップし辛いんですね。表示が小さめでもターゲット周りに余白を多めに取ることで改善になります。
ただしLivedoorは上記メリットに該当しません。カード全体が個別記事へのひとつのリンクになっています。上記はLivedoorスマホ版のメリットではなくカード系レイアウトのメリットを説明した、と思ってください。
Livedoor ページ送り

やはり前後のみページ送りで特筆すべきものはありません。
Livedoor 受信コメント一覧がスレッド形式
先日一度目視確認したんですが、もう二度と見つからない ←
SEOかなり弱いのではないかLivedoor…
なので下記のブログカード先でご確認ください。

コメント機能をリニューアルしました!(1月末にかけて順次適用) : ライブドアブログ スタッフブログ
【2018年12月17日 追記】リニューアルしたコメント機能の実装を順次行っておりますが、全てのブログに機能が反映されるのは2019年1月末までかかる見込みです。お待たせして申し訳ございませんが、今しばらくお待ちください。========================================
簡単に説明すると、返信を該当コメントの直下に表示できる というのが スレッド型 です。投稿フォームではないですよ。受信コメントの表示形式のことです。
Wordpressなどはもうこの形が主流になっているような。これを欲しがっているFC2ブロガーは多いはず(笑)
私も一時期チャレンジしてみましたが、現状のFC2システムではかなり難しいなぁ、という結論です。Livedoorは運営がスレッドを用意してくれてるんですね。良いな (∵`)
--- 2019.7.6 追記
ちょっと私勘違いしていました。Livedoorスマホ版のコメント一覧は該当記事の下、同ページ内にいくつか表示されており、恐らく3件が上限ではないかと思います。4件目以降は「もっと見る」をクリックして コメント一覧ページ(記事とは別ページ)へ遷移 すると表示されます。Yahoo!のようにそのページ内で残りを取得するのではなく、別ページ遷移です。
で、その別ページであるコメント一覧ページに滞在している場合しかスレッド返信を行うための返信矢印が表示されない、という仕様のようですね。
ということはコメントが3件以内の場合コメント一覧ページへのリンクである「もっと見る」は表示されないので、スレッド機能も使えないということ?え?そゆこと? (´・ω・`)
え?(笑)
まぁそうなるだろうな、というのはわかります。スレッド式で1つのコメントに3つの返信が付けば合計4件になり、同記事内で表示するコメント制限数を超えてしまうことになります。それはわかるんですが、そもそもその3件は必要か?という疑問(笑)
10件, 20件ならわかるんですけど3件って。
--- 追記ここまで
まとめ
どのサービスもシステム上のメリット・デメリット、使い勝手の好き嫌いなどは付き物ですが、総じて言えるのは 今最も大事なのはスマートフォンでの見え方・使い勝手 です。アメブロなんかはスマホ閲覧率がかなり高いはずですし、どのサービスもそうなっていく、というよりも既にそうなって来ているはずです。
で、「閲覧者」を指すときにどうしても「同じサービスを利用しているユーザー」「いつもコメントしてくれる常連さん」をイメージしてしまいがちですが、実際はそうではありません。アカウントを持っていない人だって見ていますし、全く会話を交わしたことのない方、他ブログサービスのユーザーだって見ているはずです。
ですからweb一般で主流の方法、主流の考え方を識ることは大事ですし、良い点はどんどん取り入れたら良い。FC2ブログはそれができるブログサービスです。で、Yahoo!のお引越し組さんにアドバイスしたいことは Yahoo!はYahoo!他は他 という点。「Yahoo!と同じようにやりたい」「Yahoo!となるべく同じ見た目に近づけたい(テンプレートなどの見た目)」というお気持ちもわかりますが、本当にその必要があるのかどうか です。特に見た目ですよね。そして パソコンでの見た目しか気にしていない人が多すぎる ように思いますし、旧式のレイアウトを維持しようともがき続ける 人がこれまた多すぎる。
どのサービスも スマホ最優先 にシフトしていくはずです。幸いFC2ブログはレスポンシブテンプレートの提供があるのですから、思い切ってチャレンジしてみるとか。スマホ版を設定するにしても他社の良い点・悪い点を抑えた上で選ぶとか、まぁ色々方法はあります。ともかく スマホでの見た目はものすごく大事 という意識を持つことが重要。そこが理解できれば「トップから個別記事へのワンクリックが余分で…」「トップでも全文を表示したい…」という考え方にはたどり着かないはずです。
しかしYahoo!スマホ版は惜しいですね。他社と比較しても良い点が結構見つかります。サービス終了は本当に残念ですよねぇ (∵`)
There are no comments yet.