おはようございます！マネジメントオフィスいまむらの今村敦剛です。
10連休はいかがお過ごしですか？補助金申請業務を乗り切った僕は、テーマを新しく購入して、じっくりと当社のホームページの見直しを行いました。ホームページの見直しはキリがないですね……? 新テーマの機能を活用ながら変更点等を紹介したいと思います。
WordPress有料テーマ"Affinger5"とは
今回購入したのは"Affinger5"というテーマですよ
へー。どんなテーマなの？
アフェリエイトブログに特化したテーマだそうです。日本のWordPress有料テーマのなかでは、まずまずの知名度じゃないかな
企業のホームページなのに、アフェリエイトブログのテーマなんだ？
確かに当社のページは企業ページだけど、当社のコンテンツ数はブログが圧倒的に多いからね。ブログに特化しているほうが使い勝手がよいというのもあったかな。また、デザインが比較的に堅実なので、企業ホームページのテーマとしても公式で推奨されているよ
ポイント
この「会話ふきだし」機能もAffinger5で実装されている機能の一つです。当社ではこれまで、廉価版のSTINGER PRO2でWordPressページを作りこんでましたが、廉価版では反対向きの吹き出しを作ることができなかったんですよね。
魚拓で見る当社ホームページのビフォーアフター
当社では創業当初の2017年11月からホームページを自作して運用していますが、当時のものと新しいものを比較してみましょうかね
まず、上の画像は2018年1月16日の当社ホームページです。創業から3カ月ほどたった時のものですね
うーん。よく言えば手作り感あふれる感じですが、はっきり言うと素人作品ですね……
はっきり言うなあ? 基本レイアウトは今と変わってないんですけど、バナーの作り方が雑ですね
これが次にはどうなるの？
これが2018年8月24日のものですね。基本的にはこの直近までこの作りでした。ヘッダー画像を大きく、スライドショー形式にしてインパクトをもたせたところが一番大きな特徴かな
多少すっきりしたね。でも、スライドショー形式にしたのはいいけど、画像がチラチラと変わって目障りだね（きっぱり）
辛辣だなあ? まあ、画像は情報量が多いから、画像に頼りすぎるとどうしてもとっ散らかって見えるよね。
このページが、どう見直されたの？
ヘッダー画像のスライド部分の画像を一枚に固定して、文字だけをスライドさせるようにしたのが、最も大きな変化かな。ヘッダー画像も画面幅いっぱいに広げることで、インパクトをさらに大きくすることを狙いました
なんでペンを持っている人の画像なのかが謎
現場を確認して回っているイメージを醸したかったから……というか、現場主義だよ！というアピールのためかな? 本当は、僕自身が現場に入っているところを、プロのカメラマンにでも撮ってもらえるといいのだけど、そこまでやるお金も自己顕示欲もないからねえ
ヘッダー画像の下にバナーみたいのがあるね
これもAffinger5の機能で、ヘッダーカードというものです。ユーザー動線のために、特にクリックしてほしいページのリンクを、ページ上部に常時表示するようにしたよ
新しいページもやっぱり画像に頼りがちだね
う、うん……。このヘッダーカードの画像は今後の課題かな。スマホ版はミドルメニューというシンプルなボタン形式にしているので、これをPC版にも応用しようかと思っているよ
参考リンク
今回の変更はモバイルからの閲覧を強化するのが一つの目的
今回の変更は、モバイルアクセスの利便性向上も目的だったんだ。ざっくりいうと、スマホ用ミドルメニューとフッターメニューを作ったんだ
スマホ用ページでよく見るアレですね
そうそう。これまで、ミドルメニューの代わりをしていたのは画像ファイルで作成したバナーだったので、多少は軽くなったんじゃないかな。
しかし……このフッターメニューは押しにくいね……
iPhoneだとSafariのアイコンと若干干渉して押しにくいんだよね。Androidではまずまずの押しやすさなので、端末の問題ということで……
上の画像では見えないけど、スマホ用はスライドメニュー（トップに"三"みたいなボタンがあって、それを押すとメニュー一覧が横からスッとでてくるやつ）が設定されているね
これも最近のモバイルページでは当然のように設定されているからね
今回の改修点まとめ
ココがポイント
- ヘッダー画像をブラウザ幅100％に。（背景画像を幅100%のレスポンシブにする）
- ヘッダー画像は固定とし、文字だけをスライドさせる（背景画像を１枚だけ設定し、背景を透過処理した文字パターン３つをヘッダー画像に設定）
- ヘッダーカードを４枚設定右コラムのナビゲーションを、jpg画像ファイルからウィジェットの「STINGERオリジナルボタン」に変更。アイコンはWebアイコンフォントのfontawsomeを使用
- 右コラムをスクロール追尾に変更
- フッターロゴについているキャッチフレーズ（ものづくり経営革新等支援機関）を削除（フッターだけの削除はAffinger5の機能ではできないので、子テーマのst-footer-content.phpを修正）
- モバイルページでのミドルメニューの設定
- モバイルページでのフッターメニューの設定
- モバイルページでのスライドメニューの設定
- 事業概要のページとアクセスのページを分離
- これらのテーマ変更、レイアウト変更等に伴う、Google Adsense挿入位置の調整
- これらのテーマ変更、レイアウト変更等に伴う、AMPの調整
45才男性
これらの変更のほとんどすべてがAffinger5の標準機能でできるんだからすごいです。
（突然出てくる謎の45才男性)
こんなこともできちゃうんですよ～。多機能なので使いこなせないですが?
こういった装飾を多用すると、かえって見にくくなるので考えものですね?
おしまい
おしまい
おしまい