SEO対策なら株式会社ペコプラ > Webサイト制作 > サイト制作 > デバイス別にviewpointを設定してLPをいい感じにレスポンシブさせよう！

デバイス別にviewpointを設定してLPをいい感じにレスポンシブさせよう！

Webサイト制作

サイト制作

2020.04.30

デバイス別に viewpointを設定して LPをいい感じにレスポンシブさせよう！

リスティング広告に欠かせないLP(ランディングページ)

ペコプラでは設計からデザイン、コーディング、サーバーUPまで一貫してご依頼いたく事はもちろん、
デザインだけクライアント様からいただき、コーディングとレスポンシブ化を依頼される機会も多くあります。

今回は、自社であってもデザインが配給であっても、PC用デザインしかない場合に、どのようにレスポンシブでスマホ用ランディングページを作れば良いか、デバイス別のviewpoint設定する方法などの突破方法をご紹介していきます！

1 LPはレスポンシブしない方が良い？
2 言ってもレスポンシブにはメリットがある
- 2.1 とにかくSEO的ではメリットあり！
- 2.2 予算や時間的にメリットあり！
3 レスポンシブだってLP(ランディングページ)デザインの最適化は可能！5つの突破法
4 まとめ

LPはレスポンシブしない方が良い？

レスポンシブデザインは端末ごとに異なるモニターサイズに対応することができる一方、それはデザインも変わるという事が前提になります。

PCであれば横並びで表現したいコンテンツを、スマホやタブレットなどでは見やすさを考慮して縦並びで表現するなど、小さい画面ならではの工夫を色々と施さなければ各デバイスに対して最適なレスポンシブ化は出来ません。そこには必ず「デザインの制限」が発生します。

この「小さい画面に収めるためのデザインの制限」の部分が、自由なデザインで人の心を惹きつけることが求められるLPには、大きな足枷となるのです。

LPはとにかく「飽きさせない、次のメリット紹介が気になるようなデザイン」にすることが大切です。
そんなときPCであれば紙の広告のように、右へ左へと視線が移動するようなダイナミックなLPデザインにすることができますが、スマホでこの作戦は無理です。
どうしてもスマホでは下へ下へと読み進める形をとることになるため、イメージとしては「漫画の次のページが気になる」という感覚のデザインにすることが大切です。
こういった面から、本来LPは、PCにはPC用のデザインを、スマホやタブレットにはスマートデバイス向けのデザインを用意し、最適なデザインで訴求を行うことが望ましいのです。

言ってもレスポンシブにはメリットがある

とはいえ、LPをレスポンシブ対応させることに何のメリットもないのか？といえば、そうではありません。

とにかくSEO的ではメリットあり！
予算や時間的にメリットあり！

とにかくSEO的ではメリットあり！

LPをレスポンシブ対応する場合、同一のURLでの運用になるため、SEOでは有利です。
また、画像だけでなくテキストでの表現を多用していくことから、やはりSEOでのメリットを見込めます。

予算や時間的にメリットあり！

それに、とても重要な予算や時間の問題。
ここがネックになり、どうしてもデバイス毎に作る事が出来ない場合だってあります。

スマホ用デザインだけ作ってPC閲覧時は拡大するわけにはいかないし、PC用デザインだけを作って単純に縮小するわけにももちろんいきません。

そこで限られている条件の中でどうランディングページをレスポンシブ化するのか、その突破方を5つ紹介します。

レスポンシブだってLP(ランディングページ)デザインの最適化は可能！5つの突破法

前置きが長くなりましたが、ここからが本題です！

今回は過去に紹介したレスポンシブ関係の記事も紹介しながら、LPのレスポンシブ化の5つの突破法を解説してきます。

そもそもレスポンシブのやり方がわからない方はこちらを参考にしてください！

▼関連記事

CSSだけ！レスポンシブなサイトの作り方と鬼ほど使うプロパティ

スマートフォンが普及した今、パソコンでしか正常に表示されないサイトというのはスマートフォンユーザーからしたら非常に見にくくストレスフルなもの。…

JQueryでのviewpointを切り替える
CSSでの画像切り替え
訴求力が求められユーザーが最も見る部分はスマホ用の画像を作成する
テキストをアイコン化
コーディングでできる事はする！

JQueryでのviewpointを切り替える

色々LPを作成してきた中で、これが1番デザインを優先させ、さらに早く実装できる方法かなと思っています。

それはデバイス別にviewpointを切り替える事。どういう事かというと、

PC閲覧時はフレキシブルに、タブレット閲覧時はPC同様の見え方をさせる為、viewpointを固定。そしてスマホ閲覧時はまたフレキシブルに。

という設定をjsでしてしまうのです。
具体的なコードは下記です。

