(こればっかりやってる)ブログのデザインをリニューアルしました。

このところ、本来のテーマであるFXの記事を更新せずにブログのデザインばっかりいじっています。

今回もまた大幅にデザインのリニューアルをしたのでそのビフォアアフターをダイジェストでまとめました。

自分用のメモレベルですがトレードの待ち時間にでもお読みください。

デザイン変更の概要

今回のデザイン変更のテーマは「すっきり透明感のある素敵サイト」を目指しました。

変更前のデザインは画像や色はあまり使わずに、モノトーンの文字中心のデザインでした。それはそれで読み込みも早いしメリットはありましたが、いまいちそっけない印象でした。

そのため記事を読んでもいまいち気分がウキウキせず、必要な箇所だけ読んだらさっさと閉じてしまわれがちだったのではないかと推測しています。

そこで今回はその反省を生かして、見ていて気分の良いサイトになるようにしています。

具体的なデザインのイメージがあったわけではなく、「あーでもないこーでもない」と試行錯誤しながら作業を進めました。気を付けたポイントとしては下記の3つです。

  • 統一感のある色にまとめる
  • 全体的に規則性を保ちつつも単調になりすぎないようにする
  • 無機質にならないようにする

あと、前回のデザイン変更時にアイキャッチ画像を廃止したのですが、やっぱりぱっと見でわかる画像がないと記事を特定しずらいと痛感しました。ですので今回のデザイン変更でアイキャッチ画像は復活させました。

項目 概要
リニューアル日 2023年2月1日(水)
実施した内容 デザイン変更(機能はほぼ変更なし)
要した期間 1か月程度
ポイント 見ていて気分の良い素敵サイトを目指す!

ビフォアアフター

ここからは今回のデザイン変更前後のビフォアアフターを画像で比較します。左がビフォア右がアフターです。

トップページ上段

トップページ上段(変更前)

トップページ上段(変更後)

↑左がビフォアで右がアフターです。シャチくんのイラストから魚(メダカ)のイラストに変更しました。画力が残念ではありますが個人的には気に入っています。

ヘッダー周りのデザインも青色のバーに変更しすっきりさわやかな印象になりました。

トップページ中段

トップページ中段(変更前)

トップぺージ中段(変更後)

↑左がビフォアで右がアフターです。変更前は記事のタイトルがずらっと並んでいて一覧性はよかったのですが、少し地味な印象でした。変更後はアイキャッチの画像があるのでややごちゃごちゃしている感はありますが目を引く印象になりました。また記事リストの大きさをところどころ変えたり、背景に色をつけたりしてリストが単調にならないようにしています。

カテゴリの記事一覧ページ

カテゴリページ(変更前)

カテゴリページ(変更後)

↑左がビフォアで右がアフターです。変更前は記事タイトルがずらっと並ぶまさにリストという感じでした。変更後はアイキャッチ画像を付けて、記事の一つ一つを識別しやすくなりました。また、トップページの記事リストとは表示形式を少し変えることで印象がだぶらないようにしています。

記事ページ上部

記事ページ上段(変更前)

記事ページ上段(変更後)

↑左がビフォアで右がアフターです。デザイン変更前はファーストビューで本文を読み始められるのが強みです。ですが少々目が泳ぐ印象です。デザイン変更後は、まずタイトルとアイキャッチ画像が目に入り、そのまま自然にアイキャッチ画像下の本文に目が進みます。記事内容を示唆するアイキャッチ画像を適切に使えば記事の内容を理解しやすくなるかなと期待。

記事ページ中段

記事ページ中段(変更前)

記事ページ中段(変更後)

↑左がビフォアで右がアフターです。デザイン変更前は見出しを黒い四角で囲っていましたが、デザイン変更後はローソクのアイコンと青い下線ですっきりかつ楽し気な印象になりました。

そうそう、あと大きな変更としてブログ全体の幅が変わっています。変更前のデザインに比べ変更後は150ピクセルぐらい幅が広くなりました。10パーセント程度の違いなのですが、これが地味に効果が大きくて、すっきりとした印象をアップし、実際に記事も読みやすく感じられます。

記事ページ下部

記事ページ下段(変更前)

記事ページ下段(変更後)

↑左がビフォアで右がアフターです。デザイン変更前は関連記事はタイトル文字のみでしたが、デザイン変更後はアイキャッチ画像を入れて少しにぎやかになりました。でもここの周辺のデザインは苦手で、どうしたら機能的ですっきりまとまるのかよく分からないですね。

フッター部

フッター部(変更前)

フッター部(変更後)

↑左がビフォアで右がアフターです。ここの大きな変更点としてはフッターの上に泡のようなイメージでカテゴリへジャンプするリンクを追加したことです。トップページにメダカのイラストをいれたので、フッターは水の中のイメージにしてみました。整列したリンクの方が使いやすいのですが、ここはあえてサイト全体の雰囲気づくりを優先しました。

インジ一覧ページ

インジ一覧ページ(変更前)

インジ一覧ページ(変更後)

↑左がビフォアで右がアフターです。サイトのカラーに合わせて、カードのデザインを黒色から青色に変更しました。全体的に明るい印象になりました。でも少し圧迫感があるかな?インジが増えて一覧性も悪くなっているので少し改良が必要かも。今後の課題。

まとめ

2023年2月1日に実施したブログのデザイン変更のまとめでした。

今回のデザイン変更は結構念入りに試行錯誤したので、私個人としては満足しています。全体的に見やすくなったんじゃないかなと思います。

以上まとめでした!

コメント

この記事へのコメント(0 件)