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

公開 2023.2.1
更新 2023.2.3
カテゴリー / Others

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

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

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

デザイン変更の概要

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

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

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

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

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

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

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

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

ビフォアアフター

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

トップページ上段

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

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

トップページ中段

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

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

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

記事ページ上部

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

記事ページ中段

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

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

記事ページ下部

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

フッター部

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