ビルボード映えするスライドショーに！新SHiFTテンプレートをご紹介

BiNDの人気機能のひとつにスライドショー機能『SHiFT for WebLiFE*』が挙げられるかと思います。
BiND4での初登場以来コツコツとテンプレートを増やして来ましたが、横幅100%レイアウトに対応したテンプレートが少ないのが悩みの種でした。

厳密に云うと、どのテンプレートも横幅100%の指定自体は出来るのですが、高さも割合で大きくなってしまうので、意図とはちょっと違ってしまいます。
そんな訳で高さを固定しての横幅100%で使えるテンプレートが欲しかったのですね。
現状、それに対して使えるテンプレートは『Walls』のみとなっており、背景スライドショーを用いるにしてもページ全体のみを対象としている為、ビルボードのダイナミックなスライドショー表現が乏しかった訳です。

ビルボードは幅を広く使ってインパクト重視で

BiND10ではその問題に着目して、ビルボードに使い易いテンプレートを4種増やす事と相成りました。

ジャンボトロン

シンプルな横スクロールのスライドショーです。
大概のものはこれで充分ですね。

スリット

こちらはスライド時に画像が上下や左右に分断されるもの。
動きにインパクトがあるのでこちらもオススメ。

サークルナビ

こちらはちょっと変わり種。
左右のナビゲーションが円形になっており、クリックするとそれが広がる様にスライドします。

カルーセル

最後はずっとスクロールし続けるカルーセル。
Instagramの表示スタイルにも同じ動きが搭載されました。
こちらはビルボードに限らず様々なコンテンツに用いる事が出来ます。
サンプルは左に流れていますが、右に流す事も可能です。

エリアを指定した背景スライドショーにも対応

サンプルを見る

これまでページ全体にしか設定出来なかった背景スライドショーが、BiND10からエリアに設定する事が可能になりました。
これは良いですね。
BiND9から「このブロックを直前のブロックに重ねる」機能によりSHiFTブロックの上に別のブロック要素を重ねる事は出きたのですが、SHiFT側のブロックの高さに依存する為、重ねたブロックの情報量や表示サイズによっては、スクロールが出てしまったりはみ出てしまったりと扱いが難しいのが難点でした。

その点、背景スライドショーでは、動きはKen Burnsに限られますが、ブロックの要素に従ってエリアが広がるので、ビルボードの背景をスライドショーにしてその上にテキストを配置したり、要素をレイアウトしたりがとても簡単になりました。
エリア指定によって複数ブロックでのレイアウトも出来るので表現の幅が広がりますね。

まとめ

如何でしたか？
今回は《ダイナミックな表現が出来るSHiFT》をコンセプトに搭載してみました。
簡単にインパクトを出せるのがSHiFTの良い処なので、BiND10でどんどん使ってみてくださいね。
勿論写真のクオリティも重要なので、相乗効果を狙って頑張りましょう。