モバイル時代のサイドバー設計｜不要なウィジェットを非表示にする考え方と実装方法

1カラムが多く見られるようになった昨今のサイトレイアウト事情ですが。
サイドバーを設置した2カラムのサイトもまだまだ多いです。
私にしても、他のサイトは1カラムですが、技術ブログ的な当サイトは2カラムにしています。

ただ2カラムですと、スマートフォン（モバイル）ではサイドバーが下段に追いやられます。
そのため、PC用に設置したウィジェットを表示しない方がいい場合もあります。

その上で、

本記事ではサイドバーウィジェットの設計思想と出し分けの方法についてまとめてみます。

サイドバーウィジェットをモバイル非表示にする理由

どうして必要のないサイドバーウィジェットをモバイルでは非表示にした方がいいのか。

具体的にはどう高まるのか。
サイト高速化とサイトレイアウトの2つの観点から考えます。

サイト高速化からのUX向上

不要なウィジェットを読み込ませなければリクエストが減ります。
その分だけ軽くなり、サイト速度が上がり、訪問者は快適にサイトを閲覧できます。
特にAdSenseやASPのウィジェットは処理が重いので、読み込ませないことによる恩恵が大きいです。

一旦読み込んでから表示を消しているだけなので、基本的に読み込み負荷は減りません。
そして、

くれぐれも御注意ください。

サイトレイアウトの観点からのUX向上

2カラムの場合、モバイルではサイドバーがメインカラム下に落ちます。
もしサイドバーに大量のウィジェットを積んでいる場合、その分だけ下に伸びます。

もしかしたらこんなスクロール沼にハマる人もいるかも？
そこでモバイルでも見てもらいたいウィジェット以外を非表示にすることで、ページ最下部までの長さを短くします。
レイアウト的にすっきりしますし、訪問者に対して親切です。

モバイルで広告ウィジェットを非表示にしたら収益は減る？

もしかしたらこんな反論をされるかもしれません。

そもそもPCですらサイドバーの広告の成果は薄いという説もあります。
モバイルではなおのこと。
むしろ非表示にすることで回遊率が上がって、間接的に広告収益アップに繋がるという考え方もできます。

もちろん各人の環境によって違いますから、収益が減る可能性を否定はしません。
こだわる方はヒートマップ分析で確かめてからでいいと思います。

非表示にするウィジェットの例（当サイトの場合）

では、どんなウィジェットを非表示にすればいいでしょう？

ヒントになりましたら幸いです。

当サイトのサイドバーウィジェットは次の通りです。
○はPC・モバイルとも表示、×はPCのみ表示です。

1. ConoHa VPS紹介ウィジェット　→×
2. ConoHa WING紹介ウィジェット　→×
3. ConoHaおすすめ記事　→○
4. 著者紹介　→×
5. KUSANAGIおすすめ記事　→○
6. 高速化おすすめ記事　→○
7. ナビメニュー　→○
8. TOC（目次）　→×
9. SNSシェアボタン　→×
10. 検索バー　→○

１と２は広告に準じます。
それもレンタルサーバーの広告ですから、モバイルから見てる人が入ってくれるとも思いません。
ただの画像リンクですから消さなくても大きな影響はありませんが。
それでもサイト速度的にもレイアウト的にもムダなのは間違いないので消してしまいます。

4は、記事の末尾に著者情報があるため。
訪問者は「また？」と思うかもしれません。
少しスクロールしたらもう一度出てくるなんて明らかにムダです。

8は、PCですと記事を読みながら「全体の構造」や「いまどこまで進んだか」を把握できる点でUXの向上に繋がります。
しかしモバイルですと、既に記事を読み終わっているため用をなしません。

9も4と同様。
もしSNSシェアをしてくれるのなら、記事を読み終えた時点でしてくれる可能性が高そうです。

逆に、PCとモバイルの両方で表示するウィジェットにも理由があります

