ブログをリニューアルしました。ビフォアアフターまとめ。

公開 2022.1.29
更新 2022.2.8
カテゴリー / Others

2022年1月29日にこのブログをリニューアルしました。この記事はそのビフォアアフターをざっくりまとめたものです。

FXには関係ありませんが、もし興味があればお読みください。

リニューアルの概要

さて、このブログは2018年にスタートしたのですが、今までにいろいろと増改築を繰り返してきたため、少しゴチャゴチャした見た目になっていました。

「なんか読みにくい、、、。」

そんな思いがずっとあったので、2022年の年明けに思い切ってリニューアル作業に取り掛かりました。

リニューアルのポイントは、とにかく記事が読み易いすっきりとしたデザインにすること。とはいえどうしたらいいのか分からず、阿部寛のホームページをはじめ、いろんなサイトを見て研究しました。

こんなこと説明するのも野暮ですが、「阿部寛のホームページ」は、完璧に過不足なく洗練されたコンテンツと爆速の表示速度で有名なサイトです。ホームページを作っている人は悩んだら一度訪れてみるのも良いと思います。迷いが吹き飛びます。

そして約３週間あーでもないこーでもないと試行錯誤を行い、ようやく今回のリニューアルが完了しました！

項目	概要
リニューアル日	2022年1月29日（土）
実施した内容	全体のデザイン変更（外観のみ　構造は変更なし）
要した期間	約3週間
ポイント	記事が読み易いすっきりとしたデザインにする

リニューアル前後比較

リニューアルでどう変わったのか前後比較の画像をずらーっと並べていきます。画像は全て「左がビフォア」で「右がアフター」です。それではいってみよ～！

１．トップページ

まずは、サイトの顔となるトップページの上部です。

↑左がビフォアで右がアフターです。こう見るとヘッダー周りが真っ白になってしまいましたね。もしかしてトップページっぽさはビフォアの方が上かも！？ここはメイン画像などで印象が大きく変わるのであまり悲観的になる必要はないのですが、少し改良が必要そうです。

２．トップページ中段

続いてトップページ中段の記事が並ぶ部分です。

↑ここのリニューアルポイントは、記事タイトルの文字を大きくしてオレンジのオビを付けたところです。リニューアル前に比べて記事タイトルが読みやすいでしょ。（ちょっと暑苦しい？）

３．トップページ下段

トップページ最下部のフッターのあたりです。

↑ビフォア（左）のフッターは少し出しゃばった感じがあったので、アフター（右）は面積を減らしてさらっとした感じにしました。すっきりと洗練されたような気がします。

４．記事ページ上段

ここからは、一番重要な記事ページです。まずは記事ページの上部。

↑ここのポイントは、記事タイトルを主役にすること。文字サイズを大きくして余白も大きくしたことでタイトルがしっかり目に入るようになりました。タイトル直下のアイキャッチ画像を廃止するか迷いましたが、「あの記事どこだっけ？」という時にいちいちタイトルを読まなくても見つけられるメリットが大きいので継続。また、記事領域を薄いラインで囲うことで目線をガイドしています。記事範囲がはっきりするので隣のサイドバーに目線が泳ぐのを防止して、読み手が記事に集中できます。

５．記事ページ中段その１

記事ページの中段あたりその１、記事中の見出しの周辺です。

↑ビフォア（右）では記事中の見出しを四角で囲っていたため、ガチャガチャした印象になっていました。アフター（右）ではオレンジのオビのみにすることで、すっきりした見た目にするとともに、読み手の意識が見出しで分断されないようにしました。

６．記事ページ中段その２

記事ページの中段あたりその２、ダウンロードアイコンの周辺です。

↑ビフォア（左）では、同じアイコンが２つ並んでいて、違いが分かりにくく、枠線などの形状も何となく鬱陶しい印象でした。アフター（右）ではアイコンの有無や色で違いを分かりやすくし、形状もシンプルにししました。やりすぎるとガチャガチャするので「素直にシンプルに」と自分に言い聞かせながら作業。

他にもこういったグラフィカルな見た目のものが随所にあったのですが、とことん色や形をシンプルにしてすっきりさせました。

７．記事のエンド部分

記事が終わるエンド部分です。

↑ビフォア（左）の方は、少しそっけない印象がありました。アフター（右）ではSNSの丸いボタンを並べて「ここが記事の終わりですよー」というのが一目でわかるようにしました。経験上、これらのSNSボタンがクリックされることはほとんどないのですが、記事終わりの目印としてはちょうどいい感じです。また丸いボタンがポップな雰囲気で読後の印象も爽やかになりそうです。