20 Reasons Why People Hate Your Website という記事を拝見して個人的に納得できましたので意訳でご紹介しようと思います。
(ブログに関連しないと思われる章については飛ばします)
20 Reasons Why People Hate Your Website
Good design is important for a website to attract users to a business website but the thing that make users love your website is the user experience.
この寄稿内容は企業向けであったり、何らかの収益を得るためのページに対する提案みたいなものですが、一般のブログにも当てはまります。2016年の記事なので若干古いとはいえ、2018年12月現在ではこれらの提案への対応がより強く求められていると捉えて良いと思います。
1. ローディングが遅い(Slow Loading Time)
僕らは注意力が散漫なもんだから日に何度もケータイをチェックするし、ローディングが長いサイトに出くわすと愛想を尽かしちゃってやっぱり集中力が保たないんだよね。
スピードが重視される時代ですね。2018年12月現在で旬なのは SSL化とスピード対策 でないかと思います。で、モバイル(スマートフォン) のことですよ。今更パソコンでどうこうなんて話は出てきません。現在最も重要なのはモバイルです。
Googleも最近はページスピードの強化を強く訴えておりまして、実際に Speed update を2018年7月に行っています。
簡単に言えば モバイルで遅いページは順位下げます という施策です。
モバイル表示を速くするには AMP を用いるのがベスト・プラクティスです。しかし残念なことにFC2ブログでAMP版の提供は今の所ありません。
仕組み的にAMP以外のページがAMPに敵うわけが無いとはいえ、それでも1秒台の表示は可能です。例え無料ブログのFC2であっても、です。
ページ速度は テンプレートの仕様 に依存するところが大きいわけで、最近は速度のことも考えて制作しているのですが、共有するとなるとやはり限界があるんですね。
なのでスピード特化版テンプレートのブログ内限定配布もしていこうかなとは思っています。
今の所1点だけですがGoogleの Test my site の結果は以下の通りです。
3秒 と出ています。スピード測定ツールは悪い条件を想定して検査しますので、日本国内で4G回線・Wi-Fiであれば概ね1秒台、あるいは1秒以内で表示されます。
検証はトップページで行っています。トップページは重たくなりがちですから更にスライダー付きの条件の厳しいページを選びました。
ただ本来最も大事なのは 個別記事 です。なので記事の書き方(画像の最適化など)も工夫が必要。これらは個人のスキル・各ページの特性に依存し検査対象にはしにくいためスピード検証結果の公開時はトップページを選択しています。
今後は常にここを目指していかないといけないなぁ、と思っています。
共有に出すのが難しい、というのは、共有に出した以上「カスタマイズ不可」にはできないと思うんですよね。そして初心者の方がカスタマイズしようと思うと相当の苦労というかたぶん無理。それ故上級者向け・ブログ内限定という配布方法を取ることにしています。
Bullet - ブログ内期間限定配布
配布終了致しました 2018年8月現在私が個人的に利用しているテンプレートの共有リクエストがありましたので、ブログ内限定・期間限定 で提供したいと思います。 2018年8月末日までに DLをお願いします。 本作を共有テンプレートに申請することはありません。 ページ表示スピード強化版です 上級者向け カスタマイズサポートはありません カスタマイズはかなり困難を極めると思いますので上級者向けです。...
今もうデザインだけじゃダメなんだなぁ、とつくづく感じます。逆にデザインによってスピードに影響が出るならそのデザインは切り捨てるという、ある意味英断を迫られる場面も多くなってきました。
2. ナビゲーションが不明瞭(Unclear Navigation)
君のサイトのナビゲーションはユーザーフレンドリーになっているかい？閲覧者に「次に何をしたら良いか」がちゃんと伝わってるかな？
userland というのはユーザー権限で動かせるもののことです。
日本だと ハンバーガーメニュー に馴染みがない人がまだ多い、という根本的なアレでソレもあります(笑)
← これのこと。
スマホで頻繁に見かけますよね。名前の由来はハンバーガーの形に似ているため(そのまんま)
モバイルではナビゲーションが折り畳まれていることが多いので、ハンバーガーを見たら「タップしたら何か出てくるかも」と思ってください。もうかなり主流になっているデザインです。
ナビゲーション というのはサイト内をスムースに行き来できるようにするリンクの集合体のことです。サイト内の移動は常にリンクで以て行われるのですから、主要なページにすぐアクセスできるという意味でやはり重要。
パソコンではナビゲーションがあるのにスマホでは無い(display: none)ですとか、折り畳まれていることが非常にわかりにくい(アイコンが小さすぎる、アイコンが無いなど)ですとか、他の要素が被ってリンクを押せない、など。
そしてあるいは「何のリンクかわからない」とか。えと、私の場合はテンプレートを多言語(日本以外のアカウントの利用)で共有していますので基本は英語表記です。それがわかりづらいと思われましたらどうぞ日本語に変更してくださいね。
要は 直感的に操作できるかどうか を問うていますので、言語選択(人間の言語のことです)も含め直感的でないと思えば変更を。
ナビゲーションは内部リンクなのですから個人的にスマホで display: none という選択はナシです。寧ろパソコンよりもスマホの方でこそナビゲーションが必要です。
3. レスポンシブじゃない(Not Responsive)
webの技術に慣れ親しんでいる人たちはマルチデバイスを意識しているよ。それに今やネットのアクセスの60%がスマートフォンなんだぜ。
もう60%どころじゃないと思われる (´・ω・｀)
これは「スマホ専用版を使うな」「レスポンシブデザインを採用しろ」という意味ではありません。
まぁ後者の「レスポンシブデザイン」は結局のところ含まれるとは思いますが。
FC2ブログを想定して一番近いのは まさかパソコン専用テンプレートをスマホで表示させたりしてないよね？ ということです。
FC2ブログ内でいまだに散見されますね。レスポンシブデザインではないのにスマホ版を非表示にしてパソコン版を表示させている 方々。
これはモバイルユーザーに敬遠されます。リンクは押しづらい、文字はまともに読めない、いちいち拡大する必要がある、場合によっては何かが収まりきらずに画面横幅を超過している、など閲覧者にとって苦痛でしかありません。モバイルでフツーに読めるようにしてくれ、ってことです。
その一つの方法がレスポンシブデザインを採用することですが、スマホ専用版でもまぁ問題ないと思います。
FC2ブログはスマホ専用版が設定されるのがデフォルトですから、パソコン版がそのまま表示されるのだとしたら管理者が能動的に設定を変更しているということです(ブラウザの設定やUA偽装を除く)
そしてその行為は閲覧者からもGoogleからも評価されることは無い、と思ってください。スマホ版非表示(PC版強制表示)を行って良いのはテンプレートがレスポンシブデザインである場合のみ です。
5. 動画や音声の自動再生(Auto-Play Media Content)
ただ静かに閲覧したかっただけなのにね。プレイボタンを押してもないのに流れるテーマソングや動画の中の人がわちゃわちゃやってるおかげでうんざりだよね。
これはもう昔から安定のワースト入り(笑)
個人的にはページを開く前に何らかのアナウンスがあればセーフ(タイトルに注意書きがあるとか)
モバイル環境で勝手に再生というのは少ない事例かもしれません。モバイルは電車の中やベッドの中でも使われるのですから音の出るものは「ユーザーの意志」が尊重されてしかるべき。なのでYouTubeなどはモバイルの自動再生を許可していません。
Amebaブログなんかは動画広告がこれでもかと掲載されて気が散るったらないですね。せめてGIFにしてくれ、と。勝手に動き回るコンテンツというのは今後はさらに敬遠されていくのだろうと思います。GIFでさえMP4変換でクリック再生という時代です。
6. アニメーションで気が散る(Distractive Animations)
イメージ画像やアイコンってのはユーザーの目を惹くために使うものだけど不必要で気が散るものはアイキャッチとは言えないよ。
あぁー。ありますね。個人的に不快に思うのは SNSシェアアイコンが常に動いてるやつ。ただのmooch(乞食)やん (´-ε-｀;)
アニーション過多にもちょっと気をつけないといけないなぁ、と思っています。アニメーションについては「かっこいい」と「ウザい」が紙一重なところがありますね。
大体最初は「あっ、なんかシャレオツ」と思うんですよ。でも二回目以降は。
最近はブログタイトル程度に留めてコンテンツに動きを付けるのは避けています。特にスクロール動作に必要以上に絡めないようにしています。
あとアニメーションは性質上、時間をかけて表示を行うことになりますので、ページスピード計測に影響が無いとしても体感速度が下がることもあります。1秒で表示できるものをふわ～っと表示させたおかげで2秒かかるとか。
lazyloadingの画像などはまた別ですけどもね。遅延要素がいきなり現れると目に優しくないのでアニメーションで緩和させるわけです。なのでこれは目的が違います。
あとはページ遷移後のコンテンツをフワっ。このぐらいは風情があって良いんじゃない？ (´・ω・｀)
同ページ内のあちこちでアニメーション、というのはちょっとどうかと思いますが。
8. 意味不明なAbout Usページ(The nonsense of ‘About Us’ Page)
About Usってのはどんなビジネスで、誰がそれを実現したか、とかそういうものを書くんだよ。わけのわからない言い回しや特定の人にしか理解できない言葉を使うのはアカンやろ。
cliché(クリシェ)とういのは英語のネイティブが割とよく使います。フランス語だけど。
「決まり文句」「ありがち表現」という感じで良い意味ではあまり使わないですね。ドラマや映画のセリフをけなすときとか良く使います(笑)
ブロガーの場合は「ブログ説明文」に置き換えて考えると良いのかなぁ、と思います。ブログの説明文は「ブログに何が書いてあるか」を説明するためにあるんですが、全然意味のわからないポエムのような文章であったり、本人や周りの一部の人にしか通じない内容であったり。
いやだから、結局このブログの主旨はなんなの？？？
とイラつかせない適切な文章を書きましょう。
9. 目的が不明(Purpose Is Not Defined)
About Usとちょっと被るけど、「何があるのか」がわからないとき、相手はマジギレすることさえあるよ。
だから！！！このブログには何が書いてあるねーーーん！！！(怒)
という感じでしょうか(笑)
10. 無駄な画像(Useless Stock Photography)
イメージ的な画像は印象を強化することもあるけどさ。やりすぎたり選び方を間違えると却って害になるよ。
「サムネイル画像」「OGP用画像」というのは必要だと思うんです。有った方が目を惹きます。特に競合が有る場合。
例えばいろんなブロガーの新着記事リストとか。ランキング的なリストとか。
全体観ではサムネイルが無いとそれだけでスルーされる確率って上がってしまうんですよね。さらに画像ナシの場合にはテキストが画像領域に踏み込むというパターン。つまりNo imageの代替画像もなくテキストだけ表示されるパターン。これだとさらに見過ごされる可能性が高くなります。グリッド表示やメイソンリーなどではかなり如実。
ただサムネイルが必要とはいえ、誤解させるような画像を選んでしまう場合もあるわけで。そのあたり気をつけましょうね、というのと、さらにこれ私も閲覧経験ありますが、文章中に不必要な画像を挟み込んでいる人なんかも割と見かけるんですよね。
全体的にポエムっぽく見せたいのかなんなのか、ちょっとよくわからないんですが。
段落が終了したら「お花の画像」また次の段落が終了したら「女の子の画像」また次の段落終了後に「空の画像」とか何がしたいねんッッッ！みたいな。
ひどいのになると文章が終わってから関係ない綺麗めな画像をベタベタ大量に貼っている人とか。えー？なにそれ？どういう意味？ なんかもう怖い ←
15. テキスト量が多すぎ(Abundant Text)
調査によると閲覧者はページ全体の28%しか読んでないらしいよ。だから彼らの時間や労力を摩耗させないような内容にしておかないとね。
これはFC2ブログの全文表示タイプテンプレートのトップページにカチリと当てはまります。
読まないんです。読みたくないんです。トップページの長文羅列は本当に考えものだと思います。
もったいないなぁと思う記事の書き方【全文表示テンプレート】
良い記事を書いているのに「非常にもったいない」と感じる記事構成があるんです。 追記を利用していない長文記事 のことです。さらに 追記を利用していないのに全文表示タイプのテンプレートを設定している このコンボははっきり言って 損 だと思いますよ、というお話。 本件を一言でまとめると トップページに長文を並べるな のススメです。...
まとめ
というわけで、いくつかFC2ブログに関わりそうなものを抜粋してみました。
結局は 自己満足が過ぎるページになっていないかを問え ということになるのでしょうか。私自身も気をつけなくては、と気を引き締めたところで おしまい (o'ω')ﾉ
There are no comments yet.