WordPress＋レスポンシブデザインでリニューアル

2013年 4月3日　 SEO対策

お客様からWordpressを使ってレスポンシブデザインにリニューアルしたいとのご要望がありました。

ちなみに、Wordpressとはブログのように管理画面でページの編集や追加ができるシステムで、レスポンシブデザインとは通常パソコンとスマートフォンなどの携帯端末では横幅が違うため、別々の型が必要でしたが、横幅によってデザインを変えて、パソコン・携帯端末両方に対応した作りにすることです。

「そんな便利なのがあるんなら最初からそれにしろよ（怒）」と思われる方もいるかもしれませんが、レスポンシブデザインができるようになったのはここ最近のことですし、通常のパソコンサイトを作るのと比べて数種類のデザインが必要になり手間も多くなります（料金も高くなる）し、デザインの制限もあります。

それと、古いIE（インターネットエクスプローラー）では一部対応してないので、若干レイアウト崩れを起こす可能性もあります。

以上いくつかのデメリットはありますが、最近グーグルでは、やたらとこのレスポンシブデザインを推奨しているので、SEO対策も考えると今後主流になっていくかもしれませんね。

リニューアルの準備

リニューアルを行う前に、まずサイトがどのような構造になっているか解析しないといけないのですが、私が作ったサイトで、どうやって作ったかがわかるので、今回はすぐに終わりました。

あとはデザインをどのようにするか、デザイン案をお見せしてパソコン・その他の端末のデザイン決定。

機能もどのような機能を追加するかお伺いしながら仕様を決めていきます。

古いスマートフォンでも閲覧することを想定して、画像を極力使わず、できるだけシンプルにしてページを軽くしました（凝ったデザインにすると重くなってスマートフォンで見るのが辛くなる）

打ち合わせが終わったら、早速制作に取り掛かるのですが、今回はWordpressを使用するので、テーマ（テンプレート）部分を作り込んでいきます。

テーマの作成自体は通常のWordpressと変わりませんが、レスポンシブデザインなので今回は2種類のデザインを用意しました。

片方は通常のパソコンとipadを横にした時（横幅1024px）用で、もう片方はその他の携帯端末用（1023px以下）です。

2種類のデザインを横幅に応じて使い分けるようにして、一応古いブラウザに対応するようにjavaも入れておきました。

もちろん内部SEOをしっかり行って、クロスブラウザ対応（レスポンシブデザインのため古いIEでは若干レイアウトが崩れますがそれ以外はOKです）もしっかりやってます。

最後にテスト環境で確認して、問題がなければ一旦終了です。

追加する機能によってはプラグイン同士の競合が起こってバグが出る可能性があるので、テスト環境で実際にWordpressを構築してみます。

ここで実際に投稿（ページを追加）して、テーマの微調整も行っていきます。

今回はカスタムメニューを付けたのですが、カスタムメニューもデフォルトだと無駄なソースを生成するので、ソースがすっきりするようにカスタマイズしました。

テスト環境で問題がなければ、実際の環境でWordpressを再構築していきます。

今回は通常のサイトからWordpressへの移行なので、Wordpress本体のインストールから始まってプラグインのインストール、設定も行いました。

次に、記事を投稿（サブページを作成）します。

最後に実際の環境での動作を確認して、全て問題がなければ完成です。

レスポンシブデザインについては、古いIEでは完璧に動作しないので、今まであまり良いこととは思いませんでしたが、現在では古いIEを使っている人がかなり少ないですし、古いIEでもほとんど対応できるjavaも出てきてるので、今からレスポンシブデザインにするのもありだと思います。

先述しましたが、グーグルがやたらと推奨しているので、SEO的にも有利になるはず（？）ですし。

レスポンシブデザインやWordpressにご興味のある方はお気軽にご相談ください。