東京都府中市、渋谷区のWEB制作会社Maromaroのブログです

2015.11.11

miura

Maromaroブログをリニューアルしました。

こんにちは。
Maromaroの三浦です。

この度Maromaro公式サイトのリニューアルと連動してMaromaroブログもリニューアルしました。

デザインについて

レスポンシブレイアウトでPC、SPなどワンソースで表示できるようになっています。
基本デザインは公式サイトのリニューアル案を踏襲していますがMaromaroブログの方では必然的に文字量が多くなるものなので行間や余白をゆったり取るなどブログとしての文章の読みやすさや分かりやすさを意識しています。
色味はMaromaroのテーマカラーとなる白と黒をベースにアイコン等のカラーを差し色として配置しています。
基本的に色でうるさくならないように極力シンプルなデザインを目指しました。

トップページについて

151111_img02

トップページでは最新の記事を大きく表示することで他の記事と差別化。トップページにアクセスした際にすぐ最新の記事が目に入るようにしました。
また、乱立していたカテゴリーを縮小し、大まかな枠組みに絞りました。細かい内容についてはタグを割り当てることでさらに細かな分類をしています。

記事ページについて

151111_img03

記事ページでは記事の投稿者の画像を表示したいと社内で意見が出たのでサムネイルの上に各社員のアイコンを表示しています。投稿者が分かりやすくていいですね。
また、見出しの装飾を見直し、目次を追加することでh2、h3の差を視覚的に分かりやすくしました。

151111_img04

SNSボタンを以前のアイコン型から箱型にして視認性を上げました。あわせて個人的に使用頻度の高いPocketへ送るボタンを追加で設置しました。
最下部の関連記事には以前は表示されていなかったサムネイル画像を表示しました。やはり画像がある方が存在感がでますね。
この辺りの内容については様子を見て関連記事以外のものなどもっと拡張していくことができそうです。

まとめ

Maromaro公式サイトのリニューアルと連動してブログでもデザインを踏襲しつつ読みやすさや使い勝手を向上するべくリニューアルしました。
言葉で言うと簡単な内容だったりもしますが、単純にプラグインを利用するだけでは実現できないこともあってコードを書いたりとWordPressの勉強になりました。

以上、三浦でした。