ポップアップ通知で大事な告知を逃さない!BiND最新テンプレート紹介①

こんにちは!
BiNDupで、テンプレートのデザインディレクターをしている、デザイナーのオモトです。
BiNDupには、スマホ表示に最適化できるレスポンシブWeb対応の本格的なテンプレートが数多く収録されていますが、今回追加される新作テンプレートは、全9デザイン、27バリエーション
こだわったのはトレンドを押さえつつ、企業の業態問わずに使えるシンプルでありながら、普遍的なデザインです。前回大好評だった「重ねる・ずらす」を意識したデザインを引き続き採用しています。

今日は数ある新機能の中でもぜひ利用をおススメしたい、新ウィジェット機能を搭載したテンプレートをちょこっとお見せします!
ウィジェット機能を使えば、最近のWebサイトでよく目にする、スクロールするとフっと浮いて出てくるポップアップウィンドウが作れるようになるのです。

必ず目に留まる表示方法なので、見逃してほしくない、キャンペーンの通知やお申込みへの誘導などに最適!効果的に使えばサイトの成果がグッと上がると思いますよ!
ぜひ実際のテンプレートで確認してみてくださいね。

新ウィジェット機能!ポップアップで目に留まる表示が可能に

デザイナーとして、とくにうれしい機能アップがこちらです。

  • 新機能のウィジェット機能

 

BiNDのウィジェット機能の図

これにより、ウィンドウの四隅と左右の中央を入れて計6箇所に、スクロールしても追従するボタンや、コンテンツの配置が実現しました。
これまでもヘッダーなどは固定できましたが、ウレシイのはバナーやフォームなど様々なコンテンツを固定させられること。

このウィジェットは常に表示するのはもちろん、スクロール後に表示させることもできるので、どのタイミングで出すかコントロールすることができます。

ポップアップ表示(ウィジェット)のメリット・デメリット

ウィジェットは、主に以下2つの使い道があります。

  1. ナビゲーションを良くするため
  2. コンバージョンを上げるため

 

1では、閲覧者をサイト内で迷わせない目的で使われることが多いです。2では、必ず目に留まる表示方法なので、購入や申込など閲覧者に起こしてほしい行動を促すことに力を発揮します。

ページの上にフロートさせて表示する分、本来の表示領域が狭くなるというデメリットもありますが、それ以上に、ページ遷移やコンバージョンに繋げやすいという意味でとても優れています。
(このデメリットについても、「スクロール後に最後に表示」する設定にすれば、ある程度解消できそうですね。)

開発中のテンプレートをチョイ見せ

最新のBiNDのテンプレートより、ウィジェットを搭載したサイトデザインを少しお見せします!

採用サイト「システムコンサルティング会社」

▼「OMG inc.
採用サイトのHPテンプレートBiND
初登場の「採用サイト」を想定したテンプレート。(採用サイトなので、いい意味で今っぽい、インパクトあるデザインにしてます)

メールフォームをウィジェットに入れられる

活用その1:メールフォーム

スクロールすると右下にメールフォームが出現。問い合わせるのにページを移動する手間が省けるので、少しでも興味を持った方でもすぐ応募しやすくなりますね。
表示を閉じる、×ボタンもあるのでユーザビリティも安心です。
※現在開発中の画面です。

テンプレートで確認する

 

「イベント」のランディングページ

▼「ABSTRACT RECORDS
イベントLPのテンプレートBiND
現バージョンで、大好評だったランディングページ(LP)テンプレートも登場。音楽系サークルのイベントでのCD販売を想定したテンプレートです。ぜひコミケなどのイベントで使ってほしいです!

ウィジェットにTwitterボタンを追加BiND

活用その2:SNSボタン

こちらは、SNSボタンを常に表示することで、SNSを運用していることをアピールしつつ、積極的にフォローを促すことができます。
※現在開発中の画面です。

テンプレートで確認する

サービス「マッサージ・整体院」のサイト

▼「MURATA Manipulative Institute
整体院のHPテンプレートBiND

初回限定クーポンをウィジェットに

活用その3:キャンペーンバナー

邪魔にならない程度の小さめのキャンペーンバナーをウィジェットとして常にページ下部に置いておくことで、サイトの目的(コンバージョン)である来院を後押し。集客効果を高めるのにうってつけですね。
※現在開発中の画面です。

テンプレートで確認する

サービス「りんご園」

▼「MARUTA Apple farm
農園のHPテンプレートBiND

ページに戻るボタンをウィジェットに

活用その4:トップに戻るボタン

説明不要だと思いますが、需要としてやはり多いのがトップに戻るボタンの固定でしょう。これ一つあれば、ところどころにトップに戻るボタンを設置する必要がないので便利です。
※現在開発中の画面です。

テンプレートで確認する

アイデア次第でいろいろできちゃう?!

ウィジェットにページナビゲーションを追加

活用その5:ナビゲーション

テンプレートには含まれませんが、例えば縦に並べたリンクパーツを用意すれば、中央に固定で表示するナビゲーションも作れます。
そのほかSiGNで作ったバナーやボタン、Smooth Contactで作ったフォームなどブロックエディタで編集できるものは、基本は貼付け可能
ページ内に複数設置できるので(やり過ぎ注意ですが)ぜひ工夫して使ってくださいね!

表示方法も選べて便利!使い勝手にこだわりました

BiNDのウィジェット機能はスクロール後に表示も選べる

常に固定はもちろん、スクロール後に表示が選べます
また表示を閉じる「×ボタン」の有無も選べるなど使い勝手を良くするための機能を備えました。PC/スマホの表示・非表示も選べるので、デバイスによってサイズ調整もできるので便利ですよ!

次回の新作テンプレート紹介は、BiND Pressの活用編を予定しています!お楽しみに!

※本文の内容は現時点での開発中の仕様のため、変更になる可能性があります。
最新BiNDについてもっと見る

  • POINT

  • 最新BiNDでは、ページの上にフローとさせるポップアップ表示が可能に!
  • ポップアップウィンドウは、ページの四隅&中央の左右2か所の計6か所に表示可能
  • フォームやバナーなど、様々なコンテンツを設置できる

あわせて読みたい