1. ホーム > 
  2. 事例・レポート > 
  3. ブログのデザインをリニューアルしました

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

今回のリニューアルでは、スマホ専用テーマの作成とnoindexの設定をやり直しました。スマホサイトはダイナミックサービングでHTMLの出し分けをしています。WordPressだと設定も簡単です。

  • 2016/5/16
  • 2016/5/16

いつ以来になるのでしょうか…もう覚えていないのですが、デザインをリニューアルしました。

といっても、以前のレイアウトを使いつつ全体的に色味を抑えたデザインに変えただけです。それでも結構雰囲気が変わったかなと（個人的には）思っています。

リニューアルの背景

今回のリニューアルには、2つの背景があります。

  1. あちこちのドメインに分散していたブログの統合する
    「lblevery.com」以外のドメインでもいくつかブログを持っていて、同じテーマのコンテンツもあちこちに分散されている状態でした。コンテンツのテーマが全く違えば、ドメインを分ける（ブログを分ける）方がいいのですが、同じテーマの場合には一つのドメイン（ブログ）に集約した方がいいはずです。当時は別の意図もあって別のブログを作ったのですが、複数のブログを運営することに疲れてしまった事と、アウトプットが分散されて何となく気持ち悪い状態になってしまったので、今回ブログを統合することにしました。
  2. サイト名をlbleveryに統一する
    古いホームページの整理でも書きましたが、lblevery.com内にも古いWebサイトが存在しています。
    今回はそういった古いWebサイトのコンテンツも含めて、このブログにコンテンツを統合しますので、サイト名も大昔に名乗っていたサイト名に戻すことにしました。このドメインの場合、ドメインのルートはずっとlbleveryだったのに、下層にあるサイト名が別の名前だったので、検索結果にも自動で挿入されていたことも解消したかったという事もあります。design-renewal_001

こういった背景があり、心機一転のつもりでデザインも落ち着いた感じに変更しました。

また、今回のリニューアルでは「細部で手を抜かないこと」を意識しました。このデザインでずっとやっていきたいのですが、細部で手を抜いてしまうと、またデザインを変えたくなってしまいそうなので。

気づいていないところで手が入っていない部分もあるとは思いますが、気づいていて放置している部分はありません。

テーマを作る時に書いた関数なども整理して、ナレッジとして公開したいと思います。

リニューアルでやったこと

視覚的な部分以外で、今回のリニューアルでやったことは大きく2つです。

スマホ専用テーマを作成しました

今までは、WordPressのプラグイン（WPtouch Mobile Plugin）を使ってスマホページを表示していましたが、今回はスマートフォン専用のテーマも作成。

design-renewal_002レスポンシブデザインにすることも考えましたが、レスポンシブはWebサイト内の要素（メニューや広告など）のレイアウトを考えると大変だったのと、今後テーマの改変をするときに、動作確認をするのも面倒だったので、スマホ専用のテーマを作りました。

スマホ専用テーマは、PC版のサイドメニューにある機能は極力削って、できるだけシンプルにしています。

メニューの構成や要素の出しわけができるので、個人的にはダイナミックサービング（同じURLで別のHTMLを表示する方法）か、スマホ専用のURLを作る方が良いと思っています。

PCとスマホのテーマ切り替えには「multi-device-switcher」を利用しています。
プラグインの画面でスマホ専用テーマの設定をするだけなので、とても楽チンです。

design-renewal_006

noindexの設定をやり直し

今まで雑だったnoindexの設定をやり直しました。

canonicalやnoindexあたりはクライアントに指示することも多いので、自分のブログでちゃんとやらないとダメだろうと。

今までは検索結果くらいしかnoindexを入れていなかったのですが、アーカイブページや画像のページなどもすべてnoindexを入れ、ページ送りした時の不要なページもnoindexに。

インデックスが不要なカテゴリページもnoindex

このサイトの場合、下図のようにディレクトリを揃えるために、カテゴリーページをすべて固定ページで作成してリダイレクトしています。

design-renewal_003

カテゴリページは、単に記事を並べたタイプのページ（記事一覧型）と、一つのコンテンツとして成立しているタイプ（LP型）の二つのパターンがあります。

design-renewal_004

本来すべてのページをLP型にして、自然検索からのアクセスを集める形にしたいのですが、コンテンツが不足していたり、コンテンツそのものを書けなかったりするページは、従来の記事一覧型にしています。

LP型の場合も2ページ目が存在しますが、表示される内容は1ページ目と変わりませんので、LP型の2ページ目以降にはnoindexが入るようにしています。

design-renewal_005

ややこしいですが、WordPressは無駄なページを作ったりしますので、noindexの処理は結構大変です。

リニューアルでできなかったこと

<head>タグ内のページネーションにもチャレンジしましたが、難易度が高く今回は未実装。ページネーションも指示をよく出すポイントなので、近いうちに再チャレンジたいと思います。

またパンくずの構造化をJSON-LDで作り直すつもりでしたが、これも時間の関係で未実装です。コンテンツの統合と新しいコンテンツのアウトプットと並行して作業を進めるつもりです。

「役にたった」と思ったらシェアお願いします

▲