モバイルで見ていただけますとわかりますが、おすすめ記事がずらっと並ぶ形になってます。
検索バーも「他に読みたい記事あったら検索してもらえると嬉しい！」という意図で置いています。

サイドバーウィジェットをPCとモバイルで出し分ける方法

方法１　テーマのウィジェット条件分岐機能を使う

最近はウィジェット条件分岐機能のついたテーマが増えています。
テーマについているなら、それを使うのが一番早いです。

注意点として、

後者の機能がついていても前者の機能がついていないこともあります。
その辺りはテーマごとに御確認ください。

特にサイト制作初心者には、この方法をおすすめします。
テーマについてるなら、それを使うのが一番手っ取り早いです。

方法2　functions.phpにコードを追加する

テーマに当該機能がない場合の方法です。
ウィジェット管理画面にチェックボックスでPCとモバイルの出し分けをできるようにする機能を追加します。

こちらが完成図です。

何もチェック入れなければPCとモバイルの両方で表示します。
「PCのみ表示」にチェックを入れればモバイルで非表示になります。

注意点として、

これはデバッグ作業で見つけやすくするためです。

functions.phpに以下のコードを追加してください。
少なくとも、私の使っているテーマ「GeneratePress」では動作を確認しています。

/**
* ウィジェット設定PCモバイル出し分け
*/



add_action('in_widget_form', function ($widget, $return, $instance) {

$pc_only = !empty($instance['pc_only']);
$mobile_only = !empty($instance['mobile_only']);
?>

<p>
<label>
<input
type="checkbox"
name="<?php echo esc_attr($widget->get_field_name('pc_only')); ?>"
value="1"
<?php checked($pc_only); ?>
>
PCのみ表示
</label>
</p>

<p>
<label>
<input
type="checkbox"
name="<?php echo esc_attr($widget->get_field_name('mobile_only')); ?>"
value="1"
<?php checked($mobile_only); ?>
>
モバイルのみ表示
</label>
</p>

<?php
}, 10, 3);

add_filter('widget_update_callback', function ($instance, $new_instance) {

$instance['pc_only'] = !empty($new_instance['pc_only']) ? 1 : 0;
$instance['mobile_only'] = !empty($new_instance['mobile_only']) ? 1 : 0;

return $instance;

}, 10, 2);

add_filter('widget_display_callback', function ($instance, $widget, $args) {

$pc_only = !empty($instance['pc_only']);
$mobile_only = !empty($instance['mobile_only']);

if ($pc_only && wp_is_mobile()) {
return false;
}

if ($mobile_only && !wp_is_mobile()) {
return false;
}

return $instance;

}, 10, 3);

方法3　プラグインを使う

テーマに機能がない。
コードは怖くて触れない。
その場合、プラグインを使う方法もあります。
「Widget Options」がこの手のプラグインとして知られるところです。

ただ、個人的にはですが、

プラグインを増やしすぎると重くなります。
セキュリティの問題もあります。
特に今回はPCとモバイルで出し分けるというシンプルな目的なので、私はコードで実装しました。

方法4　CSSで消す

CSSでもウィジェットを消すことができます。
IDやクラス名をつけて、次のコードをstyle.cssに記述します。

.hoge{display:none;}

ただし先述した通り、一旦読み込むのでサイト高速化には寄与しません。
テーマの機能やPHPコードと併用して、補助的に使うのをおすすめします。

場合によってはPC用のキャッシュがモバイルで表示されることもあります。
そのときの保険として、CSSでも記述しておきます。

また、これも繰り返しますが。

PHPの出し分けで消す分には元のウィジェットが最初から存在しない扱いなので問題ありません。
しかしCSSだと、表示されるべきウィジェットをわざわざ隠している状態となります。
両者は同じ非表示でも大きく異なりますので。

まとめ

ウィジェットを増やすのではなく、不要なものを減らすこと。
それもまたサイト改善のための一つの方法です。

2カラムのサイトを運営しているなら、モバイル表示を見直してみてはいかがでしょうか。