ブログのデザインを大幅にカスタムし、スマホ向けに特化させたらPVが少し増えました。

ブログのデザインをスマホフレンドリーに改良したらPVが増えたので、アクセス数になやむブロガーにCSSを用いたデザインの改良をオススメします。

こんにちは、ウラカタです。

このブログはパソコンで作成している為、スマホでの見え方にこだわっていなかったのですが、Googleの解析ツール(GA4)によると、どうやら約70％の方はスマートフォンから閲覧してくださってるようです。

確かに、スマートフォンは高性能なうえに場所を選ばないため、便利ですよね。

ということで、今回の記事はカスタムしたよ！という記事です。

スマホ版urakatahero"B"logについて

ユーザーのデバイスカテゴリ(GA4調べ)

スマホユーザーが最も多い

1. モバイル＝スマートフォン(iPhoneとandroid)
2. デスクトップ＝パソコン(ノートPC・デスクトップ)
3. タブレット＝タブレット端末(iPad含む)
4. スマートTV

最も多いのはスマートフォンで、最も少ないのはスマートTVです。

以上の事から、最もユーザーの多いスマートフォン向けのデザインにしました！

上部メニュー

上部メニューの操作感

メニューを新設しました。

右上にこっそりある MENUをタップすると、特に読まれているカテゴリとＳＮＳのリンクが現れ、再度タップすると閉じます。

メニュー内のリンクは状況を見て変化させます。

しかし、右上のメニューボタンは使い勝手があまりよくないので、外すかもしれません。

下部固定メニュー( )

下部固定メニューの操作感

下部固定メニューは画面をスクロールしてもついてきます。

真ん中の三をタップするとメニューが開き、再度タップすると閉じます。こちらもメニュー内のリンクは状況を見て変化させます。

下部固定メニュー( )

記事ＴＯＰまで一気に移動します

このアイコンをクリックすると記事の最上部に移動します。

使う場面はあるのかな？と思いますが、目次に戻りたい時に良いかもしれません。

下部固定メニュー( )

最新記事順のアーカイブに移動するボタンです。ＴＯＰページとの違いは特にありませんが、通常のTOPページよりも表示数が多いのが特徴です。

フッターのデザイン

＼｛please follow me｝／
┃┃ ┃ ┃ ┃ ┃
┃お問合せ ┃ 免責事項┃

Copyright ©urakatahero"B"log

---

こんな感じにしてみました。

私が参加している各種SNSのリンクと、お問合せを頂くページと免責事項(プライバシーポリシー)のリンクです。

はてなブログで用意されているアイコンフォントを使用したかったのですが、Xとスレッズと楽天ルームのアイコンはない(あるいは、まだない）ので、ロゴを使用しました。

Xは、Twitterの事です。

𝕏(旧Twitter)のロゴに近い記号を発見。

　　　【𝕏】

普段使いはあんまりないと思うけど、スマホ向けWEBデザインの際にアイコンフォントの代替として使えそう。

— ウラカタヒロ-めだかとジャイロ𝕏- (@UrakataHero) August 9, 2023

𝕏(旧Twitter)のロゴに近い記号を見つけました。

デザイン変更後の効果について

ごちゃっとしていたモジュール類を整理し、MENUを追加したことにより、ブログ内での移動が活発になってきました。

つまり、記事を見てバックキーで戻るのではなく、別の記事を探索して読んでもらえるようになってきています。

恐らく、縦にズラっと並ぶよりも、サムネイルやアイコンが一覧として見れる状態の方が良いのだと思います。

とはいえ、CSSやHTMLをいじるのもなかなか骨の折れる作業なので、一度に行うのではなく、ユーザーフレンドリーなモバイルページとは何かを更に考えて、思いついた際にデザインの変更を随時行っていこうと思います。

ちなみに、ブログテーマは、はてなブログ公式のSmooth（デフォルト）というテーマを使用しています。

記事のまとめ

• 当ブログへの流入経路は、検索サイトを経由していらっしゃるスマホユーザーが約70％とのことで、スマホ向けのデザインを優先することにしました。
• CSSとHTMLを駆使してスマホでの閲覧に対して、効率の良い方法を実装しました。
• 結果としては、なかなか読んでもらえなかった過去記事にもスポットがあたるようになり、アクセス数は多くは無いけどPV数は増えました。
• PVを増やすには元々のアクセ数を増やすために良い記事を量産する必要があるため、皆さんのお役に立てるように頑張りたいと思います。