kuwayoshi.com

ブログデザインリニューアルのお知らせ

この度、当ブログのデザインをリニューアルしました。
これまではWordPressのデフォルトテーマをそのまま利用していたのですが、使っていて違和感のある部分も出てきていましたので、思い切ってテーマデザインのカスタマイズをしてみました！
この記事では新旧デザインの比較をしつつ、リニューアルのポイントをまとめました。

旧デザインの課題

これまではWordPressデフォルトテーマの「Twenty Twelve」を利用していました。
Twenty Twelve – WordPress テーマ

こちらは私がブログを開設した2014年当時から使っていたテーマなので、約8年間も使っていたことになります。
シンプルな構成で気にいっていましたが、最近では以下のような課題も感じていました。

テキストベースで見た目に差がつきにくい

私のブログは技術記事がメインのため、コンテンツはテキストベースとなります。
画像をあまり使わないため、記事ごとの見た目が変わらず、色合いなどもぱっとしませんでした。

一応記事ごとにアイキャッチ画像を設定していましたが、記事一覧の印象が地味なのと、毎回アイキャッチのために画像を準備するのも手間に思っていました。

スマートフォン向けの最適化がされていない

スマートフォンでブログを開いたとき、画面幅が狭いため縦長のページになるのですが、一番上までスクロールしないとメニューが表示されないなど、スマートフォンでの閲覧が大変だと感じていました。

幸いGoogle Analyticsによると、私のブログはPCで閲覧されている方が大半なのですが、世間ではモバイル端末向けのレスポンシブ対応が進んでいく中で、スマートフォンでの使い勝手が良くないことは気がかりでした。

ウィジェットや広告の表示が煩雑

サイドバーにウィジェットを配置していましたが、「最近のコメント」や「月単位のアーカイブ」など、実用性の薄い項目も目立っていました。

またAdSense広告を配置していましたが、表示位置を自動的に設定していたため、広告によるレイアウト崩れでコンテンツの視認性が悪くなるケースも目立っていました。

リニューアル後のデザイン

上記の課題を踏まえ、全体的にデザインの見直しを行いました。
WordPress公式テーマの「Twenty Sixteen」を利用し、CSS等のデザインをカスタマイズしています。
Twenty Sixteen – WordPress テーマ

WordPressテーマのカスタマイズは、Webデザイナーの妻がデザインとコーディングをしてくれました！
サイト全体としてはグラデーションやアイソメトリックイラストを使うことで、とても印象的な仕上がりになったと感じます。
トップページはWordPressの固定ページを使って作成することで、当ブログのコンテンツに最適化された一覧やメニューの表示が実現できました。

デザインの方向性を決めるにあたり、同じ技術系サイトで「エンジニア情報共有コミュニティZenn」の雰囲気が好きだったので、Zennを参考にレイアウトなどを組んでもらっています。
Zenn｜エンジニアのための情報共有コミュニティ

記事のアイキャッチも、汎用性の高い画像を複数パターン用意し設定することで、全体の統一感が出て見やすくなりました。
また、毎回アイキャッチ画像を用意する手間も削減されています。

新旧のデザインを見比べると、同じ記事でも全く異なる印象に変わったと思います。

モバイル向けのレスポンシブ対応も行い、スマートフォンで見たときのメニューや各種リンクの配置も使いやすくなりました。

ウィジェットの項目は、人気/新着記事・タグ/カテゴリ一覧など、使いやすい内容に絞って配置をしています。

煩雑となっていた広告表示も、一度すべて取り外しました。
広告はまた折を見て、邪魔にならない位置へ再配置していこうかと考えています。

まとめ：デザインリニューアルして心機一転

デザインを一新することで、ブログ運営への情熱も湧いてきました。
こんなに素晴らしいデザインを作ってくれた妻へも感謝です。
定期的に技術記事などを更新していく予定ですので、これからもよろしくお願いします！