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

はじめに

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メニューを分かりやすく

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

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

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

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

まとめ

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

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

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

デジタルツールメルマガ
毎日、目の前の仕事でなんとなく1日が過ぎてしまう。疲労感、消耗感、先延ばし感でなく、もっと充実感、達成感、成長感を味わいたい。そんなビジネスパーソンに向けて、本メルマガはごきげんな1日をデザインするのに役立つデジタルツールを紹介します。日記や手帳、時間管理、習慣化、生産性向上、生活改善等のアプリやiPhone,iPad活用法について、あなたのライフスタイルに合わせた活用法をお届けします。
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
アプリ・ガジェット
関連記事
「行動デザインラボ」をフォローする
行動デザインラボ
タイトルとURLをコピーしました