フリーランス

ブログリニューアルにあたり考えたこと・参考にしたサイト

[voice icon=”http://kento-hibi-kentou.blog/wp-content/uploads/2017/11/profile.jpg” name=”けんと” type=”l”]ついに完成しました![/voice]

今回、大幅にブログのリニューアルを行いました。

その際に、僕が考えた事や参考にしたサイトをまとめてみました。同じようにwordpressのブログサイトをリニューアルしようとしている方の参考になったら嬉しいです

 

リニューアル前のブログ

old-blog

昔はこのようなデザインでした。

良い点

  • かなりシンプル
  • ページの読み込みなどはかなり早い
  • 無料のwordpressのテーマなので、費用面でGOOD

悪い点

  • シンプルではあるけれど、色が無さすぎて、お洒落なデザインとは言えない
  • 遊び心が感じられない
  • トップページを一瞬見ただけでは、どのようなブログか分かりにくい
  • スマホページに使いにくいところがある

ブログリニューアルにあたり最初に考えたこと

目的を明確にする

サイトを新しくしようって時って、いきなり新しいwordpressテーマを探したり、photoshopでデザイン考えたりしがちですよね

[voice icon=”http://kento-hibi-kentou.blog/wp-content/uploads/2017/11/profile.jpg” name=”けんと” type=”l”]僕も、Photoshop開いちゃいました笑[/voice]

けれど、いざ、リニューアルをしようという際に一番重要なのは、目的を明確にするという部分だったと思います。

このプロセスを飛ばすと、途中で行き詰まったり、またリニューアルしなきゃいけなくなったりしてしまう可能性が上がります。。。

リニューアルする事で、何をよくしたいのか、どのような効果を生みたいのかをしっかり考えてから詳細な部分に入っていくのがいいと思います。

僕の場合は、リニューアルの目的として大きく2つ

  • 読みやすくする!
  • 個性(自分)をもっと出したサイトにする

これらの目的を常に意識しながら、サイトを作り上げていきました。

より詳細な計画を!

大きな目的ができたら僕は、それぞれを達成するためにより細かなTo-Doリストのようなものを作ってみました。

僕が書いたノートの一部です↓

note

要は、、しっかりとした事前計画が超重要って事が言いたいです笑

さあ、ここまでできたら、ようやく作成のパートです!

 

読みやすさをあげる

WordPressのテーマ選び

今回僕は、Storkという有料のテーマを購入してみました。

[voice icon=”http://kento-hibi-kentou.blog/wp-content/uploads/2017/11/profile.jpg” name=”けんと” type=”l”]¥10,800 ←た、高い汗[/voice]

けど、この値段の(もしくは、それ以上の)価値があったと思います!

こちらのテーマにした理由は主に↓

  • 十分すぎるくらい機能が豊富
  • CSSをいじらずとも、かなりの部分がカスタマイズ可能
  • 有名で使っている方が多いため、カスタマイズ法などが調べやすい

Stork関連で参考にした記事↓

配色にこだわる

今回は、色味抑えて統一感の出るデザインになるように心がけて、配色を心がけてみました。

Storkは有名なテーマなので、情報は得やすいと書きましたが、その分デザイン面で他と被りやすくなります。。

そういった時に、配色など細かいとこにこだわる事で差別化できます!!

参考にした記事↓

遊び心のあるフォント

個人的にGoogle Fontsの日本語のものを利用してみたいってのがあったので、Rounded M+ 1cを選びました!

丸みを帯びてて、良きです!!

ちなみに、サイトの全ての部分でこのフォントを使うことにしました。その方が統一感が出るかな?

[aside]補足
Google Fontsの日本語はまだ早期アクセス版のようです。
個人ブログなどでのの使用に留めた方が良いかもしれません。

2017/11/16現在。
[/aside]

参考にしたサイト↓

 

ブログに個性を出す!

トップページにダイナミックな写真を

このデザインはStorkのテーマにもともと備わっていて、写真と文を入力するだけで完成しました。

サイドバーにも自己紹介を追加

より、自分を知ってもらうために、サイドバーの上の方にも自己紹介欄を追加してみました。

my-info

書いている人のことが少しでもイメージできると、共感できる部分が増えると思います👍🏻

参考にした記事↓

CSSの勉強

より、個性を出していくために、自分のしたいデザインと一致させるためには、やはりプログラミング(CSS)などの知識が不可欠となってきます。

僕も、まだまだ知識不足で、今回のリニューアルでいじったのは、style.cssのみですけど、それだけでもかなりデザインに変化をつけることができたと思います。

ちなみに、僕は、Udemyという学習サイトのWebデザインコースでHTMLやCSS、PHPなどを勉強中です。

 

リニューアルの成果!

て、事で出来上がったブログがこちらです

new-blog

白を基調としたシンプルなデザインかつ、フォントなどの部分で少し遊び心も入って、個人的にかなり満足です!

かなり長い記事になっちゃいましたが、少しでも参考になる部分があったら嬉しいです。

それでは、これからもよろしくお願いします。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です