Design Stock

デザインのアレコレ

  1. HOME
  2. コーディング
  3. 当ブログのデザインをリニューアルしました

当ブログのデザインをリニューアルしました

ブログタイトル

1月から約2ヶ月間はてなブログで運用していた当サイトをついにWordPressへ移行した。

前から自分でオリジナルテーマを作ってみたいと思っていたのと、WordPressの方がカスタマイズしやすいという理由からだ。

また、プラグインが豊富でAll in One SEO PackなどのSEO対策もはてなよりしやすいというのもある。

 

今日はリニューアルを機に、当ブログのデザインで意識したポイントについて書いてみたい。
これからWordPressのオリジナルテーマを作ろうと考えている方の参考になれば嬉しい。

 

サイトカラー

配色と色の割合

配色はほかのデザイン要素と比べて特にこだわった。
なぜなら配色がサイトの全体的なデザインイメージに与える影響は大きいからだ。

今回は上図のようにダークブルーを基調として、男性的でスタイリッシュな印象になるよう工夫をした。

世界に一つしかない自分だけのサイトを作るのなら、配色にはこだわりたい。

自分が好きな色や組み合わせによる雰囲気から選ぶのがいいだろう。
もちろんサイトのテーマに沿って、演出したい雰囲気から色の組み合わせを選ぶのもいい。

 

各色から受ける印象の違いについて知りたい方はこちらの記事↓を読んでみてほしい

色から受けるイメージをまとめてみた

 

フォントサイズ

フォントサイズは各デバイスごとに読みやすくなるよう最適化した。

PCサイズのままスマートフォンで閲覧すると、文字が大きくて画面内に収まる文字情報が少なくなってしまう。

逆もまたしかりだ。

また、記事内の文字サイズだけでなくタイトルや見出し、ヘッダーロゴなども同様にサイズを調整した。

 

昨今では、スマホでサイトを閲覧するユーザーがとても増えているので、サイズ調整はUXの観点からも欠かせない。

実際に各デバイスで自分のサイトを見ながら、どのサイズが読みやすくなるのか検証することをおすすめする。

 

記事中の見出し

見出しは記事内のデザインにメリハリをつける大事な役割を担っている。
なんのデザインもない文字ばかりの記事だと単調になってしまい、ユーザーが出て行ってしまう原因にもなりかねない。

そこで、見出しにちょっとした工夫をするだけで文章が一気に読みやすくなるはずだ。

 

当ブログでは<h1><h2><h3>と各見出しごとに、文字色や背景色を変更している。

どんなデザインにすればいいかわからない方は、参考にしたいサイトから自分のサイトの見出しに使用するデザインを決めるのがいいだろう。

 

サイドバー

続いて、サイドバーのデザイン。

トップページを記事一覧ページにすると、他サイトと似たようなデザインになってしまい、違いをつけるのが難しい。そこで重要になってくるのがサイドバーのデザインだ。

当ブログのデザインでは見出しを中央寄せにし、全体をボーダーで囲っている。

全体的なデザインイメージを崩さず、シンプルで整った印象に仕上がっている。

 

サイドバーを少し変えるだけで個性を出すことができるので、ぜひ試してほしい。

 

テーマ作成で参考にしたサイト

今回、オリジナルテーマを作成するにあたり参考にしたサイトを3つ紹介する。

Literally

literallyのトップページ

シンプルで統一性のあるデザインのブログ。

特にスマホデザインは紺色を基調にしたスマートな印象でこの上なくオシャレ。

とても細かな部分に気を配っているのがわかる。

また、個人的にはWebデザインに関する記事をよく参考にさせていただき、いつもお世話になっている。

 

渡邉 充敏.com

渡邉充敏.comのトップページ

渡邉充敏さんが運営する個人ブログ。

音楽やウェブなど様々なジャンルの記事を発信している雑記ブログだ。

トップページのファーストビューが印象的で、全体的にとても洗練されたデザインになっている。

 

SWALLOW

SWALLOWのトップページ

「シンプルイズベスト」がキャッチコピーのWordPressテーマ。

最近公開されたOPENCAGEさんの販売している有料テーマだ。

無駄な機能やデザインを削ぎ落とした、シンプルでスマートなデザインが特徴。

 

今回は特にこだわったデザイン要素について説明した。またカスタマイズをしてテーマ作成で参考になるポイントがあれば追記していこうと思う。