これで分かる！新SHiFTで作る基本のスライドショー

2019年秋にリリースされた新しいBiNDup。様々な機能アップでよりサイトが作りやすくなりましたが、その中でも大きなアップデートを果たしたのが「SHiFT」です。まったく新しくなったSHiFTを使ってスライドショーを作る手順を追いながら、SHiFTの基本的な使い方を見ていきましょう。

スライドショーのテンプレートがあるから簡単

　スライドショーを作るにあたって、用意するのはスライドショーに使用する画像だけ。あとは、SHiFTでテンプレートを選んで必要な設定をすれば、インパクトあるメインビジュアルの出来上がり。でも、Webサイトの印象を左右するメインビジュアルは、簡単に作れるからこそおざなりにしたくない部分ですよね。
そのためには、始めにスライドショーの目的をはっきりさせることが重要です。次に、その目的に沿った画像やテンプレートを選ぶこと。そこを意識して作業すれば、ブレないスライドショーになるはずです。

新しくなったテンプレート

　およそ5年ぶりにフルリニューアルしたSHiFTは、テンプレートの内容も一新し、「今」の空気を読んだスライドショーが作れるように設計されています。目を引くメインビジュアルとしてのスライドショーからクリックを促すスライドショーへと進化したテンプレートは、見せたいページに誘導するナビゲーション装置として大いに活用しましょう。

▼SHiFTのテンプレートを詳しく見たい方はこちら
https://bindup.jp/function/shift.html

SHiFTでスライドショーを作る、基本の手順

ブロックにSHiFTを適用する

スライドショーを組み込みたいブロックをブロックテンプレートで開き、パーツ一覧から［SHiFT］をクリックしてブロックに追加します。

テンプレートを選択する

SHiFTが起動し、初めにテンプレート選択画面が表示されます。サムネールの上にマウスポインタを乗せると、スライドの動きが確認できます。作りたいスライドショーのイメージに近いものを選択して、［次へ］をクリックします。

スライドに使う画像を選ぶ

　SHiFTに画像を読み込みます。あらかじめ使用する画像をフォルダなどにまとめておくと操作がスムーズに進められます。テンプレートの種類にもよりますが、通常のビルボードのように横長のスライドショーにする場合は、横位置で撮影した写真やあらかじめサイズを調整して作成したイラストなどを用意するといいでしょう。

画像を追加する

SHiFTの編集画面は、左から順に、画像の追加、スライドの基本設定、詳細設定のカラムで構成されています。まずは、左のカラムで［画像を追加］または［画像を追加してください］をクリックしてみましょう。

使用する画像を選択する

画像をブラウズするウインドウが表示されたら、使用する画像をクリックして選択します。このとき、複数の画像を選択することも可能です。最後に［選択］をクリックします。

画像を並べ替える

読み込んだ画像は、左カラムに表示されます。カラム内の画像には番号が振られており、この番号の順番にスライドが再生されます。
スライドの表示順を変更するには、サムネールをドラッグすればOK。また、サムネールにマウスポインタを乗せると表示されるアイコンを使って、画像の表示/非表示の切り替えや削除が実行できます。

新機能！スライドにテキストとリンクを追加する

　新しいSHiFTの目玉の１つが、これから紹介するテキストの追加です。これまでのSHiFTでもコメントの追加はできましたが、画像の下の方に小さく表示するキャプションタイプのテキストでした。今回のリニューアルでは、画像の上にタイトルとコメントを大きく表示できるようになったことで、商品ページやキャンペーンページなど見せたいページに誘導するスライドショー作りに一役買っています。
　もちろん、これまでと同じようにキャプション形式のテキスト表示も健在です。また、テンプレートによってはタイトルのみに対応したものもあります。目的に適したテンプレートを見つけましょう。

タイトルとキャプションを入力する

左カラムで文字を乗せたい画像のサムネールを選択します。中央のカラムで選択した画像が表示されていることを確認して、［タイトル］と［コメント］を入力します。どちらか一方だけ入力しても構いません。

リンクを設定する

中央のカラムで［リンクを設定］をクリックして設定ウインドウを表示します。ここでは、サイト内のページにリンクしたいので、［ページを開く］を選択してリンク先のページを設定します。ほかに、外部URLやメールアドレス、電話番号へのリンクも設定できます。

リンク先のページを開く場所をウインドウまたはポップアップから選び、最後に［OK］をクリックして、リンクの設定を完了します。

プレビューで確認して、最後の仕上げをする

画面上部の［プレビュー］をクリックして、スライドの動作や入力したテキストを確認しましょう。画面左上のアイコンをクリックすると、PCとスマートフォンそれぞれの表示を確認できます。

スライドの詳細を設定する

　最後の仕上げは、右側のカラムでスライドの再生時間やトランジションのアニメーション効果のスピード、スライドのサイズなどを調整します。切り替えのタイミングは、プレビューを見ながらちょうどいい間隔に調整するといいでしょう。
　また、スライド内に表示するページネーションの設定も、ここで行います。スライドショーをナビゲーションとして使用する場合は、見せ方にこだわりたい部分ですね。

再生スピードを調整する

アニメーションのスピードと、再生時間を設定します。このとき、プレビュー表示にしておくと、リアルタイムで再生スピードの変化が見られて便利です。

表示サイズを設定する

表示サイズを設定します。スマートフォンでスライドショーを大きく見せたい場合は、サイズを指定した上で、［高さを固定］をオンにすると、高さを優先して表示できます。

ナビゲーション周りを設定する

スライドショーに表示する［戻る］［進む］ボタンや、スライド送りの表示／非表示を設定できるほか、カラーをホワイトとブラックから指定できます。また、スライド送りは、バーとドット２つのスタイルが用意されています。

全ての設定が済んだら［完了］をクリックし、ブロックエディタに戻って［適用］をクリックします。

まとめ

　以上で、新しいSHiFTによるスライドショーが完成しました。思ったより簡単にできたのではないでしょうか。シンプルなスライドショーほど、写真あるいはイラストなどアートワークの内容によってWebサイトの印象がガラリと変わります。逆に、画像選びさえ間違えなければ、素敵なスライドショーになるでしょう。

　今回は、「SHiFTで作る基本のスライドショー」というテーマでスライドショーの作り方を紹介しましたが、次回は応用編として、スライドショーに乗せる文字のカスタマイズなど一歩踏み込んだテクニックに挑戦したいと思います。

▼スライドショーをカスタマイズする方法はこちら

スライドショーに載せる文字のデザインを変える方法

スライドショーの機能を詳しく見る
BiNDの制作事例を見る