WordPressテーマ「ハミングバード」の作者矢野ヨシキさんのデザイン!2016年リニューアルについて

2016年3月24日にブログデザインの大規模リニューアルを行いました。

一応暦なんかも気にして「大安」選んだりしたんですが、今回はこれから数年は戦って行けるデザインをテーマにそれなりにお金もかけた、初めてとも言える本気のリニューアルです。

というわけでリニューアル内容を紹介します。

デザインは人気WordPressテーマ作者「矢野ヨシキ」さん

今回のリニューアルはプロに全面委託という形で行いました。

デザインをお願いしたのは岡スマを通じて出会い、今や主にブロガー向けのWordPressテーマ作者として有名なbridgeの矢野ヨシキさん(通称:キチさん)

当ブログは2015年夏からキチさん作のブロガー向けWordPressテーマ「アルバトロス」を正式公開前から導入しており(このテーマめっちゃ売れたそうです)、元々のテーマとしてのポテンシャルの高さは実感していました。

ブロガーにお勧め!WordPressテーマ「アルバトロス」の魅力を語ります(スマホ対策も万全)

2015.07.29

ただ、その後もテーマについて色々情報交換をさせてもらっていて、時には不具合の対応もお願いしたりしました。

僕はシステムエンジニアであり、WordPressが採用しているプログラミング言語「PHP」の実装スキルは持ってます。なので、コード含めて見たりした上で、贔屓目無しにキチさんは、

  • 技術力が高い(=ただのデザイナーではない)
  • サポート含めて対応が丁寧

という点が素晴らしかったです。

それに加えて顔見知りという信頼感も有り、今回はお金を払った上でデザインを全面委託することにしました。

当ブログは2011年の開始以来、大体1年に1回リニューアルしていますが、

今後数年はリニューアル無しでやっていける

というのを大きなテーマにした上でのリニューアルでした。

WEBデザイナー矢野ヨシキさんからのコメント

10351103_795354020528692_616434690534198843_n

というわけで、矢野ヨシキさんからコメントもいただきました!

今回のリニューアルでは、サイトイメージを一新したいということで、ロゴのデザインの変更やサイトカラーの大幅な変更がありました。

少し大げさかもしれませんが、ここまでの大幅なリニューアルというと「今後のブランディング」や「収益性」に直結する重要な部分だと思います。

そういった意味から、プレッシャーも感じてはいたんですが、的確で素早いレスポンスをしてくれるチーさんのおかげで、当初なかったようなイメージも湧いてきたりしていつしか公開日のことを思いワクワクしながらサイトを構築していました。

構想からリニューアル当日まで約4ヶ月…
かなり時間がかかってしまいましたが、それはお互いに「妥協しなかった結果」だと思っています。(※良いように言っていますが、友人ということで納期は甘えさせてもらいましたw)

最後に、新しくなったアナザーディメンションをたくさんの人に見ていただければ幸い。ブログの新しいスタートのお手伝いをさせてもらえたことを光栄に思います。

ほんとにイイモノになったと思っているので、感謝しております!
ありがとうございました。

以降は今回のリニューアル概要について。

ベーステーマは「ハミングバード」

Google ChromeScreenSnapz100
今回はベーステーマをカスタマイズという形でリニューアルしてます。

ベーステーマはキチさん作の最新テーマ「ハミングバード」。

アニメーションが大きな特徴のテーマです。
ここは好みもあると思うんですが、設定でON/OFFが切り替えられるので、一先ずこのままにしています。

その他の主に記事ページの変更ポイントを簡単に紹介。

ロゴの変更

当ブログのロゴを変更しました。
表示イメージでのキャプチャーだとこんな感じです

【変更前】
Google ChromeScreenSnapz109

【変更後】
Google ChromeScreenSnapz110

前のロゴも作ってもらったやつなんですが、サイト名が「アルファベットなの?カタカナなの?」という問題があり、カタカナで統一しました。

ご存じの方もいるかもしれませんがサイト名「アナザーディメンション」の由来は、聖闘士星矢のキャラクターが使う技の名前です。

未だにサイト名で検索しても1位になれないという大きな欠点を抱えているんですが、

  • 雑多ブログとしてはわりとコンセプトにマッチした名前であること
  • 2001年から開始した一番最初のホームページと同じ名前であること

から、SEOより愛着優先で今までもこれからもこのサイト名で行くことにしました。

ベースカラーの変更

Google ChromeScreenSnapz096
当ブログは基本的に水色をベースカラーとしてきました。
ブログを含めて、ベースカラーとしては、

  • ブルー系
  • グリーン系
  • グレー系

が多く、理由は落ち着いた印象を与えるからなんだそうです。まあ言われて納得ですよね。

なんですが、今回思い切ってベースカラーをレッド系にしました。僕はちょっと渋めの赤は好きで、今乗っている車もそんな色なので、それに合わせたような印象です。

Google ChromeScreenSnapz101

レッド系は暑苦しい印象もあるんですが、特にブログとしてはインパクトがあるかなぁと。そんなものいらないって意見もありますが。

関連記事表示の変更

