未分類

サイトリニューアルの解説(AFFINGER5)

2020年10月30日

 

家族ができたり引っ越したり、色んな出来事を記録として残しておきたいと思い始めたブログも、今年2020年11月で丸1年になります。

 

ソラ
1年間で書いた記事は25本(1ヶ月あたり2本)!
遅っそ!
ナオ

運営してくうちに色々見えてきたので、今後のためにもサイトをリニューアルすることにしました。

旧サイトと新サイトのデザインを【before/after】 で比較しつつ、紹介していきます。

 

サイトリニューアルの解説(AFFINGER5)

前提としてキーカラーの紺色は変えず、旧サイトよりもシンプルさを心がけてデザインしました。

それではまず、リニューアル前と後をご覧ください。

※画像クリックで拡大

before

asulog(〜2020/10/29)

〈問題点〉

  1. ヘッダー画像の色が濃く、重い印象を受ける
  2. 新着記事がわかりずらい
  3. おすすめ記事がわからない
  4. カテゴリーが混在している
  5. 記事が多く、間延びしている

after

asulog-top

asulog(2020/10/30〜)

〈改良点〉

  • ロゴと淡い空の写真でシンプルに
  • NEWを設置
  • 記事をカテゴリーごとに配置
  • Pick upを設置
  • イラストギャラリー設置

 

ソラ
改良した点 1〜5を順番に解説していきます!

 

メモ

このブログは、開設時からずっとAFFINGER5(アフィンガー5)を使用しています!

WordPressテーマ 「WING(AFFINGER5)」

1.【ヘッダーエリア】のデザイン変更

ヘッダーエリアは空×海画像のパララックス効果で奥行き感を出しました。

さらに白を使うことで、抜け感を演出!

ヘッダーの【Design、Movie、Life、House】のボタンはカテゴリーページには行かず、トップページのカテゴリーエリアに飛びます!

before

asulog-top-b

  • ヘッダー画像2枚をスライドショー設定
  • 画像が大きいので少し読み込みが遅い

after

asulog-parallax

  • 白と水色で清潔感UP!
  • パララックス(視差効果)ON!
ソラ
パララックスはPCのみの動作です!
重くならない?
マイ

2.【 NEW 】を設置

旧サイトは「NEW ENTRY」の見出しのみで、記事が羅列しているだけでした。

新サイトでは「\NEW!!/」として新着記事だけでなく、更新記事も掲載しています。

さらに説明文を付け、例えば更新記事なら「何を更新したのか」を明記してわかりやすくしています。

before

  • NEW ENTRY の見出しのみ
  • それ以下は記事の羅列
  • タイトルと抜粋がだらだら...

after

new

  • 新着・更新記事を3つに絞って掲載
  • 説明文を付け、更新記事なら「何を更新したのか」を明記
ソラ
新着記事のみを確認したい場合は、下層ページ右側の「新着記事」をcheck!
少なくない?
ハル

3.【カテゴリーエリア】を設置

旧サイトのトップページは、カテゴリーのボタンがあるだけでした。

新サイトでは、カテゴリーごとのエリアを設置しました。

そうすることで他のカテゴリーの記事が埋もれないようにしました。

Design

Movie

Life

House

ソラ
各カテゴリー最大5本の記事をスライドショーで紹介!
タブでよくない?
マイ

4.【Pick up!!】を設置

旧サイトでは、記事ページの最後の「おすすめ記事」のみの設置でした。

この「おすすめ記事」は【AFFINGER管理/おすすめ記事一覧】でIDを指定したものです。

新サイトではそれとは別に、トップページのみに「Pick up!!」として設置しました。

そして「NEW」同様、説明付きです!

pickup

ソラ
Pick up!! は目につきやすくするため、カテゴリーの間に設置しています!
ジャマじゃない?
ハル

5.【イラストギャラリー】を設置

asulogでは、すべての記事に挿絵としてイラストを掲載しています。

でも読まれない記事のイラストは埋もれていくんですよね...

改善策として、イラストの記事に誘導するためにイラストギャラリーを設置しました。

基本的に記事1本に対してイラスト1点を掲載しています。

気になるイラストがあったらクリックしてみてください!

※スマホでは縦長になります。

onescene

ソラ
記事が増えるとイラストも増えます!たまにシャッフルします!
わたし少なくない?
マイ

6.【ブログの説明】を追加

旧サイトでは右側にプロフィールカードがあり、プロフィールページに誘導できました。

新サイトでは1カラムにしているため、トップページの最後にブログの説明を配置しました。

footer

ソラ
SNSボタンも忘れずに設置!
誰がボタン押すの?
ハル

まとめ

1年前にブログを開設したときは、

とりあえずヘッダー画像を大きく目立たせよう!(ビジュアル・インパクト重視)

トップページは記事をたくさん載せよう!(ボリューム感重視)

でした。

 

今回のリニューアル(主にトップページ)では、

どうしたら魅力あるサイトになるか(サイトの印象、滞在時間、わかりやすさ)

どうしたら他のブログサイトと違う印象を与えられるか(動的要素、コンテンツの構成)

を念頭にデザインしました。

というのもWordpressのテーマに限らず、どのブログサイトも割と似たようなデザインだったりするんですよね(同じテーマならなおさら...)

なので差別化を図る意味でもリニューアルを試みました。

 

今後も気になるところがあったら、マイナーチェンジしながら運営していきます。

 

renewal

人気の記事

鳥よけ対策 1

6月のある朝、会社に行こうと玄関のドアを開けたら、ドアの両サイドに... 鳥のフン!? 玄関を見渡してみても鳥の巣らしきものはないが...。とにかくが鳥を寄せ付けないための対策をしなければ!

玄関の鏡を隠す方法 2

新築購入し、家具を揃えたり植物やオブジェを飾ってみたり、色々変化を楽しみながら快適に生活しています。ただ一つ、手をつけられないでいるものが... それは、玄関正面の鏡!!

3

新築購入時には、カップボードやフローリングのコーティングなど色々オプションを付けますよね。防犯フィルムもその一つ。しかし住宅メーカーでは28万円。自分でやれば12万円。差額16万円... 自分でやるしかないでしょ!!

-