var getDevice = (function(){
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
return 'sp';
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
return 'tab';
}else{
return 'other';
}
})();
if( getDevice == 'sp' ){
document.write('<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">');
}else if( getDevice == 'tab' ){
document.write('<meta name="viewport" content="width=1260">');
}else if( getDevice == 'other' ){
document.write('<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">');
}

上記のコードをhead内に記述します。これで、

PC閲覧時はフレキシブルに、タブレット閲覧時はPC同様の見え方をさせる為、viewpointを固定。そしてスマホ閲覧時はまたフレキシブルに。

が可能になります。

※実機でご確認ください。

私はデザインや案件によっては、スマホ閲覧時のviewpointも固定します。

document.write('<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">');

の部分を…

document.write('<meta name="viewport" content="width=375">');

と書き換えます。

こうすると、「375px幅だと問題ないのに、320pxだと崩れる…！！」といったような “全てのデバイスに対して崩れないcss”を書かなくても、375px幅でデザイン通りにコーディングすれば問題ないというわけです。

そしてこの突破法の最大のポイントは、タブレットのviewpointをPC幅に合わせる事です。

けっこうタブレット実機特有のバグが多い事への回避策というのが1番の理由となります。

▼関連記事

超初心者向け！jQueryをRPG風に解説！

まず最初に謝りたい事があります。この記事の目的は「やべぇ！急にjQuery使わないといけなくなった！でも今まで使った事ないし、かといって今か…

WordPressの場合

ちなみにWordpressの場合は条件分岐でviewportを設定しましょう。

▼functions.php

function is_iphone()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'iPhone')!== false||
strpos($ua, 'iPod')!== false
)
{
return true;
}
else
{
return false;
}
}

function is_android()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'Android')!== false&&strpos($ua, 'Mobile')!== false
)
{
return true;
}
else
{
return false;
}
}

function is_firefox_os()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'Android')=== false&&strpos($ua, 'Firefox')!== false&&strpos($ua, 'Mobile')!== false
)
{
return true;
}
else
{
return false;
}
}

function is_windows_phone()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'Windows')!== false&&strpos($ua, 'Phone')!== false
)
{
return true;
}
else
{
return false;
}
}

function is_blackberry()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'BlackBerry')!== false
)
{
return true;
}
else
{
return false;
}
}

function is_ktai()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
if(
strpos($ua, 'DoCoMo')!== false||
strpos($ua, 'KDDI')!== false||
strpos($ua, 'UP.Browser')!== false||
strpos($ua, 'MOT-')!== false||
strpos($ua, 'J-PHONE')!== false||
strpos($ua, 'WILLCOM')!== false||
strpos($ua, 'Vodafone')!== false||
strpos($ua, 'SoftBank')!== false
)
{
return true;
}
else
{
return false;
}
}

function is_mymobile()
{
if(
is_ktai()||
is_iphone()||
is_android()||
is_firefox_os()||
is_windows_phone()||
is_blackberry()
)
{
return true;
}
else
{
return false;
}
}

▼header.php

<?php if (is_mymobile()): ?>
<!-- ↓スマートフォン用のviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<!-- ↑スマートフォン用のviewport -->
<?php else: ?>
<!-- ↓スマートフォン以外のviewport -->
<meta name="viewport" content="width=1260">
<!-- ↑スマートフォン以外のviewport -->
<?php endif; ?>

CSSでの画像切り替え

こちらは定番ですが、単純にPC用画像とSP用画像を作成し、cssのdisplay: block;とdisplay: none;で表示を調整する方法です。
もちろん画像だけでなくテキストやコンテンツを丸っと切り替える事も可能です。

<div class="pc">ここにはPC時での表示内容が入ります。</div>
<div class="sp">ここにはスマホ時(プレいくポイントでの指定)での表示内容が入ります。</div>

/*375px以上の場合、classにspが付いているものは非表示*/
.sp {display: none;}
@media screen and (max-width: 375px){
/*375px以下の場合、classにspが付いているものを表示*/
.sp {display: block;}
/*375px以下の場合、classにpcが付いているものを非表示*/
.pc {display: none;}
}

訴求力が求められユーザーが最も見る部分はスマホ用の画像を作成する

主要な部分とはメインビジュアルとCTAもしくはオファーエリアです。
ここだけでも各デバイスに最適な画像を作成するだけでぐっとイメージが変わります。

テキストをアイコン化

PCではテキストで表示出来ても、スマホで同じ文字列をそのまま使おうとすると、画面上には入らない事もしばしば。
そんな時は、いっそテキストを排除してアイコンのみで表現しましょう！

「そんなことをしては、『ボタンデザインではタップしたら何が起こるか分かりやすいテキストを書いておくことが重要』という原則に反してしまうじゃないか！」と思うかもしれません。