ブログを長年やっていると、関連記事が増えて来ます。
大きく分けると記事内に挿入するパターンと、記事の末尾に挿入するパターンの2つがあるんですが、その2つの見栄えをいずれも変えました。

記事内の関連記事表示

【変更前】
Google ChromeScreenSnapz097

【変更後】
Google ChromeScreenSnapz102
まあよくあるやつです。
「あわせて読みたい」みたいな文字が出るようにしました。

はてなブログで多いサムネイル付のブログカードと呼ばれるものが、クリック率も高く関連記事の導線としては今人気のようなんですが、サムネイル付はウザイというのが僕の持つイメージなので、あえてやめてます。

記事末尾の関連記事表示

2015年末頃からの記事に随時導入している、記事末尾の関連記事表示もリニューアルしました。

この関連記事表示どうやってるの?

って質問をたまに受けるんですが、WordPressのショートコードを利用した、完全手動の関連記事表示です

つまりPHPのプログラムで書いてるんですが、目次のように見せられるので関連記事を階層的に表示出来るのが最大のメリット。が、僕が作ったモノなのでデザインがダサいというデメリットがありましたw

というわけで、
【変更前】
Google ChromeScreenSnapz098

【変更後】
Google ChromeScreenSnapz103
見違えるように見やすくなりました。
これで少しは見てくれる人が増えるといいのですがw

人気記事の表示

これはちょっとあざといと言われそうですが、最近多くのブログが導入している手法を真似しました。

記事の冒頭の辺りで人気記事を表示するというものです。当ブログでは、カテゴリー単位での人気記事を表示しています。

PC版とスマホ版で若干表示位置が異なっており、

【PC版】
Google_ChromeScreenSnapz106
PC版はサイドバー固定です。
スクロールしても付いてきます。あなたが押してくれるまで離れませんw

【スマホ版】
Google_ChromeScreenSnapz107
スマホ版は記事の冒頭(アイキャッチ画像の下)に表示されます。
「記事の冒頭に入れるのってどうなん?」って僕は思ってたんですけど、これがかなり違うんだそうです(PV的な意味で)。

メルマガ登録の導線をリニューアル

2016年1月から開始した週間メルマガですが、折角始めたので読者は増やしたく、記事の末尾に登録フォームを置いていました。

Google ChromeScreenSnapz099

こんなやつです。
しかし、何とも味気ないデザイン。何故ならこれメルマガシステムから出力したHTMLなんです。

なので実はなにもデザインはしていませんでした。
残念すぎるデザインだったわけですが、プロの手にかかるとこんなに美しくなりました!

Google ChromeScreenSnapz111
これならもうちょっと登録しようって気になるかなぁw

【毎週月曜発行】無料週間メルマガ アナザー通信『ここだけの話』 について

2016.01.09

カテゴリーページ刷新(一部)

ここまでは全体的な事や、主に記事ページの話ですが、以降は少し大きな話です。

今回のリニューアルのある意味目玉とも言えるのが、カテゴリーページの刷新です。

カテゴリーページはこれまで記事の一覧が出るだけのページでした。
今後はここに説明文やサブカテゴリーを表示します

Google ChromeScreenSnapz105

といっても、これは完全にソースを触って作るモノになっているため、現在はメインカテゴリー3つのみです。

今は暫定的に文字を組み込んでいますが、今後手直ししながら、他のカテゴリーに広げて行きます。

Facebookページのデザイン画像リニューアル

Facebookページについてはブログの更新情報を流している程度なんですが、結構見てくれる人はいるようでこちらもブログデザインに合わせてリニューアルしました。

といっても、カバー画像とかを変更しただけなんですが、随分イメージは変わりました。

是非この機会に「いいね!」していただけると喜びます!

岡山スマホユーザー会(岡スマ)紹介ページ刷新

最後がキチさんを一番困らせたお題。
僕が主催している岡山スマホユーザー会(岡スマ)紹介ページの刷新です。

今までご覧頂いた方はご存じかと思いますが、ブログ記事の1つという位置付けでした。

これが、完全に生まれ変わっています!

Google ChromeScreenSnapz104

単一ページのような美しさ。
これぞプロのデザイナーの仕事ですよね。一番感動したのはやはりここです。

今風なデザインなので、是非ご覧いただけたらと思います。

終わりに

というわけで少々長くなりましたが、2016年リニューアルについて紹介しました。

かなりいいものになったと思っていて、数年はこのデザインをベースにしていくと思います。新しくなった、アナザーディメンションを今後ともどうぞよろしくお願いいたします。

最後になりますが、リニューアル作業を受けてくださった、矢野ヨシキさん本当にありがとうございました!大満足です!

ブロガーにお勧め!WordPressテーマ「アルバトロス」の魅力を語ります(スマホ対策も万全)

2015.07.29

【毎週月曜発行】無料週間メルマガ アナザー通信『ここだけの話』 について

2016.01.09
SPONSORED LINK

Twitterでチーをフォローしよう!

この記事のシェアはこちらから!

アナザー通信『ここだけの話』
ブログ記事の裏話や主催イベントの予定が読める週刊メルマガを発行しています。
メールアドレスの登録だけで購読できる無料メルマガです!

詳しい内容が気になる方はこちらをご覧ください。

は必須項目です

お名前(姓名)