WordPressでLPOを作る

個人的に思うLPO構築思考

LPO（ランディングページ）は、ある商品などに的を絞り紹介し、購入や登録など成約まで誘導しやすくするようにした「１ページもの」のサイト。
通常のHPに比べたら圧倒的にグラフィック（画像）が多い。また目立つ様に書体なども加工されているため、ほぼ画像で完結させる（せざる負えない）部分も多い。
従ってSEO的に通常のWEBサイトに比べれば圧倒的に弱いため、広告などで流入を補う必要がある。

と言うことを踏まえると、過敏にマークアップを考える必要もない。だいたいタイトルキャッチなんかも画像にするしかないのだから。最低限文法守っていればOKなはず。

１Pだけど以外と面倒なLPOのコーディング

レスポンスにて構築するのが日常の場合、１枚画像で処理するしかない部分にタイトルやら飾りやらゴチャゴチャデザインされると「この画像の部分どないしよう？」と言う部分に相当の割合で遭遇する。でもってタブレット表示のデザインなんか無いもんだから、無駄に悩む訳だ。
仕方なく画像をいじくり、中間のレイアウトをするようなことはしたくないもんね。

解決策は「レスポンシブデザイン」をやめる

スマホはスマホのデザイン、PCはPCのデザイン、その中間は「スマホもしくはPCの縮小表示」にする。これならデザイナーの意向通りに出来るしクライアントにも「同じでしょう？」と言える。（だいたい中間表示のことなど考えてないから大丈夫）

レスポンシブデザイン脳になっていると、この発想はすんなり出てこない。

やり方は簡単

まず通常通り静的なページを作る。この際HTMLファイルは１つにしてスマホ、PCそれぞれの「表示幅」を決める。スマホのデザインはだいたい全幅、PCはコンテンツ部分の幅を決めておけば良いと思う。

この際予め画像パーツをばらしておくと思うが

画像部分はスマホ、PCともに対にしておく（スマホが画像ならPCも同じ部分を画像に）

としておくとpictrueタグを使えば勝手に画像表示を分けてくれるので楽。
その場合、pictrue内の画像のフォーマットも合わせるのが吉。
（自分のiphoneではフォーマットが違った場合、切り替えてくれなかった。謎）

なおこの仕様の注意点として

PC時デザイン幅以下になった場合、横スクロールが出る。つまりデザイン幅以下にはならない。またタブレットなどの場合、PCの表示をそのまま縮小表示するのでデザイン幅ジャストサイズになる。

もちろんCSSでの設定次第ではあるので、その辺のところは考慮して自己調整は必須。

CSSコーディング

CSSでコーディングする際はHTMLの「viewport」をいじくり、上で決めた「表示幅」ごとにスマホとPCを分けコーディングを行う。

/* 通常のレスポンシブデザイン */
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

/* スマホの表示幅750pxの例 */
<meta name="viewport" content="width=750">

/* PCの表示幅1100pxの例 */
<meta name="viewport" content="width=1100">

スマホが終わったら、viewportをPCの幅に書き換えコーディングする・・・と言う具合に行う。

CSSファイルはメディアクエリを使って１ファイルで完結が基本。

WordPress構築

どこのテンプレートに入れるか？はご自由に。肝の部分は「viewport」をどうするかだ。ここは面倒くさいのでプラグインの助けを借りる。

使用しているデバイスがスマホなのかタブレットなのかPCなのか判断してくれるプラグイン。WPにも wp_is_mobile と言う関数があるが、タブレットもモバイルとみなされてしまうらしいので、より正確な検出をしてくれるように調整してくれるとのこと。PHPで扱えるのがGood

headerテンプレートを編集

/* 例：headerテンプレート */
<?php
$is_mobile = wp_is_mobile();
$viewport = 1100;
if( $is_mobile === true ) $viewport = 750;
?>
・
・
・
<meta name="viewport" content="width=<?php echo $viewport; ?>">

上の例はPCのデザイン幅が1100px、スマホのデザイン幅が750pxの例。
これでスマホ、PCの表示切り替えが可能になる。

おまけ。WPの「pictrue / srcset」対応

これをしないと記事内でpictrueタグを使用している場合、ショートコードを変換してくれない。

/* functions.phpとかに */
function allow_srcset_in_shortcode( $tags, $context ) {
	$tags['img']['srcset'] = true;
	$tags['source']['src'] = true;
	$tags['source']['srcset'] = true;
	return $tags;
}
add_filter( 'wp_kses_allowed_html', 'allow_srcset_in_shortcode', 10, 2 );

許可するものは想定出来るものを全部ぶち込んでみた。
初めてこの問題に遭遇した時はプチパニックになったなぁ・・・と言うことで「転ばぬ先の・・・」なんとやらで入れとくのが吉。

まとめ

結構生真面目にLPOでもレスポンシブデザインをしていたが、無駄な工程が多い感じがしていたのを解消できた。

「WP使う必要ある？」と疑問に思うかもしれないが、お決まりの「フォーム」設置を考えるとプラグインを使う方が手っ取り早く安全。
予算や時間があれば、ページ内のコンテンツのブロックごとに投稿記事を分けて構築しておけば、表示順序の入れ替えや（記事順番入れ替え可能なプラグインを使用）、追加のコンテンツの対処なども長いコードを見ることなく、メンテナンス性も上がる。