ぼーる丸の部屋

イラスト情報系雑記ブログです!

ぼーる丸の部屋

10000文字オーバーの記事を書いてみた結果 他

f:id:ballmaru:20180408173441j:plain

どうも、バーチャルブロガーのぼーる丸です。

10000文字オーバーの記事を書いた結果

くぅ~疲れましたwこれにて完結です!

10000文字オーバーの記事はこちら!

www.ballmaru.com

 

途中体調崩したりして予定よりも遅くなりましたが

なんとか書き終えました!

 

色々とアレ足りないコレ足りないと足していってたら、

最終的には15000文字になってしまいました…

 

1記事1000文字として、15記事分のボリュームです。

 

正直書ききるまでは本当にキツかったんですけど

書き終えた時の達成感は大きかったですね!

 

書いてるうちに、「コレ本当にウケるのかな…」という気分になったりと

途中から自分との戦いになっていました。

 

あと、色々と反省点もありますね…

 

結構ノープランだったので、方向転換が多かったところとか…

もっとわかりやすくできたんじゃないかとか…

 

10000文字超えのボリュームだと、

どうしても更新が停滞してしまうというところとか…

 

更新停滞については、ちょっと戦略をミスりました。

今後は日々更新する用の記事を書きつつ、

裏で併行して大型記事を作るスタイルにしたいところですねー

10000文字記事を書いた理由

さて、10000文字記事を書いた理由ですが

下記ツイートをご参照ください。

こんな効果を狙って書きました!

 

ヒトデさんが書いたこの記事を見て

www.hitode-festival.com

「情報量の多さ」が検索の上位表示に武器になる事は間違いないので、そうなると結果的に文字数は増えていく。それはわかる

僕も上位表示されている記事は全部それなりの文字数の記事が多いです(5000文字以上くらいが多い)

ほうほう、そうかそうか…

 

なら一回10000文字オーバーの記事を書いてみよう!

 

ってなったわけです!

(この文章が書かれていた箇所の見出しが「「文字数」を気にするのは不毛」なのにどうしてこうなった…)

10000文字オーバー記事の効果について

直近一週間のアクセス数です。

f:id:ballmaru:20180408194550j:plain

4/2:96

4/3:100(ここら辺で更新停止)

4/4:52

4/5:26

4/6:86(ここら辺で復活)

4/7:273(10000文字オーバー記事公開)

4/8:286(記録更新中)

   追記:457まで伸びました!

 

アクセス数が跳ね上がり、休んでいた分のアクセス数を取り戻しました!

普段は平均アクセス数100といったところでしたが、

ついに壁を超えられたようです。

 

読者数増加は128人→135人くらいだったかな?

(よく見てなかったのでうろ覚え)

 

はてブ数も19人と、過去最高の数値を記録しました。

 

ほぼほぼ、狙い通りと言った感じです。

これだけ効果があれば、たまにやっても良いかも?って思いましたね!

1~3ヶ月に一回くらいの頻度で作って、どんどん柱を立てていくのもアリかもしれません!

上に戻るボタンを設置しました!

10000文字記事を作ったので、上に戻りたいって人も居るだろうなーと思い

上に戻るボタンを設置しました!

 

右下にあるこちらのボタンですね。

f:id:ballmaru:20180408194559j:plain

 

上に戻るボタンの設置は下記記事を参考にしました!

www.endoo.site

 

ただほんとは…

漆うしるさんのブログみたいにしたかった!

 

私もこうしたい!と思って

本日必死こいて上に戻るボタン用の画像を作っていました。

(我ながら丸パクリである。何故もっとボタン風にするとか考えなかったのか)

しかし、色々試行錯誤した結果、断念!

 

何故なら、当ブログはレスポンシブデザインであり

スマホでもPCと同じ表示をしてしまい

上に戻るボタンがスマホの画面を大きく占領する形になってしまったからです…

 

というかこの記事を書いてる間に、

もっと小さくしてボタン風にすれば良いということに気がついたので

またボタンデザインを検討して再チャレンジしてみます!

当ブログの画像の全JPG化が完了しました!

くぅ~疲れましたwこれにて(以下略)

こいついつも疲れてんな

今日は必死こいて当ブログの画像をPNGからJPGに変更していました。

クリスタでJPG変換かけて、一枚一枚丹念に貼り直しまして…

 

いや、SEなんだからそんなのツール作って一気にやれやってところなんですけど

そんな技術ありません。仕事でしかプログラミングしてないからね。

 

JPGに変換した画像は114枚。(35記事分)

思ってたより使っていましたね…

そんなに画像を貼ってる気はしてなかったんですけどね~

 

全部貼り直してから気がついたんですが

JPGの品質は90で設定していたんですけど、

どうやらJPGの品質は85の方が良いみたいです。

Optimize Images  |  PageSpeed Insights  |  Google Developers

画質が 85 を超えている場合は、85 に下げます。画質が 85 を超えると画像の容量が急増しますが、視覚的な品質はほとんど向上しません。

 

マジかよ~もう貼り直しちゃったよ~

とか思ってたんですが、

ふとここで画質をそのままに画像を圧縮してくれるTinyPNGの存在を思い出しました。

tinypng.com

試しに変換してみると…

JPG化したところから更に半分も軽くなるのか…(困惑)

しかも確認してみると画質が落ちてるように見えない!これはすごい!

 

流石に二週目にいく気力は無かったので私は諦めましたが、

画像を軽くしたいと考えてる方はTinyPNGを試してみてはどうでしょうか!

 

あと、全JPG化をしたかった理由が2つありまして

1つ目はSEO対策。

2つ目は、下記記事のやつをやりたかったからです。

www.okuni.me

一覧形式のアイキャッチ画像の大きさを調整する方法ですね。

これ、PNGとJPGが混在してるとJPGだけに反映されるみたいなんですよ。

 

どうにかならないかな~って思って弄ってみたんですが

2つ以上の拡張子の判定処理どうすりゃいいんだ!

わからん!判定できたとしても重くなりそう!

となって断念しました。(本当にSEかコイツ)

 

というわけで全JPG化でゴリ押したわけです。

そして全JPG化完了後、アイキャッチ調整処理を実装完了…

 

しかしここで第二の問題が

  • 表示するとき、なんか画面がチカチカする
  • 最初は元のサイズで表示されて、その直後にリサイズされる動きが見える
  • これ、JavaScriptで全画像ループする処理使ってるから重くね?

これもしかして、レスポンス悪くなってるんじゃ…

というわけでPageSpeed Insightsでスコアを検証してみました。

 

アイキャッチ画像調整コード反映前

・モバイル(スコア:76/100)

f:id:ballmaru:20180408193622j:plain

・パソコン(スコア:68/100)

f:id:ballmaru:20180408193655j:plain

アイキャッチ画像調整コード反映後

・モバイル(スコア:76/100)

f:id:ballmaru:20180408193641j:plain

・パソコン(スコア:45/100)

f:id:ballmaru:20180408193627j:plain

やはり、PC表示時だけ遅くなっているようですね…

 

見た目が改善されてもレスポンスが遅くなるのはNGなので、

当ブログでは元の状態に戻す運びになりました。

おわりに

上手くいくこともあれば、上手くいかないこともある

そんな1日でした。

 

しかし、1日の備忘録的な記事なのに3000文字も使ってしまった…

10000文字記事を書いてから、どうやら長文を書く癖がついてしまったみたいです。