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

はじめに

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

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

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

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

  1. ヘッダー・フッターモバイルボタンを導入
  2. コンテンツのカルーセル表示を導入
  3. メニューを分かりやすく

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

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

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
高機能・高速・デザインと三拍子そろったWordPress無料テーマ「Cocoon 」を利用して、ブログのテーマをリニューアル
本ブログのテーマを変えたいと思っていましたが、なかなか時間が取れていませんでした。やっと週末になり、作業できました。Wordpressにはたくさんのテーマが提供されていおり、選ぶのも大変ですが、こちらのCocoon...

デザインを改善した3つのポイント

ヘッダー・フッターモバイルボタンを導入

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

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

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

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

コンテンツのカルーセル表示を導入

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

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

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

メニューを分かりやすく

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

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

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

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

まとめ

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

  1. ヘッダー・フッターモバイルボタンを導入
  2. コンテンツのカルーセル表示を導入
  3. メニューを分かりやすく

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

iPhoneで自分を知り、磨く
どんな状況でも、いまここに集中し、自分の力を発揮できる。 心と身体を整え、ごきげんでいられる。 本メルマガでは24時間365日あなたに寄り添うセルフコーチングアプリと実践ワークを通じて、集中・マインドフルネス習慣をサポートします。
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
アプリ・ガジェット
スポンサーリンク
「行動デザインラボ」をフォローする
行動デザインラボ
タイトルとURLをコピーしました