【WordPress】「Elementor」を使ってLPサイトをスマホ対応のレスポンシブにする方法【実践編②】

【WordPress】「Elementor」を使ってLPサイトをスマホ対応のレスポンシブにする方法【実践編②】

LPとは、広告費をかけたキャンペーン、新しい商品・サービスの訴求、アフィリエイトのペラサイトなど様々な場面で使える形式のウェブサイトページのことをいいます。

Webで集客や商品の販売をするには「非常に効果的」な方法なので、出来るだけ簡単に作る方法は覚えて損のないスキルです。

私はコードの知識はほとんどありませんが、下記のようなページを作ることが出来ました。

完成図サンプル

 

今回はこのようなLPをスマートフォンでもみやすいレスポンシブにする方法をご紹介します。

 

スマートフォンでも見やすく

Elementorでは、PCとスマートフォンの両方で見やすくするレスポンシブの設定が可能です。

PC画面

 

スマートフォン

文字の大きさや、背景画像の表示をPCとスマートフォンで切り替えることができます。

実際の手順をご紹介しますね。

 

まずはPC表示を優先でデザインする

ElementorはPC画面のまま作っても、ある程度まで自動でレスポンシブデザインに切り替えてくれます。そこで優先的にPC画面のページを作り上げ、最後のデザイン調整時にスマホデザインを整えることをオススメします。

 

スマホ表示を選択して編集する

PC画面のデザインが完了したら、次にスマホのデザインを整えます。

スマホ画面だけ、文字のサイズや画像の配置、モーションを変更したいときには、編集画面で[スマホマーク]を選択してください。

このマークを切り替えて編集することで、PCとスマートフォンでのレスポンシブデザインが可能になります。

 

chromeを使えばPCブラウザでもレスポンシブが確認できる

Chromeを使えばPC単体でスマホ表示をすることが可能です。

自分のサイトはもちろん、他のサイトのデザインを簡単に見比べることが出来ます。
やり方をご紹介しますね。

 

chromeを表示させてF12を押す

Chromeを起動させた状態で、キーボードの「F12」を押してください。

するとソースコードが表示されます。

この画面上ではサイトを構成するコードを見ることができるのですが、スマホ表示に切り替えることも可能です。

 

このスマホアイコンをクリックするとスマホ画面のデザインに切り替わります。

スマホをいちいち開かなくても確認が出来るうえ、iPhoneの機種や端末のバージョンを選ぶことも可能です。

便利なので是非覚えてみてくださいね。

 

スマートフォンの利用率

引用:総務省(http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h30/html/nd142110.html

総務省の統計では、10~20代のインターネット接続端末は90%以上がスマートフォンです。

PC表示でデザインやブログの執筆をしていると、スマホ表示のデザインがおざなりになってしまうことがありますが、いかにPC・スマホ間のレスポンシブが大切かわかりますね。

LPサイトもユーザー目線になり、両方のデザインを作り込むことが重要です。

是非、レスポンシブデザインのLP作成にトライしてみてくださいね。