テーマのモバイルフレンドリー化 WordPressカスタマイズ事例・実績ホームページ制作京都ファンフェアファンファーレ

WordPressカスタマイズ事例・実績として、ワードプレステーマのモバイルフレンドリー化（スマートフォン最適化）のカスタマイズについてお伝えしていきます。

WordPress（ワードプレス）は、たくさんの応用が可能なブログCMSです。ワードプレステーマ、プラグインの実装により、サイトを自由にカスタマイズできます。弊社ファンフェアファンファーレではWordPress（ワードプレス）でのホームページ制作・ウェブサイト制作、WordPress（ワードプレス）のテーマ・プラグインのカスタマイズサービスを提供しております。

まずWordPressテーマの概要について触れた後、WordPressテーマのモバイルフレンドリー事例について触れていきます。今回のモバイルフレンドリー化カスタマイズは、「モバイルフレンドリーの微調整」となります。

モバイルフレンドリー未対応サイトを根本からモバイルフレンドリー化したという事例ではなく、既にある程度モバイルフレンドリー化されているものの、一部分がスマートフォン表示に適していない仕様になっていたため微調整を加えた事例です。

WordPressテーマとは？

WordPress（ワードプレス）は、ブログCMSとして、ブログ機能をもった「ワードプレス本体」とウェブサイトの外観（デザイン）を設定する「ワードプレステーマ」、そして拡張機能の設定である「プラグイン」によって構成され、また、コンテンツはワードプレス本体の機能により、データベースに保存され、それを本体が呼び出して、ウェブページを生成する方式になっています。

簡単には、ブログ機能をもった「本体」は同じでも、ホームページ（ウェブサイト）の見た目や設定の「表示の仕方」は「WordPressテーマ」に委ねられているといったようなイメージです。

テンプレート（雛形）

WordPressテーマは、いわゆるテンプレート（雛形）のようなもので、テーマファイルとしてワードプレス本体とは独立して設置します。

このWordPressテーマも本体と同じように複数のファイル群で構成され、ヘッダー部用、記事コンテンツページ用、カテゴリページ用、トップページ用など、様々なファイルでテーマを構成しています。

しかしながら、テーマファイルの作り方は、テーマ作成者によって様々で、概ねの「型」の流れはあるものの、管理画面で細かな設定ができるように配慮されたテーマなどは、そのファイル構成が複雑な傾向にあります。

WordPressテーマのモバイルフレンドリー事例

弊社ファンフェアファンファーレは、WordPressなどのCMSをカスタマイズさせていただいております。

今回はWordPressで制作されたホームページ（ウェブサイト）において、WordPressテーマがモバイルフレンドリーに対応していなかったためご依頼をいただきました、テーマカスタマイズ事例・実績のご案内です。

WordPressテーマのカスタマイズ事例として、お受けしたご依頼内容をお伝えさせていただきます。このご依頼は、ホームページ（ウェブサイト）のモバイルフレンドリーの基本であるレスポンシブデザインが、「ある程度実装されている」という、WordPressテーマのモバイルフレンドリー微調整のご依頼でした。

ホームページが基本的なレスポンシブには対応しており、ある程度の「スマホ対応」はされているのですが、カスタムフィールドから吐き出される表などの影響で、厳密な意味でのモバイルフレンドリーではないWordPressテーマでした。

現状のWordPressテーマの問題点

現状のWordPressテーマの問題点は次のとおりです。

カスタムフィールドより出力されるコンテンツページの表の表記が、4列のためスマートフォンでは表の列幅が狭すぎて、非常に縦長の表になってしまう。
一部文字列が改行されず、スマートフォン表示の際のウェブサイトの横幅がページによって異なり、その他の部分が縮小表示され、文字が読めない。

WordPressサイト内のページにおいて、「表」が掲載されている部分の仕様がカスタムフィールドを利用したものでした。この部分の出力箇所がスマートフォン表示に適した表示形式ではなく、表が4列であるため読みにくい縦長の表になっているという状態です。

それと同時に一部の文字が改行されないため、ページの横幅が伸びて、適切なモバイルフレンドリーサイトになっていないという状態でした。

これら問題があるページ以外での閲覧には問題がありませんでしたが、カスタムフィールドを利用した「表」があるページ、一部の文字列が改行されないページにおいて、モバイルフレンドリーサイトとしては不完全な状態になっていました。

スマホ表示時のコンテンツページの仕様の問題点とご要望

このWordPressテーマは、コンテンツページに吐き出されるカスタムフィールドの部分に問題がありました。

カスタムフィールドを利用して出力されることで、ページ作りの際の入力・配置においてマークアップの手間は省けます。しかしながら、表現の自由度が低く、また、「コンテンツページの表の表記が4列になってしまう」といった問題に対応できないという問題点を抱えていました。

