本ブログのスマホ向けサイトを3つの点でデザインを改善しました

はじめに

普段はMacBookから本ブログサイトの更新や確認作業をしています。

そのためパソコンとスマートフォンで比べると使い勝手や見やすさの調整はどちらかというとパソコンの方に力が入っていました。

しかしながら、アクセス解析をすると、本サイトの閲覧の６割がスマートフォン。

スマートフォンからの使い勝手や見やすさを改めて検証し、3つのポイントでデザインを改善しましたので紹介します。

本サイトは、WORDPRESS向けのテーマCocoonを使わせてもらっています。

高速、シンプルで高機能。すばらしいテーマです。

これまでフッターモバイルボタンのみでしたが、ヘッダーにもホームボタンや検索ボタンのメニューを表示するようにしました。

サイトのホームに戻ったり、検索がしやすくなります。

また、これまでスクロールするとモバイルボタンを隠れるようにしていましたが、これが意外と使いづらいため、「モバイルボタンの固定表示」をオンにしています。

こうすると画面の表示領域が若干狭くなりますが、代わりに、「サイトヘッダーロゴを表示する」をオフにしています。

ヘッダーの下に、おすすめのコンテンツをクルクルと表示する「カルーセル」を入れるようにしました。

これまでパソコン向けにはオンにしていましたが、スマートフォン向けにもオンにしたという格好です。

本ブログでのアクセス数の多い人気記事が表示されています。

「デジタルデトックスラボ」を「スマホの使いすぎにデジタルデトックス」と補足したり、「バレットジャーナルラボ」を「日記/手帳習慣とバレットジャーナル」に更新。

背景画像も一部変えてみました。

より分かりやすく、コンテンツに到達しやすくなりました。

これらの固定ページのコンテンツも随時拡充していきます。

本ブログのデザインを改善した3つのポイントを紹介しました。

引き続き、より楽しく役に立つ記事と共に、使いやすく見やすいサイトデザインに向けて改善していきます。