【代表・橋田が解説!】デバイス別にブロック背景画像を設定できるようになりました

ペライチでページを作ったとき、PCで編集してプレビュー・公開画面を見たときと、スマホで開いたときの印象が違うこと、よくありますよね。PCではうまく表示されるのに、スマホでは伝えたい部分を狙いどおり強調できず、お困りの方も多かったのではないでしょうか。

 

そんな皆さまの声を受け、今回もペライチは新しい機能を追加しました。PCで見ても、スマホで見ても、同じように画像を表示させることができれば、ページを見た方全員にメッセージや印象を正しく伝えることができるかもしれません。この機能は、ペライチユーザーの方全員に使っていただけるものになります。

今回も、代表の橋田がこの機能について解説しています。

デバイス別のブロック背景画像設定機能

バイス別のブロック背景画像設定機能

 

■デバイス別のブロック背景画像設定機能とは何ですか?

バイス別のブロック背景画像設定機能というのは、その名の通り、ブロックの背景画像を、デバイスサイズに応じて個別に設定できる機能です。 

 

ペライチの編集画面は通常PCから編集されるため、横長の画面に合わせたページの見え方の中で、背景画像が設定されます。その画面をスマホで開くと、横幅が変わってしまうので、意図して表示したい領域から少しずれた画像が表示されてしまいます。

 

そこでこの機能を使って、PC ・タブレットスマートフォンそれぞれ、ページを開いたときに表示される背景画像を個別に設定すれば、画像で強調したい部分を正しく伝えられ、また画像が見切れてしまうなどのトラブルを防止できるようになります。

 

今までは、デバイス別に背景画像を変える機能がなかったので、ユーザーさんから「デバイスごとに背景画像を変えられないか」という問い合わせをいただいた時に「より閲覧数の多いデバイスに合わせて、作成して下さい」というアドバイスしかできませんでした。

 

ただ、ページを見る人や活用シーンによって見るデバイスは変わるのは当然のこと。ならばPC・タブレット向けとスマホ向け、それぞれに背景画像を設定できるようにした方がサービスとして良いということで、この機能を追加することになりました。

 

■デバイス別のブロック背景画像変更機能は、どんな方におすすめですか?

これは、ぜひペライチユーザーの皆さん全員に使っていただきたい機能です。というのも、背景画像の表示領域については、業種や利用シーンを問わず、ページを見る人がPC・スマホどちらか極端に偏ってない限り全員が配慮するべきことだと思うんです。

 

画像の見え方が異なると、それだけで伝わるメッセージや伝わる印象も変わってきてしまいます。 

例えば、僕はいつもペライチのオフィスの場所を案内する時、「株式会社ペライチへのアクセス」というページをご紹介しています(詳細はこちらをご参照ください:https://peraichi.com/landing_pages/view/peraichi-access2)。

ページのURLを受け取るときには、PCでやり取りをしているとPCでページを開きますよね。でも当日実際に場所を確かめるときには、スマホを使うと思います。

このページについてはデバイスごとに画像の表示領域が変わっても、特別深刻な問題が起きるわけではありませんが、伝わる印象は違いますよね。

 

背景画像を設定しているすべてのペライチユーザーに、ぜひ一手間かけて、PC・タブレットスマホそれぞれに合わせた背景画像を設定していただきたい。その方が、意図していたことをページを見る人へきちんと伝えることができると思います。

 

使い方としては、PC用に挿入している画像を切り取って、スマホ用に表示領域を調整する設定するのが基本だと思います。

特に、ページのトップ画像・ファーストビューに表示される画像については、表示領域が変わると印象も大きく変わってきてしまうので、ぜひ注意して設定していただたきたいなと思っています。



■ペライチの今後の展望についてお聞かせください!

この機能もそうですが、最近ペライチでは、ユーザーの皆さんからいただく声にできるだけ応えたいという思いで、”ないとだめというわけではないけど、あれば助かる”機能(ペライチの中ではよく「痒いところに手がとどく」機能と呼んでいます)を作っています。

その中でも今回の機能は、ペライチを使っている方なら、スタートプランからどなたでも使っていただけるのが大きな特徴です。

ぜひ新しい機能をうまく活用して、ページ表現の幅を広げていただけたら嬉しいです。

 

 

〈代表・橋田による新機能解説シリーズはこちら〉

blog.peraichi.com

  

blog.peraichi.com

  

blog.peraichi.com

  

blog.peraichi.com

  

blog.peraichi.com