でも、スマホ世代はアイコンにも慣れているので大丈夫。
よほどマイナーなアイコンを使わない限り、「このボタンをタップしたら何が起こるか」は理解してもらえます。

スマホ向けのデザインでは奇抜なアイコンを避け、定番のアイコンを使って情報をコンパクトに表現しましょう。

たとえば「お問い合わせ」のボタンであれば、メールを連想させる封筒や、電話オペレーターのアイコンを。
「購入する」のボタンなら、買い物かごやショッピングカートのアイコンを使うことで、テキストなしでもユーザーに「何をするためのものか」を伝えることができますよ。

アイコンを選ぶ時は、
・利用者数の多いサイトで使われているアイコンと似たテイストである
・パッと見て、何を表現しているかがわかる
・日本国外の人も使うサービスなら、外国人にも分かりやすいピクトグラムを選ぶ
といった点を重視すると良いでしょう。

利用者数の多いサイト、つまりGoogleやAmazon、Twitterなどで使われているアイコンと似たものを選べば、そのサイトを利用している人はほぼ全員がアイコンの意味を理解できます。

メニューをスマホで呼び出すには「横三本線のアイコン」が一般的ですが、「横三本線＝メニュー」という理解が定着しているのは、多くのサイトやアプリで使われているためです。

ショッピングカートのアイコンはAmazonや楽天市場などの大手ECサイトで使われているため馴染みが深いのはもちろんですが、実際の店舗で買い物するときに使う「カート」を絵で表現することで、アイコンをパッと見て「買い物」と直結させることができているのですよね。

このように日常生活で馴染み深いものをアイコンにしたものを選ぶと、何ができるかが伝わりやすくなります。

ただここでひとつ注意したいのが、外国人にも伝わる絵なのか、という点です。
たとえば日本人なら多くの人が見てわかる「温泉」のマーク、実は外国人には一体何なのかが伝わらないのです。

日本国外の人がターゲット層にいるのであれば、異なる文化の人にも受け入れられるアイコンであるかはチェックが必要です。

また、アイコンはすべて自前のものを用意しなくても大丈夫です。
商用利用可能で質の高い無料アイコンを提供しているサイトがありますから、LPに取り入れたいアイコンが配信されていないかチェックしてみてくださいね。

以下のサイトで提供されているものは、世界中のサイトで使われているため、各国ユーザーの理解度も高いですよ。

▼Google提供のマテリアルアイコン: https://material.io/resources/icons/?style=baseline
▼定番の WEBfontアイコン fontawesome: https://fontawesome.com/
シンプルなアイコンで種類豊富 Icoon Mono: https://icooon-mono.com/

コーディングでできる事はする！

レスポンシブ化するなら、やはりコーディングできるものはHTMLとCSSで表現していくべきです。
画像の多用を避けることで、ユーザーの通信量の節約にもなりますよ。

レイアウトはflexboxが便利

レイアウト用のCSS。以前は「float」が主流でしたが、レスポンシブ対応するのが普通になった今は「flexbox」が活躍しています。

flexboxは様々なプロパティを駆使することで、PCでもスマホでも見やすい、美しいレイアウトを実現することが可能です。

たとえば「商品に関する3つの魅力」をお伝えしたいとき。
PCをベースに考えるのなら、
3項目を横並びにさせる
画像とテキストを組み合わせたひとつの要素を、3つ縦に並べる。
かつ、中央にくる2つめの要素だけは、画像とテキストの位置を他の要素と逆側に並べて、右へ左へと視線が移動させるようなデザインにする。
というようなレイアウトが思いつくかと思います。

でもどちらの方法も、横幅に余裕のあるPCだからこそ適した表現方法です。
スマホでは、どちらのレイアウトを採用しても窮屈な印象を与えてしまうでしょう。

1は、要素がぎゅうぎゅうに押し込まれたようになります。

2ではそもそも画像とテキストを重ね合わせるように配置しないと表現できないかもしれません。

本当は横並びにしたい要素でも、スマホのことを考えると、どうしても縦並びにせざるを得ません。
それを簡単に実現できるのがflexboxです。

スマホ用のメディアクエリに「flex-direction: column;」を追加するだけで、PCでは横並びになる要素を、スマホでは縦並びにすることが可能です。
先ほどの1のレイアウトを、たったこれだけで実現することができます。

また「flex-direction: row-reverse;」を使えば、flexbox内の要素の並び順を反転することができます。
先ほどの2のレイアウトをつくるのにピッタリなプロパティですね。

LPをレスポンシブ対応するにあたり、このflexboxは大活躍するはずです。
flexboxの使い方については、以前のコラムも参考になさってくださいね。

▼関連記事