ご要望は次のとおりです。

カスタムフィールドでの入出力はそのままで、スマートフォン表示の際の表のレイアウトの問題を解決したい。なるべくスマートフォン表示の際は、列を1列にして読みやすくしたい。
合わせて、ページによって他の部分（表以外の部分）が縮小表示される問題を解決したい。

コンテンツページのカスタマイズ

上記のご要望を元にWordPressテーマのコンテンツページやカスタムフィールドをカスタマイズさせていただきました。

カスタムフィールドの出力が二重にも三重にもファイルを組み合わせて実装されていたため、htmlの要素出力に問題があり、CSSの編集だけでは変更できなかったため、テーマファイル、プラグインファイルの各phpファイルを操作いたしました。

基本的なレスポンシブ仕様にはなっていたものの、テーマの作りが複雑で、このカスタマイズは一筋縄では行かなかったため、少し費用がかかる結果になりました。

このカスタマイズと合わせて、表を際立たせるために表のウェブカラーの調整なども行いました。

カスタマイズによるメリット

今回のモバイルフレンドリー化に関する調整・カスタマイズによるメリットは次のとおりです。

スマートフォン表示において、コンテンツページの表が見やすくなった。
カスタムフィールドでの入力方式自体は残すことができたため、ページ作りは今まで通り。
該当箇所の非モバイルフレンドリーによって影響を受けていた各部分（縮小表示されてしまっていた部分）がモバイルフレンドリーに対応し、スマートフォン表示におけるユーザビリティが向上した。

費用　6.7万円(コンテンツページ・カスタムフィールドカスタマイズ分)

※費用は一例です。初回投稿掲載時点の価格です。

今回は、WordPressカスタマイズのうち、WordPressテーマのモバイルフレンドリー（微調整）のカスタマイズ事例をご紹介させていただきました。

WordPress（ワードプレス）のカスタマイズ

コードを書く前に知っておきたいモバイル対応の「落とし穴」

WordPressテーマをカスタマイズしてスマホ対応（レスポンシブ化）させる際、多くの人が「PCの画面をどうやってスマホの幅に収めるか」というパズルに終始してしまいます。

しかし、PCとスマホの決定的な違いは、画面の大きさだけではありません。「マウス操作か、指でのタッチ操作か」という入力デバイスの違いこそが、ユーザー体験を左右します。 CSSでレイアウトを整えた後に必ず直面する、操作性の問題とその解決策についてお話しします。

「マウスオーバー」はスマホの世界には存在しません

PCサイトでは一般的だった「マウスを乗せると色が変わる」「メニューがドロップダウンして開く」といったホバー（:hover）効果は、スマホでは機能しません（あるいは、タップした瞬間に一瞬だけ発動する不安定な挙動になります）。

もし、PC用のグローバルナビゲーションをそのままスマホで縮小表示し、「タップしても下層メニューが開かない」という状態になっていたら、それはユーザーにとって故障しているのと同じです。スマホ対応させる際は、ホバーに依存した設計を捨て、JavaScript（jQueryなど）を使って「タップしたらクラスを付与して開閉する（トグル機能）」という仕組みを別途実装する必要があります。見た目だけでなく、裏側の挙動もスマホ用に書き換える覚悟が必要です。

何でも「ハンバーガーメニュー」に隠すのは危険

スマホ対応の定番といえば、画面の端にある三本線のアイコン（ハンバーガーメニュー）です。メニューをすっきり収納できるため便利ですが、これを過信するのは禁物です。

メニューの中に隠してしまった情報は、ユーザーの目に入りません。「お問い合わせ」や「商品購入」といった、ビジネスにとって最も重要なボタン（コンバージョン導線）までハンバーガーメニューの中にしまっていませんか。

プロの設計では、本当に重要なアクションボタンだけはメニューの中に隠さず、画面の下部に常に固定表示（フッター固定メニュー）させたり、ヘッダーにアイコンとして露出させたりします。「探させない」工夫こそが、モバイルフレンドリーの真髄です。

実機での「親指チェック」を必ず行ってください

Chromeのデベロッパーツール（検証機能）でスマホ表示を確認して満足していませんか。シミュレーターはあくまで「見た目の確認」しかできません。

実際にiPhoneやAndroidの実機で自分のサイトを触ってみると、「ボタンが小さすぎて隣のリンクを誤タップしてしまう」「スクロールしようとしたら地図が反応して動かせない」といった、操作上のストレスが見つかるはずです。 Googleも「タップ要素同士が近すぎないか」を評価基準にしています。指の腹で押せる十分なサイズ（一般的には44px以上）と余白が確保されているか、必ず自分の親指でテストしてください。