ライフログメモをより見やすく｜サイト全体のレイアウトを一新

ライフログメモのレイアウトを一新した。

サイト全体の幅や文字の読みやすさ、サイドバー、スマホ表示を見直し、「最近の記事一覧」の画像表示やSNSシェアボタンの配置なども変更した。

これまでも少しずつデザインや機能を変更してきたが、今回はサイト全体の幅や文字サイズ、サイドバー、スマホ表示などをまとめて見直している。

サイトの雰囲気をまったく別物に変えるのではなく、これまでのデザインを残しながら、より見やすく使いやすい形に調整した。

サイト全体を広く見やすくした

これまでのライフログメモは、パソコン表示ではサイト全体の幅が固定されており、画面が広くても表示領域は一定だった。

大きな画面ではこれまでより広く表示される一方、画面が狭くなれば自動的に縮小される。

スマートフォンでは従来と同じくらいの幅を維持し、タブレットなど画面が広い端末では適度な余白を確保する形になっている。

文字を大きくして行間も調整

記事本文の文字サイズも変更した。

以前よりも文字サイズが大きくなり、行間についても読みやすいように調整されている。

見出しの文字も以前より大きくなり、フォントについても利用している端末に合わせた標準フォントが使われるようになった。

長い記事を書くことも多いサイトなので、文字の読みやすさが改善されたのは大きい。

「最近の記事一覧」にサムネイルが表示

個人的に特に欲しかったのが、サイドバーにある「最近の記事一覧」のサムネイル表示だ。

タイトルだけを見るより、その記事で使われている画像も一緒に見えた方が内容をイメージしやすい。

記事を読み終えた訪問者が「次はこれを読んでみよう」と別の記事へ進みやすくなることに期待している。

サイドバーも記事への導線を重視

サイドバー自体も以前より広くなった。

これまでは幅が狭かったため、一部のメニュー名が途中で折り返されることもあったが、今回の変更によって見やすくなっている。

「最近の記事一覧」と「カテゴリー」についても、単なるサイドメニューではなく、別の記事へ移動するための導線として使いやすいよう調整された。

自分としても、サイトを訪れた人が一つの記事だけを読んで終わるのではなく、興味のあるカテゴリーや別の記事へ自然に移動できるサイトにしていきたい。

スマホ表示も見直した

自分自身がサイトを確認するときはスマートフォンを使うことが多いため、スマホ表示についても今回かなり調整されている。

記事の日付は以前の濃いグレーの帯から小さな青い表示へ変更された。モバイルメニューもサイト全体の青系デザインに合わせて調整されている。

これまでタブレットやスマートフォンを横向きにした際、一部の画面幅で横スクロールが発生する問題もあったようだが、今回の一新によって解消されている。

SNSシェアボタンの配置を変えた

SNSシェアボタンの配置も変更した。

以前は読者がいつでも記事をシェアできるように右上へ固定表示していた。

スマートフォンではJavaScriptを使い、本文までスクロールするとヘッダーの下へ移動するようになっていた。

そこで今回は固定表示をやめて記事本文の下に変更した。

記事を最後まで読んだタイミングでシェアボタンが目に入る形となる。

上記内容の一部について、今回の要望をきっかけに簡単無料ホームページ（hp-ez）の標準機能として実装されている。

今までのデザインは残してる

今回「レイアウトを一新した」とはいっても、サイトをまったく別のデザインに作り直したわけではない。

青を中心とした配色や丸みのあるメニューボタン、見出しのグラデーション、目次のボックス、引用部分など、これまで作ってきたデザインは基本的にそのまま残している。

そのうえで、さまざまな土台の部分を見直した。

全面リニューアルというより、今までのライフログメモを活かしたまま、全体をブラッシュアップした形に近い。

開発者に調整をお願いしてよかった

今回のレイアウト変更は、有料サポートを利用して開発者に対応していただいた。

実際のサイトや参考にしているサイトを確認したうえで、現在のデザインが今風になった。

サイトを理解している開発者のプロ視点から全体を調整してもらえたことに感謝している。

これからも少しずつ改善していく

今回の変更で、ライフログメモは以前より見やすく、記事を読みやすいサイトになったと思う。

特に文字の読みやすさや「最近の記事一覧」のサムネイル表示、記事を読み終えたあとの導線などは、これから記事数が増えていくほど効果が出てくる部分だろう。

まだ改善したい部分やほしい機能はたくさんある。

サイト全体を一度に完成させるというより、実際に運営しながら気になった部分を少しずつ直していく形で、これからもライフログメモをよくしていきたい。