Habakiriを使って自社のブログメディアをリニューアルするとき気をつけたこと

ぼちぼち リニューアル!

この記事は、WordPressの公式テーマ「Habakiri」のアドベントカレンダー「Habakiri Advent Calendar 2015 」の22日目に登録している記事です。前の記事「Habakiriの子テーマで案件に対応してみた話」からバトンを引き継ぎました。


自社でブログメディアを始めたい

StudioBRAINでは、私たちが興味のあることや考え方を知ってもらうことを主な目的とし、1年前から「ぼちぼち」というブログメディアを始めました。

詳しくは代表である今井の書いた記事をご覧ください。

https://www.studiobrain.net/2015/12/05/10485

メディアを運営するというのは全く新しい取り組みでしたが、とにかくスタートしてみようということで、とてもシンプルなブログ用テーマをそのまま使い、みんなでひたすら記事を書いていきました。


コンテンツに合わせたサイトリニューアル

1年が経過すると記事の数は100件くらい蓄積され、いくつかのカテゴリーで分類できるようになったので、このタイミングで全面リニューアルし、コンテンツの魅力がわかりやすく読みやすいサイトにしたいと考えました。

そこで利用させていただいたのが、案件で何回か使ったことがあり、便利だと感じていたHabakiriでした。

Habakiriのよかったところ

  • Bootstrapが入っている→ レスポンシブ対応が楽
  • 最小限の装飾でシンプルなデザイン→ 制作のベースとして理想的
  • テンプレートの部品やCSSがモジュール化されている【重要】→ 以前に案件で作ったHTMLやCSSが使い回せるので効率的

こちらがBeforeとAfterです

 

after


メディアサイト「ぼちぼち」をリニューアルする上で気をつけたポイント

リニューアルにあたっては、下記のような点に工夫しました。

パーツを再利用できる部品にできるようにした

記事の一覧表示やスライダーなどさまざまなパーツを、単体でサイトのどこの部分にでも移動できるように、もしくは別の案件でも再利用できるように、再利用可能にすることを前提として設計しました。

これまでの案件で必要になって作ったパーツや、今回のリニューアルにあわせて作り足したパーツを無駄にせず、後々に活用できるものにしておきたかったのです。

書きためた記事を、様々な角度から読んでもらえるようにした

メディアとしての特性を考えた結果、新着だけではなく、おすすめ記事や注目の記事など、いろいろなパターンで一覧表示できるエリアを作りました。
ちなみにこの部分はウィジェットで管理しているので、管理画面から簡単にレイアウト変更ができます。

ぼちぼち top

記事の一覧表示をする仕組みにはFlexible Posts Widgetプラグインを使っています。カテゴリやタグなど、好きな条件で記事一覧を取得でき、表示するViewの部分をカスタマイズしやすいのでおすすめです。
https://ja.wordpress.org/plugins/flexible-posts-widget/

スライダーをOWL Carouselに変更

もともとHabakiriにはSlickを使った全面スライドショーが装備されていたのですが、少し使い勝手が悪いことがありました。

というのが、このサイズで使ってもデザインを損なわない品質の写真をお客様自身が用意するのは難しいのと、写真を撮ったそのまま使ってしまうと高さがありすぎることがあり、もう少し小さな写真でも気軽に使えるスライドショーを実装したかったのです。

そこで、設置が簡単で多機能、かつ動きが安定しているOWL Carouselを導入しました。ぼちぼちでは、トップページで注目の記事を見せる部分に使っています。

Owl-Carousel2

この部分にはSmart Custom Fieldsプラグインを使ったカスタムフィールドを用意していて、誰でも写真や文章を入れたら簡単にスライドを追加したり、順番を変えたりできるようにしてあります。

slide

スマホのメニューに電話と地図のボタンを用意した

スマホ表示になった時、ヘッダーに固定で3つのボタンが装備されるようにしました。

スマホヘッダー

これはもともと、案件で電話をかける機能と地図ページにリンクするボタンが必要になった際、オリジナルで作ったものを再利用しています。

「ぼちぼち」では電話も地図も要らないので、代わりにホームと SNSへのリンクを置いています。

ブログのアーカイブはサムネイル画像表示にした

「ぼちぼち」ではなるべくきれいな写真を撮るように心がけていて、アイキャッチ画像を大きなサイズで見せたかったので、アーカイブ表示の写真サイズを大きくし、タイトルなどの文字は控えめなサイズにしました。

子供とハイキング---ぼちぼち

文字を大きくした

標準の文字サイズが少し小さく感じたので、本文の文字サイズを大きめにして可読性を高めました。

多機能なサブメニューも作った

グローバルメニューの他、一定の高さまでスクロールすると固定するローカルナビも作りました。トップページではページ内リンクになり、下層ページではカテゴリーアーカイブへのリンクになります。

これも案件からの流用で、最近はトップページをワンカラムのLPにすることが多かったため、ページ内リンクが必要になり、その時に作ったパーツを持ってきました。


こうして、自分好みにカスタマイズしたHabakiriをこれからの制作にも活用し、制作を効率よく進めるようにしていきたいと思います。

「ぼちぼち」のようなメディアサイトの制作にご興味をお持ちの方がおられましたら、上記のようなパーツを使って効率よく制作ができると思います。ぜひご相談ください!


コメントを残す