【レスポンシブ】画面サイズで切り替え！ペライチのファーストビュー画像設定方法

ユーザーはファーストビューの段階で、このまま読み進めるかの判断を行っております。ファーストビューはサイトを制作する上で、それほど重要な箇所となるのです。

重要なファーストビューですが、一般的には「バナー(画像制作)」を設置するファーストビュー画像が主流となっております。

その為「パソコンで閲覧する」場合と「スマホで閲覧」する場合に画像のサイズが同じだと、文字の大きさや素材の配置などが原因で、ユーザーにとって見ずらいファーストビューになってしまいます。

上記のことから、ファーストビューに画像を設置する際は「画面サイズに合わせて切り替え」が必要となります。このように画面サイズで切り替えることを「レスポンシブ」といいます。

この記事では、「ファーストビュー画像の設定方法」と「レスポンシブの設定方法」を解説しておりますので、是非最後までご覧ください。

ファーストビュー画像の設定方法

実際にファーストビュー画像の設定方法に入っていきますが、今回は当社で制作を行った「片付け専門 Handyman」様の実例と共に解説していきます。

以下が、設置したファーストビュー画像になります。

こちらは「パソコンサイズ」用で設置したファーストビュー画像になりますが、パソコンサイズで閲覧することを想定してますので、文字のサイズや写真などが見やすいように大きく作成しております。

先ほどもご説明をしましたが、ファーストビュー画像は「画面サイズに合わせて切り替え」が必要となる為、「パソコン用サイズ」と「スマホ用サイズ」の2枚を用意する必要があります。

ファーストビュー画像を作成する際は、「Adobe Photoshop」や「Canva」などのデザインツールを使って、ユーザーの興味を引く画像を作りましょう。

ファーストビューの重要性や考え方、ファーストビューからCV(コンバージョン)までに必要な「構成」の流れなど以下の記事で解説しております。

売れるペライチLPの「構成」を解説！CVアップが見込めるLPとは？

ペライチでLP(ランディングページ)を作ってみたけど、CV(コンバージョン)を達成できてない方は決して少なくありません。 その原因は、商品やサービスをLPでアピールできて…

ペライチ攻略ガイド

画像ブロックの選択

「ペライチ」でファーストビューを設置する際は、ブロック項目の「メイン」から選定して作成しましょう。ここでは、ファーストビュー専用のブロックがいくつも用意されてます。

ですが、今回は「Adobe Photoshop」や「Canva」などのデザインツールを使って作成したファーストビュー画像を設置しますので、この中から「画像(フルサイズ)」を選択してください。

その他のブロックを使わない理由としましては、ファーストビューの「クオリティーが下がる」ことが上げれます。

背景画像を設置して、その上に文字を打ち込めるブロックを使えば簡単にファーストビューの作成ができますが、フォントの制限や文字の配置などが限られておりますので、しっかりとしたファーストビューに仕上げたい場合は向いておりません。

先ほどもご説明しましたが、ファーストビューはユーザーがこのまま読み進めるかの判断を行う重要な箇所になりますので、決して手を抜かないでください。ここでの頑張りがCV(コンバージョン)にも繋がってきます。

レスポンシブの設定方法

では次に、画面サイズに合わせてファーストビュー画像を切り替える設定方法を解説していきます。

先ほども説明をしましたが、レスポンシブに対応する為には「パソコン用サイズ」と「スマホ用サイズ」の2枚を用意する必要があります。

自社ではそれぞれの画像を作成する際、以下のサイズで設定しております。

• パソコンサイズ　横：2880px　縦：1500px
• スマホサイズ　　横：1500px　縦：2500px

上記のサイズ設定は大き目になりますが、各サイズで画像を閲覧する際に「粗さ」がでないように余分に設定をしております。

また、各サイズでフォントの大きさや素材の配置を調整し、それぞれのサイズで閲覧した際に「見やすい画像」を意識して作成してください。

ファーストビュー画像の切り替え方法

作成した2枚の画像の切り替え方法ですが、「ブロックの表示切り替え」の設定を使って画像を切り替えていきます。

先ほど設置した「画像(フルサイズ)」のブロックをもう一つ追加して、2個ブロックを設置していきます。上がパソコンサイズ用、下がスマホサイズ用としてください。

上記が先ほど設置した「画像(フルサイズ)」のブロックになります。こちらの下にもう一つ、スマホ用で「画像(フルサイズ)」のブロックを追加してください。

追加したスマホ用ブロックには、スマホサイズで制作した画像を設置してください。

これで2枚のファーストビュー画像の設置が完了しましたが、こちらを画面サイズに合わせて切り替えていきます。

各ブロックの左上部にある「赤枠」のボタンをクリックしてください。

「赤枠」のボタンをクリックすると「ブロックの表示切り替え」の設定画面が表示されますので、以下の設定を行ってください。

• パソコン用ブロック　「PC・タブレット 表示中」「スマホ 非表示中」
• スマホ用ブロック　　「PC・タブレット 非表示中」「スマホ 表示中」

上記の設定を行うと、パソコン用ブロックがパソコンの画面サイズで表示されて、スマホの画面サイズでは非表示になります。

【パソコン画面での表示】

反対にスマホ用ブロックでは、スマホの画面サイズで表示されて、パソコンの画面サイズでは非表示になります。

【スマホ画面での表示】

以上でレスポンシブの設定が完了となります。

まとめ

このように各画面サイズでファーストビュー画像を切り替えると、画面サイズごとに見やすくなり「追求力」のあるファーストビューが作成できます。

最近はパソコンからのアクセスが減り、スマホからのアクセスばかりなので、パソコンサイズでの表示(デザイン)は捨てる考えを持った制作会社もあります。しかし、販売するサービス、商品によって、ターゲットとなるユーザーが閲覧する端末は異なってきます。

パソコンを使ってサービス提供を行っている内容のモノだと、閲覧するユーザーもパソコンからですし、一概に「パソコンサイズのデザインは必要ない！」とは言い切れません。ユーザー目線で考えると、パソコンとスマホどちらも対応しているサイトに勝るモノはありません。

皆さんもこの記事を参考に「ファーストビュー」の見直しをしてみてください。また、「ペライチ」でファーストビューだけではなく、しっかりとしたサイトを作るには「HTML/CSS/JavaScript」でデザインができて、多数の機能が使える「レギュラープラン」以上をおすすめしております。

是非あなたもペライチでサイト制作にチャレンジしてみてください。

「ペライチ」でサイトを作るなら、機能が豊富な「レギュラープラン」以上がおすすめです！